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

asset mngr stuff

Browse Source
This commit is contained in:
Dennis Postma 2024-06-29 22:39:22 +02:00
parent 2313a0faea
commit 270b14d8e5
22 changed files with 316 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -2070,9 +2070,9 @@
} }
}, },
"node_modules/@vitest/runner/node_modules/yocto-queue": { "node_modules/@vitest/runner/node_modules/yocto-queue": {
"version": "1.0.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.0.tgz",
"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==", "integrity": "sha512-cMojmlnwkAgIXqga+2sXshlgrrcI0QEPJ5n58pEvtuFo4PaekfomlCudArDD7hj8Hkswjl0/x4eu4q+Xa0WFgQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -3448,9 +3448,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.814", "version": "1.4.815",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.814.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
"integrity": "sha512-GVulpHjFu1Y9ZvikvbArHmAhZXtm3wHlpjTMcXNGKl4IQ4jMQjlnz8yMQYYqdLHKi/jEL2+CBC2akWVCoIGUdw==", "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -5648,9 +5648,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.38", "version": "8.4.39",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -5668,7 +5668,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"nanoid": "^3.3.7", "nanoid": "^3.3.7",
"picocolors": "^1.0.0", "picocolors": "^1.0.1",
"source-map-js": "^1.2.0" "source-map-js": "^1.2.0"
}, },
"engines": { "engines": {

15
src/assets/scss/main.scss
View File

@ -47,13 +47,13 @@ input {
border: none; border: none;
background-color: transparent; background-color: transparent;
&[type="number"] { &[type='number'] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield; appearance: textfield;
} }
&[type=number]::-webkit-inner-spin-button, &[type='number']::-webkit-inner-spin-button,
&[type=number]::-webkit-outer-spin-button { &[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
} }
@ -64,7 +64,8 @@ input {
border: 1px solid $cyan; border: 1px solid $cyan;
background-color: rgba($white, 0.8); background-color: rgba($white, 0.8);
border-radius: 5px; border-radius: 5px;
&:focus, &:focus-visible { &:focus,
&:focus-visible {
outline: $cyan auto 2px; outline: $cyan auto 2px;
} }
} }
@ -82,7 +83,8 @@ button {
border-radius: 5px; border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2); text-shadow: 0 3px 6px rgba($black, 0.2);
&.active, &:hover { &.active,
&:hover {
background-color: $cyan; background-color: $cyan;
} }
} }
@ -93,7 +95,8 @@ button {
border-radius: 5px; border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2); text-shadow: 0 3px 6px rgba($black, 0.2);
&.active, &:hover { &.active,
&:hover {
background-color: $bordeaux; background-color: $bordeaux;
} }
} }

4
src/components/World.vue
View File

@ -23,7 +23,7 @@ import { generateTilemap } from '@/services/zone'
let scene = useScene() let scene = useScene()
let tilemapLayer = ref() let tilemapLayer = ref()
const tileMap = generateTilemap(scene, 10, 10); const tileMap = generateTilemap(scene, 10, 10)
let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
@ -77,7 +77,7 @@ socket.connection.on('character:moved', (data: CharacterType) => {
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
zoneStore.reset(); zoneStore.reset()
socket.connection.emit('character:zone:leave') socket.connection.emit('character:zone:leave')
socket.connection.off('character:zone:load') socket.connection.off('character:zone:load')
socket.connection.off('zone:character:join') socket.connection.off('zone:character:join')

3
src/components/gui/Chat.vue
View File

@ -26,7 +26,7 @@
background-color: rgba($white, 0.85); background-color: rgba($white, 0.85);
border: 2px solid $white; border: 2px solid $white;
color: $gray-2; color: $gray-2;
background-image: url("/assets/icons/submit-icon.svg"); background-image: url('/assets/icons/submit-icon.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30px; background-size: 30px;
background-position: calc(100% - 25px) center; background-position: calc(100% - 25px) center;
@ -37,7 +37,6 @@
left: 500px; left: 500px;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
} }
} }

22
src/components/utilities/Controls.vue
View File

@ -10,8 +10,8 @@ import { getTile, tileToWorldXY } from '@/services/zone'
import { useZoneStore } from '@/stores/zone' import { useZoneStore } from '@/stores/zone'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
const zoneStore = useZoneStore(); const zoneStore = useZoneStore()
const zoneEditorStore = useZoneEditorStore(); const zoneEditorStore = useZoneEditorStore()
const scene = useScene() const scene = useScene()
const props = defineProps({ const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer layer: Phaser.Tilemaps.TilemapLayer
@ -43,7 +43,7 @@ function onPointerMove(pointer: Phaser.Input.Pointer) {
scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove) scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
// Zone camera system // Zone camera system
function dragZone (pointer: Phaser.Input.Pointer) { function dragZone(pointer: Phaser.Input.Pointer) {
if (!pointer.isDown) return if (!pointer.isDown) return
cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom
cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom
@ -52,14 +52,16 @@ let cam = scene.cameras.main
scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
watch( watch(
() => zoneEditorStore.tool, () => { () => zoneEditorStore.tool,
() => {
// @TODO : change to zone for when loading other maps // @TODO : change to zone for when loading other maps
if (zoneEditorStore.tool === 'move') { if (zoneEditorStore.tool === 'move') {
scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
} else { } else {
scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone) scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
} }
}, { deep: true } },
{ deep: true }
) )
// Unload funcs // Unload funcs

49
src/components/utilities/GmPanel.vue
View File

@ -1,22 +1,20 @@
<template> <template>
<Modal :isModalOpen="true" :modal-width="1000" :modal-height="650"> <Modal :isModalOpen="true" :modal-width="1000" :modal-height="650">
<template #modalHeader> <template #modalHeader>
<h3 class="modal-title">GM Panel</h3> <h3 class="modal-title">GM Panel</h3>
<div class="gm-selector"> <div class="gm-selector">
<button class="btn-cyan">General</button> <button class="btn-cyan">General</button>
<button class="btn-cyan">Users</button> <button class="btn-cyan">Users</button>
<button class="btn-cyan">Items</button> <button class="btn-cyan">Chats</button>
<button class="btn-cyan">NPCs</button> <button class="btn-cyan active">Asset manager</button>
<button class="btn-cyan">Chats</button> </div>
<button class="btn-cyan active">AM</button> </template>
</div> <template #modalBody>
</template> <div class="container gm-panel">
<template #modalBody> <AssetManager v-if="toggle == 'asset-manager'" />
<div class="container gm-panel"> </div>
<AssetManager v-if="toggle == 'asset-manager'" /> </template>
</div> </Modal>
</template>
</Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -31,14 +29,13 @@ let toggle = ref('asset-manager')
@import '@/assets/scss/main'; @import '@/assets/scss/main';
.gm-selector { .gm-selector {
display: flex; display: flex;
gap: 5px; gap: 5px;
flex-wrap: wrap; flex-wrap: wrap;
button { button {
padding: 6px 15px; padding: 6px 15px;
min-width: 100px; min-width: 100px;
} }
} }
</style> </style>

1
src/components/utilities/Modal.vue
View File

@ -304,7 +304,6 @@ function handleResize() {
} }
} }
} }
} }
} }
} }

6
src/components/utilities/Notifications.vue
View File

@ -56,7 +56,7 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.modal-notif { .modal-notif {
margin: 15px; margin: 15px;
} }
</style> </style>

36
src/components/utilities/assetManager/AssetManager.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<div class="assets-container"> <div class="assets-container">
<div class="asset-categories"> <div class="asset-categories">
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'"> <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span class="category-name">Tiles</span> <span class="category-name">Tiles</span>
</a> </a>
<a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'"> <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span class="category-name">Objects</span> <span class="category-name">Objects</span>
</a> </a>
<a class="category"> <a class="category">
<span class="category-name">Weapons</span> <span class="category-name">Loot</span>
</a> </a>
<a class="category"> <a class="category">
<span class="category-name">NPC's</span> <span class="category-name">NPC's</span>
@ -20,7 +19,8 @@
<!-- Assets list --> <!-- Assets list -->
<div class="assets" ref="elementToScroll" @scroll="onScroll"> <div class="assets" ref="elementToScroll" @scroll="onScroll">
<TileList :name="selectedCategory" /> <TileList v-if="selectedCategory === 'tiles'" />
<ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
</div> </div>
<button class="back-to-top" v-show="hasScrolled" @click="toTop"> <button class="back-to-top" v-show="hasScrolled" @click="toTop">
@ -30,18 +30,21 @@
<!-- Asset details --> <!-- Asset details -->
<div class="asset-info"> <div class="asset-info">
<TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles'" /> <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue' import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue' import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore() const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles') const selectedCategory = ref('tiles')
const selectedTile = ref('') const selectedTile = ref('')
const hasScrolled = ref(false) const hasScrolled = ref(false)
@ -61,8 +64,8 @@ function toTop() {
elementToScroll.value.scrollTo({ elementToScroll.value.scrollTo({
top: 0, top: 0,
left: 0, left: 0,
behavior: "smooth", behavior: 'smooth'
}); })
} }
</script> </script>
@ -72,7 +75,7 @@ function toTop() {
.container { .container {
&.gm-panel { &.gm-panel {
height: 100%; height: 100%;
margin: 0!important; margin: 0 !important;
} }
} }
.assets-container { .assets-container {
@ -126,7 +129,7 @@ function toTop() {
} }
.assets { .assets {
overflow:auto; overflow: auto;
height: 100%; height: 100%;
width: 35%; width: 35%;
display: flex; display: flex;
@ -171,7 +174,6 @@ function toTop() {
.asset-details { .asset-details {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
img { img {
@ -185,11 +187,15 @@ function toTop() {
} }
} }
.asset-categories, .assets, .asset-info { .asset-categories,
.assets,
.asset-info {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.category, .asset, .image-container { .category,
.asset,
.image-container {
position: relative; position: relative;
padding: 10px; padding: 10px;
&::after { &::after {
@ -204,9 +210,7 @@ function toTop() {
&.selected { &.selected {
background-color: rgba($cyan, 0.8); background-color: rgba($cyan, 0.8);
} }
} }
} }
} }
</style> </style>

80
src/components/utilities/assetManager/partials/ObjectList.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div class="asset">
<input class="input-cyan search-field" placeholder="Search..." />
</div>
<!-- TODO: use the passed :name in props to switch out assets-->
<a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
<div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span>
</div>
</a>
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import config from '@/config'
import { onMounted, ref, defineProps } from 'vue'
const props = defineProps<{ name: string }>()
const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
if (!response) {
console.error('Failed to upload tile')
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
}
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/main';
.asset {
&.add-new {
display: flex;
align-items: center;
gap: 10px 20px;
flex-wrap: wrap;
.asset-name {
flex-shrink: 0;
}
}
.search-field {
width: calc(100% - 20px);
}
.file-upload {
background-color: rgba($cyan, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
padding: 6px 15px;
display: inline-flex;
&:hover {
background-color: $cyan;
cursor: pointer;
}
input[type='file'] {
display: none;
}
}
}
</style>

31
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -1,28 +1,41 @@
<template> <template>
<div class="image-container"> <div class="image-container">
<img src="/assets/placeholders/wall-1.png" /> <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}`" alt="Tile" />
</div> </div>
<div class="modal-form asset-manager"> <div class="modal-form asset-manager">
<form class="form-fields"> <form class="form-fields">
<div class="form-field name"> <div class="form-field name">
<label for="name">Name</label> <label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" /> <input class="input-cyan" type="text" name="name" placeholder="E.g. grass" />
</div> </div>
<div class="submit"> <div class="submit">
<button class="btn-cyan" type="submit">Save</button> <button class="btn-cyan" type="submit">Save</button>
<button class="btn-bordeaux" type="submit">Remove</button> <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
</div> </div>
</form> </form>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const properties = defineProps({ import config from '@/config'
tile: String import { useAssetManagerStore } from '@/stores/assetManager'
}); import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
function removeTile() {
socket.connection.emit('gm:tile:remove', { tile: assetManagerStore.selectedTile }, (response: boolean) => {
if (!response) {
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
assetManagerStore.setTileList(response)
assetManagerStore.setSelectedTile('')
})
})
}
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>

31
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -1,34 +1,28 @@
<template> <template>
<div class="asset">
<input class="input-cyan search-field" placeholder="Search..." />
</div>
<div class="asset add-new"> <div class="asset add-new">
<span class="asset-name">Upload new</span>
<label for="upload-asset" class="file-upload"> <label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Choose file Upload tile(s)
</label> </label>
<input class="input-cyan search-field" placeholder="Search..." />
</div> </div>
<a class="asset" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<!-- TODO: use the passed :name in props to switch out assets-->
<a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
<div class="asset-details"> <div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" /> <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" alt="Tile" />
<span class="asset-name">{{ tile }}</span> <span class="asset-name">{{ tile }}</span>
</div> </div>
</a> </a>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {useSocketStore} from '@/stores/socket'
import config from '@/config' import config from '@/config'
import { onMounted, ref, defineProps } from 'vue' import { useSocketStore } from '@/stores/socket'
import { onMounted, ref } from 'vue'
const props = defineProps<{ name: string }>() import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore() const socket = useSocketStore()
const tileUploadField = ref(null) const tileUploadField = ref(null)
const tiles = ref() const assetManagerStore = useAssetManagerStore()
const handleFileUpload = (e: Event) => { const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files const files = (e.target as HTMLInputElement).files
@ -39,14 +33,14 @@ const handleFileUpload = (e: Event) => {
return return
} }
socket.connection.emit('gm:tile:list', {}, (response: string[]) => { socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response assetManagerStore.setTileList(response)
}) })
}) })
} }
onMounted(() => { onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => { socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response assetManagerStore.setTileList(response)
}) })
}) })
</script> </script>
@ -55,9 +49,10 @@ onMounted(() => {
@import '@/assets/scss/main'; @import '@/assets/scss/main';
.asset { .asset {
cursor: pointer;
&.add-new { &.add-new {
display: flex; display: flex;
align-items: center;
gap: 10px 20px; gap: 10px 20px;
flex-wrap: wrap; flex-wrap: wrap;
.asset-name { .asset-name {
@ -79,7 +74,7 @@ onMounted(() => {
background-color: $cyan; background-color: $cyan;
cursor: pointer; cursor: pointer;
} }
input[type="file"] { input[type='file'] {
display: none; display: none;
} }
} }

71
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -6,9 +6,8 @@
</template> </template>
<template #modalBody> <template #modalBody>
<div class="container tiles"> <div class="container tiles">
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
<div class="tiles"> <div class="tiles">
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" /> <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
</div> </div>
</div> </div>
</template> </template>
@ -17,73 +16,22 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import config from '@/config' import config from '@/config'
import Modal from '@/components/utilities/Modal.vue' import { ref, onMounted } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
import JSZip from 'jszip' import { useSocketStore } from '@/stores/socket'
import Modal from '@/components/utilities/Modal.vue'
const tileWidth = config.tile_size.x const socket = useSocketStore()
const tileHeight = config.tile_size.y const tiles = ref<string[]>([])
const tiles = ref<number[][]>([])
const selectedTile = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false) const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
// Hardcoded image path
const imagePath = '/assets/zone/tiles.png'
const loadImage = (src: string): Promise<HTMLImageElement> => {
return new Promise((resolve) => {
const img = new Image()
img.onload = () => resolve(img)
img.src = src
})
}
const splitTiles = (img: HTMLImageElement) => {
if (!canvas.value) {
console.error('Canvas not found')
return
}
const ctx = canvas.value.getContext('2d')
if (!ctx) {
console.error('Failed to get canvas context')
return
}
const tilesetWidth = img.width
const tilesetHeight = img.height
const columns = Math.floor(tilesetWidth / tileWidth)
const rows = Math.floor(tilesetHeight / tileHeight)
tiles.value = []
selectedTile.value = null
for (let row = 0; row < rows; row++) {
for (let col = 0; col < columns; col++) {
const x = col * tileWidth
const y = row * tileHeight
ctx.clearRect(0, 0, tileWidth, tileHeight)
ctx.drawImage(img, x, y, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight)
const tileDataURL = canvas.value.toDataURL()
tiles.value.push(tileDataURL)
}
}
}
const selectTile = (index: number) => {
selectedTile.value = index
}
onMounted(async () => { onMounted(async () => {
isModalOpen.value = true isModalOpen.value = true
const img = await loadImage(imagePath) socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
await nextTick() tiles.value = response.map((tile) => `${config.server_endpoint}/assets/tiles/${tile}`)
splitTiles(img) })
}) })
</script> </script>
@ -107,5 +55,4 @@ onMounted(async () => {
.tiles img.selected { .tiles img.selected {
border: 2px solid $red; border: 2px solid $red;
} }
</style> </style>

8
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -13,7 +13,7 @@
<div class="select" v-if="zoneEditorStore.tool === 'pencil'"> <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen"> <div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/> <img src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'"> <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="option" @click="setDrawMode('tile')">Tile</span> <span class="option" @click="setDrawMode('tile')">Tile</span>
@ -31,7 +31,7 @@
<div class="select" v-if="zoneEditorStore.tool === 'eraser'"> <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen"> <div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/> <img src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="options" v-show="selectEraserOpen"> <div class="options" v-show="selectEraserOpen">
<span class="option" @click="setDrawMode('tile')">Tile</span> <span class="option" @click="setDrawMode('tile')">Tile</span>
@ -75,8 +75,8 @@ const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'save']) const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
// track select state // track select state
let selectPencilOpen = ref(false); let selectPencilOpen = ref(false)
let selectEraserOpen = ref(false); let selectEraserOpen = ref(false)
// drawMode // drawMode
function setDrawMode(value: string) { function setDrawMode(value: string) {

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

@ -2,11 +2,11 @@
<TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" /> <TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="exampleTiles" /> <Controls :layer="exampleTiles" />
<!-- @TODO: inside asset manager we need to be able to set the originX and originY per individial asset --> <!-- @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
<Container> <Container>
<Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" /> <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
<Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" /> <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
<Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" /> <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
</Container> </Container>
<Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" /> <Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
@ -38,7 +38,6 @@ let scene = useScene()
const socket = useSocketStore() const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
// Tile tilemap // Tile tilemap
const tileMapData = new Phaser.Tilemaps.MapData({ const tileMapData = new Phaser.Tilemaps.MapData({
width: zoneEditorStore.width, width: zoneEditorStore.width,
@ -48,18 +47,17 @@ const tileMapData = new Phaser.Tilemaps.MapData({
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D format: Phaser.Tilemaps.Formats.ARRAY_2D
}) })
let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData); let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData)
let tilesImg = tileTilemap.addTilesetImage('default', 'tiles') let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1)) const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
onMounted(() => { onMounted(() => {})
}) const pos = tileToWorldXY(exampleTiles, 1, 1)
const pos = tileToWorldXY(exampleTiles, 1, 1); const pos2 = tileToWorldXY(exampleTiles, 1, 2)
const pos2 = tileToWorldXY(exampleTiles, 1, 2); const pos3 = tileToWorldXY(exampleTiles, 2, 1)
const pos3 = tileToWorldXY(exampleTiles, 2, 1); console.log(pos)
console.log(pos);
// center camera // center camera
const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2 const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2 const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
@ -91,12 +89,12 @@ onBeforeMount(() => {
function eraser(tile: Phaser.Tilemaps.Tile) { function eraser(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') { if (zoneEditorStore.drawMode === 'tile') {
tiles.putTileAt(0, tile.x, tile.y) tiles.putTileAt(0, tile.x, tile.y)
zoneEditorStore.updateTile(tile.x, tile.y, 0); zoneEditorStore.updateTile(tile.x, tile.y, 0)
} }
if (zoneEditorStore.drawMode === 'wall') { if (zoneEditorStore.drawMode === 'wall') {
walls.putTileAt(0, tile.x, tile.y ) walls.putTileAt(0, tile.x, tile.y)
zoneEditorStore.updateWall(tile.x, tile.y, 0); zoneEditorStore.updateWall(tile.x, tile.y, 0)
} }
} }
@ -104,14 +102,14 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') { if (zoneEditorStore.drawMode === 'tile') {
if (zoneEditorStore.selectedTile === null) return if (zoneEditorStore.selectedTile === null) return
tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y) tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile); zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
} }
if (zoneEditorStore.drawMode === 'wall') { if (zoneEditorStore.drawMode === 'wall') {
// @TODO fix position // @TODO fix position
if (zoneEditorStore.selectedWall === null) return if (zoneEditorStore.selectedWall === null) return
walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y) walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y)
zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall); zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall)
} }
} }
@ -127,7 +125,7 @@ function save() {
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
zoneEditorStore.reset(); zoneEditorStore.reset()
}) })
/** /**

20
src/screens/Game.vue
View File

@ -4,16 +4,16 @@
<Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active"> <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<div class="top-ui"> <div class="top-ui">
<Hud /> <Hud />
</div> </div>
<div class="center-ui"> <div class="center-ui">
<World /> <World />
</div> </div>
<div class="bottom-ui"> <div class="bottom-ui">
<Chat /> <Chat />
<Menubar /> <Menubar />
</div> </div>
</Scene> </Scene>
</Game> </Game>
<Game class="game" :config="gameConfig" @create="createGame" v-else> <Game class="game" :config="gameConfig" @create="createGame" v-else>

4
src/services/zone.ts
View File

@ -23,6 +23,4 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
return { position_x, position_y } return { position_x, position_y }
} }
export function generateTilemap(scene: Phaser.Scene, width: number, height: number) { export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}
}

20
src/stores/assetManager.ts Normal file
View File

@ -0,0 +1,20 @@
import { defineStore } from 'pinia'
export const useAssetManagerStore = defineStore('assetManager', {
state: () => ({
tileList: [] as string[],
selectedTile: ''
}),
actions: {
setTileList(tiles: string[]) {
this.tileList = tiles
},
setSelectedTile(tile: string) {
this.selectedTile = tile
},
reset() {
this.tileList = []
this.selectedTile = ''
}
}
})

6
src/stores/zoneEditor.ts
View File

@ -10,7 +10,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
decorations: [] as number[][], decorations: [] as number[][],
tool: 'move', tool: 'move',
drawMode: 'tile', drawMode: 'tile',
selectedTile: null, selectedTile: '',
selectedWall: null, selectedWall: null,
selectedDecoration: null, selectedDecoration: null,
isSettingsModalShown: false isSettingsModalShown: false
@ -46,7 +46,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
setDrawMode(mode: string) { setDrawMode(mode: string) {
this.drawMode = mode this.drawMode = mode
}, },
setSelectedTile(tile: any) { setSelectedTile(tile: string) {
this.selectedTile = tile this.selectedTile = tile
}, },
setSelectedWall(wall: any) { setSelectedWall(wall: any) {
@ -65,7 +65,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
this.tiles = [] this.tiles = []
this.tool = 'move' this.tool = 'move'
this.drawMode = 'tile' this.drawMode = 'tile'
this.selectedTile = null this.selectedTile = ''
this.selectedWall = null this.selectedWall = null
this.selectedDecoration = null this.selectedDecoration = null
this.isSettingsModalShown = false this.isSettingsModalShown = false

94
src/types.ts
View File

@ -5,62 +5,62 @@ export type Notification = {
// User model // User model
export type User = { export type User = {
id: number; id: number
username: string; username: string
password: string; password: string
characters: Character[]; characters: Character[]
}; }
// Character model // Character model
export type Character = { export type Character = {
id: number; id: number
userId: number; userId: number
user: User; user: User
name: string; name: string
hitpoints: number; hitpoints: number
mana: number; mana: number
level: number; level: number
experience: number; experience: number
role: string; role: string
position_x: number; position_x: number
position_y: number; position_y: number
rotation: number; rotation: number
zoneId: number; zoneId: number
zone: Zone; zone: Zone
chats: Chat[]; chats: Chat[]
}; }
// Zone model // Zone model
export type Zone = { export type Zone = {
id: number; id: number
name: string; name: string
width: number; width: number
height: number; height: number
tiles: number[][]; tiles: number[][]
walls: number[][]; walls: number[][]
decorations: ZoneDecoration[]; decorations: ZoneDecoration[]
characters: Character[]; characters: Character[]
chats: Chat[]; chats: Chat[]
createdAt: Date; createdAt: Date
updatedAt: Date; updatedAt: Date
}; }
export type ZoneDecoration = { export type ZoneDecoration = {
id: number; id: number
zoneId: number; zoneId: number
zone: Zone; zone: Zone
type: number; type: number
position_x: number; position_x: number
position_y: number; position_y: number
} }
// Chat model // Chat model
export type Chat = { export type Chat = {
id: number; id: number
characterId: number; characterId: number
character: Character; character: Character
zoneId: number; zoneId: number
zone: Zone; zone: Zone
message: string; message: string
createdAt: Date; createdAt: Date
}; }