From 14c4a434f78270b7eaa5b59201ce48751e7705b6 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Sun, 23 Apr 2023 14:24:24 +0200
Subject: [PATCH] commit #5

---
 package.json                   |  2 ++
 src/clientGame.ts              | 11 +++++---
 src/components/Game.vue        | 49 +++++++++++++++++++---------------
 src/components/LoginScreen.vue |  5 ++--
 src/server/game.ts             |  1 +
 src/trpc.ts                    |  2 +-
 6 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 12cc769..a45a6a4 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/clientGame.ts b/src/clientGame.ts
index 6c903a5..62a3c30 100644
--- a/src/clientGame.ts
+++ b/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()
 	}
 })
\ No newline at end of file
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 9567b05..4ff6ee5 100644
--- a/src/components/Game.vue
+++ b/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>
diff --git a/src/components/LoginScreen.vue b/src/components/LoginScreen.vue
index 35d105c..86d5efd 100644
--- a/src/components/LoginScreen.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/server/game.ts b/src/server/game.ts
index a1ca39b..2230eca 100644
--- a/src/server/game.ts
+++ b/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({
diff --git a/src/trpc.ts b/src/trpc.ts
index 8cedad7..f4d4d2d 100644
--- a/src/trpc.ts
+++ b/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"