started to implement game lobby

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-project",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

src/pages/create/[id].vue

@@ -1,5 +1,88 @@
-<template>Lobby {{ useRoute().params.id }}</template>
+<template>
+  <v-container class="pa-0 ma-0" fluid style="height: calc(100vh - 2rem)">
+    <v-row class="bg-grey-darken-4 px-3 pt-3" style="height: 5rem">
+      <v-col class="d-flex align-center justify-space-between" cols="12">
+        <v-btn append-icon="mdi-content-copy" color="yellow" variant="outlined" @click="">
+          Copy Lobby Invite
+        </v-btn>
+        <v-btn color="yellow" variant="tonal" @click="leaveLobby()">Leave Lobby</v-btn>
+      </v-col>
+    </v-row>
 
-<script lang="ts" setup></script>
+    <v-row class="px-6 pt-4" style="height: calc(100% - 5rem)">
+      <v-col class="d-flex flex-column align-center w-100" cols="8">
+        <v-sheet class="pa-4 mb-8" rounded width="100%">
+          <div class="d-flex align-center mb-2" style="height: 3rem">
+            <label class="text-center" for="max-rounds" style="width: 40%"> Max Rounds </label>
+            <input
+              id="max-rounds"
+              style="background: #464646; border-radius: 1rem; padding: 0.5rem 1rem"
+              type="number" />
+          </div>
+          <div class="d-flex align-center mb-2" style="height: 3rem">
+            <label class="text-center" for="password" style="width: 40%">Password</label>
+            <input
+              id="password"
+              style="background: #464646; border-radius: 1rem; padding: 0.5rem 1rem"
+              type="text" />
+          </div>
+        </v-sheet>
+
+        <v-btn color="yellow" height="4rem" variant="flat" width="30rem" @click="startGame()">
+          Start Game
+        </v-btn>
+      </v-col>
+
+      <v-col cols="4">
+        <v-card color="yellow" density="compact" rounded variant="tonal" width="100%">
+          <v-card-title>Player-List</v-card-title>
+          <v-card-text>
+            <v-list bg-color="transparent" color="yellow" rounded variant="flat">
+              <v-list-item
+                v-for="(player, index) in players"
+                :key="player.id"
+                :class="index < players.length - 1 ? 'mb-2' : ''"
+                rounded>
+                <v-list-item-title>{{ player.name }}</v-list-item-title>
+                <template #append>
+                  <v-icon icon="mdi-close" @click="" />
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const settings = ref([])
+settings.value = [
+  { id: 1, name: 'maxRounds', value: 5, type: 'number' },
+  { id: 2, name: 'password', value: '', type: 'text' }
+]
+
+const players = ref([])
+players.value = [
+  { id: 1, name: 'Player 1' },
+  { id: 2, name: 'Player 2' }
+]
+
+const startGame = () => {
+  // TODO Request game instance
+  // Redirect to game
+  const gameId = 0xff01
+  router.push(`/game/${gameId}`)
+}
+
+const leaveLobby = () => {
+  router.push('/')
+}
+</script>
 
 <style lang="scss" scoped></style>