8 changed files with 151 additions and 31 deletions
Before Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,51 @@
@@ -0,0 +1,51 @@
|
||||
<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> |
Loading…
Reference in new issue