From 77f0b8ab7b53693dde07ae3eaa682e06445175e6 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 14 May 2023 18:45:35 +0200
Subject: [PATCH] Added item card view for selection

---
 public/{ => backgrounds}/tile-bg.svg         |   0
 public/{ => backgrounds}/yorha-bg-left.svg   |   0
 public/{ => backgrounds}/yorha-bg-right.svg  |   0
 public/images/item-enhancement-icon.png      | Bin 0 -> 2397 bytes
 public/images/item-enhancement-md.png        | Bin 0 -> 6560 bytes
 public/images/item-enhancement.png           | Bin 0 -> 4612 bytes
 public/images/item-restorative-icon.png      | Bin 0 -> 2667 bytes
 public/images/item-restorative-md.png        | Bin 0 -> 3050 bytes
 public/images/item-restorative.png           | Bin 0 -> 4152 bytes
 src/App.vue                                  |   4 +-
 src/assets/main.css                          |   6 +-
 src/components/YrhButton.vue                 |  64 ++++++++--------
 src/components/YrhCard.vue                   |  15 ++--
 src/components/datas/items/ItemSelection.vue |  57 +++++++-------
 src/models/YrhGameItem.ts                    |   1 +
 src/views/datas/ItemsView.vue                |  75 ++++++++++++++++---
 tailwind.config.js                           |   2 +-
 17 files changed, 146 insertions(+), 78 deletions(-)
 rename public/{ => backgrounds}/tile-bg.svg (100%)
 rename public/{ => backgrounds}/yorha-bg-left.svg (100%)
 rename public/{ => backgrounds}/yorha-bg-right.svg (100%)
 create mode 100644 public/images/item-enhancement-icon.png
 create mode 100644 public/images/item-enhancement-md.png
 create mode 100644 public/images/item-enhancement.png
 create mode 100644 public/images/item-restorative-icon.png
 create mode 100644 public/images/item-restorative-md.png
 create mode 100644 public/images/item-restorative.png

diff --git a/public/tile-bg.svg b/public/backgrounds/tile-bg.svg
similarity index 100%
rename from public/tile-bg.svg
rename to public/backgrounds/tile-bg.svg
diff --git a/public/yorha-bg-left.svg b/public/backgrounds/yorha-bg-left.svg
similarity index 100%
rename from public/yorha-bg-left.svg
rename to public/backgrounds/yorha-bg-left.svg
diff --git a/public/yorha-bg-right.svg b/public/backgrounds/yorha-bg-right.svg
similarity index 100%
rename from public/yorha-bg-right.svg
rename to public/backgrounds/yorha-bg-right.svg
diff --git a/public/images/item-enhancement-icon.png b/public/images/item-enhancement-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..237f0c490b810ba3239634e39a5b68bc460b5583
GIT binary patch
literal 2397
zcmbVO2~-o;8V<CyV8wzg1=lf90U^vx0)Y$!1j3TG0Zs^tfR<r0kTJ`|%s|58Qrm-o
zZDmnxjZoJv_)xL0Qc6Y9hiJ8KtVJuJB0e7~s8u%Yo3I`Gj_>un&N+APoqNCg{ri8W
zAT~PEdd8d?EEdaJ93_%6vy*99zQ(+}^}-=$veHJapjfOo>`cRqwPPoPuy7<~33P(w
zJp?1w-l&{R#k~z`ErVvU0)q`&6jS0fkcy`h8X@~Z-ElTR$c60Xz7j~H4Z{^gRJIO}
z%Z`>|*-A_xX9ouXfd+&jP~$WT7}P2ag&2hFabAR3o3=qVFb<)WLUxErAdn!51;R)j
z4)DDp4hBJ7z)#=}^L==}TrYqNaUl?bK_0|`eGy*>;rRoT51Wyulcyn4QN*My=1a&{
z(6kl-LA_q@t><}@x^xg02m~O+1-V=fgWynE8X7flG?dE}g9xWE9igQOQUjP6(Nr>n
z7P1*lCrnUlr)f3Rq?;Irfd*6y!rqX{q;a4eo5pD~bgFUTaty>(xEj~c6oZAQv04R5
zlazw|FVxe=e-Oa9Rw9{}@lsvX>S+-a9iGXUG3k((qA6LH76+v`MP}$QJUo+8)5T<s
z775egC{5~QB&nJTRP2<>0GF`@a9>Vn<fNYRc;NyrLTOycW}?R9K)xK<M+W;dAwwXZ
zC&Wb{XaXuB<wRQ6%b-3Ci2Da9lQMFYM*kEn$B;Bqr$!lr2{oFIgIY~G8<=(@5=N>>
z9V3|0j`!leI4mqyN2U=f=75q$h63X7Fg`5c^Eq5^cwAkH1QBZ}8r5L9SR`aK&haJ)
zIpV{Gc{~B0%7OhMJ_o~n_#A;h3Ul}{%H!i{d|b}OrtXVKEW?xnQ}^Zn=lvKR!IU7X
z`pZ0~!ZhU$5=Br<RI?^aCk|gTxl$3pc)B1cW-0?A8#Bcpm$N6giNEZD30l1ZXGs4?
zUQEC!GL6=wIy@wu@z$T_9mpsTnhJKp4)8xs96x)ZxToMu$1p9YTNU#$-Ry7;)8TYX
zD=XT4lIf?f+!KpJWKm7uZBwh_aQmj;pI(1*R9W|s`@=!p^V5@M(xdR=1~Y1nvB;@?
z_rkXP2<OWp?8rwkt8<4pz?Zk=LaWWAEZ=#}d@irqV|9Mg*6tvc=0@^XXV0q%M(gAU
zIixVgu7H@q`Ml!Rt)Q%tosS*}`=0JRx4)Tyj61&14{$E`aHwi)zouzlSJ9`g(QvGn
zRA%Sj{C?qm`)}cEWm$<uP42aKv>iD&3mQ-J`hqr9Rw~viB6EOlvdncj1mR}a4E<=H
zX{=Iuc=%Ne-3iRgi{$2%#<gF1cB5JIMLQL{tmT=0bKfJYe7^GMYsvFmTy74Om7Q3A
zyWufC^LUXZXsLYE*yjMzSa$0>eqX!hyEzs`d7b<xol<q^<5sW?3?d8c<Lmkdx4K`P
zpWit;0){qQ_jg|2kOHydoAVwuQnl`>Nr4yDnf`^VqK#?1)?Y4O=P!7F1F^$>FSq#f
zJ&I3k<GZBacJY6H?BC?D)Yk6riC!d99)9S#t+A)RF0ioRK-_2L<(trbCrT2$91X{m
zLs|v4Yfa9tr4GIIYtQZ*E7Ld~qJCd?cHJw9b(UvKJzQGhp<bJj*XvLJ_AkF~ZRa-)
z%B2O|^?;+X@mlUYsq}-c_Y0pyCLZqVS!v@H`h}}UOz|1%LBD|&Rc#eUzwJ9NJY8#c
zyHWEN`(9N?TkPhaMt@r5IRo|F*k>4va9!!_e9CWoebeia(LJYg&9`Lq-`{m)mQ$YX
z{#@QK=H+~2hmTLLMSrNpl3c^l19n$yT6ceaW|nx_!2JNXp3GY9;kq|g-96PdBI%IM
zJz4x_OnPdYEm6e@Fh=bveK`MuqyOK&NxauKGVp=ho-J(I{PUMWx6hO%%?n=Rhy_Qp
z)n8U;e>Zn@Pw`a|T!##MTIGcZK7Cdixcp6^@J7zY6TvYBi`@tPi)Ra|C%ojL$Da0Y
z1@Jz4yL9%Gh|Ynb>%vPu$2RTiI6s)|zm40~?sLzg?aog7>V@>m2hsb7!e<9WC-Ji*
zu=P@b)vOR3O({Q2R_!*tNYXATT$^XJ&c(PV*>A;HA0CSBb{%$Fltt*1?D{j4ZqI_;
zu3Wk@#yXWzbYV>NoVOXRej2o7=3f0;++yQ4vol8u_qp!<AzR3QwY?g?a=d@VzRJ$a
zB_;94ySida8@ArJoO4%sI5m9GcaB5kcFt1#`MdEg^_+}Fhj-VM{CM!o!hf{Hsbrj_
z4Zo?xC0n+Q9<$uUPqC}5X$k9<21S^qdEBxgK3@EGZ)noF3;9c_sFL0VofShDU;WIs
z>#GBmOI&73?w+ev&10CYay$mjIe6lFsUo?-TrPfS7U4bWIJVII{3>?LukW7d3hZp@
UF<X!_V)_9RhewMJhNf)%H+x^2T>t<8

literal 0
HcmV?d00001

diff --git a/public/images/item-enhancement-md.png b/public/images/item-enhancement-md.png
new file mode 100644
index 0000000000000000000000000000000000000000..0dc557f7f18f94fbbbd7de623727504cb8ae7713
GIT binary patch
literal 6560
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
CWL1a&

literal 0
HcmV?d00001

diff --git a/public/images/item-enhancement.png b/public/images/item-enhancement.png
new file mode 100644
index 0000000000000000000000000000000000000000..24fab1292d541ebbf60ae0abaa377006a2a99d1c
GIT binary patch
literal 4612
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
DMHIkC

literal 0
HcmV?d00001

diff --git a/public/images/item-restorative-icon.png b/public/images/item-restorative-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..45c2c4d5163d507ef4fede28f93df60115e79d94
GIT binary patch
literal 2667
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
F{|_Ua`#Jys

literal 0
HcmV?d00001

diff --git a/public/images/item-restorative-md.png b/public/images/item-restorative-md.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee0672ba8893c613b542aa4618da3e41ad56cac6
GIT binary patch
literal 3050
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

literal 0
HcmV?d00001

diff --git a/public/images/item-restorative.png b/public/images/item-restorative.png
new file mode 100644
index 0000000000000000000000000000000000000000..70d1ca2f21d374687a7c532e2b43127b40127a77
GIT binary patch
literal 4152
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
L*pVvCd}99v`jzPx

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 44b6bb0..93004ff 100644
--- a/src/App.vue
+++ b/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;
   }
 }
diff --git a/src/assets/main.css b/src/assets/main.css
index 30300ff..2a274cc 100644
--- a/src/assets/main.css
+++ b/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 {
diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue
index 9b28e15..93cd998 100644
--- a/src/components/YrhButton.vue
+++ b/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"
diff --git a/src/components/YrhCard.vue b/src/components/YrhCard.vue
index ec0ddaa..bbaf12c 100644
--- a/src/components/YrhCard.vue
+++ b/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">
-    <header class="px-3 py-1 bg-y-beige-700">
+  <article class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300 pb-4">
+    <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>
diff --git a/src/components/datas/items/ItemSelection.vue b/src/components/datas/items/ItemSelection.vue
index a4f4834..9e70fdb 100644
--- a/src/components/datas/items/ItemSelection.vue
+++ b/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>{{ item.name }}</span>
+            <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;
-    position: absolute;
+    @apply block absolute -top-2 -bottom-2 left-0 w-4;
     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);
diff --git a/src/models/YrhGameItem.ts b/src/models/YrhGameItem.ts
index 8a828e0..661dde6 100644
--- a/src/models/YrhGameItem.ts
+++ b/src/models/YrhGameItem.ts
@@ -1,5 +1,6 @@
 export interface GameItem {
   name: string
   description: string
+  category?: 'restorative' | 'enhancement' | 'support'
   numberHeld?: number
 }
diff --git a/src/views/datas/ItemsView.vue b/src/views/datas/ItemsView.vue
index 326632a..5e8cfa6 100644
--- a/src/views/datas/ItemsView.vue
+++ b/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)',
-    description: 'Skill gauge replenishes twice as fast for 30 seconds',
-    numberHeld: 6
-  },
+  // {
+  //   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
   },
   {
@@ -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">
-    <div class="max-h-full overflow-auto">
+  <section class="grid grid-cols-3 gap-x-10 my-14 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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 815358f..2cb3b3f 100644
--- a/tailwind.config.js
+++ b/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',