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

Created GM Panel

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-20 00:02:47 +02:00
parent ef87d73db8
commit 79f804d5f5
3 changed files with 108 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/utilities/AssetManager/AssetManager.vue
View File

@ -1,78 +1,70 @@
<template> <template>
<Modal :isModalOpen="true" :modal-width="800" :modal-height="630"> <div class="assets-container">
<template #modalHeader> <div class="asset-categories">
<h3 class="modal-title">Asset manager</h3> <!-- TODO: Asset categories, replace with loop -->
</template> <a class="category">
<template #modalBody> <span class="category-name">Tiles</span>
<div class="assets-container"> </a>
<div class="asset-categories"> <!-- Example selected category -->
<!-- TODO: Asset categories, replace with loop --> <a class="category selected">
<a class="category"> <span class="category-name">Walls</span>
<span class="category-name">Tiles</span> </a>
</a> <a class="category">
<!-- Example selected category --> <span class="category-name">Weapons</span>
<a class="category selected"> </a>
<span class="category-name">Walls</span> <a class="category">
</a> <span class="category-name">NPC's</span>
<a class="category"> </a>
<span class="category-name">Weapons</span> </div>
</a>
<a class="category">
<span class="category-name">NPC's</span>
</a>
</div>
<!-- TODO: Show content based on selected category, replace with loop --> <!-- TODO: Show content based on selected category, replace with loop -->
<div class="assets tiles"> <div class="assets tiles">
</div> </div>
<!-- Example selected category & asset --> <!-- Example selected category & asset -->
<div class="assets walls active"> <div class="assets walls active">
<a class="asset selected"> <a class="asset selected">
<span class="asset-name">Wall #1</span> <span class="asset-name">Wall #1</span>
</a> </a>
</div> </div>
<div class="assets weapons"> <div class="assets weapons">
</div> </div>
<div class="assets npcs"> <div class="assets npcs">
</div> </div>
<div class="asset-info"> <div class="asset-info">
<div class="image-container"> <div class="image-container">
<img src="/assets/placeholders/wall-1.png"/> <img src="/assets/placeholders/wall-1.png"/>
</div>
<div class="modal-form asset-manager">
<form class="form-fields">
<div class="form-field name">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1">
</div>
<div class="form-field">
<label for="originX">OriginX</label>
<input class="input-cyan" type="number" name="originX" placeholder="0">
</div>
<div class="form-field">
<label for="originY">OriginY</label>
<input class="input-cyan" type="number" name="originY" placeholder="0">
</div>
<div class="submit">
<button class="btn-cyan" type="submit">SAVE</button>
</div>
</form>
</div>
</div>
</div> </div>
</template> <div class="modal-form asset-manager">
</Modal> <form class="form-fields">
<div class="form-field name">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1">
</div>
<div class="form-field">
<label for="originX">OriginX</label>
<input class="input-cyan" type="number" name="originX" placeholder="0">
</div>
<div class="form-field">
<label for="originY">OriginY</label>
<input class="input-cyan" type="number" name="originY" placeholder="0">
</div>
<div class="submit">
<button class="btn-cyan" type="submit">SAVE</button>
</div>
</form>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
</script> </script>
<style lang="scss"> <style lang="scss">

47
src/components/utilities/GmPanel.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
<template #modalHeader>
<h3 class="modal-title">GM Panel</h3>
<div class="gm-selector">
<button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
<button class="btn-cyan" >Button 2</button>
<button class="btn-cyan" >Button 3</button>
</div>
</template>
<template #modalBody>
<div class="panel-body">
<AssetManager v-if="toggle == 'asset-manager'" />
</div>
</template>
</Modal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
let toggle = ref('asset-manager');
</script>
<style lang="scss">
@import '@/assets/scss/main';
.gm-selector {
display: flex;
gap: 5px;
align-self: end;
button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
padding: 6px 15px;
min-width: 100px;
}
}
</style>

4
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -13,7 +13,7 @@
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" /> <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
<Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" /> <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" /> <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
<AssetManager /> <GmPanel />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -31,7 +31,7 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import Decorations from '@/components/utilities/zoneEditor/Decorations.vue' import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone' import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
import type { Zone } from '@/types' import type { Zone } from '@/types'
import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue' import GmPanel from '@/components/utilities/GmPanel.vue'
// Phavuer logic // Phavuer logic
let scene = useScene() let scene = useScene()