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>
<Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
<template #modalHeader>
<h3 class="modal-title">Asset manager</h3>
</template>
<template #modalBody>
<div class="assets-container">
<div class="asset-categories">
<!-- TODO: Asset categories, replace with loop -->
<a class="category">
<span class="category-name">Tiles</span>
</a>
<!-- Example selected category -->
<a class="category selected">
<span class="category-name">Walls</span>
</a>
<a class="category">
<span class="category-name">Weapons</span>
</a>
<a class="category">
<span class="category-name">NPC's</span>
</a>
</div>
<div class="assets-container">
<div class="asset-categories">
<!-- TODO: Asset categories, replace with loop -->
<a class="category">
<span class="category-name">Tiles</span>
</a>
<!-- Example selected category -->
<a class="category selected">
<span class="category-name">Walls</span>
</a>
<a class="category">
<span class="category-name">Weapons</span>
</a>
<a class="category">
<span class="category-name">NPC's</span>
</a>
</div>
<!-- TODO: Show content based on selected category, replace with loop -->
<div class="assets tiles">
</div>
<!-- Example selected category & asset -->
<div class="assets walls active">
<a class="asset selected">
<span class="asset-name">Wall #1</span>
</a>
</div>
<div class="assets weapons">
</div>
<div class="assets npcs">
<!-- TODO: Show content based on selected category, replace with loop -->
<div class="assets tiles">
</div>
<!-- Example selected category & asset -->
<div class="assets walls active">
<a class="asset selected">
<span class="asset-name">Wall #1</span>
</a>
</div>
<div class="assets weapons">
</div>
<div class="assets npcs">
</div>
</div>
<div class="asset-info">
<div class="image-container">
<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 class="asset-info">
<div class="image-container">
<img src="/assets/placeholders/wall-1.png"/>
</div>
</template>
</Modal>
<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>
</template>
<script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
</script>
<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'" />
<Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
<AssetManager />
<GmPanel />
</template>
<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 { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
import type { Zone } from '@/types'
import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
import GmPanel from '@/components/utilities/GmPanel.vue'
// Phavuer logic
let scene = useScene()