created vintage theme

TODO.txt

@@ -38,18 +38,19 @@
 * boats same color as owner DONE 8/19/2024
 * make coasts look better DONE 8/22/2024
 * only put imageDataOnce, draw territories on top DONE 8/23/2024
-* have boats not get close to shore DONE 8/23/2024
+* have boats not get close too shore DONE 8/23/2024
 * improve terrain colors DONE 8/23/2024
 * BUG: boat doesn't work if on lake if other player not on same lake DONE 8/23/2024
-* Allow boats to attack TerraNullius
-* improve menu
+* Allow boats to attack TerraNullius DONE 8/23/2024
 * try vintage theme
+* improve menu (keep highlighted when click, allow deselect lobby)
+* Make lobby background the terrain map
 * add shader to dim border
-* remove player.info()
-* give terranullius an ID, game.player() returns terranullius
+* REFACTOR: remove player.info()
+* REFACTOR: give terranullius an ID, game.player() returns terranullius
 * give time to (re) spawn at start of game
 * store & delay tile updates for lag compensation
-* BUG: ocean is considered TerraNullius ?
+* REFACTOR: ocean is considered TerraNullius ?
 * BUG: fix hotreload (priority queue breaks it)
 * PERF: use hierarchical a* search for boats
 * Add terrain elevation to map

src/core/configuration/DefaultConfig.ts

@@ -2,6 +2,7 @@ import {Player, PlayerInfo, TerraNullius, Tile} from "../Game";
 import {within} from "../Util";
 import {Config, PlayerConfig, Theme} from "./Config";
 import {pastelTheme} from "./PastelTheme";
+import {vintageTheme} from "./VintageTheme";
 
 
 
@@ -24,7 +25,7 @@ export class DefaultConfig implements Config {
     lobbyLifetime(): number {
         return 30 * 1000
     }
-    theme(): Theme {return pastelTheme;}
+    theme(): Theme {return vintageTheme;}
 }
 
 export class DefaultPlayerConfig implements PlayerConfig {

src/core/configuration/PastelTheme.ts

@@ -92,11 +92,7 @@ export const pastelTheme = new class implements Theme {
         } else {
             const w = this.water.rgba
             if (tile.isShorelineWater()) {
-                return colord({
-                    r: Math.max(w.r + 10, 0),
-                    g: Math.max(w.g + 10, 0),
-                    b: Math.max(w.b + 10, 0)
-                })
+                this.shorelineWater
             }
             if (tile.magnitude() < 5) {
                 return colord({

src/core/configuration/VintageTheme.ts

@@ -0,0 +1,116 @@
+import {Colord, colord} from "colord";
+import {PlayerID, Tile} from "../Game";
+import {Theme} from "./Config";
+
+export const vintageTheme = new class implements Theme {
+
+    private background = colord({r: 210, g: 200, b: 180});
+    private land = colord({r: 190, g: 170, b: 150})
+    private shore = colord({r: 220, g: 200, b: 190});  // Brighter beige for shore
+
+    private water = colord({r: 160, g: 180, b: 200})
+    private shorelineWater = colord({r: 200, g: 200, b: 205});  // Slightly lighter muted blue for shoreline water
+
+    private territoryColors: Colord[] = [
+        // Original colors, adjusted for a more rustic look
+        colord({r: 160, g: 125, b: 120}), // Faded dusty rose
+        colord({r: 125, g: 155, b: 130}), // Muted sage green
+        colord({r: 160, g: 150, b: 120}), // Weathered khaki
+        colord({r: 125, g: 140, b: 155}), // Aged steel blue
+        colord({r: 155, g: 125, b: 150}), // Worn mauve
+        colord({r: 145, g: 155, b: 120}), // Faded olive
+        colord({r: 125, g: 155, b: 155}), // Weathered teal
+        colord({r: 160, g: 145, b: 120}), // Aged tan
+        colord({r: 140, g: 125, b: 155}), // Faded lavender
+        colord({r: 155, g: 155, b: 120}), // Aged mustard
+
+        // Extended palette with a rustic touch
+        colord({r: 170, g: 135, b: 125}), // Rustic terracotta
+        colord({r: 130, g: 170, b: 145}), // Weathered mint
+        colord({r: 170, g: 160, b: 125}), // Antique gold
+        colord({r: 130, g: 150, b: 170}), // Worn denim
+        colord({r: 170, g: 130, b: 160}), // Aged plum
+        colord({r: 155, g: 170, b: 130}), // Faded lime
+        colord({r: 130, g: 170, b: 170}), // Weathered turquoise
+        colord({r: 170, g: 155, b: 130}), // Rustic sand
+        colord({r: 155, g: 130, b: 170}), // Aged periwinkle
+        colord({r: 170, g: 170, b: 130}), // Faded chartreuse
+        colord({r: 145, g: 110, b: 105}), // Rustic burgundy
+        colord({r: 110, g: 145, b: 120}), // Weathered forest green
+        colord({r: 145, g: 135, b: 110}), // Aged olive
+        colord({r: 110, g: 125, b: 145}), // Faded stormy blue
+        colord({r: 145, g: 110, b: 135}), // Worn grape
+        colord({r: 130, g: 145, b: 110}), // Aged avocado
+        colord({r: 110, g: 145, b: 145}), // Weathered cyan
+        colord({r: 145, g: 130, b: 110}), // Rustic camel
+        colord({r: 130, g: 110, b: 145}), // Faded lilac
+        colord({r: 145, g: 145, b: 110}), // Weathered antique gold
+        colord({r: 165, g: 130, b: 120}), // Rustic coral
+        colord({r: 120, g: 165, b: 140}), // Weathered sage
+        colord({r: 165, g: 155, b: 120}), // Aged mustard
+        colord({r: 120, g: 145, b: 165}), // Worn blue-gray
+        colord({r: 165, g: 120, b: 155}), // Faded orchid
+        colord({r: 145, g: 165, b: 120}), // Aged pear
+        colord({r: 120, g: 165, b: 165}), // Weathered aqua
+        colord({r: 165, g: 145, b: 120}), // Rustic taupe
+        colord({r: 145, g: 120, b: 165}), // Worn wisteria
+        colord({r: 165, g: 165, b: 120}), // Weathered antique brass
+        colord({r: 155, g: 120, b: 110}), // Rustic rust
+        colord({r: 110, g: 155, b: 130}), // Aged sea green
+        colord({r: 155, g: 145, b: 110}), // Weathered khaki
+        colord({r: 110, g: 135, b: 155}), // Worn slate
+        colord({r: 155, g: 110, b: 145}), // Faded mauve
+        colord({r: 135, g: 155, b: 110}), // Aged olive drab
+        colord({r: 110, g: 155, b: 155}), // Weathered teal
+        colord({r: 155, g: 135, b: 110}), // Rustic bronze
+        colord({r: 135, g: 110, b: 155}), // Worn amethyst
+        colord({r: 155, g: 155, b: 110})  // Aged chartreuse
+    ];
+
+    playerInfoColor(id: PlayerID): Colord {
+        return colord({r: 90, g: 90, b: 90});  // Slightly lighter grey for player info
+    }
+
+    territoryColor(id: PlayerID): Colord {
+        return this.territoryColors[id % this.territoryColors.length];
+    }
+
+    borderColor(id: PlayerID): Colord {
+        const tc = this.territoryColor(id).rgba;
+        return colord({
+            r: Math.max(tc.r - 25, 0),
+            g: Math.max(tc.g - 25, 0),
+            b: Math.max(tc.b - 25, 0)
+        });
+    }
+
+    terrainColor(tile: Tile): Colord {
+        if (tile.isLand()) {
+            if (tile.isShore()) {
+                return this.shore;
+            }
+            return this.land;
+        } else {
+            const w = this.water.rgba;
+            if (tile.isShorelineWater()) {
+                return this.shorelineWater;
+            }
+            if (tile.magnitude() < 5) {
+                return colord({
+                    r: Math.max(w.r + 5 - tile.magnitude() / 2, 0),
+                    g: Math.max(w.g + 5 - tile.magnitude() / 2, 0),
+                    b: Math.max(w.b + 5 - tile.magnitude() / 2, 0)
+                });
+            }
+            return this.water;
+        }
+    }
+
+    backgroundColor(): Colord {
+        return this.background;
+    }
+
+    font(): string {
+        return "Georgia, serif";  // A more vintage-looking font
+    }
+}

tsconfig.json

@@ -6,7 +6,12 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "paths": {
+      "priority-queue-typescript": [
+        "./node_modules/priority-queue-typescript/src/priority-queue/PriorityQueue.js"
+      ]
+    }
   },
   "include": [
     "src/**/*",