From 95aa222f8e6f24a04a798f0210d049001d112bc5 Mon Sep 17 00:00:00 2001 From: Evan Date: Sat, 25 Jan 2025 17:31:09 -0800 Subject: [PATCH] improve front page --- package.json | 5 +- resources/images/OpenFrontLogo.svg | 91 ++++++++++++ src/client/UsernameInput.ts | 4 +- src/client/index.html | 142 ++++++------------ src/client/styles.css | 221 +++++++++++----------------- src/core/Schemas.ts | 2 +- src/core/configuration/DevConfig.ts | 24 +-- 7 files changed, 238 insertions(+), 251 deletions(-) create mode 100644 resources/images/OpenFrontLogo.svg diff --git a/package.json b/package.json index df0b0c8b7..ae53d6ee8 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,7 @@ "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", - "tailwind": "tailwindcss build -i ./src/client/tailwind.css -o public/tailwind.css" + "test": "jest" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -95,4 +94,4 @@ "zod": "^3.23.8" }, "type": "module" -} +} \ No newline at end of file diff --git a/resources/images/OpenFrontLogo.svg b/resources/images/OpenFrontLogo.svg new file mode 100644 index 000000000..b67262183 --- /dev/null +++ b/resources/images/OpenFrontLogo.svg @@ -0,0 +1,91 @@ + +penFront diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts index b02a78459..fe26699f4 100644 --- a/src/client/UsernameInput.ts +++ b/src/client/UsernameInput.ts @@ -14,8 +14,8 @@ export class UsernameInput extends LitElement { static styles = css` input { - width: 100%; - padding: 0.75rem; + width: 200px; + padding: 0.5rem; background-color: white; border: 1px solid #d1d5db; border-radius: 0.375rem; diff --git a/src/client/index.html b/src/client/index.html index f94a8923c..2a6fd6535 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -17,105 +17,60 @@ } gtag("js", new Date()); - gtag("config", "AW-16702609763"); - + + + + OpenFront (ALPHA) + + + + - - + +
+

OpenFront.io

+

(v0.14.0)

- -
-

- OpenFront.io -

-

- (v0.14.0) -

-
-
- -
- - How to Play - -
-
- - Join the Discord! - -
+ - -
- - +
+ +
- -
- - -
-
+
+ +
+ + +
+
+ + How to Play + -

- Public Games -

- -
-
-
+ + Join the Discord! + -
-
    -
    +
    -
    -
    - - - - - - - - - - +
    + +
    +
    +
    @@ -128,6 +83,7 @@ + - - \ No newline at end of file diff --git a/src/client/styles.css b/src/client/styles.css index e048f7222..0577d6320 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -1,11 +1,9 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - html, body { touch-action: manipulation; -ms-touch-action: manipulation; + height: 100%; + overflow: hidden; } * { @@ -17,7 +15,6 @@ body { user-select: none; } - @font-face { font-family: 'Overpass'; src: url('/resources/fonts/overpass.woff') format('woff'); @@ -35,27 +32,33 @@ body { background-position: center; background-attachment: fixed; background-blend-mode: overlay; -} - -html, -body { - height: 100%; - overflow: hidden; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease; } .content { + text-align: center; + padding: 20px; max-width: 100%; margin: 0 auto; position: relative; } +/* Typography */ h1 { font-family: Arial, serif; text-align: center; color: #2e2e2e; font-size: 3em; - margin-bottom: 10px; - margin-top: 1em; + margin: 1em 0 10px; +} + +h1 img { + height: auto; + width: auto; + max-width: 100%; + transform: scale(2); } h2 { @@ -70,9 +73,16 @@ h3 { font-family: Arial, serif; text-align: center; color: #000000; - font-size: 1.2em; } +.version { + font-family: Arial, serif; + text-align: center; + color: #000000; + font-size: 1em; +} + +/* Username input */ #username-container { margin-bottom: 50px; display: flex; @@ -92,13 +102,63 @@ h3 { display: block; } -.joining-message { - font-size: 24px; - color: rgb(0, 0, 0); - text-align: center; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +/* Buttons */ +.button-container { + display: flex; + gap: 1rem; + max-width: 400px; + margin: 0 auto; } +.primary-button { + background-color: #2563eb; + color: white; + padding: 2rem 1.5rem; + font-weight: bold; + font-size: 1.25rem; + border-radius: 0.5rem; + flex: 1; + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +.secondary-button { + background-color: #dbeafe; + color: #1e40af; + padding: 1rem; + font-weight: 500; + font-size: 0.875rem; + border-radius: 0.375rem; + width: 100%; + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +.link-button { + display: block; + max-width: 400px; + margin: 1rem auto; + padding: 0.5rem 1rem; + text-align: center; + text-decoration: none; + font-weight: bold; + border-radius: 0.375rem; + transition: background-color 0.3s; +} + +.link-button.green { + background-color: #059669; + color: white; +} + +.link-button.purple { + background-color: #4f46e5; + color: white; +} + +/* Discord */ .discord-link { position: fixed; top: 20px; @@ -122,17 +182,15 @@ h3 { height: 30px; } +/* Media Queries */ @media (min-width: 768px) { h1 { - font-size: 6em; + font-size: 2em; } - h2 { - font-size: 2.5em; - } h3 { - font-size: 2em; + font-size: 1em; } #username { @@ -164,119 +222,4 @@ h3 { width: 40px; height: 40px; } -} - -#customMenu { - display: none; - position: absolute; - background-color: #f9f9f9; - border: 1px solid #ccc; - padding: 10px; - z-index: 1000; -} - -#customMenu ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -#customMenu ul li { - padding: 8px 12px; - cursor: pointer; -} - -#customMenu ul li:hover { - background-color: #f1f1f1; -} - -#table-container { - background-color: rgba(0, 0, 0, 0.7); -} - -/* Events Table Styles */ -.events-table { - width: 100%; - border-collapse: collapse; - background-color: rgba(0, 0, 0, 0.5); - color: white; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); -} - -.events-table th, -.events-table td { - padding: 15px; - text-align: left; - border-bottom: 1px solid rgba(255, 255, 255, 0.0); - z-index: 1000; -} - -.events-table th { - background-color: rgba(0, 0, 0, 0.0); - font-size: 1.2em; - text-transform: uppercase; -} - -.events-table tr:hover { - background-color: rgba(255, 255, 255, 0.0); -} - -.btn { - display: inline-block; - padding: 8px 16px; - margin: 5px 10px 5px 0; - background-color: #4CAF50; - color: white; - text-decoration: none; - border-radius: 4px; - transition: background-color 0.3s; -} - -.btn:hover { - background-color: #45a049; -} - -.btn-info { - background-color: #2196F3; -} - -.btn-info:hover { - background-color: #0b7dda; -} - -@media (max-width: 600px) { - - .events-table th, - .events-table td { - padding: 10px; - } - - .btn { - display: block; - margin: 5px 0; - } -} - - -/* Radial Menu */ -.radial-menu { - position: absolute; - display: none; - width: 150px; - height: 150px; - border-radius: 50%; - background: rgba(0, 0, 0, 0.5); -} - -.menu-item { - position: absolute; - width: 40px; - height: 40px; - border-radius: 50%; - background: white; - display: flex; - justify-content: center; - align-items: center; - font-weight: bold; - cursor: pointer; } \ No newline at end of file diff --git a/src/core/Schemas.ts b/src/core/Schemas.ts index bea67b70e..532573170 100644 --- a/src/core/Schemas.ts +++ b/src/core/Schemas.ts @@ -232,7 +232,7 @@ const ClientBaseMessageSchema = z.object({ export const ClientSendWinnerSchema = ClientBaseMessageSchema.extend({ type: z.literal('winner'), - winner: ID, + winner: ID.nullable(), }) export const ClientLogMessageSchema = ClientBaseMessageSchema.extend({ diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts index dab1368be..aa4403df4 100644 --- a/src/core/configuration/DevConfig.ts +++ b/src/core/configuration/DevConfig.ts @@ -30,23 +30,23 @@ export class DevConfig extends DefaultConfig { return info } - percentageTilesOwnedToWin(): number { - return 1 - } + // percentageTilesOwnedToWin(): number { + // return 1 + // } - populationIncreaseRate(player: Player): number { - return this.maxPopulation(player) - } + // populationIncreaseRate(player: Player): number { + // return this.maxPopulation(player) + // } // boatMaxDistance(): number { // return 5000 // } - numBots(): number { - return 0 - } - spawnNPCs(): boolean { - return false - } + // numBots(): number { + // return 0 + // } + // spawnNPCs(): boolean { + // return false + // } }