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

zone editor stuff

Browse Source
This commit is contained in:
Dennis Postma 2024-06-14 21:17:45 +02:00
parent c49fcd7472
commit 4e708dbd61
4 changed files with 107 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,24 +10,17 @@
<button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')"> <button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
<option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
<option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
</select>
<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" data-value="tile">Tile</span> <span class="option" @click="setDrawMode('tile')">Tile</span>
<span class="option" data-value="wall">Wall</span> <span class="option" @click="setDrawMode('wall')">Wall</span>
<span class="option" data-value="decoration">Decoration</span> <span class="option" @click="setDrawMode('decoration')">Decoration</span>
<span class="option" data-value="teleport">Teleport</span> <span class="option" @click="setDrawMode('teleport')">Teleport</span>
<span class="option" data-value="blocking_tile">Blocking tile</span> <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div> </div>
</div> </div>
</button> </button>
@ -36,24 +29,17 @@
<button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')"> <button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
<option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
<option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
</select>
<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" data-value="tile">Tile</span> <span class="option" @click="setDrawMode('tile')">Tile</span>
<span class="option" data-value="wall">Wall</span> <span class="option" @click="setDrawMode('wall')">Wall</span>
<span class="option" data-value="decoration">Decoration</span> <span class="option" @click="setDrawMode('decoration')">Decoration</span>
<span class="option" data-value="teleport">Teleport</span> <span class="option" @click="setDrawMode('teleport')">Teleport</span>
<span class="option" data-value="blocking_tile">Blocking tile</span> <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div> </div>
</div> </div>
</button> </button>
@ -94,14 +80,12 @@ const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
let selectPencilOpen = ref(false); let selectPencilOpen = ref(false);
let selectEraserOpen = ref(false); let selectEraserOpen = ref(false);
// drawMode // drawMode
const drawMode = ref('tile') function setDrawMode(value: string) {
// on change of select
watch(drawMode, (value) => {
zoneEditorStore.setDrawMode(value) zoneEditorStore.setDrawMode(value)
}) selectPencilOpen.value = false
selectEraserOpen.value = false
}
function drawTile(pointer: Phaser.Input.Pointer) { function drawTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') { if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') {
@ -139,7 +123,7 @@ onBeforeUnmount(() => {
}) })
function clear() { function clear() {
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.zoneSettings?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zoneSettings?.height ?? 10 }, () => 0))) zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 0)))
} }
</script> </script>

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

@ -2,8 +2,8 @@
<TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" /> <TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" /> <Controls :layer="layer" />
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" /> <Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
<Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" /> <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
<Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" /> <Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" /> <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
</template> </template>
@ -28,7 +28,7 @@ let scene = useScene()
const socket = useSocketStore() const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
let tileMap = generateTilemap(scene, 10, 10); let tileMap = generateTilemap(scene, zoneEditorStore.width, zoneEditorStore.height);
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
@ -41,25 +41,25 @@ onBeforeMount(() => {
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId }) socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
}) })
const tiles = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 0)) const tiles = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
zoneEditorStore.setTiles(tiles) zoneEditorStore.setTiles(tiles)
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y))) zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
// Watch for changes in the zoneStore and update the layer // Watch for changes in the zoneStore and update the layer
watch( // watch(
() => zoneEditorStore.tiles, // () => zoneEditorStore.tiles,
() => { // () => {
// @TODO : change to zone for when loading other maps // // @TODO : change to zone for when loading other maps
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y))) // zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
}, // },
{ deep: true } // { deep: true }
) // )
socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => { socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
tileMap = generateTilemap(scene, data.width, data.height); tileMap = generateTilemap(scene, data.width, data.height);
zoneEditorStore.setName(data.name) zoneEditorStore.setName(data.name)
zoneEditorStore.setWidth(data.width) zoneEditorStore.setWidth(data.width)
zoneEditorStore.setTiles(data.tiles) zoneEditorStore.setTiles(data.tilesForPublic)
}) })
function eraser(tile: Phaser.Tilemaps.Tile) { function eraser(tile: Phaser.Tilemaps.Tile) {

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

@ -13,11 +13,11 @@
</div> </div>
<div> <div>
<label for="name">Width</label> <label for="name">Width</label>
<input v-model="width" name="name" id="name" /> <input v-model="width" name="name" id="name" type="number" />
</div> </div>
<div> <div>
<label for="name">Height</label> <label for="name">Height</label>
<input v-model="height" name="name" id="name" /> <input v-model="height" name="name" id="name" type="number" />
</div> </div>
<div> <div>
<label for="name">PVP enabled</label> <label for="name">PVP enabled</label>
@ -45,10 +45,10 @@ watch(name, (value) => {
}) })
watch(width, (value) => { watch(width, (value) => {
zoneEditorStore.setWidth(value) zoneEditorStore.setWidth(parseInt(value))
}) })
watch(height, (value) => { watch(height, (value) => {
zoneEditorStore.setHeight(value) zoneEditorStore.setHeight(parseInt(value))
}) })
</script> </script>

112
src/types.ts
View File

@ -3,47 +3,85 @@ export type Notification = {
message: string message: string
} }
// 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
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
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: ZoneTile[];
characters: Character[] decorations: ZoneDecoration[];
chats: Chat[] walls: ZoneWall[];
} characters: Character[];
chats: Chat[];
createdAt: Date;
updatedAt: Date;
};
// ZoneTile model
export type ZoneTile = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
// ZoneDecoration model
export type ZoneDecoration = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
// ZoneWall model
export type ZoneWall = {
id: number;
zone: Zone;
zoneId: number;
x: number;
y: number;
type: number;
};
// 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;
} };