noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.vue
View File

@ -16,26 +16,29 @@ import Register from '@/screens/Register.vue'
import Characters from '@/screens/Characters.vue'
import Game from '@/screens/Game.vue'
import { storeToRefs } from 'pinia'
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore()
const gameStore = useGameStore()
const {screen} = storeToRefs(gameStore);
socket.$subscribe(
gameStore.$subscribe(
(mutation, state) => {
if (!state.connection) {
screen.value = 'login'
}
let newScreen = screen.value;
if (state.token && state.connection) {
screen.value = 'characters'
if (!state.connection) {
newScreen = 'login';
} else if (state.token && state.connection) {
newScreen = 'characters';
if (state.character) {
screen.value = 'game'
newScreen = 'game';
}
}
// Update screen.value only if it's different from the new state
if (screen.value !== newScreen) {
screen.value = newScreen;
}
},
{ detached: true }
)
);
</script>

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

2
src/config.ts
View File

@ -1,4 +1,4 @@
const dev: boolean = false;
const dev: boolean = true;
export default {
name: 'New Quest',

27
src/screens/Characters.vue
View File

@ -65,24 +65,24 @@
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import { type Character as CharacterT } from '@/types'
const isLoading = ref(true)
const characters = ref([])
const socket = useSocketStore()
const gameStore = useGameStore()
// Fetch characters
socket.connection.on('character:list', (data: any) => {
gameStore.connection?.on('character:list', (data: any) => {
characters.value = data
})
onMounted(() => {
// wait 1.5 sec
setTimeout(() => {
socket.connection.emit('character:list')
gameStore.connection?.emit('character:list')
isLoading.value = false
}, 1000)
})
@ -91,30 +91,31 @@ onMounted(() => {
const selected_character = ref(null)
function select_character() {
if (!selected_character.value) return
socket.connection.emit('character:connect', { character_id: selected_character.value })
socket.connection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
console.log('selected_character', selected_character.value)
gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
}
// Delete character logics
function delete_character(character_id: number) {
if (!character_id) return
socket.connection.emit('character:delete', { character_id: character_id })
gameStore.connection?.emit('character:delete', { character_id: character_id })
}
// Create character logics
const isModalOpen = ref(false)
const name = ref('')
function create() {
socket.connection.on('character:create:success', (data: CharacterT) => {
socket.setCharacter(data)
gameStore.connection?.on('character:create:success', (data: CharacterT) => {
gameStore.setCharacter(data)
isModalOpen.value = false
})
socket.connection.emit('character:create', { name: name.value })
gameStore.connection?.emit('character:create', { name: name.value })
}
onBeforeUnmount(() => {
socket.connection.off('character:list')
socket.connection.off('character:connect')
socket.connection.off('character:create:success')
gameStore.connection?.off('character:list')
gameStore.connection?.off('character:connect')
gameStore.connection?.off('character:create:success')
})
</script>

8
src/screens/Game.vue
View File

@ -31,7 +31,7 @@ import 'phaser'
import { onUnmounted, toRaw, watch, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { Game, Scene } from 'phavuer'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useAssetStore } from '@/stores/assets'
import World from '@/components/World.vue'
@ -42,19 +42,19 @@ import GmTools from '@/components/utilities/GmTools.vue'
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
import GmPanel from '@/components/utilities/GmPanel.vue'
const socket = useSocketStore()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore()
const isLoaded = ref(false)
const { assets } = storeToRefs(assetStore)
onUnmounted(() => {
socket.disconnectSocket()
gameStore.disconnectSocket()
})
// On page close
addEventListener('beforeunload', () => {
socket.disconnectSocket()
gameStore.disconnectSocket()
})
const gameConfig = {

12
src/screens/Login.vue
View File

@ -32,7 +32,7 @@
import { onMounted, ref } from 'vue'
import { login, register } from '@/services/authentication'
import { useNotificationStore } from '@/stores/notifications'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { useAssetStore } from '@/stores/assets'
const bgm = ref('bgm')
@ -41,7 +41,7 @@ if (bgm.value.paused) {
addEventListener('keydown', () => bgm.value.play())
}
const socket = useSocketStore()
const gameStore = useGameStore()
const notifications = useNotificationStore()
const assetStore = useAssetStore()
const username = ref('')
@ -72,8 +72,8 @@ async function loginFunc() {
return
}
socket.setToken(response.token)
await socket.initConnection()
gameStore.setToken(response.token)
await gameStore.initConnection()
}
async function registerFunc() {
@ -91,7 +91,7 @@ async function registerFunc() {
return
}
socket.setToken(response.token)
await socket.initConnection()
gameStore.setToken(response.token)
await gameStore.initConnection()
}
</script>

6
src/services/authentication.ts
View File

@ -1,9 +1,9 @@
import axios from 'axios'
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
import { useCookies } from '@vueuse/integrations/useCookies'
export async function register(username: string, password: string, socketStore = useSocketStore()) {
export async function register(username: string, password: string, gameStore = useGameStore()) {
try {
const response = await axios.post(`${config.server_endpoint}/register`, { username, password })
useCookies().set('token', response.data.token as string)
@ -13,7 +13,7 @@ export async function register(username: string, password: string, socketStore =
}
}
export async function login(username: string, password: string, socketStore = useSocketStore()) {
export async function login(username: string, password: string, gameStore = useGameStore()) {
try {
const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
useCookies().set('token', response.data.token as string, {

50
src/stores/game.ts
View File

@ -1,12 +1,62 @@
import { defineStore } from 'pinia'
import { io, Socket } from 'socket.io-client'
import type { Character, User } from '@/types'
import config from '@/config'
import { useCookies } from '@vueuse/integrations/useCookies'
export const useGameStore = defineStore('game', {
state: () => ({
screen: 'login',
token: '' as string | null,
connection: null as Socket | null,
user: null as User | null,
character: null as Character | null
}),
actions: {
setScreen(screen: string) {
this.screen = screen
},
initConnection() {
this.connection = io(config.server_endpoint, {
secure: !config.development,
withCredentials: true,
transports: ['websocket'],
reconnectionAttempts: 5
})
// Let the server know the user is logged in
this.connection.emit('login')
// set user
this.connection.on('logged_in', (user: User) => {
this.setUser(user)
})
// When we can't reconnect, disconnect
this.connection.on('reconnect_failed', () => {
this.disconnectSocket()
})
},
disconnectSocket() {
if (!this.connection) return
this.connection.disconnect()
this.connection = null
this.token = null
this.user = null
this.character = null
useCookies().remove('token')
},
setToken(token: string) {
this.token = token
},
setUser(user: User | null) {
this.user = user
},
setCharacter(character: Character | null) {
this.character = character
}
}
})

65
src/stores/socket.ts
View File

@ -1,65 +0,0 @@
import { defineStore, type StoreDefinition } from 'pinia'
import { io, Socket } from 'socket.io-client'
import { useCookies } from '@vueuse/integrations/useCookies'
import config from '@/config'
import type { Character, User } from '@/types'
export const useSocketStore: StoreDefinition = defineStore('socket', {
state: () => ({
token: '' as string | null,
connection: null as Socket | null,
user: null as User | null,
character: null as Character | null
}),
actions: {
initConnection() {
this.connection = io(config.server_endpoint, {
secure: !config.development,
withCredentials: true,
transports: ['websocket'],
reconnectionAttempts: 5
})
// Let the server know the user is logged in
this.connection.emit('login')
// set user
this.connection.on('logged_in', (user: User) => {
this.setUser(user)
})
// When we can't reconnect, disconnect
this.connection.on('reconnect_failed', () => {
this.disconnectSocket()
})
},
disconnectSocket() {
if (!this.connection) return
this.connection.disconnect()
this.connection = null
this.token = null
this.user = null
this.character = null
useCookies().remove('token')
},
setToken(token: string) {
this.token = token
},
setUser(user: User | null) {
this.user = user
},
setCharacter(character: Character | null) {
this.character = character
}
}
})
/**
* Resources:
* https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
* https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
* https://pinia.vuejs.org/
*/