WIP Inventory overlay
This commit is contained in:
parent
471f84904f
commit
8f5174ac4a
BIN
public/assets/placeholders/chestplate.png
Normal file
BIN
public/assets/placeholders/chestplate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
76
src/components/utilities/inventory/Inventory.vue
Normal file
76
src/components/utilities/inventory/Inventory.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<div class="absolute z-50 w-full h-dvh top-0 left-0 backdrop-blur-sm">
|
||||||
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[900px] w-[60%] h-[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 justify-between items-center border-solid border-0 border-b border-cyan-200">
|
||||||
|
<h3 class="m-0 font-medium shrink-0">Inventory</h3>
|
||||||
|
<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">
|
||||||
|
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grow flex flex-col">
|
||||||
|
<div class="w-full h-[60%] relative">
|
||||||
|
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-[40%] flex relative">
|
||||||
|
<div class="w-1/2 h-full">
|
||||||
|
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 mr-8">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<h3>Armor piece name</h3>
|
||||||
|
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center grow">
|
||||||
|
<img src="/assets/placeholders/chestplate.png" class="max-w-40"/>
|
||||||
|
<ul class="p-0 m-0 list-none">
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Health:</span>
|
||||||
|
<span>+15</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Defense:</span>
|
||||||
|
<span>500</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Stats:</span>
|
||||||
|
<span></span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>More stats:</span>
|
||||||
|
<span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200"></div>
|
||||||
|
<div class="w-1/2 h-full">
|
||||||
|
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 ml-8">
|
||||||
|
<h3>Character stats</h3>
|
||||||
|
<div class="flex justify-between items-center grow">
|
||||||
|
<ul class="p-0 m-0 list-none">
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Health:</span>
|
||||||
|
<p class="m-0">100 <span class="text-green">+15</span></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Defense:</span>
|
||||||
|
<p class="m-0">1000 <span class="text-green">+500</span></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Stats:</span>
|
||||||
|
<p class="m-0"></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>More stats:</span>
|
||||||
|
<p class="m-0"></p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -9,6 +9,7 @@
|
|||||||
<div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
|
<div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
|
||||||
<Hud />
|
<Hud />
|
||||||
</div>
|
</div>
|
||||||
|
<Inventory />
|
||||||
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
|
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
|
||||||
<div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
|
<div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
|
||||||
<Chat />
|
<Chat />
|
||||||
@ -43,6 +44,7 @@ import Menubar from '@/components/gui/Menu.vue'
|
|||||||
import GmTools from '@/components/utilities/GmTools.vue'
|
import GmTools from '@/components/utilities/GmTools.vue'
|
||||||
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
|
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
|
||||||
import GmPanel from '@/components/utilities/GmPanel.vue'
|
import GmPanel from '@/components/utilities/GmPanel.vue'
|
||||||
|
import Inventory from '@/components/utilities/inventory/Inventory.vue'
|
||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const zoneEditorStore = useZoneEditorStore()
|
const zoneEditorStore = useZoneEditorStore()
|
||||||
|
|||||||
@ -42,6 +42,9 @@ export default {
|
|||||||
green: {
|
green: {
|
||||||
DEFAULT: '#09ad19'
|
DEFAULT: '#09ad19'
|
||||||
},
|
},
|
||||||
|
purple: {
|
||||||
|
DEFAULT: '#9841e6'
|
||||||
|
},
|
||||||
cyan: {
|
cyan: {
|
||||||
DEFAULT: '#368f8b',
|
DEFAULT: '#368f8b',
|
||||||
50: '#00b3b3',
|
50: '#00b3b3',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user