alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 10:32:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

switched to pastel theme, improved it

Browse Source
This commit is contained in:
evanpelle
2024-08-26 21:05:10 -07:00
parent 480cfba8e0
commit f03542f1d7
10 changed files with 109 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.txt
+3 -2
View File
@@ -49,7 +49,7 @@
* show bar for long to respawn DONE 8/26/2024 * show bar for long to respawn DONE 8/26/2024
* store & delay tile updates for lag compensation DONE 8/26/2024 * store & delay tile updates for lag compensation DONE 8/26/2024
* BUG: error if don't spawn and then click after spawn mode DONE 8/26/2024 * BUG: error if don't spawn and then click after spawn mode DONE 8/26/2024
* BUG: change player name after join lobby * BUG: change player name after join lobby DONE 8/26/2024
* REFACTOR: use new priority queue * REFACTOR: use new priority queue
* BUG: players attack each other same time creates islands * BUG: players attack each other same time creates islands
* add shader to dim border * add shader to dim border
@@ -60,4 +60,5 @@
* PERF: use hierarchical a* search for boats * PERF: use hierarchical a* search for boats
* PERF: render tiles more efficiently * PERF: render tiles more efficiently
* Add terrain elevation to map * Add terrain elevation to map
* boats can go around the world * boats can go around the world
* make bots more likely to attack weaker players
resources/images/PastelMap.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 KiB

src/client/Client.ts
+1 -2
View File
@@ -5,8 +5,7 @@ import {PseudoRandom} from "../core/PseudoRandom";
import {GameID, Lobby, ServerMessage, ServerMessageSchema} from "../core/Schemas"; import {GameID, Lobby, ServerMessage, ServerMessageSchema} from "../core/Schemas";
import {loadTerrainMap, TerrainMap} from "../core/TerrainMapLoader"; import {loadTerrainMap, TerrainMap} from "../core/TerrainMapLoader";
import {ClientGame, createClientGame} from "./ClientGame"; import {ClientGame, createClientGame} from "./ClientGame";
import {v4 as uuidv4} from 'uuid'; import backgroundImage from '../../resources/images/PastelMap.png';
import backgroundImage from '../../resources/images/VintageMap2.png';
import favicon from '../../resources/images/Favicon.png'; import favicon from '../../resources/images/Favicon.png';
import './styles.css'; import './styles.css';
src/client/graphics/GameRenderer.ts
+2 -8
View File
@@ -6,7 +6,7 @@ import {NameRenderer} from "./NameRenderer";
import {bfs, manhattanDist} from "../../core/Util"; import {bfs, manhattanDist} from "../../core/Util";
import {PseudoRandom} from "../../core/PseudoRandom"; import {PseudoRandom} from "../../core/PseudoRandom";
import {TerrainRenderer} from "./TerrainRenderer"; import {TerrainRenderer} from "./TerrainRenderer";
import {MaxPriorityQueue, PriorityQueue} from "@datastructures-js/priority-queue"; import {PriorityQueue} from "@datastructures-js/priority-queue";
export class GameRenderer { export class GameRenderer {
private territoryCanvas: HTMLCanvasElement private territoryCanvas: HTMLCanvasElement
@@ -20,16 +20,13 @@ export class GameRenderer {
private context: CanvasRenderingContext2D private context: CanvasRenderingContext2D
private nameRenderer: NameRenderer; private nameRenderer: NameRenderer;
private theme: Theme private theme: Theme
private random = new PseudoRandom(123) private random = new PseudoRandom(123)
private tileToRenderQueue: PriorityQueue<{tileEvent: TileEvent, lastUpdate: number}> = new PriorityQueue((a, b) => {return a.lastUpdate - b.lastUpdate}) private tileToRenderQueue: PriorityQueue<{tileEvent: TileEvent, lastUpdate: number}> = new PriorityQueue((a, b) => {return a.lastUpdate - b.lastUpdate})
constructor(private gs: Game, private terrainRenderer: TerrainRenderer) { constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
this.theme = gs.config().theme() this.theme = gs.config().theme()
this.nameRenderer = new NameRenderer(gs, this.theme) this.nameRenderer = new NameRenderer(gs, this.theme)
@@ -70,13 +67,10 @@ export class GameRenderer {
} }
renderGame() { renderGame() {
// Clear the canvas
this.context.setTransform(1, 0, 0, 1, 0, 0);
this.context.clearRect(0, 0, this.gs.width(), this.gs.height());
// Set background // Set background
this.context.fillStyle = this.theme.backgroundColor().toHex(); this.context.fillStyle = this.theme.backgroundColor().toHex();
this.context.fillRect(0, 0, this.gs.width(), this.gs.height()); this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
// Save the current context state // Save the current context state
this.context.save(); this.context.save();
src/client/index.html
+3 -2
View File
@@ -10,6 +10,7 @@
<body> <body>
<div class="content"> <div class="content">
<h1>OpenFront.io</h1> <h1>OpenFront.io</h1>
<h2>(v0.01)</h2>
<div id="username-container"> <div id="username-container">
<input type="text" id="username" placeholder="Enter your username"> <input type="text" id="username" placeholder="Enter your username">
</div> </div>
@@ -20,7 +21,7 @@
<div id="player-count" class="player-count"></div> <div id="player-count" class="player-count"></div>
</button> </button>
</div> </div>
<div id="dev-log"> <!-- <div id="dev-log">
<h4>DEVLOG: 8/18/2024 - 8/26/2024</h4> <h4>DEVLOG: 8/18/2024 - 8/26/2024</h4>
<ul id="dev-log"> <ul id="dev-log">
<li>Create dev server at <a href="https://www.openfront.dev">openfront.dev</a></li> <li>Create dev server at <a href="https://www.openfront.dev">openfront.dev</a></li>
@@ -42,7 +43,7 @@
<li>Can respawn at start of game</li> <li>Can respawn at start of game</li>
<li>Added spawn timer</li> <li>Added spawn timer</li>
</ul> </ul>
</div> </div> -->
</div> </div>
<style> <style>
src/client/styles.css
+11 -1
View File
@@ -34,6 +34,14 @@ h1 {
text-align: center; text-align: center;
color: #2e2e2e; color: #2e2e2e;
font-size: 8em; font-size: 8em;
margin-bottom: 10px;
}
h2 {
font-family: Arial, serif;
text-align: center;
color: #2e2e2e;
font-size: 4em;
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -44,10 +52,12 @@ h1 {
#username { #username {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
font-size: 24px; font-size: 30px;
text-align: center;
border: 2px solid #007bff; border: 2px solid #007bff;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
margin: 30px auto;
} }
#lobbies-container { #lobbies-container {
src/core/configuration/DefaultConfig.ts
+1 -1
View File
@@ -25,7 +25,7 @@ export class DefaultConfig implements Config {
lobbyLifetime(): number { lobbyLifetime(): number {
return 20 * 1000 return 20 * 1000
} }
theme(): Theme {return vintageTheme;} theme(): Theme {return pastelTheme;}
} }
export class DefaultPlayerConfig implements PlayerConfig { export class DefaultPlayerConfig implements PlayerConfig {
src/core/configuration/DevConfig.ts
+18 -18
View File
@@ -3,24 +3,24 @@ import {PlayerConfig} from "./Config";
import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig"; import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig";
export const devConfig = new class extends DefaultConfig { export const devConfig = new class extends DefaultConfig {
numSpawnPhaseTurns(): number { // numSpawnPhaseTurns(): number {
return 40 // return 40
} // }
gameCreationRate(): number { // gameCreationRate(): number {
return 10 * 1000 // return 3 * 1000
} // }
lobbyLifetime(): number { // lobbyLifetime(): number {
return 10 * 1000 // return 3 * 1000
} // }
turnIntervalMs(): number { // turnIntervalMs(): number {
return 100 // return 100
} // }
player(): PlayerConfig { // player(): PlayerConfig {
return devPlayerConfig // return devPlayerConfig
} // }
numBots(): number { // numBots(): number {
return 250 // return 250
} // }
} }
export const devPlayerConfig = new class extends DefaultPlayerConfig { export const devPlayerConfig = new class extends DefaultPlayerConfig {
src/core/configuration/PastelTheme.ts
+65 -64
View File
@@ -8,67 +8,68 @@ import {simpleHash} from "../Util";
export const pastelTheme = new class implements Theme { export const pastelTheme = new class implements Theme {
private rand = new PseudoRandom(123) private rand = new PseudoRandom(123)
private background = colord({r: 100, g: 100, b: 100}); private background = colord({r: 60, g: 60, b: 60});
private land = colord({r: 244, g: 243, b: 198}); private land = colord({r: 194, g: 193, b: 148});
private shore = colord({r: 254, g: 253, b: 208}); private shore = colord({r: 204, g: 203, b: 158});
private water = colord({r: 160, g: 203, b: 231}); private water = colord({r: 110, g: 153, b: 181});
private shorelineWater = colord({r: 150, g: 193, b: 221}); private shorelineWater = colord({r: 100, g: 143, b: 171});
private territoryColors: Colord[] = [ private territoryColors: Colord[] = [
colord({r: 255, g: 179, b: 186}), // Vibrant Light Pink colord({r: 205, g: 129, b: 136}), // Darker Light Pink
colord({r: 255, g: 223, b: 186}), // Vibrant Peach colord({r: 205, g: 173, b: 136}), // Darker Peach
colord({r: 190, g: 255, b: 190}), // Vibrant Light Green colord({r: 140, g: 205, b: 140}), // Darker Light Green
colord({r: 173, g: 216, b: 255}), // Vibrant Light Blue colord({r: 123, g: 166, b: 205}), // Darker Light Blue
colord({r: 224, g: 187, b: 255}), // Vibrant Light Purple colord({r: 174, g: 137, b: 205}), // Darker Light Purple
colord({r: 255, g: 191, b: 230}), // Vibrant Pink colord({r: 205, g: 141, b: 180}), // Darker Pink
colord({r: 210, g: 255, b: 210}), // Vibrant Mint Green colord({r: 160, g: 205, b: 160}), // Darker Mint Green
colord({r: 255, g: 213, b: 179}), // Vibrant Light Orange colord({r: 205, g: 163, b: 129}), // Darker Light Orange
colord({r: 198, g: 198, b: 255}), // Vibrant Lavender colord({r: 148, g: 148, b: 205}), // Darker Lavender
colord({r: 255, g: 255, b: 186}), // Vibrant Light Yellow colord({r: 205, g: 205, b: 136}), // Darker Light Yellow
colord({r: 186, g: 255, b: 201}), // Vibrant Seafoam Green colord({r: 136, g: 205, b: 151}), // Darker Seafoam Green
colord({r: 255, g: 186, b: 255}), // Vibrant Light Magenta colord({r: 205, g: 136, b: 205}), // Darker Light Magenta
colord({r: 210, g: 255, b: 210}), // Vibrant Pale Green colord({r: 160, g: 205, b: 160}), // Darker Pale Green
colord({r: 255, g: 202, b: 202}), // Vibrant Salmon Pink colord({r: 205, g: 152, b: 152}), // Darker Salmon Pink
colord({r: 206, g: 206, b: 255}), // Vibrant Periwinkle colord({r: 156, g: 156, b: 205}), // Darker Periwinkle
colord({r: 255, g: 234, b: 186}), // Vibrant Cream colord({r: 205, g: 184, b: 136}), // Darker Cream
colord({r: 186, g: 255, b: 255}), // Vibrant Light Cyan colord({r: 136, g: 205, b: 205}), // Darker Light Cyan
colord({r: 238, g: 210, b: 255}), // Vibrant Lilac colord({r: 188, g: 160, b: 205}), // Darker Lilac
colord({r: 206, g: 255, b: 238}), // Vibrant Pale Turquoise colord({r: 156, g: 205, b: 188}), // Darker Pale Turquoise
colord({r: 255, g: 209, b: 186}), // Vibrant Peach colord({r: 205, g: 159, b: 136}), // Darker Peach
colord({r: 186, g: 216, b: 255}), // Vibrant Baby Blue colord({r: 136, g: 166, b: 205}), // Darker Baby Blue
colord({r: 246, g: 255, b: 186}), // Vibrant Pale Yellow colord({r: 196, g: 205, b: 136}), // Darker Pale Yellow
colord({r: 220, g: 186, b: 255}), // Vibrant Light Violet colord({r: 170, g: 136, b: 205}), // Darker Light Violet
colord({r: 255, g: 186, b: 213}), // Vibrant Rose colord({r: 205, g: 136, b: 163}), // Darker Rose
colord({r: 186, g: 255, b: 226}), // Vibrant Honeydew colord({r: 136, g: 205, b: 176}), // Darker Honeydew
colord({r: 206, g: 236, b: 255}), // Vibrant Sky Blue colord({r: 156, g: 186, b: 205}), // Darker Sky Blue
colord({r: 255, g: 232, b: 206}), // Vibrant Wheat colord({r: 205, g: 182, b: 156}), // Darker Wheat
colord({r: 206, g: 255, b: 255}), // Vibrant Pale Cyan colord({r: 156, g: 205, b: 205}), // Darker Pale Cyan
colord({r: 255, g: 216, b: 216}), // Vibrant Misty Rose colord({r: 205, g: 166, b: 166}), // Darker Misty Rose
colord({r: 216, g: 216, b: 255}), // Vibrant Pale Lavender colord({r: 166, g: 166, b: 205}), // Darker Pale Lavender
colord({r: 255, g: 250, b: 205}), // Vibrant Pale Goldenrod colord({r: 205, g: 200, b: 155}), // Darker Pale Goldenrod
colord({r: 216, g: 255, b: 216}), // Vibrant Pale Mint colord({r: 166, g: 205, b: 166}), // Darker Pale Mint
colord({r: 255, g: 216, b: 255}), // Vibrant Pale Plum colord({r: 205, g: 166, b: 205}), // Darker Pale Plum
colord({r: 220, g: 255, b: 220}), // Vibrant Mint Cream colord({r: 170, g: 205, b: 170}), // Darker Mint Cream
colord({r: 255, g: 220, b: 220}), // Vibrant Pale Pink colord({r: 205, g: 170, b: 170}), // Darker Pale Pink
colord({r: 220, g: 220, b: 255}), // Vibrant Pale Blue colord({r: 170, g: 170, b: 205}), // Darker Pale Blue
colord({r: 255, g: 255, b: 220}), // Vibrant Light Goldenrod colord({r: 205, g: 205, b: 170}), // Darker Light Goldenrod
colord({r: 220, g: 255, b: 255}), // Vibrant Light Azure colord({r: 170, g: 205, b: 205}), // Darker Light Azure
colord({r: 255, g: 220, b: 255}), // Vibrant Pale Magenta colord({r: 205, g: 170, b: 205}), // Darker Pale Magenta
colord({r: 230, g: 255, b: 230}), // Vibrant Honeydew colord({r: 180, g: 205, b: 180}), // Darker Honeydew
colord({r: 255, g: 230, b: 230}), // Vibrant Lavender Blush colord({r: 205, g: 180, b: 180}), // Darker Lavender Blush
colord({r: 230, g: 230, b: 255}), // Vibrant Ghost White colord({r: 180, g: 180, b: 205}), // Darker Ghost White
colord({r: 255, g: 239, b: 219}), // Vibrant Seashell colord({r: 205, g: 189, b: 169}), // Darker Seashell
colord({r: 219, g: 255, b: 239}), // Vibrant Mint Cream colord({r: 169, g: 205, b: 189}), // Darker Mint Cream
colord({r: 239, g: 219, b: 255}), // Vibrant Pale Lavender colord({r: 189, g: 169, b: 205}), // Darker Pale Lavender
colord({r: 255, g: 250, b: 230}), // Vibrant Floral White colord({r: 205, g: 200, b: 180}), // Darker Floral White
colord({r: 230, g: 255, b: 250}), // Vibrant Azure Mist colord({r: 180, g: 205, b: 200}), // Darker Azure Mist
colord({r: 250, g: 230, b: 255}), // Vibrant Pale Purple colord({r: 200, g: 180, b: 205}), // Darker Pale Purple
colord({r: 250, g: 255, b: 230}), // Vibrant Ivory colord({r: 200, g: 205, b: 180}), // Darker Ivory
colord({r: 230, g: 250, b: 255}) // Vibrant Alice Blue colord({r: 180, g: 200, b: 205}) // Darker Alice Blue
]; ];
playerInfoColor(id: PlayerID): Colord { playerInfoColor(id: PlayerID): Colord {
return colord({r: 0, g: 0, b: 0}) return colord({r: 50, g: 50, b: 50})
} }
territoryColor(id: PlayerID): Colord { territoryColor(id: PlayerID): Colord {
@@ -78,9 +79,9 @@ export const pastelTheme = new class implements Theme {
borderColor(id: PlayerID): Colord { borderColor(id: PlayerID): Colord {
const tc = this.territoryColor(id).rgba; const tc = this.territoryColor(id).rgba;
return colord({ return colord({
r: Math.max(tc.r - 20, 0), r: Math.max(tc.r - 40, 0),
g: Math.max(tc.g - 20, 0), g: Math.max(tc.g - 40, 0),
b: Math.max(tc.b - 20, 0) b: Math.max(tc.b - 40, 0)
}) })
} }
@@ -93,13 +94,13 @@ export const pastelTheme = new class implements Theme {
} else { } else {
const w = this.water.rgba const w = this.water.rgba
if (tile.isShorelineWater()) { if (tile.isShorelineWater()) {
this.shorelineWater return this.shorelineWater
} }
if (tile.magnitude() < 5) { if (tile.magnitude() < 7) {
return colord({ return colord({
r: Math.max(w.r + 5 - tile.magnitude() / 2, 0), r: Math.max(w.r - 7 + tile.magnitude(), 0),
g: Math.max(w.g + 5 - tile.magnitude() / 2, 0), g: Math.max(w.g - 7 + tile.magnitude(), 0),
b: Math.max(w.b + 5 - tile.magnitude() / 2, 0) b: Math.max(w.b - 7 + tile.magnitude(), 0)
}) })
} }
return this.water return this.water
update-deploy.sh
+5
View File
@@ -41,6 +41,11 @@ docker push us-central1-docker.pkg.dev/openfrontio/openfrontio/game-server:$TAG
# Prune Docker system on the instance # Prune Docker system on the instance
gcloud compute ssh $INSTANCE_NAME --zone us-central1-a --command 'docker system prune -f -a' gcloud compute ssh $INSTANCE_NAME --zone us-central1-a --command 'docker system prune -f -a'
gcloud compute ssh $INSTANCE_NAME --zone us-central1-a --command 'docker kill $(docker ps -q)'
gcloud compute ssh $INSTANCE_NAME --zone us-central1-a --command 'docker rmi $(docker images -q) -f'
# Update the GCE instance with the new container image # Update the GCE instance with the new container image
gcloud compute instances update-container $INSTANCE_NAME \ gcloud compute instances update-container $INSTANCE_NAME \
--container-image us-central1-docker.pkg.dev/openfrontio/openfrontio/game-server:$TAG \ --container-image us-central1-docker.pkg.dev/openfrontio/openfrontio/game-server:$TAG \