From 64d956bda430a14371a235da01b4909bde6ea696 Mon Sep 17 00:00:00 2001 From: evanpelle Date: Thu, 10 Oct 2024 17:27:00 -0700 Subject: [PATCH] new front page UI --- package-lock.json | 22 ++++++------ package.json | 3 +- src/client/Client.ts | 9 +++++ src/client/index.html | 54 ++++++++++++++++++++++------- src/client/styles.css | 8 +++-- src/core/configuration/DevConfig.ts | 12 +++---- 6 files changed, 76 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6f95f3f84..6fe14372c 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 8b3daf665..a549a3c76 100644 --- a/package.json +++ b/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", diff --git a/src/client/Client.ts b/src/client/Client.ts index 6198453b8..1e80128fe 100644 --- a/src/client/Client.ts +++ b/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 diff --git a/src/client/index.html b/src/client/index.html index 88e7a32c5..443223fec 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -5,6 +5,7 @@ OpenFront (ALPHA) + @@ -26,19 +27,48 @@ fill="#ffffff" /> -

OpenFront.io

-

(v0.6.5)

-
- +

OpenFront.io

+

(v0.6.5)

+
+
+ + + + +
+ + + + +
+ + +
+
+ +

Public Games

+
+ +
+
-
- -
-

+
diff --git a/src/client/styles.css b/src/client/styles.css index 2ad481bad..ea67af31e 100644 --- a/src/client/styles.css +++ b/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; diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts index f6c2a1193..04429bbd2 100644 --- a/src/core/configuration/DevConfig.ts +++ b/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 }