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

Refractor socket store into game store

Browse Source
This commit is contained in:
Dennis Postma
2024-07-12 11:58:06 +02:00
parent 6a1b2dd107
commit 79bef033f3
22 changed files with 161 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/World.vue
View File

@ -1,3 +1,5 @@
<template>
<TilemapLayerC :tilemap="tileMap" :tileset="zoneStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" />
@ -15,7 +17,7 @@ import Character from '@/components/sprites/Character.vue'
import { type Character as CharacterType } from '@/types'
import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { useZoneStore } from '@/stores/zone'
// Phavuer logic
@ -33,7 +35,7 @@ scene.cameras.main.centerOn(centerX, centerY)
// Multiplayer / server logics
const zoneStore = useZoneStore()
const socket = useSocketStore()
const gameStore = useGameStore()
// Watch for changes in the zoneStore and update the layer
watch(
@ -47,11 +49,11 @@ watch(
// Load the zone from the server
onBeforeMount(() => {
socket.connection.emit('character:zone:request', { zoneId: socket.character.zoneId })
gameStore.connection.emit('character:zone:request', { zoneId: gameStore.character.zoneId })
})
// Listen for the zone event from the server and load the zone
socket.connection.on('character:zone:load', (data) => {
gameStore.connection.on('character:zone:load', (data) => {
console.log('character:zone:load', data)
zoneStore.setTiles(data.zone.tiles)
@ -60,28 +62,28 @@ socket.connection.on('character:zone:load', (data) => {
})
// Listen for player join events
socket.connection.on('zone:character:join', (data: CharacterType) => {
gameStore.connection.on('zone:character:join', (data: CharacterType) => {
console.log('character:zone:join', data)
zoneStore.addCharacter(data)
})
// Listen for user:disconnect
socket.connection.on('zone:character:leave', (data: CharacterType) => {
gameStore.connection.on('zone:character:leave', (data: CharacterType) => {
zoneStore.removeCharacter(data)
})
socket.connection.on('character:moved', (data: CharacterType) => {
gameStore.connection.on('character:moved', (data: CharacterType) => {
console.log('character:moved', data)
zoneStore.updateCharacter(data)
})
onBeforeUnmount(() => {
zoneStore.reset()
socket.connection.emit('character:zone:leave')
socket.connection.off('character:zone:load')
socket.connection.off('zone:character:join')
socket.connection.off('user:disconnect')
socket.connection.off('character:moved')
gameStore.connection.emit('character:zone:leave')
gameStore.connection.off('character:zone:load')
gameStore.connection.off('zone:character:join')
gameStore.connection.off('user:disconnect')
gameStore.connection.off('character:moved')
})
/**

16
src/components/gui/Hud.vue
View File

@ -7,16 +7,16 @@
<div class="absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
<span class="text-sm">lvl. {{ game.character.level }}</span>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="mp">MP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="game.character.mana" max="100">{{ socket.character.mana }}%</progress>
</div>
</div>
</div>
@ -31,12 +31,12 @@
<div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
</div>
</div>
@ -44,9 +44,9 @@
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
const socket = useSocketStore()
const gameStore = useGameStore()
</script>
<style scoped lang="scss">

6
src/components/sprites/Character.vue
View File

@ -23,11 +23,11 @@
<script lang="ts" setup>
import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
import { onBeforeMount, onMounted, ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { type Character as CharacterT } from '@/types'
import { getTile, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
const socket = useSocketStore()
const gameStore = useGameStore()
const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer,
@ -60,7 +60,7 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
return
}
socket.connection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
gameStore.connection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
//Directions for player sprites + animations
if (px < 0 && py > 0) {

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

@ -11,12 +11,12 @@
<script setup lang="ts">
import { useNotificationStore } from '@/stores/notifications'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue'
import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
const notifications = useNotificationStore()
const socket = useSocketStore()
const gameStore = useGameStore()
function closeNotification(id: string) {
notifications.removeNotification(id)
@ -31,13 +31,13 @@ function setupNotificationListener(connection: any) {
}
onBeforeMount(() => {
const connection = socket.connection
const connection = gameStore.connection
if (connection) {
setupNotificationListener(connection)
} else {
// Watch for changes in the socket connection
watch(
() => socket.connection,
() => gameStore.connection,
(newConnection) => {
if (newConnection) setupNotificationListener(newConnection)
}
@ -46,7 +46,7 @@ onBeforeMount(() => {
})
onBeforeUnmount(() => {
const connection = socket.connection
const connection = gameStore.connection
if (connection) {
connection.off('notification')
}

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

@ -42,14 +42,14 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
import ObjectDetails from '@/components/utilities/assetManager/partials/ObjectDetails.vue'
import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore()
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles')

10
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -31,10 +31,10 @@ import type { Object } from '@/types'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import config from '@/config'
const socket = useSocketStore()
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const zoneEditorStore = useZoneEditorStore()
@ -62,7 +62,7 @@ watch(selectedObject, (object: Object | null) => {
})
function removeObject() {
socket.connection.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
gameStore.connection.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
if (!response) {
console.error('Failed to remove object')
return
@ -72,7 +72,7 @@ function removeObject() {
}
function refreshObjectList() {
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
assetManagerStore.setSelectedObject(null)
@ -89,7 +89,7 @@ function saveObject() {
return
}
socket.connection.emit(
gameStore.connection.emit(
'gm:object:update',
{
id: selectedObject.value.id,

10
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -20,13 +20,13 @@
<script setup lang="ts">
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useAssetStore } from '@/stores/assets'
import type { Object } from '@/types'
const socket = useSocketStore()
const gameStore = useGameStore()
const objectUploadField = ref(null)
const assetManagerStore = useAssetManagerStore()
const assetStore = useAssetStore()
@ -36,7 +36,7 @@ const searchQuery = ref('')
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:object:upload', files, (response: boolean) => {
gameStore.connection.emit('gm:object:upload', files, (response: boolean) => {
if (!response) {
if (config.development) console.error('Failed to upload object')
return
@ -44,7 +44,7 @@ const handleFileUpload = (e: Event) => {
assetStore.fetchAssets()
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
})
})
@ -63,7 +63,7 @@ const filteredObjects = computed(() => {
})
onMounted(() => {
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
})
})

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

@ -27,11 +27,11 @@ import type { Tile } from '@/types'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import config from '@/config'
import ChipsInput from '@/components/forms/ChipsInput.vue'
const socket = useSocketStore()
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const zoneEditorStore = useZoneEditorStore()
@ -56,7 +56,7 @@ watch(selectedTile, (tile: Tile | null) => {
})
function removeTile() {
socket.connection.emit('gm:tile:remove', { tile: selectedTile.value?.id }, (response: boolean) => {
gameStore.connection.emit('gm:tile:remove', { tile: selectedTile.value?.id }, (response: boolean) => {
if (!response) {
console.error('Failed to remove tile')
return
@ -66,7 +66,7 @@ function removeTile() {
}
function refreshTileList() {
socket.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
gameStore.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
assetManagerStore.setSelectedTile(null)
@ -83,7 +83,7 @@ function saveTile() {
return
}
socket.connection.emit(
gameStore.connection.emit(
'gm:tile:update',
{
id: selectedTile.value.id,

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

@ -20,13 +20,13 @@
<script setup lang="ts">
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useAssetStore } from '@/stores/assets'
import type { Tile } from '@/types'
const socket = useSocketStore()
const gameStore = useGameStore()
const tileUploadField = ref(null)
const assetManagerStore = useAssetManagerStore()
const assetStore = useAssetStore()
@ -36,7 +36,7 @@ const searchQuery = ref('')
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
gameStore.connection.emit('gm:tile:upload', files, (response: boolean) => {
if (!response) {
if (config.development) console.error('Failed to upload tile')
return
@ -44,7 +44,7 @@ const handleFileUpload = (e: Event) => {
assetStore.fetchAssets()
socket.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
gameStore.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
})
})
@ -63,7 +63,7 @@ const filteredTiles = computed(() => {
})
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
gameStore.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
})
})

6
src/components/utilities/zoneEditor/CreateZone.vue
View File

@ -35,11 +35,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import type { Zone } from '@/types'
const socket = useSocketStore()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const name = ref('')
@ -47,7 +47,7 @@ const width = ref(0)
const height = ref(0)
function submit() {
socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
zoneEditorStore.setZoneList(response)
})
zoneEditorStore.toggleCreateZoneModal()

6
src/components/utilities/zoneEditor/Objects.vue
View File

@ -50,11 +50,11 @@
import config from '@/config'
import { ref, onMounted, computed, watch } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue'
import type { Object } from '@/types'
const socket = useSocketStore()
const gameStore = useGameStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
@ -77,7 +77,7 @@ onMounted(async () => {
zoneEditorStore.setObjectDepth(0)
isModalOpen.value = true
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
zoneEditorStore.setObjectList(response)
})
})

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

@ -46,11 +46,11 @@
import config from '@/config'
import { ref, onMounted, computed, watch } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue'
import type { Tile } from '@/types'
const socket = useSocketStore()
const gameStore = useGameStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
@ -66,7 +66,7 @@ const filteredTiles = computed(() => {
onMounted(async () => {
isModalOpen.value = true
socket.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
gameStore.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
zoneEditorStore.setTileList(response)
})
})

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

@ -22,7 +22,7 @@ import config from '@/config'
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
@ -43,7 +43,7 @@ function uuidv4() {
}
const scene = useScene()
const socket = useSocketStore()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore()
@ -192,9 +192,9 @@ function save() {
}))
};
socket.connection.emit('gm:zone_editor:zone:update', data);
gameStore.connection.emit('gm:zone_editor:zone:update', data);
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
zoneEditorStore.setZone(response)
});

10
src/components/utilities/zoneEditor/ZoneList.vue
View File

@ -30,13 +30,13 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue'
import type { Zone } from '@/types'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import CreateZone from '@/components/utilities/zoneEditor/CreateZone.vue'
const socket = useSocketStore()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
onMounted(async () => {
@ -44,21 +44,21 @@ onMounted(async () => {
})
function fetchZones() {
socket.connection.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
gameStore.connection.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
zoneEditorStore.setZoneList(response)
})
}
function loadZone(id: number) {
console.log('loadZone', id)
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
zoneEditorStore.setZone(response)
});
zoneEditorStore.toggleZoneListModal()
}
function deleteZone(id: number) {
socket.connection.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
gameStore.connection.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
fetchZones()
})
}