new front page UI

src/client/Client.ts

@@ -8,6 +8,7 @@ import {v4 as uuidv4} from 'uuid';
 
 
 import './styles.css';
+
 import {simpleHash} from "../core/Util";
 import {PseudoRandom} from "../core/PseudoRandom";
 
@@ -115,6 +116,14 @@ class Client {
             this.isLobbyHighlighted = !this.isLobbyHighlighted;
             lobbyButton.classList.toggle('highlighted', this.isLobbyHighlighted);
         }
+        if (this.isLobbyHighlighted) {
+            lobbyButton.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+            lobbyButton.classList.add('bg-green-600', 'hover:bg-green-700');
+        } else {
+            lobbyButton.classList.remove('bg-green-600', 'hover:bg-green-700');
+            lobbyButton.classList.add('bg-blue-600', 'hover:bg-blue-700');
+        }
+
         if (!this.isLobbyHighlighted) {
             this.game.stop()
             this.game = null

src/client/index.html

@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>OpenFront (ALPHA)</title>
+	<script src="https://cdn.tailwindcss.com"></script>
 	<!-- Google tag (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763">
 	</script>
@@ -26,19 +27,48 @@
 					fill="#ffffff" />
 			</svg>
 		</a>
-		<h1>OpenFront.io</h1>
-		<h2>(v0.6.5)</h2>
-		<div id="username-container">
-			<input type="text" id="username" placeholder="Enter your username">
+		<h1 class="text-9xl">OpenFront.io</h1>
+		<h2 class="text-6xl	mb-2">(v0.6.5)</h2>
+		<div class="flex justify-center items-start">
+			<div class="w-full max-w-3xl p-4 space-y-4">
+				<!-- Username input -->
+				<input type="text" id="username" placeholder="Enter your username"
+					class="w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+
+				<!-- Button layout -->
+				<div class="flex space-x-4 max-w-xs mx-auto">
+					<!-- Single Player button -->
+					<button id="single-player"
+						class="flex-1 h-31 px-6 py-8 text-xl font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out">
+						Single Player
+					</button>
+
+					<!-- Create and Join Lobby buttons stacked -->
+					<div class="flex-1 space-y-4">
+						<button id="create-lobby"
+							class="w-full h-12 px-4 py-4 text-sm  font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out">
+							Create Lobby
+						</button>
+						<button id="join-lobby"
+							class="w-full h-12 px-4 py-4 text-sm font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out">
+							Join Lobby
+						</button>
+					</div>
+				</div>
+
+				<h3 class="text-6xl mt-8 tracking-wide pt-8">Public Games</h3>
+				<div id="lobbies-container" class="p-4">
+					<button id="lobby-button"
+						class="w-full max-w-md mx-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-6 px-8 rounded-lg shadow-lg transition duration-300 ease-in-out flex flex-col items-center justify-center space-y-3 group"
+						data-selected="false">
+						<div id="lobby-name" class="text-2xl group-data-[selected=true]:text-green-200"></div>
+						<div id="lobby-timer" class="text-xl group-data-[selected=true]:text-green-200"></div>
+						<div id="player-count" class="text-lg group-data-[selected=true]:text-green-200"></div>
+					</button>
+				</div>
+			</div>
 		</div>
-		<div id="lobbies-container">
-			<button id="lobby-button" class="lobby-button">
-				<div id="lobby-name" class="lobby-name"></div>
-				<div id="lobby-timer" class="lobby-timer"></div>
-				<div id="player-count" class="player-count"></div>
-			</button>
-		</div>
-		<h3 id="next-game"> </h3>
+		<h3 id="next-game" class="invisible"> </h3>
 	</div>
 
 	<div id="customMenu">

src/client/styles.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
     touch-action: manipulation;
@@ -90,7 +94,7 @@ h3 {
     display: block;
 }
 
-#lobbies-container {
+/* #lobbies-container {
     display: flex;
     justify-content: center;
 }
@@ -148,7 +152,7 @@ h3 {
 .player-count {
     font-size: 20px;
     color: #000000;
-}
+} */
 
 .joining-message {
     font-size: 24px;

src/core/configuration/DevConfig.ts

@@ -8,12 +8,12 @@ export const devConfig = new class extends DefaultConfig {
     numSpawnPhaseTurns(): number {
         return 40
     }
-    gameCreationRate(): number {
-        return 2 * 1000
-    }
-    lobbyLifetime(): number {
-        return 2 * 1000
-    }
+    // gameCreationRate(): number {
+    //     return 2 * 1000
+    // }
+    // lobbyLifetime(): number {
+    //     return 2 * 1000
+    // }
     turnIntervalMs(): number {
         return 100
     }