feat: local Game

frontend/src/pages/game/createLocalGamePage.vue

@@ -24,6 +24,27 @@
 
             <q-separator />
 
+            <div class="row items-center q-gutter-sm full-width q-pa-sm">
+                <q-input
+                    v-model="addUsername"
+                    filled
+                    label="Username"
+                    maxlength="32"
+                    counter
+                    dense
+                    style="border-radius: 6px;"
+                />
+                <q-btn
+                    label="Add"
+                    color="secondary"
+                    @click="addUser"
+                    rounded
+                    unelevated
+                />
+            </div>
+
+            <q-separator />
+
             <q-card-actions align="center">
               <q-btn
                     v-if="gameCreator === user.id"
@@ -52,6 +73,7 @@ const gameID = ref();
 const gameCreator = ref(null);
 const gamePlayers = ref([]);
 const user = ref({ username:"", id:0 });
+const addUsername = ref(null);
 var canUpdate = false
 
 const storedUser = LocalStorage.getItem("user")
@@ -90,6 +112,56 @@ if (storedgameID) {
     router.push("/")
 }
 
+async function addUser() {
+    console.log(addUsername.value)
+    if (!addUsername.value) {
+        $q.notify({
+            type: "negative",
+            message: "Please enter a username!",
+        });
+        return;
+    }
+
+    api.post("/api/users", {
+        username: addUsername.value
+    })
+    
+    .then(function (userResponse) {
+        console.log(userResponse);
+        
+        api.post(`/api/games/${gameID.value}/players`, {
+            user: userResponse.data.id
+        })
+
+        .then(function (joinResponse) {
+            console.log(joinResponse);
+
+            $q.notify({
+                type: "positive",
+                message: "Success!",
+            });
+        })
+
+        .catch(function (error) {
+          console.log(error);
+
+          $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+          });
+        });
+    })
+    
+    .catch(function (error) {
+        console.log(error);
+
+        $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+        });
+    });
+}
+
 async function update() {
     if (!canUpdate) {return}