From 4a409c3578ceb600539076a0d9083e643ef07d2f Mon Sep 17 00:00:00 2001 From: evanpelle Date: Sat, 24 Aug 2024 11:20:56 -0700 Subject: [PATCH] created vintage theme --- TODO.txt | 13 +-- src/core/configuration/DefaultConfig.ts | 3 +- src/core/configuration/PastelTheme.ts | 6 +- src/core/configuration/VintageTheme.ts | 116 ++++++++++++++++++++++++ tsconfig.json | 7 +- 5 files changed, 132 insertions(+), 13 deletions(-) create mode 100644 src/core/configuration/VintageTheme.ts diff --git a/TODO.txt b/TODO.txt index 41a240429..8c87d9b2a 100644 --- a/TODO.txt +++ b/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 diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts index c87eb7d2e..78210f4b9 100644 --- a/src/core/configuration/DefaultConfig.ts +++ b/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 { diff --git a/src/core/configuration/PastelTheme.ts b/src/core/configuration/PastelTheme.ts index 970e76c9e..f9e6844ec 100644 --- a/src/core/configuration/PastelTheme.ts +++ b/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({ diff --git a/src/core/configuration/VintageTheme.ts b/src/core/configuration/VintageTheme.ts new file mode 100644 index 000000000..d876c408e --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index b340c5af2..40254babe 100644 --- a/tsconfig.json +++ b/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/**/*",