noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished equipment userpanel tab + small tweaks

Browse Source
This commit is contained in:
Colin Kallemein 2024-08-28 20:59:43 +02:00
parent 7f3e7df6c3
commit 8aaba2dee4
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isUserPanelOpen"> <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="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"> <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> <h3 class="m-0 font-medium shrink-0">Game menu</h3>
<div class="hidden sm:flex gap-1.5 flex-wrap"> <div class="hidden sm:flex gap-1.5 flex-wrap">

27
src/components/gui/partials/Equipment.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="grow flex flex-col w-full h-full relative overflow-auto"> <div class="grow flex flex-col w-full h-full relative overflow-auto">
<div class="m-5 relative"> <div class="m-4 relative">
<h4 class="font-medium text-lg max-w-[375px]">Equipment</h4> <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 justify-center items-center flex-wrap gap-20">
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
<div class="h-full flex flex-col justify-center items-center"> <div class="h-full flex flex-col justify-center items-center">
<h3>Ethereal</h3> <h3>Ethereal</h3>
<img class="h-64 my-4 mx-auto" src="/assets/placeholders/inventory_player.png" /> <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block">Level 69</span> <span class="block text-sm">Level 69</span>
</div> </div>
</div> </div>
<div class="flex flex-col gap-3 m-5"> <div class="flex flex-col gap-3 mx-5 mt-2">
<div class="flex gap-3 justify-center"> <div class="flex gap-3 justify-center">
<!-- Helmet --> <!-- 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"> <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">
@ -62,12 +62,21 @@
</div> </div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div> <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
</div> </div>
<div class="m-5"> <div class="m-4">
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4> <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 class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
<div> <ul class="p-0 m-0 list-none">
<li class="leading-6">Health:</li>
</div> <li class="leading-6">Defense:</li>
<li class="leading-6">More stats:</li>
<li class="leading-6">Extra stats:</li>
</ul>
<ul class="p-0 m-0 list-none text-right">
<li class="leading-6">+15</li>
<li class="leading-6">500</li>
<li class="leading-6"></li>
<li class="leading-6"></li>
</ul>
</div> </div>
</div> </div>
</div> </div>

4
src/components/gui/partials/Inventory.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="grow flex flex-col w-full h-full relative overflow-auto"> <div class="grow flex flex-col w-full h-full relative overflow-auto">
<div class="m-5 relative"> <div class="m-4 relative">
<h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4> <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
<div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div> <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
</div> </div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div> <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
</div> </div>
<div class="m-5"> <div class="m-4">
<h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4> <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
<div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div> <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>