Front rewrite

app.vue

@@ -1,22 +1,33 @@
 <script setup lang="ts">
+import { ref } from "vue";
 
-import { ref } from 'vue';
-
-import goStore, { register, setReady } from '@/netcode';
-
-let username = ref<string>('legonzaur')
-
+import goStore, { register, setReady } from "@/netcode";
 
+let username = ref<string>("legonzaur");
 </script>
 <template>
-  <input v-if="!goStore.self && !goStore.game?.started" type="text" v-model="username">
-  <button v-if="!goStore.self && !goStore.game?.started" @click="register(username)">LOGIN</button>
-  <input @change="setReady(($event.target as HTMLInputElement).checked)" v-if="goStore.self && !goStore.game?.started"
-    type="checkbox" id="ready">
-  <label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
-  <div>
-    <GameBoard></GameBoard>
+  <div id="game_status">
+    <template v-if="!goStore.self">
+
+      <div v-if="goStore.game?.started">
+        <b>SPECTATOR MODE</b>
+      </div>
+
+      <template v-if="!goStore.game?.started">
+        <input type="text" v-model="username" />
+        <button @click="register(username)">LOGIN</button>
+      </template>
+    </template>
+
+
+    <template v-if="goStore.self && !goStore.game?.started">
+      <input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
+      <label for="ready">Ready</label>
+    </template>
   </div>
+
+  <GameBoard></GameBoard>
+
 </template>
 
 <style>
@@ -26,5 +37,20 @@ html {
 
 body {
   margin: 0;
+  height: 100vh;
 }
-</style>
+
+#__nuxt {
+  height: 100%;
+  user-select: none;
+}
+
+#game_status {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 255, 255, .75);
+}
+</style>