improve front page

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<Lobby[]> {
-        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`
-      <button
-        @click=${() => this.lobbyClicked(lobby)}
-        class="lobby-button ${this.isLobbyHighlighted ? 'highlighted' : ''}"
-      >
-        <div class="lobby-name">Game ${lobby.id}</div>
-        <div class="lobby-timer">Starts in: ${timeRemaining}s</div>
-        <div class="player-count">Players: ${lobby.numClients}</div>
-      </button>
-    `;
+            <button
+                @click=${() => this.lobbyClicked(lobby)}
+                class="lobby-button ${this.isLobbyHighlighted ? 'highlighted' : ''}"
+            >
+                <div class="lobby-name">Next Public Game</div>
+                <div class="lobby-info">
+                    <div>Starts in: ${timeRemaining}s</div>
+                    <div>Players: ${lobby.numClients}</div>
+                    <div>ID: ${lobby.id}</div>
+                </div>
+            </button>
+        `;
     }
 
     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;
         }
     }
 }

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;

src/client/index.html

@@ -55,14 +55,13 @@
 				<button id="join-private-lobby-button" class="secondary-button">Join Lobby</button>
 			</div>
 		</div>
-		<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" class="link-button green" target="_blank"
-			rel="noopener noreferrer">
+		<!-- <a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" class="link-button green" target="_blank" rel="noopener noreferrer">
 			How to Play
 		</a>
 
 		<a href="https://discord.gg/k22YrnAzGp" class="link-button purple" target="_blank" rel="noopener noreferrer">
 			Join the Discord!
-		</a>
+		</a> -->
 
 	</div>
 

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 {

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`)