haha keyboard go brrr

src/App.vue

@@ -1,30 +1,28 @@
 <template>
   <Login v-if="screen === 'login'" />
-<!--  <Register v-if="screen === 'register'" />-->
+  <CharacterSelection v-if="screen === 'character_selection'" />
+  <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 { onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
+import Register from '@/components/screens/Register.vue'
+import { type Ref, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket'
-import { storeToRefs } from 'pinia'
+import CharacterSelection from '@/components/screens/CharacterSelection.vue'
 
 const screen:Ref<string> = ref('login');
 const socket = useSocketStore();
 
-onMounted(() => {
-  // SocketioService.setupSocketConnection();
-});
-
-const { isAuthenticated } = storeToRefs(socket);
-
-watch(isAuthenticated, (isAuthenticated) => {
-  if (isAuthenticated) {
-    screen.value = 'game';
-  } else {
-    screen.value = 'login';
+socket.$subscribe((mutation, state) => {
+  if (state.isAuthenticated) {
+    screen.value = 'character_selection';
   }
-});
+
+  if (state.character) {
+    screen.value = 'game';
+  }
+}, { detached: true })
 </script>