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

Fixed reactivity in Inventory component

Browse Source
This commit is contained in:
Dennis Postma 2024-08-24 03:14:19 +02:00
parent b5e2474c6d
commit d8863fe51f
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Settings</button> <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div> </div>
<div class="flex gap-2.5"> <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"> <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" /> <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
</button> </button>
</div> </div>
@ -27,19 +27,19 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useGameStore } from '@/stores/game';
import { ref } from 'vue'; import { ref } from 'vue';
import { useGameStore } from '@/stores/game';
import InventoryItems from '@/components/gui/partials/InventoryItems.vue'; import InventoryItems from '@/components/gui/partials/InventoryItems.vue';
const gameStore = useGameStore() const gameStore = useGameStore()
let inventory = false let inventory = ref(true)
let equipment = false let equipment = false
let character = false let character = false
let settings = false let settings = false
function inventoryActive() { function inventoryActive() {
inventory = !inventory; inventory.value = !inventory.value;
console.log(inventory); console.log(inventory.value);
} }
</script> </script>

2
src/components/gui/partials/InventoryItems.vue
View File

@ -8,7 +8,7 @@
<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-5">
<h4 class="m-auto font-medium text-lg max-w-[375px]">Quest 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>
</div> </div>

2
src/components/zone/Zone.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Tiles :key="zoneStore.zone?.id ?? 0" /> <Tiles :key="zoneStore.zone?.id ?? 0" />
<Objects /> <Objects />
<Characters /> <!-- <Characters />-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">