updated packages, updated websocket to socket.io, moved login styling to its own scss file

src/App.vue

@@ -1,20 +1,18 @@
 <template>
-  <Login />
+  <Login v-if="screen === 'login'" />
+<!--  <Register v-if="screen === 'register'" />-->
+  <Game v-if="screen === 'game'" />
 </template>
 
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { useWebSocket } from '@vueuse/core'
 import config from '@/config'
+import { onMounted, type Ref, ref } from 'vue'
+const screen:Ref<string> = ref('login');
 
-const { status, data, close } = useWebSocket(config.websocket_url, {
-  autoReconnect: {
-    retries: 3,
-    delay: 1000,
-    onFailed() {
-      alert('Failed to connect WebSocket after 3 retries')
-    },
-  },
-})
+import SocketioService from '@/services/socketio.service';
+onMounted(() => {
+  SocketioService.setupSocketConnection();
+});
 </script>