From 633e93f21b6b12233553df8cc12aea136ad51aef Mon Sep 17 00:00:00 2001 From: evanpelle Date: Mon, 27 Jan 2025 10:01:09 -0800 Subject: [PATCH] use tailwind for frontpage --- src/client/PublicLobby.ts | 69 +++--- src/client/UsernameInput.ts | 45 +--- src/client/graphics/layers/Leaderboard.ts | 5 + src/client/index.html | 92 ++++---- src/client/styles.css | 253 ---------------------- 5 files changed, 85 insertions(+), 379 deletions(-) diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts index e0d81ba1c..46d2f3384 100644 --- a/src/client/PublicLobby.ts +++ b/src/client/PublicLobby.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit'; +import { LitElement, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { Lobby } from "../core/Schemas"; import { Difficulty, GameMapType, GameType } from '../core/game/Game'; @@ -11,37 +11,9 @@ export class PublicLobby extends LitElement { private lobbiesInterval: number | null = null; private currLobby: Lobby = null; - static styles = css` - .lobby-button { - width: 100%; - max-width: 25rem; - margin: 0 auto; - padding: 0.75rem; - background: linear-gradient(to right, #2563eb, #3b82f6); - color: white; - font-weight: 500; - border-radius: 0.5rem; - transition: opacity 0.2s; - } - .lobby-button:hover { - opacity: 0.9; - } - .lobby-button.highlighted { - background: linear-gradient(to right, #16a34a, #22c55e); - } - .lobby-name { - font-size: 1rem; - font-weight: 600; - margin-bottom: 0.5rem; - } - .lobby-info { - display: flex; - justify-content: center; - gap: 1rem; - color: rgb(219 234 254); - font-size: 0.875rem; - } - `; + createRenderRoot() { + return this; + } connectedCallback() { super.connectedCallback(); @@ -83,19 +55,28 @@ export class PublicLobby extends LitElement { const lobby = this.lobbies[0]; const timeRemaining = Math.max(0, Math.floor(lobby.msUntilStart / 1000)); + // return html` + //
+ // Test Tailwind + //
+ // `; + return html` - - `; + +`; } private lobbyClicked(lobby: Lobby) { diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts index c992533d6..7992d26a7 100644 --- a/src/client/UsernameInput.ts +++ b/src/client/UsernameInput.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit'; +import { LitElement, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { v4 as uuidv4 } from 'uuid'; import { MAX_USERNAME_LENGTH, validateUsername } from '../core/validations/username'; @@ -9,37 +9,14 @@ const usernameKey: string = 'username'; export class UsernameInput extends LitElement { @state() private username: string = ''; @property({ type: String }) validationError: string = ''; + private _isValid: boolean = true; - private _isValid: boolean = true + // Remove static styles since we're using Tailwind - static styles = css` - input { - width: 15rem; - padding: .5rem; - background-color: white; - border: 1px solid #d1d5db; - border-radius: 0.375rem; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - font-size: 1rem; - line-height: 1.5; - color: #111827; - text-align: center; - } - input:focus { - outline: none; - ring: 2px; - ring-color: #3b82f6; - border-color: #3b82f6; - } - .error { - color: #dc2626; - background-color: #fff; - padding: 4px; - font-size: 0.875rem; - border: 1px solid #dc2626; - margin-top: 0.5rem; - } - `; + createRenderRoot() { + // Disable shadow DOM to allow Tailwind classes to work + return this; + } public getCurrentUsername(): string { return this.username; @@ -60,9 +37,10 @@ export class UsernameInput extends LitElement { @change=${this.handleChange} placeholder="Enter your username" maxlength="${MAX_USERNAME_LENGTH}" + class="w-72 px-4 py-2 bg-white border border-gray-300 rounded-xl shadow-sm text-2xl text-gray-900 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" > ${this.validationError - ? html`
${this.validationError}
` + ? html`
${this.validationError}
` : null} `; } @@ -70,8 +48,6 @@ export class UsernameInput extends LitElement { private handleChange(e: Event) { const input = e.target as HTMLInputElement; this.username = input.value.trim(); - - const result = validateUsername(this.username) this._isValid = result.isValid if (result.isValid) { @@ -119,7 +95,6 @@ export class UsernameInput extends LitElement { } public isValid(): boolean { - return true - return this._isValid + return this._isValid; } } \ No newline at end of file diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts index 86e9dc984..d451b3fbe 100644 --- a/src/client/graphics/layers/Leaderboard.ts +++ b/src/client/graphics/layers/Leaderboard.ts @@ -172,6 +172,11 @@ export class Leaderboard extends LitElement implements Layer { private _hidden = true; render() { + // return html` + //
+ // Test Tailwind + //
+ // `; return html`
diff --git a/src/client/index.html b/src/client/index.html index c892b6dcd..01b31b326 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -1,21 +1,5 @@ - - - - - OpenFront (ALPHA) - - - - - - -
-

OpenFront.io

-

(v0.14.0)

+ + +
+ + OpenFront.io - + +

(v0.14.0)

-
+
+ +
+ + +
-
- -
- - + +
+ + + + +
+ +
- -
-
+ +
    + @@ -83,13 +82,12 @@ + - diff --git a/src/client/styles.css b/src/client/styles.css index 461ad3842..b5c61c956 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -1,256 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -html, -body { - touch-action: manipulation; - -ms-touch-action: manipulation; - height: 100%; - overflow: hidden; -} - -* { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@font-face { - font-family: 'Overpass'; - src: url('/resources/fonts/overpass.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -body { - font-family: 'Overpass', sans-serif; - margin: 0; - padding: 0; - min-height: 100vh; - background-color: #15151500; - background-size: cover; - background-position: center; - background-attachment: fixed; - background-blend-mode: overlay; - visibility: hidden; - opacity: 0; - transition: opacity 0.3s ease; -} - -.content { - text-align: center; - padding: 20px; - max-width: 100%; - margin: 0 auto; - position: relative; -} - -body { - visibility: hidden; - opacity: 0; - transition: opacity 0.3s ease; - background: rgba(45, 45, 51, 0.173); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(8px); - min-height: 100vh; - margin: 0; -} - -/* Typography */ -h1 { - font-family: Arial, serif; - text-align: center; - color: #2e2e2e; - font-size: 3em; - margin: 1em 0 10px; -} - -h1 img { - height: auto; - width: auto; - max-width: 100%; - transform: scale(2); -} - -h2 { - font-family: Arial, serif; - text-align: center; - color: #2e2e2e; - font-size: 1.5em; - margin-bottom: 50px; -} - -h3 { - font-family: Arial, serif; - text-align: center; - color: #000000; -} - - -.version { - font-family: Arial, serif; - text-align: center; - color: #000000; - font-size: 1em; -} - -/* Username input */ -#username-container { - margin-bottom: 50px; - display: flex; - justify-content: center; -} - -#username { - width: 90%; - max-width: 500px; - padding: 10px; - font-size: 16px; - text-align: center; - border: 2px solid #007bff; - border-radius: 5px; - background-color: rgba(255, 255, 255, 0.8); - margin: 1em auto; - display: block; -} - -/* Buttons */ -.button-container { - display: flex; - gap: 1rem; - max-width: 20rem; - max-height: 10rem; - margin: 0 auto; -} - -.primary-button { - background-color: #2563eb; - color: white; - padding: 1rem 1rem; - 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; - right: 20px; - display: flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - background-color: #5865F2; - border-radius: 50%; - transition: background-color 0.3s ease; -} - -.discord-link:hover { - background-color: #4752C4; -} - -.discord-logo { - width: 30px; - height: 30px; -} - -/* Media Queries */ -@media (min-width: 768px) { - h1 { - font-size: 2em; - } - - - h3 { - font-size: 1em; - } - - .lobby-section { - padding: 1rem; - } - - #username { - font-size: 24px; - } - - .lobby-container { - display: flex; - flex-direction: column; - gap: 1rem; - align-items: center; - width: 100%; - padding: 1rem; - } - - .lobby-button { - width: 50rem; - display: block; - margin: 0 auto; - } - - .lobby-name { - font-size: 36px; - } - - .lobby-timer, - .player-count { - font-size: 24px; - } - - .discord-link { - top: 50px; - right: 50px; - width: 70px; - height: 70px; - } - - .discord-logo { - width: 40px; - height: 40px; - } -} \ No newline at end of file