Joururi/yorha-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started item data view with working overflow scroll

Browse Source
This commit is contained in:
Alexis
2023-05-14 12:23:59 +02:00
parent 0285e18556
commit 495c9ed1d0
13 changed files with 266 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

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

3
src/components/YrhBanner.vue
View File

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

30
src/components/YrhButton.vue
View File

@@ -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
hoverSfx.play()
if (!isBtnFocused.value) {
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 bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
:class="{ active: isActive }"
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 }"
@mousedown="handleClick"
@keyup.enter="handleClick"
@keyup.space="handleClick"
@focusin="playHoverSfx"
@focusin="handleFocusin"
@mouseover="handleMouseOver"
>
<Transition name="fade" :duration="{ enter: 100, leave: 100 }">

21
src/components/YrhCard.vue Normal file
View File

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

2
src/components/YrhHeading.vue
View File

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

6
src/components/YrhNav.vue
View File

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

61
src/components/datas/items/ItemSelection.vue Normal file
View File

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

5
src/models/YrhGameItem.ts Normal file
View File

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

15
src/router/index.ts
View File

@@ -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
}
]
}
]
})

9
src/stores/datas/itemStore.ts Normal file
View File

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

26
src/views/DataView.vue
View File

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

4
src/views/HomeView.vue
View File

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

100
src/views/datas/ItemsView.vue Normal file
View File

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