remove unused images, front page mobile-friendly

TODO.txt

@@ -109,13 +109,20 @@
 * Make boats more intuitive (larger area to click off coast) DONE 9/11/2024
 * FakeHumans retaliate when attacked DONE 9/11/2024
 
-
---- v3 Release
+--- v3 Release DONE
 
 * Add discord link DONE 9/14/2024
-BUG: FakeHuman don't be enemy if don't share border
-BUG: when send boat only captures one pixel
-
+* front page mobile friendly
+* game mobile friendly
+* right click popup alliance option
+* click alliance sends alliance request
+* notification for alliance request
+* comfirm alliance
+* first place has crown
+* alliance has icon
+* attack alliance create traitor flag
+* BUG: FakeHuman don't be enemy if don't share border
+* BUG: when send boat only captures one pixel
 * store cookies
 * names dissapear on bottom of screen
 * UI: win condition & popup
@@ -129,6 +136,10 @@ BUG: when send boat only captures one pixel
 
 --- v4 Release
 
+
+* improve front page (make map larger?)
+* Add additional maps
+* add offline mode
 * REFACTOR: give terranullius an ID, game.player() returns terranullius
 * REFACTOR: ocean is considered TerraNullius ?
 

src/client/styles.css

@@ -7,23 +7,24 @@
 
 body {
     font-family: 'Overpass', sans-serif;
-}
-
-/* body {
-    font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     min-height: 100vh;
     background-color: #15151500;
-    background-image: url('/resources/images/watercolor_worldmap.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     background-blend-mode: overlay;
-} */
+}
+
+html,
+body {
+    height: 100%;
+    overflow: hidden;
+}
 
 .content {
-    max-width: 1020px;
+    max-width: 100%;
     margin: 0 auto;
     padding: 20px;
     position: relative;
@@ -33,39 +34,43 @@ h1 {
     font-family: Arial, serif;
     text-align: center;
     color: #2e2e2e;
-    font-size: 8em;
+    font-size: 3em;
     margin-bottom: 10px;
+    margin-top: 1em;
 }
 
 h2 {
     font-family: Arial, serif;
     text-align: center;
     color: #2e2e2e;
-    font-size: 3em;
-    margin-bottom: 30px;
+    font-size: 1.5em;
+    margin-bottom: 50px;
 }
 
 h3 {
     font-family: Arial, serif;
     text-align: center;
     color: #000000;
-    font-size: 2.3em;
-    margin-bottom: 30px;
+    font-size: 1.2em;
+    margin-bottom: 1em;
 }
 
 #username-container {
-    margin-bottom: 30px;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: center;
 }
 
 #username {
-    width: 60%;
-    padding: 15px;
-    font-size: 40px;
+    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: 30px auto;
+    margin: 1em auto;
     display: block;
 }
 
@@ -74,11 +79,13 @@ h3 {
     justify-content: center;
 }
 
-
 .lobby-button {
-    width: 400px;
-    height: 400px;
-    font-size: 24px;
+    width: 50%;
+    max-width: 300px;
+    max-height: 300px;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    font-size: 18px;
     font-weight: bold;
     border: 3px solid #007bff;
     background-color: rgba(0, 123, 255, 0.2);
@@ -94,6 +101,7 @@ h3 {
     padding: 20px;
     text-align: center;
     box-sizing: border-box;
+    margin-bottom: 1em;
 }
 
 .lobby-button:hover {
@@ -110,25 +118,24 @@ h3 {
 }
 
 .lobby-name {
-    font-size: 52px;
-    margin-bottom: 20px;
+    font-size: 24px;
+    margin-bottom: 10px;
     color: #000000;
 }
 
 .lobby-timer {
-    font-size: 36px;
-    margin-bottom: 20px;
+    font-size: 20px;
+    margin-bottom: 10px;
     color: #000000;
-
 }
 
 .player-count {
-    font-size: 36px;
+    font-size: 20px;
     color: #000000;
 }
 
 .joining-message {
-    font-size: 48px;
+    font-size: 24px;
     color: rgb(0, 0, 0);
     text-align: center;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -136,13 +143,13 @@ h3 {
 
 .discord-link {
     position: fixed;
-    top: 50px;
-    right: 50px;
+    top: 20px;
+    right: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 70px;
-    height: 70px;
+    width: 50px;
+    height: 50px;
     background-color: #5865F2;
     border-radius: 50%;
     transition: background-color 0.3s ease;
@@ -153,6 +160,51 @@ h3 {
 }
 
 .discord-logo {
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
+}
+
+@media (min-width: 768px) {
+    h1 {
+        font-size: 6em;
+    }
+
+    h2 {
+        font-size: 2.5em;
+    }
+
+    h3 {
+        font-size: 2em;
+        margin: 1em;
+    }
+
+    #username {
+        font-size: 24px;
+    }
+
+    .lobby-button {
+        width: 400px;
+        height: 400px;
+    }
+
+    .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;
+    }
 }

src/core/configuration/DevConfig.ts

@@ -1,3 +1,4 @@
+import {GameID} from "../Schemas";
 import {DefaultConfig} from "./DefaultConfig";
 
 export const devConfig = new class extends DefaultConfig {
@@ -15,13 +16,13 @@ export const devConfig = new class extends DefaultConfig {
     }
 
     numBots(): number {
-        return 400
+        return 0
     }
-    
 
-    // numFakeHumans(gameID: GameID): number {
-    //     return 10
-    // }
+
+    numFakeHumans(gameID: GameID): number {
+        return 0
+    }
 
     // startTroops(playerInfo: PlayerInfo): number {
     //     if (playerInfo.isBot) {