<template>
    <div class="bouts">
        <div v-for="bout, idx in bouts" class="bout">
            <span class="seq">{{ t('bouts.1') + (idx + 1) }}:</span>
            <span class="crit" v-if="bout.crit">{{ t('bouts.2') }},</span>
            <span class="dmg">{{ t('bouts.3').replace('${dmg}', bout.dmg) }},</span>
            <span class="take-dmg" v-if="bout.takeDmg">{{ t('bouts.4').replace('${dmg}', bout.takeDmg) }}</span>
            <span v-if="idx == bouts.length - 1">
                {{ t('bouts.5') }}{{ bout.takeDmg ? t('bouts.7') : t('bouts.6') }}
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();

defineProps({
    bouts: {
        type: Array as () => any[],
        default: []
    }
})

onMounted(() => { });
</script>
<style lang="scss" scoped>
.bout {
    text-align: left;
    .seq {
        font-size: 1.1rem;
    }

    .crit {
        color: red;
    }

    .dmg {
        color: #2fe20f;
    }

    .take-dmg {
        color: #de8618;
    }
}
</style>