Rebuilding Inventory popup (WIP)
This commit is contained in:
parent
6c44821ebb
commit
6d1c2a5423
@ -1,158 +1,45 @@
|
||||
<template>
|
||||
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isInventoryOpen">
|
||||
<div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
|
||||
<div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
|
||||
<div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
|
||||
<div class="h-full flex flex-col justify-center items-center">
|
||||
<h3 class="mt-4">Ethereal</h3>
|
||||
<img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
||||
<span class="block mb-4">Level 69</span>
|
||||
</div>
|
||||
<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="max-w-[875px] w-[65%] 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-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
|
||||
<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 class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
|
||||
<div v-for="n in 25" 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="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="w-full xl:w-1/2 h-full">
|
||||
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
|
||||
<div class="flex gap-2">
|
||||
<h4>Armor piece name</h4>
|
||||
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
|
||||
</div>
|
||||
<div class="flex gap-8 xl:justify-between items-center grow">
|
||||
<img src="/assets/placeholders/chestplate.png" class="max-w-36" />
|
||||
<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 xl:block hidden"></div>
|
||||
<div class="w-full xl:w-1/2 h-full">
|
||||
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
|
||||
<h4>Character stats</h4>
|
||||
<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 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
|
||||
</li>
|
||||
<li class="flex gap-8 justify-between">
|
||||
<span>Defense:</span>
|
||||
<p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
|
||||
</li>
|
||||
<li class="flex gap-8 justify-between">
|
||||
<span>Stats:</span>
|
||||
<p class="m-0 relative"></p>
|
||||
</li>
|
||||
<li class="flex gap-8 justify-between">
|
||||
<span>More stats:</span>
|
||||
<p class="m-0 relative"></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
|
||||
<div class="h-full flex flex-col items-center">
|
||||
<h3 class="mt-4">Chest</h3>
|
||||
<div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
|
||||
<div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
|
||||
</div>
|
||||
</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">
|
||||
<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 { useGameStore } from '@/stores/game'
|
||||
import { useGameStore } from '@/stores/game';
|
||||
import { ref } from 'vue';
|
||||
import InventoryItems from '@/components/utilities/inventory/partials/InventoryItems.vue';
|
||||
|
||||
const gameStore = useGameStore()
|
||||
let inventory = false
|
||||
let equipment = false
|
||||
let character = false
|
||||
let settings = false
|
||||
|
||||
function inventoryActive() {
|
||||
inventory = !inventory;
|
||||
console.log(inventory);
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
||||
<div class="m-5 relative">
|
||||
<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 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 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="m-auto font-medium text-lg max-w-[375px]">Quest items</h4>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user