forked from noxious/client
43 lines
3.1 KiB
Vue
43 lines
3.1 KiB
Vue
<template>
|
|
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isUserPanelOpen">
|
|
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
|
|
<div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
|
|
<h3 class="m-0 font-medium shrink-0">Game menu</h3>
|
|
<div class="hidden sm:flex gap-1.5 flex-wrap">
|
|
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
|
|
<button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
|
|
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
|
|
<button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
|
|
</div>
|
|
<div class="flex gap-2.5">
|
|
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
|
|
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
|
</button>
|
|
</div>
|
|
<div class="flex sm:hidden gap-1.5 flex-wrap">
|
|
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
|
|
<button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
|
|
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
|
|
<button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
|
|
</div>
|
|
</div>
|
|
<Inventory v-show="userPanelScreen === 'inventory'" />
|
|
<Equipment v-show="userPanelScreen === 'equipment'" />
|
|
<CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
|
|
<Settings v-show="userPanelScreen === 'settings'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useGameStore } from '@/stores/game'
|
|
import Inventory from '@/components/gui/partials/Inventory.vue'
|
|
import Equipment from '@/components/gui/partials/Equipment.vue'
|
|
import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
|
|
import Settings from '@/components/gui/partials/Settings.vue'
|
|
|
|
const gameStore = useGameStore()
|
|
let userPanelScreen = ref('inventory')
|
|
</script>
|