Added status card

src/assets/animations/_fade.scss

@@ -0,0 +1,14 @@
+.fade {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.2s ease;
+  }
+}

src/assets/base/body.scss

@@ -0,0 +1,8 @@
+body {
+  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400 tracking-[-0.03em];
+  word-spacing: 0.5em;
+
+  &::before {
+    @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+  }
+}

src/assets/main.css

@@ -1,34 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400;
-  letter-spacing: -0.03em;
-  word-spacing: 0.5em;
-}
-
-body::before {
-  @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
-}
-
-.fade-enter-from {
-  opacity: 0;
-}
-.fade-enter-to {
-  opacity: 1;
-}
-.fade-enter-active {
-  transition: all 0.2s ease;
-}
-.fade-leave-from {
-  opacity: 1;
-}
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-leave-active {
-  transition: all 0.2s ease;
-}

src/assets/main.scss

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @import 'base/body';
+}
+
+@layer utilities {
+  @import 'utilities/scrollbar';
+}
+
+/**
+* ANIMATIONS FOR TRANSITIONS
+*/
+@import 'animations/fade'

src/assets/utilities/_scrollbar.scss

@@ -0,0 +1,5 @@
+.y-scrollbar {
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+}

src/components/YrhCard.vue

@@ -1,26 +1,44 @@
 <script lang="ts" setup>
 import { useSlots } from 'vue'
 const slots = useSlots()
+
+const props = defineProps<{
+  breatheBottom?: boolean
+}>()
 </script>
 
 <template>
-  <article class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300 pb-4">
+  <article
+    class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300"
+    :class="{ 'pb-4': props.breatheBottom }"
+  >
     <header class="px-4 py-1 bg-y-beige-700">
       <span class="tracking-wider text-lg text-y-beige-400">
         <slot name="title" />
       </span>
     </header>
 
-    <figure class="mx-4 bg-y-beige-500 grid place-items-center">
+    <figure v-if="slots.image" class="mx-4">
-      <slot name="image" />
+      <div class="h-full bg-y-beige-500 grid place-items-center">
+        <slot name="image" />
+      </div>
     </figure>
 
-    <div class="mx-4 pt-1 border-t-2 border-y-beige-500">
+    <div class="mx-4">
       <slot name="content" />
     </div>
 
-    <footer class="mx-4">
+    <footer v-if="slots.footer" class="mx-4">
       <slot name="footer" />
     </footer>
   </article>
 </template>
+
+<style lang="scss" scoped>
+figure {
+  &::after {
+    content: '';
+    @apply block w-full h-[0.1rem] my-3 bg-y-beige-500;
+  }
+}
+</style>

src/components/datas/YrhStatusCard.vue

@@ -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>

src/components/datas/items/ItemSelection.vue

@@ -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">
+  <div class="h-full relative pl-11">
-    <menu class="py-2 bg-y-beige-300 max-h-full shadow-sharpest">
+    <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

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import './assets/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -9,9 +9,10 @@ import router from './router'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faSquare } from '@fortawesome/free-solid-svg-icons'
+import { faSquare as faSquareHollow } from '@fortawesome/free-regular-svg-icons'
 
 /* add icons to the library */
-library.add(faSquare)
+library.add(faSquare, faSquareHollow)
 
 const app = createApp(App)
 

src/models/YrhAndroidData.ts

@@ -0,0 +1,15 @@
+export interface AndroidData {
+  designation: string
+  funds?: number
+  exp?: number
+  level?: number
+  hp?: number
+  maxHp?: number
+  attackLightRaw?: number
+  attackLightBonus?: number
+  attackHeavyRaw?: number
+  attackHeavyBonus?: number
+  attackRangedRaw?: number
+  attackRangedBonus?: number
+  defenseRaw?: number
+}

src/stores/datas/itemStore.ts

@@ -1,9 +1,102 @@
 import type { GameItem } from '@/models/YrhGameItem'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 export const useItemStore = defineStore('itemStore', () => {
-  const currentItem = ref<GameItem | null>(null)
+  const availableItems: Ref<GameItem[]> = ref([
+    {
+      name: 'Melee Attack Up (S)',
+      description: 'Weapon attacks do double damage for 15 seconds.',
+      category: 'enhancement',
+      numberHeld: 4
+    },
+    {
+      name: 'Melee Attack Up (L)',
+      description: 'Weapon attacks do double damage for 30 seconds.',
+      category: 'enhancement',
+      numberHeld: 1
+    },
+    {
+      name: 'Melee Defense Up (S)',
+      description: 'Melee damage taken is reduced by 50% for 15 seconds.',
+      category: 'enhancement',
+      numberHeld: 4
+    },
+    {
+      name: 'Melee Defense Up (L)',
+      description: 'Melee damage taken is reduced by 50% for 30 seconds.',
+      category: 'enhancement',
+      numberHeld: 1
+    },
+    // {
+    //   name: 'Skill Salve (L)',
+    //   description: 'Skill gauge replenishes twice as fast for 30 seconds',
+    //   category: 'support',
+    //   numberHeld: 6
+    // },
+    {
+      name: 'Impact Bracer (S)',
+      description: 'Prevents staggering from an attack for 15 seconds',
+      category: 'enhancement',
+      numberHeld: 2
+    },
+    {
+      name: 'Impact Bracer (L)',
+      description: 'Prevents staggering from an attack for 30 seconds',
+      category: 'enhancement',
+      numberHeld: 34
+    },
+    {
+      name: "Popola's Booze",
+      description:
+        'Increases the power of weapon-based attacks by 50% for 30 seconds. Also restores 100% HP.',
+      numberHeld: 1
+    },
+    {
+      name: 'Small Recovery',
+      description: 'Restores 25% of HP.',
+      category: 'restorative',
+      numberHeld: 12
+    },
+    {
+      name: 'Medium Recovery',
+      description: 'Restores 75% of HP.',
+      category: 'restorative',
+      numberHeld: 31
+    },
+    {
+      name: 'Full Recovery',
+      description: 'Restores all of your HP.',
+      category: 'restorative',
+      numberHeld: 34
+    },
+    {
+      name: 'Visual Cure',
+      description: 'Cures visual status ailments.',
+      category: 'restorative',
+      numberHeld: 87
+    },
+    {
+      name: 'Aural Cure',
+      description: 'Cures aural status ailments.',
+      category: 'restorative',
+      numberHeld: 60
+    },
+    {
+      name: 'Cure Manipulation',
+      description: 'Cure control anomalies.',
+      category: 'restorative',
+      numberHeld: 39
+    },
+    {
+      name: 'Cure All + Heal All',
+      description: 'Restores 100% HP and cures all status ailments.',
+      category: 'restorative',
+      numberHeld: 2
+    }
+  ])
 
-  return { currentItem }
+  const currentItem = ref<GameItem | null>(availableItems.value[0])
+
+  return { currentItem, availableItems }
 })

src/stores/datas/statusStore.ts

@@ -0,0 +1,22 @@
+import type { AndroidData } from '@/models/YrhAndroidData'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useStatusStore = defineStore('statusStore', () => {
+  const androidData = ref<AndroidData>({
+    designation: '9S',
+    funds: 5375,
+    exp: 74158,
+    hp: 2643,
+    maxHp: 2643,
+    attackLightBonus: 2338,
+    attackLightRaw: 234,
+    attackHeavyBonus: 1878,
+    attackHeavyRaw: 188,
+    attackRangedBonus: 150,
+    attackRangedRaw: 15,
+    defenseRaw: 734
+  })
+
+  return { androidData }
+})

src/views/datas/ItemsView.vue

@@ -2,104 +2,11 @@
 import { computed } from 'vue'
 import YrhCard from '@/components/YrhCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
-import type { GameItem } from '@/models/YrhGameItem'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
+import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 
-const { currentItem } = storeToRefs(useItemStore())
+const { currentItem, availableItems } = storeToRefs(useItemStore())
-
-const availableItems: GameItem[] = [
-  {
-    name: 'Melee Attack Up (S)',
-    description: 'Weapon attacks do double damage for 15 seconds.',
-    category: 'enhancement',
-    numberHeld: 4
-  },
-  {
-    name: 'Melee Attack Up (L)',
-    description: 'Weapon attacks do double damage for 30 seconds.',
-    category: 'enhancement',
-    numberHeld: 1
-  },
-  {
-    name: 'Melee Defense Up (S)',
-    description: 'Melee damage taken is reduced by 50% for 15 seconds.',
-    category: 'enhancement',
-    numberHeld: 4
-  },
-  {
-    name: 'Melee Defense Up (L)',
-    description: 'Melee damage taken is reduced by 50% for 30 seconds.',
-    category: 'enhancement',
-    numberHeld: 1
-  },
-  // {
-  //   name: 'Skill Salve (L)',
-  //   description: 'Skill gauge replenishes twice as fast for 30 seconds',
-  //   category: 'support',
-  //   numberHeld: 6
-  // },
-  {
-    name: 'Impact Bracer (S)',
-    description: 'Prevents staggering from an attack for 15 seconds',
-    category: 'enhancement',
-    numberHeld: 2
-  },
-  {
-    name: 'Impact Bracer (L)',
-    description: 'Prevents staggering from an attack for 30 seconds',
-    category: 'enhancement',
-    numberHeld: 34
-  },
-  {
-    name: "Popola's Booze",
-    description:
-      'Increases the power of weapon-based attacks by 50% for 30 seconds. Also restores 100% HP.',
-    numberHeld: 1
-  },
-  {
-    name: 'Small Recovery',
-    description: 'Restores 25% of HP.',
-    category: 'restorative',
-    numberHeld: 12
-  },
-  {
-    name: 'Medium Recovery',
-    description: 'Restores 75% of HP.',
-    category: 'restorative',
-    numberHeld: 31
-  },
-  {
-    name: 'Full Recovery',
-    description: 'Restores all of your HP.',
-    category: 'restorative',
-    numberHeld: 34
-  },
-  {
-    name: 'Visual Cure',
-    description: 'Cures visual status ailments.',
-    category: 'restorative',
-    numberHeld: 87
-  },
-  {
-    name: 'Aural Cure',
-    description: 'Cures aural status ailments.',
-    category: 'restorative',
-    numberHeld: 60
-  },
-  {
-    name: 'Cure Manipulation',
-    description: 'Cure control anomalies.',
-    category: 'restorative',
-    numberHeld: 39
-  },
-  {
-    name: 'Cure All + Heal All',
-    description: 'Restores 100% HP and cures all status ailments.',
-    category: 'restorative',
-    numberHeld: 2
-  }
-]
 
 const currentItemImage = computed(() => {
   switch (currentItem.value?.category) {
@@ -117,20 +24,30 @@ const currentItemImage = computed(() => {
 
 <template>
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
-    <div class="items-container max-h-full overflow-auto">
+    <div class="items-container max-h-full overflow-hidden">
       <ItemSelection :items="availableItems" />
     </div>
-    <div>
+    <div class="max-h-full">
-      <YrhCard v-if="currentItem">
+      <Transition name="fade" mode="out-in">
-        <template #title> {{ currentItem.name }} </template>
+        <YrhCard v-if="currentItem" breathe-bottom>
-        <template #image>
+          <template #title> {{ currentItem.name }} </template>
-          <img v-if="currentItemImage" :src="currentItemImage" height="80" width="80" alt="" />
+          <template #image>
-        </template>
+            <img v-if="currentItemImage" :src="currentItemImage" height="100" width="100" alt="" />
-        <template #content> {{ currentItem.description }} </template>
+          </template>
-        <template #footer>
+          <template #content> {{ currentItem.description }} </template>
-          <div class="text-right">Number held : {{ currentItem.numberHeld }}/99</div>
+          <template #footer>
-        </template>
+            <div class="text-right">
-      </YrhCard>
+              Number held :
+              <span>{{ currentItem.numberHeld }}&nbsp;/&nbsp;99</span>
+            </div>
+          </template>
+        </YrhCard>
+      </Transition>
+    </div>
+    <div class="max-h-full overflow-hidden">
+      <div class="h-full max-h-full y-scrollbar overflow-y-auto">
+        <YrhStatusCard />
+      </div>
     </div>
   </section>
 </template>