From 79bef033f3c34c81a1f876eadee850ba8f90e1f5 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 12 Jul 2024 11:58:06 +0200
Subject: [PATCH] Refractor socket store into game store

---
 src/App.vue                                   | 23 ++++---
 src/components/World.vue                      | 26 ++++----
 src/components/gui/Hud.vue                    | 16 ++---
 src/components/sprites/Character.vue          |  6 +-
 src/components/utilities/Notifications.vue    | 10 +--
 .../utilities/assetManager/AssetManager.vue   |  4 +-
 .../assetManager/partials/ObjectDetails.vue   | 10 +--
 .../assetManager/partials/ObjectList.vue      | 10 +--
 .../assetManager/partials/TileDetails.vue     | 10 +--
 .../assetManager/partials/TileList.vue        | 10 +--
 .../utilities/zoneEditor/CreateZone.vue       |  6 +-
 .../utilities/zoneEditor/Objects.vue          |  6 +-
 src/components/utilities/zoneEditor/Tiles.vue |  6 +-
 .../utilities/zoneEditor/ZoneEditor.vue       |  8 +--
 .../utilities/zoneEditor/ZoneList.vue         | 10 +--
 src/config.ts                                 |  2 +-
 src/screens/Characters.vue                    | 27 ++++----
 src/screens/Game.vue                          |  8 +--
 src/screens/Login.vue                         | 12 ++--
 src/services/authentication.ts                |  6 +-
 src/stores/game.ts                            | 50 ++++++++++++++
 src/stores/socket.ts                          | 65 -------------------
 22 files changed, 161 insertions(+), 170 deletions(-)
 delete mode 100644 src/stores/socket.ts

diff --git a/src/App.vue b/src/App.vue
index 80101f2..3e46ff1 100644
--- a/src/App.vue
+++ b/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) {
-      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>
diff --git a/src/components/World.vue b/src/components/World.vue
index 2d9e0ad..a676700 100644
--- a/src/components/World.vue
+++ b/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')
-  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')
 })
 
 /**
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index 8c50f63..75af626 100644
--- a/src/components/gui/Hud.vue
+++ b/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-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">
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index e59d3b0..041ba1c 100644
--- a/src/components/sprites/Character.vue
+++ b/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) {
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index 7b72edc..a80f78f 100644
--- a/src/components/utilities/Notifications.vue
+++ b/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')
   }
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 737ea8d..9f1b147 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/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')
 
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 7b08d80..5b2d4f1 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/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,
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index 3d15820..c09d512 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/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)
   })
 })
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 7f0258d..a00639b 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/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,
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 520318a..e9571e4 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/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)
   })
 })
diff --git a/src/components/utilities/zoneEditor/CreateZone.vue b/src/components/utilities/zoneEditor/CreateZone.vue
index 7e62b6d..d0516a2 100644
--- a/src/components/utilities/zoneEditor/CreateZone.vue
+++ b/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()
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 167078d..48c5370 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/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)
   })
 })
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index d4bcfbf..d66e6db 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/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)
   })
 })
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 47e59d4..9bca68b 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/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)
   });
 
diff --git a/src/components/utilities/zoneEditor/ZoneList.vue b/src/components/utilities/zoneEditor/ZoneList.vue
index 70b354a..ed451da 100644
--- a/src/components/utilities/zoneEditor/ZoneList.vue
+++ b/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()
   })
 }
diff --git a/src/config.ts b/src/config.ts
index 8c7f9f3..f6f5756 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = false;
+const dev: boolean = true;
 
 export default {
   name: 'New Quest',
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index c6d3898..3e60ed3 100644
--- a/src/screens/Characters.vue
+++ b/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 })
-  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>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 9040285..6cc3a49 100644
--- a/src/screens/Game.vue
+++ b/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 = {
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index a06572d..4f3c80b 100644
--- a/src/screens/Login.vue
+++ b/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)
-  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>
diff --git a/src/services/authentication.ts b/src/services/authentication.ts
index 4da347b..3dacc22 100644
--- a/src/services/authentication.ts
+++ b/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, {
diff --git a/src/stores/game.ts b/src/stores/game.ts
index 1058f03..40ad4d2 100644
--- a/src/stores/game.ts
+++ b/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
+    }
   }
 })
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
deleted file mode 100644
index fff080b..0000000
--- a/src/stores/socket.ts
+++ /dev/null
@@ -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/
- */