Joururi/yorha-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added status card

Browse Source
This commit is contained in:
Alexis
2023-09-18 17:32:00 +02:00
parent 77f0b8ab7b
commit 7801459ae8
13 changed files with 312 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/datas/YrhStatusCard.vue Normal file
View File

@@ -0,0 +1,77 @@
<script lang="ts" setup>
import { useStatusStore } from '@/stores/datas/statusStore'
import YrhCard from '../YrhCard.vue'
import { storeToRefs } from 'pinia'
const { androidData } = storeToRefs(useStatusStore())
</script>
<template>
<YrhCard>
<template #title> Status </template>
<template #content>
<div class="flex justify-between">
<span>
{{ androidData.designation }}
</span>
<span> Lv : {{ androidData.level || 0 }} </span>
</div>
<hr class="my-2 border-t-2 border-y-beige-500" />
<div class="flex justify-between">
<span> Funds (G): </span>
<span> {{ androidData.funds || 0 }} </span>
</div>
<div class="flex justify-between">
<span> EXP: </span>
<span> {{ androidData.exp || 0 }} </span>
</div>
<div class="flex justify-between">
<span> HP: </span>
<span> {{ androidData.hp || 0 }} / {{ androidData.maxHp || 0 }} </span>
</div>
<hr class="my-2 border-t-2 border-y-beige-500" />
<div class="flex justify-between">
<span> Attack (Light) : </span>
<span> {{ androidData.attackLightBonus || 0 }} </span>
</div>
<div class="flex justify-between">
<span> Attack (Heavy) : </span>
<span> {{ androidData.attackHeavyBonus || 0 }} </span>
</div>
<div class="flex justify-between">
<span> Ranged Attack : </span>
<div class="flex gap-6">
<span>{{ androidData.attackRangedBonus || 0 }}&nbsp;+</span>
<span>{{ androidData.attackRangedRaw || 0 }}</span>
</div>
</div>
<div class="flex justify-between">
<span> Defense : </span>
<span> {{ androidData.defenseRaw || 0 }} </span>
</div>
<div class="mt-2 opacity-25 flex justify-around">
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
</div>
<hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
</template>
<template #footer>
<div class="h-full grid place-items-center">
<span class="text-sm uppercase">No error</span>
</div>
</template>
</YrhCard>
</template>