Fix issues and make it mobile-friendly

README.md

@@ -1,3 +1,4 @@
 # TwentyOne
-- return-opponent sollte am anfang nicht gehen
+
-- krone und indikator überlagern 
+## Known issues
+- return-opponent should not be allowed in the first round

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"
 	>

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'">

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()"

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()"

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>

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="flex flex-col h-full items-center pt-10 gap-8">
-		<div class="font-fat text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
+		<div class="font-fat text-4xl md: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="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"