Added item card view for selection

src/App.vue

@@ -50,12 +50,12 @@ import { RouterView } from 'vue-router'
 
   &::before {
     left: 0;
-    background-image: url('/yorha-bg-left.svg');
+    background-image: url('/backgrounds/yorha-bg-left.svg');
     background-position: left;
   }
   &::after {
     right: 0;
-    background-image: url('/yorha-bg-right.svg');
+    background-image: url('/backgrounds/yorha-bg-right.svg');
     background-position: right;
   }
 }

src/assets/main.css

@@ -5,11 +5,13 @@
 @tailwind utilities;
 
 body {
-  @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400
+  @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('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+  @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 {

src/components/YrhButton.vue

@@ -14,35 +14,6 @@ const { focused: isBtnFocused } = useFocus(btnRef)
 
 const emit = defineEmits(['clicked'])
 
-const shouldArrowDisplay = computed(
-  () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
-)
-
-function handleClick(e: MouseEvent) {
-  clickSfx.play()
-  emit('clicked')
-
-  if (props.href && isInternalLink) {
-    router.push(props.href)
-  }
-}
-
-function handleMouseOver() {
-  if (!isBtnFocused.value) {
-    hoverSfx.play()
-  }
-}
-
-function playHoverSfx() {
-  hoverSfx.play()
-}
-
-function handleFocusin() {
-  if (!isBtnHovered.value) {
-    hoverSfx.play()
-  }
-}
-
 const props = defineProps<{
   href?: string
   target?: string
@@ -72,6 +43,35 @@ const elementTag = computed(() => {
   }
   return 'button'
 })
+
+const shouldArrowDisplay = computed(
+  () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
+)
+
+function playHoverSfx() {
+  hoverSfx.play()
+}
+
+function handleClick(e: MouseEvent) {
+  clickSfx.play()
+  emit('clicked')
+
+  if (props.href && isInternalLink) {
+    router.push(props.href)
+  }
+}
+
+function handleMouseOver() {
+  if (!isBtnFocused.value) {
+    playHoverSfx()
+  }
+}
+
+function handleFocusin() {
+  if (!isBtnHovered.value) {
+    playHoverSfx()
+  }
+}
 </script>
 
 <template>
@@ -80,7 +80,11 @@ const elementTag = computed(() => {
     :is="elementTag"
     v-bind="attributes"
     class="btn inline-block w-full p-1 px-2 text-left"
-    :class="{ active: isActive, 'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg }"
+    :class="{
+      active: isActive,
+      'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg,
+      'text-y-beige-700': noBg
+    }"
     @mousedown="handleClick"
     @keyup.enter="handleClick"
     @keyup.space="handleClick"

src/components/YrhCard.vue

@@ -1,20 +1,25 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+const slots = useSlots()
+</script>
+
 <template>
-  <article class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-3 bg-y-beige-300">
+  <article class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300 pb-4">
-    <header class="px-3 py-1 bg-y-beige-700">
+    <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-3 bg-y-beige-500 grid place-items-center">
+    <figure class="mx-4 bg-y-beige-500 grid place-items-center">
       <slot name="image" />
     </figure>
 
-    <div class="mx-3">
+    <div class="mx-4 pt-1 border-t-2 border-y-beige-500">
       <slot name="content" />
     </div>
 
-    <footer class="mx-3">
+    <footer class="mx-4">
       <slot name="footer" />
     </footer>
   </article>

src/components/datas/items/ItemSelection.vue

@@ -1,19 +1,43 @@
 <script lang="ts" setup>
 import YrhButton from '@/components/YrhButton.vue'
 import type { GameItem } from '@/models/YrhGameItem'
+import { useItemStore } from '@/stores/datas/itemStore'
+import { storeToRefs } from 'pinia'
+
+const { currentItem } = storeToRefs(useItemStore())
 
 const props = defineProps<{
   items: GameItem[]
 }>()
+
+function handleSelectedItem(item: GameItem) {
+  currentItem.value = item
+}
 </script>
 
 <template>
   <div class="relative pl-11">
-    <menu class="py-4 bg-y-beige-300 max-h-full shadow-sharpest">
+    <menu class="py-2 bg-y-beige-300 max-h-full shadow-sharpest">
       <li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
-        <YrhButton no-bg has-arrow>
+        <YrhButton
+          no-bg
+          :has-arrow="item.name === currentItem?.name ? 'force' : true"
+          @clicked="handleSelectedItem(item)"
+          :is-active="item.name === currentItem?.name"
+        >
           <span class="flex justify-between">
+            <span class="flex items-center">
+              <span v-if="item.category">
+                <img
+                  :src="`/images/item-${item.category}-icon.png`"
+                  class="pr-2"
+                  height="24"
+                  width="24"
+                  alt=""
+                />
+              </span>
               <span>{{ item.name }}</span>
+            </span>
             <span v-if="item.numberHeld">{{ item.numberHeld }}</span>
           </span>
         </YrhButton>
@@ -24,34 +48,9 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 menu {
-  // &::before,
-  // &::after {
-  //   position: absolute;
-  //   right: 0.5rem;
-  //   left: 0.5rem;
-  //   display: block;
-  //   content: '';
-  //   height: 0.1rem;
-  //   background-color: var(--color-y-beige-900);
-  //   opacity: 0.25;
-  // }
-
-  // &::before {
-  //   top: 0;
-  // }
-  // &::after {
-  //   bottom: 0;
-  // }
-
   &::before {
-    display: block;
+    @apply block absolute -top-2 -bottom-2 left-0 w-4;
-    position: absolute;
     content: '';
-    top: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 15px;
     border-left-width: 8px;
     border-right-width: 2px;
     border-color: var(--color-y-beige-900);

src/models/YrhGameItem.ts

@@ -1,5 +1,6 @@
 export interface GameItem {
   name: string
   description: string
+  category?: 'restorative' | 'enhancement' | 'support'
   numberHeld?: number
 }

src/views/datas/ItemsView.vue

@@ -1,45 +1,54 @@
 <script lang="ts" setup>
+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'
 
-const { currentItem } = useItemStore()
+const { currentItem } = 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)',
+  //   name: 'Skill Salve (L)',
-    description: 'Skill gauge replenishes twice as fast for 30 seconds',
+  //   description: 'Skill gauge replenishes twice as fast for 30 seconds',
-    numberHeld: 6
+  //   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
   },
   {
@@ -51,50 +60,98 @@ const availableItems: GameItem[] = [
   {
     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) {
+    case 'enhancement':
+      return '/images/item-enhancement-md.png'
+
+    case 'restorative':
+      return '/images/item-restorative-md.png'
+
+    default:
+      return null
+  }
+})
 </script>
 
 <template>
-  <section class="grid grid-cols-3 gap-x-10 my-20 overflow-auto">
+  <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
-    <div class="max-h-full overflow-auto">
+    <div class="items-container max-h-full overflow-auto">
       <ItemSelection :items="availableItems" />
     </div>
     <div>
       <YrhCard v-if="currentItem">
-        <template #title> Item name </template>
+        <template #title> {{ currentItem.name }} </template>
+        <template #image>
+          <img v-if="currentItemImage" :src="currentItemImage" height="80" width="80" alt="" />
+        </template>
+        <template #content> {{ currentItem.description }} </template>
+        <template #footer>
+          <div class="text-right">Number held : {{ currentItem.numberHeld }}/99</div>
+        </template>
       </YrhCard>
     </div>
   </section>
 </template>
+
+<style lang="scss" scoped>
+.items-container {
+  @apply relative overflow-x-hidden;
+
+  &::before,
+  &::after {
+    content: '';
+    height: 0.1rem;
+    @apply block sticky ml-11 w-full h-2 left-14 -right-14 z-10 bg-y-beige-300;
+    border-color: rgba(45, 44, 33, 0.33);
+  }
+
+  &::before {
+    @apply top-0 border-b-2;
+  }
+  &::after {
+    @apply bottom-0 border-t-2;
+  }
+}
+</style>

tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
           50: '#FFFFFF',
           100: '#F6F6F4',
           200: '#E5E3DD',
-          300: '#D3D0C5',
+          300: '#D8D2B8',
           400: '#cbc5af',
           500: '#b0ab97',
           600: '#767563',