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>

10
src/components/datas/items/ItemSelection.vue
View File

@@ -1,6 +1,8 @@
<script lang="ts" setup>
import YrhButton from '@/components/YrhButton.vue'
import type { GameItem } from '@/models/YrhGameItem'
import YrhButton from '@/components/YrhButton.vue'
import { useItemStore } from '@/stores/datas/itemStore'
import { storeToRefs } from 'pinia'
@@ -16,8 +18,10 @@ function handleSelectedItem(item: GameItem) {
</script>
<template>
<div class="relative pl-11">
<menu class="py-2 bg-y-beige-300 max-h-full shadow-sharpest">
<div class="h-full relative pl-11">
<menu
class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar"
>
<li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
<YrhButton
no-bg