From 2e6f9fb845102ce4f06a4c451902df895993a613 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Fri, 28 Apr 2023 19:16:09 +0200
Subject: [PATCH] Fix issues and make it mobile-friendly

---
 README.md                         | 5 +++--
 src/components/BigButton.vue      | 2 +-
 src/components/Game.vue           | 4 ++--
 src/components/JoinScreen.vue     | 6 +++---
 src/components/LoginScreen.vue    | 6 +++---
 src/components/PlayerCards.vue    | 6 +++---
 src/components/PreStartScreen.vue | 6 +++---
 7 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index c22b93c..72a1049 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
 # TwentyOne
-- return-opponent sollte am anfang nicht gehen
-- krone und indikator überlagern 
\ No newline at end of file
+
+## Known issues
+- return-opponent should not be allowed in the first round
\ No newline at end of file
diff --git a/src/components/BigButton.vue b/src/components/BigButton.vue
index add8d63..1e60a91 100644
--- a/src/components/BigButton.vue
+++ b/src/components/BigButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<button
-		class="py-5 px-15 font-fat text-5xl rounded-md shadow-lg text-center"
+		class="py-5 px-8 md:px-15 font-fat text-4xl md:text-5xl rounded-md shadow-lg text-center"
 		:class="$style.root"
 		:disabled="disabled"
 	>
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 64f55d8..f92e837 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex gap-15 justify-center">
+	<div class="flex -md:flex-col gap-15 justify-center">
 		<div>
 			<div class="font-bold text-lg pb-2 pl-2">Active special cards</div>
 			<div class="p-4 border border-dark-200 rounded-xl flex flex-col gap-5 flex-wrap w-full">
@@ -17,7 +17,7 @@
 				/>
 			</div>
 		</div>
-		<div class="flex flex-col gap-14 max-w-1200px flex-grow">
+		<div class="flex flex-col gap-14 max-w-1200px flex-grow -md:pl-3 pb-5">
 			<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">
 				<template v-if="game.state.phase === 'end'">
diff --git a/src/components/JoinScreen.vue b/src/components/JoinScreen.vue
index df693b8..d334d06 100644
--- a/src/components/JoinScreen.vue
+++ b/src/components/JoinScreen.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="flex flex-col h-full justify-center items-center gap-8 text-8xl">
+	<div class="flex flex-col h-full justify-center items-center gap-8 text-7xl md:text-8xl">
 		<input
 			v-model="lobbyCodeInput"
-			class="uppercase bg-transparent text-white text-center font-fat tracking-wider focus:outline-none pb-2 rounded-lg transition"
+			class="uppercase tracking-wider bg-transparent text-white text-center font-fat focus:outline-none pb-2 rounded-lg transition"
 			:class="isUnknown ? 'bg-red-800' : ''"
 			:maxlength="LOBBY_CODE_LENGTH"
 			:placeholder="'X'.repeat(LOBBY_CODE_LENGTH)"
@@ -10,7 +10,7 @@
 			@keypress="onKeypress"
 		/>
 		<button
-			class="uppercase font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
+			class="font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
 			:class="$style.button"
 			:disabled="lobbyCodeInput.length !== LOBBY_CODE_LENGTH"
 			@click="join()"
diff --git a/src/components/LoginScreen.vue b/src/components/LoginScreen.vue
index 05051c1..2e13208 100644
--- a/src/components/LoginScreen.vue
+++ b/src/components/LoginScreen.vue
@@ -1,13 +1,13 @@
 <template>
-	<div class="flex flex-col h-full justify-center items-center gap-8 text-8xl">
+	<div class="flex flex-col h-full justify-center items-center gap-8 text-4xl md:text-8xl">
 		<input
 			v-model="usernameInput"
-			class="bg-transparent text-white text-center font-fat focus:outline-none"
+			class="bg-transparent text-white text-center font-fat w-full focus:outline-none"
 			placeholder="Username"
 			maxlength="20"
 		/>
 		<button
-			class="uppercase font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
+			class="font-bold text-2xl md:text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
 			:class="$style.button"
 			:disabled="usernameInput.length <= 0 || usernameInput.length > 20"
 			@click="submit()"
diff --git a/src/components/PlayerCards.vue b/src/components/PlayerCards.vue
index 108d8f1..fdaa9c9 100644
--- a/src/components/PlayerCards.vue
+++ b/src/components/PlayerCards.vue
@@ -1,17 +1,17 @@
 <template>
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-6">
 		<div class="font-fat text-2xl relative">
 			{{ playerState.name }}
 			<template v-if="isYou">(You)</template>
 			<span
-				class="text-3xl absolute -top-0.5 -left-13 transition"
+				class="text-3xl absolute -top-0.5 -left-11 transition"
 				:class="game.state.winnerIds?.includes(playerState.id) ? '' : 'opacity-0'"
 			>
 				<CrownIcon/>
 			</span>
 			<span
 				class="text-2xl absolute top-0.5 -left-10 transition"
-				:class="game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
+				:class="game.state.phase !== 'end' && game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
 			>
 				<DotsThreeOutlineIcon/>
 			</span>
diff --git a/src/components/PreStartScreen.vue b/src/components/PreStartScreen.vue
index 33035f2..9aed075 100644
--- a/src/components/PreStartScreen.vue
+++ b/src/components/PreStartScreen.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="flex flex-col h-full items-center pt-10 gap-8 text-8xl">
-		<div class="font-fat text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
-		<div class="font-bold text-3xl">Players: {{ naturallyJoinEnumeration(game.state.players.map(p => p.name)) }}</div>
+	<div class="flex flex-col h-full items-center pt-10 gap-8">
+		<div class="font-fat text-4xl md:text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
+		<div class="font-bold text-2xl md:text-3xl">Players: {{ naturallyJoinEnumeration(game.state.players.map(p => p.name)) }}</div>
 		<BigButton
 			v-if="game.isOwnGame"
 			class="bg-gradient-to-br from-gray-600 to-gray-800"