Started item data view with working overflow scroll

src/App.vue

@@ -17,6 +17,8 @@ import { RouterView } from 'vue-router'
   position: relative;
   min-height: 100dvh;
   min-height: 100vh;
+  max-height: 100dvh;
+  max-height: 100vh;
   overflow-x: hidden;
 
   display: grid;

src/components/YrhBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="banner shadow-sharpest py-3 px-9">
+  <div class="banner shadow-sharpest bg-y-beige-300 py-3 px-9">
     <slot />
   </div>
 </template>
@@ -7,7 +7,6 @@
 <style lang="scss" scoped>
 .banner {
   position: relative;
-  background-color: rgba(#fff, 0.25);
 
   &::before {
     display: block;

src/components/YrhButton.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { useElementHover, useFocus } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const hoverSfx = new Audio('/sounds/btn-hover.mp3')
 const clickSfx = new Audio('/sounds/btn-click.mp3')
@@ -15,20 +18,31 @@ const shouldArrowDisplay = computed(
   () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
 )
 
-function handleClick() {
+function handleClick(e: MouseEvent) {
   clickSfx.play()
   emit('clicked')
+
+  if (props.href && isInternalLink) {
+    router.push(props.href)
+  }
 }
 
 function handleMouseOver() {
-  isBtnFocused.value = true
+  if (!isBtnFocused.value) {
-  hoverSfx.play()
+    hoverSfx.play()
+  }
 }
 
 function playHoverSfx() {
   hoverSfx.play()
 }
 
+function handleFocusin() {
+  if (!isBtnHovered.value) {
+    hoverSfx.play()
+  }
+}
+
 const props = defineProps<{
   href?: string
   target?: string
@@ -37,6 +51,7 @@ const props = defineProps<{
   isActive?: boolean
   hasSquare?: boolean
   hasArrow?: boolean | 'force'
+  noBg?: boolean
 }>()
 
 const attributes = {
@@ -51,7 +66,7 @@ const isInternalLink = computed(() => props.href && props.href.charAt(0) === '/'
 const elementTag = computed(() => {
   if (props.href) {
     if (isInternalLink.value) {
-      return 'router-link'
+      return 'button'
     }
     return 'a'
   }
@@ -64,13 +79,12 @@ const elementTag = computed(() => {
     ref="btnRef"
     :is="elementTag"
     v-bind="attributes"
-    :to="isInternalLink ? props.href : null"
+    class="btn inline-block w-full p-1 px-2 text-left"
-    class="btn inline-block w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
+    :class="{ active: isActive, 'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg }"
-    :class="{ active: isActive }"
     @mousedown="handleClick"
     @keyup.enter="handleClick"
     @keyup.space="handleClick"
-    @focusin="playHoverSfx"
+    @focusin="handleFocusin"
     @mouseover="handleMouseOver"
   >
     <Transition name="fade" :duration="{ enter: 100, leave: 100 }">

src/components/YrhCard.vue

@@ -0,0 +1,21 @@
+<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">
+      <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">
+      <slot name="image" />
+    </figure>
+
+    <div class="mx-3">
+      <slot name="content" />
+    </div>
+
+    <footer class="mx-3">
+      <slot name="footer" />
+    </footer>
+  </article>
+</template>

src/components/YrhHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="text-4xl">
+  <h1 class="text-4xl tracking-wider">
     <slot />
   </h1>
 </template>

src/components/YrhNav.vue

@@ -25,9 +25,9 @@ function handleClickedKey(e: Event, item: MenuItem) {
 }
 
 function handleActiveBtn(e: Event, item: MenuItem) {
-  if (document.activeElement && e.type === 'mouseenter') {
+  // if (document.activeElement && e.type === 'mouseenter') {
-    ;(document.activeElement as HTMLElement).blur()
+  //   ;(document.activeElement as HTMLElement).blur()
-  }
+  // }
   activeKey.value = item.id
   bannerText.value = item.bannerText
 }

src/components/datas/items/ItemSelection.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import YrhButton from '@/components/YrhButton.vue'
+import type { GameItem } from '@/models/YrhGameItem'
+
+const props = defineProps<{
+  items: GameItem[]
+}>()
+</script>
+
+<template>
+  <div class="relative pl-11">
+    <menu class="py-4 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>
+          <span class="flex justify-between">
+            <span>{{ item.name }}</span>
+            <span v-if="item.numberHeld">{{ item.numberHeld }}</span>
+          </span>
+        </YrhButton>
+      </li>
+    </menu>
+  </div>
+</template>
+
+<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;
+    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);
+    opacity: 0.25;
+  }
+}
+</style>

src/models/YrhGameItem.ts

@@ -0,0 +1,5 @@
+export interface GameItem {
+  name: string
+  description: string
+  numberHeld?: number
+}

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 import DataView from '../views/DataView.vue'
+import ItemsView from '@/views/datas/ItemsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,7 +15,19 @@ const router = createRouter({
     {
       path: '/data',
       name: 'data',
-      component: DataView
+      component: DataView,
+      children: [
+        {
+          path: 'items',
+          name: 'items',
+          component: ItemsView
+        },
+        {
+          path: 'items',
+          name: 'items',
+          component: ItemsView
+        }
+      ]
     }
   ]
 })

src/stores/datas/itemStore.ts

@@ -0,0 +1,9 @@
+import type { GameItem } from '@/models/YrhGameItem'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useItemStore = defineStore('itemStore', () => {
+  const currentItem = ref<GameItem | null>(null)
+
+  return { currentItem }
+})

src/views/DataView.vue

@@ -1,3 +1,27 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+
+const { bannerText } = storeToRefs(useBannerStore())
+</script>
+
 <template>
-  <main>data view</main>
+  <main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
+    <YrhHeading> ANDROID DATA </YrhHeading>
+
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+
+    <YrhBanner>
+      <Transition name="fade">
+        <span v-if="bannerText">{{ bannerText }}</span>
+        <span v-else>&#8203;</span>
+      </Transition>
+    </YrhBanner>
+  </main>
 </template>

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
@@ -16,7 +16,7 @@ const availableRoutes: MenuItem[] = [
     id: 'current-data',
     label: 'Current Data',
     bannerText: 'Search through current file data',
-    href: '/data'
+    href: '/data/items'
   },
   {
     id: 'settings',

src/views/datas/ItemsView.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+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'
+
+const { currentItem } = useItemStore()
+
+const availableItems: GameItem[] = [
+  {
+    name: 'Melee Attack Up (S)',
+    description: 'Weapon attacks do double damage for 15 seconds.',
+    numberHeld: 4
+  },
+  {
+    name: 'Melee Attack Up (L)',
+    description: 'Weapon attacks do double damage for 30 seconds.',
+    numberHeld: 1
+  },
+  {
+    name: 'Melee Defense Up (S)',
+    description: 'Melee damage taken is reduced by 50% for 15 seconds.',
+    numberHeld: 4
+  },
+  {
+    name: 'Melee Defense Up (L)',
+    description: 'Melee damage taken is reduced by 50% for 30 seconds.',
+    numberHeld: 1
+  },
+  {
+    name: 'Skill Salve (L)',
+    description: 'Skill gauge replenishes twice as fast for 30 seconds',
+    numberHeld: 6
+  },
+  {
+    name: 'Impact Bracer (S)',
+    description: 'Prevents staggering from an attack for 15 seconds',
+    numberHeld: 2
+  },
+  {
+    name: 'Impact Bracer (L)',
+    description: 'Prevents staggering from an attack for 30 seconds',
+    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.',
+    numberHeld: 12
+  },
+  {
+    name: 'Medium Recovery',
+    description: 'Restores 75% of HP.',
+    numberHeld: 31
+  },
+  {
+    name: 'Full Recovery',
+    description: 'Restores all of your HP.',
+    numberHeld: 34
+  },
+  {
+    name: 'Visual Cure',
+    description: 'Cures visual status ailments.',
+    numberHeld: 87
+  },
+  {
+    name: 'Aural Cure',
+    description: 'Cures aural status ailments.',
+    numberHeld: 60
+  },
+  {
+    name: 'Cure Manipulation',
+    description: 'Cure control anomalies.',
+    numberHeld: 39
+  },
+  {
+    name: 'Cure All + Heal All',
+    description: 'Restores 100% HP and cures all status ailments.',
+    numberHeld: 2
+  }
+]
+</script>
+
+<template>
+  <section class="grid grid-cols-3 gap-x-10 my-20 overflow-auto">
+    <div class="max-h-full overflow-auto">
+      <ItemSelection :items="availableItems" />
+    </div>
+    <div>
+      <YrhCard v-if="currentItem">
+        <template #title> Item name </template>
+      </YrhCard>
+    </div>
+  </section>
+</template>