New login design, added basic logic for multiplayer (WIP)

src/App.vue

@@ -7,16 +7,24 @@
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { onMounted, onUnmounted, type Ref, ref } from 'vue'
-import SocketioService from '@/services/socketio.service';
+import { onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
+import { useSocketStore } from '@/stores/socket'
+import { storeToRefs } from 'pinia'
 
 const screen:Ref<string> = ref('login');
+const socket = useSocketStore();
 
 onMounted(() => {
-  SocketioService.setupSocketConnection();
+  // SocketioService.setupSocketConnection();
 });
 
-onUnmounted(() => {
-  SocketioService.disconnect();
+const { isAuthenticated } = storeToRefs(socket);
+
+watch(isAuthenticated, (isAuthenticated) => {
+  if (isAuthenticated) {
+    screen.value = 'game';
+  } else {
+    screen.value = 'login';
+  }
 });
 </script>