new front page UI

package-lock.json

@@ -11355,9 +11355,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "dev": true,
       "license": "ISC"
     },
@@ -11423,9 +11423,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "dev": true,
       "funding": [
         {
@@ -11444,8 +11444,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -12573,9 +12573,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {

package.json

@@ -9,7 +9,8 @@
     "start:server-dev": "GAME_ENV=dev node --loader ts-node/esm --experimental-specifier-resolution=node src/server/Server.ts",
     "dev": "GAME_ENV=dev concurrently \"npm run start:client\" \"npm run start:server-dev\"",
     "tunnel": "npm run build-prod && npm run start:server",
-    "test": "jest"
+    "test": "jest",
+    "tailwind": "tailwindcss build -i ./src/client/tailwind.css -o public/tailwind.css"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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
     }