Refractor socket store into game store

src/App.vue

@@ -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) {
+    let newScreen = screen.value;
-      screen.value = 'login'
-    }
 
-    if (state.token && state.connection) {
+    if (!state.connection) {
-      screen.value = 'characters'
+      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>

src/components/World.vue

@@ -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')
+  gameStore.connection.emit('character:zone:leave')
-  socket.connection.off('character:zone:load')
+  gameStore.connection.off('character:zone:load')
-  socket.connection.off('zone:character:join')
+  gameStore.connection.off('zone:character:join')
-  socket.connection.off('user:disconnect')
+  gameStore.connection.off('user:disconnect')
-  socket.connection.off('character:moved')
+  gameStore.connection.off('character:moved')
 })
 
 /**

src/components/gui/Hud.vue

@@ -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-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
-          <span class="text-sm">lvl. {{ socket.character.level }}</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">

src/components/sprites/Character.vue

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

src/components/utilities/Notifications.vue

@@ -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')
   }

src/components/utilities/assetManager/AssetManager.vue

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

src/components/utilities/assetManager/partials/ObjectDetails.vue

@@ -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,

src/components/utilities/assetManager/partials/ObjectList.vue

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

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -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,

src/components/utilities/assetManager/partials/TileList.vue

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

src/components/utilities/zoneEditor/CreateZone.vue

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

src/components/utilities/zoneEditor/Objects.vue

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

src/components/utilities/zoneEditor/Tiles.vue

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

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -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)
   });
 

src/components/utilities/zoneEditor/ZoneList.vue

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

src/config.ts

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

src/screens/Characters.vue

@@ -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 })
+  console.log('selected_character', selected_character.value)
-  socket.connection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
+  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) => {
+  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
-    socket.setCharacter(data)
+    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')
+  gameStore.connection?.off('character:list')
-  socket.connection.off('character:connect')
+  gameStore.connection?.off('character:connect')
-  socket.connection.off('character:create:success')
+  gameStore.connection?.off('character:create:success')
 })
 </script>

src/screens/Game.vue

@@ -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 = {

src/screens/Login.vue

@@ -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)
+  gameStore.setToken(response.token)
-  await socket.initConnection()
+  await gameStore.initConnection()
 }
 
 async function registerFunc() {
@@ -91,7 +91,7 @@ async function registerFunc() {
     return
   }
 
-  socket.setToken(response.token)
+  gameStore.setToken(response.token)
-  await socket.initConnection()
+  await gameStore.initConnection()
 }
 </script>

src/services/authentication.ts

@@ -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, {

src/stores/game.ts

@@ -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
+    }
   }
 })

src/stores/socket.ts

@@ -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/
- */