You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.2 KiB
51 lines
1.2 KiB
8 months ago
|
<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>
|