commit #5

package.json

@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
+    "start:ui": "vite preview --host",
+    "build:ui": "vite build",
     "dev:ui": "vite",
     "dev:server": "NODE_ENV=development tsx watch --clear-screen=false ./src/server/main.ts"
   },

src/clientGame.ts

@@ -25,7 +25,6 @@ export const useGame = defineStore("game", () => {
 	const actions = reactive<GameAction[]>([])
 
 	const auth = useAuth()
-
 	const actionsBus = useGameActionsBus()
 	actionsBus.on(action => {
 		actions.push(action)
@@ -60,11 +59,15 @@ export const useGame = defineStore("game", () => {
 				})
 			})
 		},
-		async create() {
-			return await trpcClient.createGame.mutate()
+		async reset() {
+			window.location.hash = ""
+			lobbyCode.value = null
+			state.value = getUninitializedGameState()
+			actions.splice(0, actions.length)
 		},
 		start: () => trpcClient.game.start.mutate({ lobbyCode: lobbyCode.value! }),
 		hit: () => trpcClient.game.hit.mutate({ lobbyCode: lobbyCode.value! }),
-		stay: () => trpcClient.game.stay.mutate({ lobbyCode: lobbyCode.value! })
+		stay: () => trpcClient.game.stay.mutate({ lobbyCode: lobbyCode.value! }),
+		create: () => trpcClient.createGame.mutate()
 	}
 })

src/components/Game.vue

@@ -1,27 +1,34 @@
 <template>
 	<div class="flex flex-col gap-14">
 		<PlayerCards v-for="playerId in reorderedPlayerIds" :key="playerId" :player-id="playerId"/>
-		<div
-			class="flex gap-5 justify-end items-center transform transition ease duration-500"
-			:class="game.state.phase === 'end' ? 'translate-y-4 opacity-0' : ''"
-		>
-			<div class="font-fat opacity-20 text-3xl pr-2">
-				<template v-if="isBust">You are bust.</template>
-			</div>
-			<BigButton
-				class="bg-gradient-to-br from-red-800 to-red-900 uppercase"
-				:disabled="!isYourTurn || isBust"
-				@click="game.hit()"
-			>
-				Hit
-			</BigButton>
-			<BigButton
-				class="bg-gradient-to-br from-blue-800 to-blue-900 uppercase"
-				:disabled="!isYourTurn"
-				@click="game.stay()"
-			>
-				Stay
-			</BigButton>
+		<div class="flex gap-5 justify-end items-center transform transition ease duration-500">
+			<template v-if="game.state.phase === 'end'">
+				<BigButton
+					class="bg-gradient-to-br from-gray-600 to-gray-800"
+					@click="game.reset()"
+				>
+					Leave
+				</BigButton>
+			</template>
+			<template v-else>
+				<div class="font-fat opacity-20 text-3xl pr-2">
+					<template v-if="isBust">You are bust.</template>
+				</div>
+				<BigButton
+					class="bg-gradient-to-br from-red-800 to-red-900 uppercase"
+					:disabled="!isYourTurn || isBust"
+					@click="game.hit()"
+				>
+					Hit
+				</BigButton>
+				<BigButton
+					class="bg-gradient-to-br from-blue-800 to-blue-900 uppercase"
+					:disabled="!isYourTurn"
+					@click="game.stay()"
+				>
+					Stay
+				</BigButton>
+			</template>
 		</div>
 		<GameEndModal/>
 	</div>

src/components/LoginScreen.vue

@@ -40,10 +40,11 @@
 	const usernameInput = ref("")
 	const isLoading = ref(false)
 
-	function submit() {
+	async function submit() {
 		if (isLoading.value) return
 		isLoading.value = true
-		auth.login(usernameInput.value)
+		await auth.login(usernameInput.value)
+		window.location.reload() // so that the WebSocket reconnects with the cookie set
 		isLoading.value = false
 	}
 </script>

src/server/game.ts

@@ -85,6 +85,7 @@ export class Game extends EventEmitter<Events> {
 
 	addPlayer(id: string, name: string) {
 		if (this.lobbyPlayerIds.has(id)) return
+		if (this.state.phase !== "pre-start") throw new Error("The game was already started.")
 		if (this.lobbyPlayerIds.size >= 3) throw new Error("The game is full.")
 		this.lobbyPlayerIds.add(id)
 		this.addAction({

src/trpc.ts

@@ -15,7 +15,7 @@ export const trpcClient = createTRPCProxyClient<AppRouter>({
 		splitLink({
 			condition: o => o.type === "subscription",
 			true: wsLink({
-				client: wsClient,
+				client: wsClient
 			}),
 			false: httpLink({
 				url: "/trpc"