vue-idle-game/src/views/message/bouts.vue

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

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

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

defineProps({
    bouts: {
        type: Array as () => Bout[],
        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>