noxious/client
4
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
src/components/utilities
AssetManager
AssetManager.vue
GmPanel.vue
zoneEditor
ZoneEditor.vue

8
src/components/utilities/AssetManager/AssetManager.vue

@ -1,9 +1,4 @@
<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 -->
@ -67,12 +62,9 @@
</div>
</div>
</div>
</template>
</Modal>
</template>
<script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
</script>
<style lang="scss">

47
src/components/utilities/GmPanel.vue Normal 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

@ -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()