imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Changed User panel name, created panel toggles, WIP equipment panel

Browse Source
This commit is contained in:
Colin Kallemein 2024-08-26 23:04:48 +02:00
parent c460fe8457
commit ba5d235da0
7 changed files with 119 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/gui/Inventory.vue
View File

@ -1,45 +0,0 @@
<template>
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isInventoryOpen">
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[585px] 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 @mousedown.stop @click="inventoryActive" class="btn-cyan active py-1.5 px-4 min-w-24">Inventory</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button @mousedown.stop 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.toggleInventory">
<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 @mousedown.stop @click="inventoryActive" class="btn-cyan active py-1.5 px-4 min-w-24">Inventory</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div>
</div>
<InventoryItems v-if="inventory" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useGameStore } from '@/stores/game';
import InventoryItems from '@/components/gui/partials/InventoryItems.vue';
const gameStore = useGameStore()
let inventory = ref(true)
let equipment = false
let character = false
let settings = false
function inventoryActive() {
inventory.value = !inventory.value;
console.log(inventory.value);
}
</script>

2
src/components/gui/Menu.vue
View File

@ -27,7 +27,7 @@
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item group relative" @click="gameStore.toggleInventory">
<li class="menu-item group relative" @click="gameStore.toggleUserPanel">
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>

39
src/components/gui/UserPanel.vue Normal file
View File

@ -0,0 +1,39 @@
<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-[585px] 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 class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button 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 class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div>
</div>
<InventoryItems v-show="userPanelScreen === 'inventory'" />
<InventoryEquipment v-show="userPanelScreen === 'equipment'" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useGameStore } from '@/stores/game';
import InventoryItems from '@/components/gui/partials/Inventory.vue';
import InventoryEquipment from '@/components/gui/partials/Equipment.vue';
const gameStore = useGameStore()
let userPanelScreen = ref('inventory')
</script>

74
src/components/gui/partials/Equipment.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="grow flex flex-col w-full h-full relative overflow-auto">
<div class="m-5 relative">
<h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
<div class="flex justify-center items-center flex-wrap gap-20">
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
<div class="h-full flex flex-col justify-center items-center">
<h3>Ethereal</h3>
<img class="h-64 my-4 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block">Level 69</span>
</div>
</div>
<div class="flex flex-col gap-3 m-5">
<div class="flex gap-3 justify-center">
<!-- Helmet -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Head charm -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Bracers -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Chestplate -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
</div>
<!-- Primary Weapon -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Legs -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<div class="flex flex-col gap-3">
<!-- Belt/pouch -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Boots -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
</div>
</div>
</div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
</div>
<div class="m-5">
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
<div>
</div>
</div>
</div>
</div>
</template>

0
src/components/gui/partials/InventoryItems.vue → src/components/gui/partials/Inventory.vue
View File

2
src/screens/Game.vue
View File

@ -50,7 +50,7 @@ import Menubar from '@/components/gui/Menu.vue'
import GmTools from '@/components/gameMaster/GmTools.vue'
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
import GmPanel from '@/components/gameMaster/GmPanel.vue'
import Inventory from '@/components/gui/Inventory.vue'
import Inventory from '@/components/gui/UserPanel.vue'
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()

8
src/stores/game.ts
View File

@ -14,7 +14,7 @@ export const useGameStore = defineStore('game', {
isGmPanelOpen: false,
isMovingCamera: false,
isChatOpen: false,
isInventoryOpen: false
isUserPanelOpen: false
}),
actions: {
setScreen(screen: string) {
@ -41,8 +41,8 @@ export const useGameStore = defineStore('game', {
toggleChat() {
this.isChatOpen = !this.isChatOpen
},
toggleInventory() {
this.isInventoryOpen = !this.isInventoryOpen
toggleUserPanel() {
this.isUserPanelOpen = !this.isUserPanelOpen
},
initConnection() {
this.connection = io(config.server_endpoint, {
@ -77,7 +77,7 @@ export const useGameStore = defineStore('game', {
this.isGmPanelOpen = false
this.isMovingCamera = false
this.isChatOpen = false
this.isInventoryOpen = false
this.isUserPanelOpen = false
useCookies().remove('token')
}