diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts index 66431a749..e0d81ba1c 100644 --- a/src/client/PublicLobby.ts +++ b/src/client/PublicLobby.ts @@ -9,47 +9,43 @@ export class PublicLobby extends LitElement { @state() private lobbies: Lobby[] = []; @state() private isLobbyHighlighted: boolean = false; private lobbiesInterval: number | null = null; - - private currLobby: Lobby = null + private currLobby: Lobby = null; static styles = css` - /* Add your styles here, based on your existing CSS */ - .lobby-button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - max-width: 20rem; - margin: 0 auto; - padding: .5rem 1rem; - background-color: #2563eb; - color: white; - font-weight: bold; - border-radius: 0.5rem; - transition: background-color 0.3s ease-in-out; - } - - .lobby-button:hover { - background-color: #1d4ed8; - } - - .lobby-button.highlighted { - background-color: #16a34a; - } - - .lobby-button.highlighted:hover { - background-color: #15803d; - } - - .lobby-name { font-size: 1.2rem; } - .lobby-timer { font-size: 1rem; } - .player-count { font-size: 1rem; } - `; + .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; + } + `; connectedCallback() { super.connectedCallback(); - this.fetchAndUpdateLobbies(); // Fetch immediately on start + this.fetchAndUpdateLobbies(); this.lobbiesInterval = window.setInterval(() => this.fetchAndUpdateLobbies(), 1000); } @@ -66,17 +62,14 @@ export class PublicLobby extends LitElement { const lobbies = await this.fetchLobbies(); this.lobbies = lobbies; } catch (error) { - consolex.error('Error fetching and updating lobbies:', error); + consolex.error('Error fetching lobbies:', error); } } async fetchLobbies(): Promise { - const url = '/lobbies'; try { - const response = await fetch(url); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } + const response = await fetch('/lobbies'); + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); return data.lobbies; } catch (error) { @@ -86,32 +79,32 @@ export class PublicLobby extends LitElement { } render() { - if (this.lobbies.length === 0) { - return html``; - } - + if (this.lobbies.length === 0) return html``; const lobby = this.lobbies[0]; const timeRemaining = Math.max(0, Math.floor(lobby.msUntilStart / 1000)); return html` - - `; + + `; } private lobbyClicked(lobby: Lobby) { this.isLobbyHighlighted = !this.isLobbyHighlighted; if (this.currLobby == null) { - this.currLobby = lobby + this.currLobby = lobby; this.dispatchEvent(new CustomEvent('join-lobby', { detail: { - lobby: lobby, + lobby, gameType: GameType.Public, map: GameMapType.World, difficulty: Difficulty.Medium, @@ -125,7 +118,7 @@ export class PublicLobby extends LitElement { bubbles: true, composed: true })); - this.currLobby = null + this.currLobby = null; } } } \ No newline at end of file diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts index fe26699f4..c992533d6 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: 200px; - padding: 0.5rem; + width: 15rem; + padding: .5rem; background-color: white; border: 1px solid #d1d5db; border-radius: 0.375rem; @@ -23,6 +23,7 @@ export class UsernameInput extends LitElement { font-size: 1rem; line-height: 1.5; color: #111827; + text-align: center; } input:focus { outline: none; diff --git a/src/client/index.html b/src/client/index.html index 2a6fd6535..c892b6dcd 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -55,14 +55,13 @@ - + diff --git a/src/client/styles.css b/src/client/styles.css index 0577d6320..5afa74ff9 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -45,6 +45,17 @@ body { 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; @@ -75,6 +86,7 @@ h3 { color: #000000; } + .version { font-family: Arial, serif; text-align: center; @@ -106,14 +118,15 @@ h3 { .button-container { display: flex; gap: 1rem; - max-width: 400px; + max-width: 20rem; + max-height: 10rem; margin: 0 auto; } .primary-button { background-color: #2563eb; color: white; - padding: 2rem 1.5rem; + padding: 1rem 1rem; font-weight: bold; font-size: 1.25rem; border-radius: 0.5rem; @@ -193,13 +206,27 @@ 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: 400px; - height: 400px; + width: 50rem; + display: block; + margin: 0 auto; } .lobby-name { diff --git a/src/core/execution/WinCheckExecution.ts b/src/core/execution/WinCheckExecution.ts index cbadfbcc5..23c6b6431 100644 --- a/src/core/execution/WinCheckExecution.ts +++ b/src/core/execution/WinCheckExecution.ts @@ -28,9 +28,6 @@ export class WinCheckExecution implements Execution { } const max = sorted[0] const numTilesWithoutFallout = this.mg.numLandTiles() - this.mg.numTilesWithFallout() - if (this.mg.ticks() % 10 == 0) { - console.log(`player: ${max.name()} owns ${max.numTilesOwned()} tiles, ${numTilesWithoutFallout}`) - } if (max.numTilesOwned() / numTilesWithoutFallout * 100 > this.mg.config().percentageTilesOwnedToWin()) { this.mg.setWinner(max) console.log(`${max.name()} has won the game`)