mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 09:30:45 +00:00
switched to pastel theme, improved it
This commit is contained in:
evanpelle
@@ -49,7 +49,7 @@
|
||||
* show bar for long to respawn 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: change player name after join lobby
|
||||
* BUG: change player name after join lobby DONE 8/26/2024
|
||||
* REFACTOR: use new priority queue
|
||||
* BUG: players attack each other same time creates islands
|
||||
* add shader to dim border
|
||||
@@ -60,4 +60,5 @@
|
||||
* PERF: use hierarchical a* search for boats
|
||||
* PERF: render tiles more efficiently
|
||||
* 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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
@@ -5,8 +5,7 @@ import {PseudoRandom} from "../core/PseudoRandom";
|
||||
import {GameID, Lobby, ServerMessage, ServerMessageSchema} from "../core/Schemas";
|
||||
import {loadTerrainMap, TerrainMap} from "../core/TerrainMapLoader";
|
||||
import {ClientGame, createClientGame} from "./ClientGame";
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
import backgroundImage from '../../resources/images/VintageMap2.png';
|
||||
import backgroundImage from '../../resources/images/PastelMap.png';
|
||||
import favicon from '../../resources/images/Favicon.png';
|
||||
|
||||
import './styles.css';
|
||||
|
||||
@@ -6,7 +6,7 @@ import {NameRenderer} from "./NameRenderer";
|
||||
import {bfs, manhattanDist} from "../../core/Util";
|
||||
import {PseudoRandom} from "../../core/PseudoRandom";
|
||||
import {TerrainRenderer} from "./TerrainRenderer";
|
||||
import {MaxPriorityQueue, PriorityQueue} from "@datastructures-js/priority-queue";
|
||||
import {PriorityQueue} from "@datastructures-js/priority-queue";
|
||||
|
||||
export class GameRenderer {
|
||||
private territoryCanvas: HTMLCanvasElement
|
||||
@@ -20,16 +20,13 @@ export class GameRenderer {
|
||||
|
||||
private context: CanvasRenderingContext2D
|
||||
|
||||
|
||||
private nameRenderer: NameRenderer;
|
||||
private theme: Theme
|
||||
|
||||
private random = new PseudoRandom(123)
|
||||
|
||||
|
||||
private tileToRenderQueue: PriorityQueue<{tileEvent: TileEvent, lastUpdate: number}> = new PriorityQueue((a, b) => {return a.lastUpdate - b.lastUpdate})
|
||||
|
||||
|
||||
constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
|
||||
this.theme = gs.config().theme()
|
||||
this.nameRenderer = new NameRenderer(gs, this.theme)
|
||||
@@ -70,13 +67,10 @@ export class GameRenderer {
|
||||
}
|
||||
|
||||
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
|
||||
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
|
||||
this.context.save();
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>OpenFront.io</h1>
|
||||
<h2>(v0.01)</h2>
|
||||
<div id="username-container">
|
||||
<input type="text" id="username" placeholder="Enter your username">
|
||||
</div>
|
||||
@@ -20,7 +21,7 @@
|
||||
<div id="player-count" class="player-count"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="dev-log">
|
||||
<!-- <div id="dev-log">
|
||||
<h4>DEVLOG: 8/18/2024 - 8/26/2024</h4>
|
||||
<ul id="dev-log">
|
||||
<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>Added spawn timer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
+11
-1
@@ -34,6 +34,14 @@ h1 {
|
||||
text-align: center;
|
||||
color: #2e2e2e;
|
||||
font-size: 8em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Arial, serif;
|
||||
text-align: center;
|
||||
color: #2e2e2e;
|
||||
font-size: 4em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@@ -44,10 +52,12 @@ h1 {
|
||||
#username {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 24px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
#lobbies-container {
|
||||
|
||||
@@ -25,7 +25,7 @@ export class DefaultConfig implements Config {
|
||||
lobbyLifetime(): number {
|
||||
return 20 * 1000
|
||||
}
|
||||
theme(): Theme {return vintageTheme;}
|
||||
theme(): Theme {return pastelTheme;}
|
||||
}
|
||||
|
||||
export class DefaultPlayerConfig implements PlayerConfig {
|
||||
|
||||
@@ -3,24 +3,24 @@ import {PlayerConfig} from "./Config";
|
||||
import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig";
|
||||
|
||||
export const devConfig = new class extends DefaultConfig {
|
||||
numSpawnPhaseTurns(): number {
|
||||
return 40
|
||||
}
|
||||
gameCreationRate(): number {
|
||||
return 10 * 1000
|
||||
}
|
||||
lobbyLifetime(): number {
|
||||
return 10 * 1000
|
||||
}
|
||||
turnIntervalMs(): number {
|
||||
return 100
|
||||
}
|
||||
player(): PlayerConfig {
|
||||
return devPlayerConfig
|
||||
}
|
||||
numBots(): number {
|
||||
return 250
|
||||
}
|
||||
// numSpawnPhaseTurns(): number {
|
||||
// return 40
|
||||
// }
|
||||
// gameCreationRate(): number {
|
||||
// return 3 * 1000
|
||||
// }
|
||||
// lobbyLifetime(): number {
|
||||
// return 3 * 1000
|
||||
// }
|
||||
// turnIntervalMs(): number {
|
||||
// return 100
|
||||
// }
|
||||
// player(): PlayerConfig {
|
||||
// return devPlayerConfig
|
||||
// }
|
||||
// numBots(): number {
|
||||
// return 250
|
||||
// }
|
||||
}
|
||||
|
||||
export const devPlayerConfig = new class extends DefaultPlayerConfig {
|
||||
|
||||
@@ -8,67 +8,68 @@ import {simpleHash} from "../Util";
|
||||
export const pastelTheme = new class implements Theme {
|
||||
private rand = new PseudoRandom(123)
|
||||
|
||||
private background = colord({r: 100, g: 100, b: 100});
|
||||
private land = colord({r: 244, g: 243, b: 198});
|
||||
private shore = colord({r: 254, g: 253, b: 208});
|
||||
private background = colord({r: 60, g: 60, b: 60});
|
||||
private land = colord({r: 194, g: 193, b: 148});
|
||||
private shore = colord({r: 204, g: 203, b: 158});
|
||||
|
||||
private water = colord({r: 160, g: 203, b: 231});
|
||||
private shorelineWater = colord({r: 150, g: 193, b: 221});
|
||||
private water = colord({r: 110, g: 153, b: 181});
|
||||
private shorelineWater = colord({r: 100, g: 143, b: 171});
|
||||
|
||||
private territoryColors: Colord[] = [
|
||||
colord({r: 255, g: 179, b: 186}), // Vibrant Light Pink
|
||||
colord({r: 255, g: 223, b: 186}), // Vibrant Peach
|
||||
colord({r: 190, g: 255, b: 190}), // Vibrant Light Green
|
||||
colord({r: 173, g: 216, b: 255}), // Vibrant Light Blue
|
||||
colord({r: 224, g: 187, b: 255}), // Vibrant Light Purple
|
||||
colord({r: 255, g: 191, b: 230}), // Vibrant Pink
|
||||
colord({r: 210, g: 255, b: 210}), // Vibrant Mint Green
|
||||
colord({r: 255, g: 213, b: 179}), // Vibrant Light Orange
|
||||
colord({r: 198, g: 198, b: 255}), // Vibrant Lavender
|
||||
colord({r: 255, g: 255, b: 186}), // Vibrant Light Yellow
|
||||
colord({r: 186, g: 255, b: 201}), // Vibrant Seafoam Green
|
||||
colord({r: 255, g: 186, b: 255}), // Vibrant Light Magenta
|
||||
colord({r: 210, g: 255, b: 210}), // Vibrant Pale Green
|
||||
colord({r: 255, g: 202, b: 202}), // Vibrant Salmon Pink
|
||||
colord({r: 206, g: 206, b: 255}), // Vibrant Periwinkle
|
||||
colord({r: 255, g: 234, b: 186}), // Vibrant Cream
|
||||
colord({r: 186, g: 255, b: 255}), // Vibrant Light Cyan
|
||||
colord({r: 238, g: 210, b: 255}), // Vibrant Lilac
|
||||
colord({r: 206, g: 255, b: 238}), // Vibrant Pale Turquoise
|
||||
colord({r: 255, g: 209, b: 186}), // Vibrant Peach
|
||||
colord({r: 186, g: 216, b: 255}), // Vibrant Baby Blue
|
||||
colord({r: 246, g: 255, b: 186}), // Vibrant Pale Yellow
|
||||
colord({r: 220, g: 186, b: 255}), // Vibrant Light Violet
|
||||
colord({r: 255, g: 186, b: 213}), // Vibrant Rose
|
||||
colord({r: 186, g: 255, b: 226}), // Vibrant Honeydew
|
||||
colord({r: 206, g: 236, b: 255}), // Vibrant Sky Blue
|
||||
colord({r: 255, g: 232, b: 206}), // Vibrant Wheat
|
||||
colord({r: 206, g: 255, b: 255}), // Vibrant Pale Cyan
|
||||
colord({r: 255, g: 216, b: 216}), // Vibrant Misty Rose
|
||||
colord({r: 216, g: 216, b: 255}), // Vibrant Pale Lavender
|
||||
colord({r: 255, g: 250, b: 205}), // Vibrant Pale Goldenrod
|
||||
colord({r: 216, g: 255, b: 216}), // Vibrant Pale Mint
|
||||
colord({r: 255, g: 216, b: 255}), // Vibrant Pale Plum
|
||||
colord({r: 220, g: 255, b: 220}), // Vibrant Mint Cream
|
||||
colord({r: 255, g: 220, b: 220}), // Vibrant Pale Pink
|
||||
colord({r: 220, g: 220, b: 255}), // Vibrant Pale Blue
|
||||
colord({r: 255, g: 255, b: 220}), // Vibrant Light Goldenrod
|
||||
colord({r: 220, g: 255, b: 255}), // Vibrant Light Azure
|
||||
colord({r: 255, g: 220, b: 255}), // Vibrant Pale Magenta
|
||||
colord({r: 230, g: 255, b: 230}), // Vibrant Honeydew
|
||||
colord({r: 255, g: 230, b: 230}), // Vibrant Lavender Blush
|
||||
colord({r: 230, g: 230, b: 255}), // Vibrant Ghost White
|
||||
colord({r: 255, g: 239, b: 219}), // Vibrant Seashell
|
||||
colord({r: 219, g: 255, b: 239}), // Vibrant Mint Cream
|
||||
colord({r: 239, g: 219, b: 255}), // Vibrant Pale Lavender
|
||||
colord({r: 255, g: 250, b: 230}), // Vibrant Floral White
|
||||
colord({r: 230, g: 255, b: 250}), // Vibrant Azure Mist
|
||||
colord({r: 250, g: 230, b: 255}), // Vibrant Pale Purple
|
||||
colord({r: 250, g: 255, b: 230}), // Vibrant Ivory
|
||||
colord({r: 230, g: 250, b: 255}) // Vibrant Alice Blue
|
||||
colord({r: 205, g: 129, b: 136}), // Darker Light Pink
|
||||
colord({r: 205, g: 173, b: 136}), // Darker Peach
|
||||
colord({r: 140, g: 205, b: 140}), // Darker Light Green
|
||||
colord({r: 123, g: 166, b: 205}), // Darker Light Blue
|
||||
colord({r: 174, g: 137, b: 205}), // Darker Light Purple
|
||||
colord({r: 205, g: 141, b: 180}), // Darker Pink
|
||||
colord({r: 160, g: 205, b: 160}), // Darker Mint Green
|
||||
colord({r: 205, g: 163, b: 129}), // Darker Light Orange
|
||||
colord({r: 148, g: 148, b: 205}), // Darker Lavender
|
||||
colord({r: 205, g: 205, b: 136}), // Darker Light Yellow
|
||||
colord({r: 136, g: 205, b: 151}), // Darker Seafoam Green
|
||||
colord({r: 205, g: 136, b: 205}), // Darker Light Magenta
|
||||
colord({r: 160, g: 205, b: 160}), // Darker Pale Green
|
||||
colord({r: 205, g: 152, b: 152}), // Darker Salmon Pink
|
||||
colord({r: 156, g: 156, b: 205}), // Darker Periwinkle
|
||||
colord({r: 205, g: 184, b: 136}), // Darker Cream
|
||||
colord({r: 136, g: 205, b: 205}), // Darker Light Cyan
|
||||
colord({r: 188, g: 160, b: 205}), // Darker Lilac
|
||||
colord({r: 156, g: 205, b: 188}), // Darker Pale Turquoise
|
||||
colord({r: 205, g: 159, b: 136}), // Darker Peach
|
||||
colord({r: 136, g: 166, b: 205}), // Darker Baby Blue
|
||||
colord({r: 196, g: 205, b: 136}), // Darker Pale Yellow
|
||||
colord({r: 170, g: 136, b: 205}), // Darker Light Violet
|
||||
colord({r: 205, g: 136, b: 163}), // Darker Rose
|
||||
colord({r: 136, g: 205, b: 176}), // Darker Honeydew
|
||||
colord({r: 156, g: 186, b: 205}), // Darker Sky Blue
|
||||
colord({r: 205, g: 182, b: 156}), // Darker Wheat
|
||||
colord({r: 156, g: 205, b: 205}), // Darker Pale Cyan
|
||||
colord({r: 205, g: 166, b: 166}), // Darker Misty Rose
|
||||
colord({r: 166, g: 166, b: 205}), // Darker Pale Lavender
|
||||
colord({r: 205, g: 200, b: 155}), // Darker Pale Goldenrod
|
||||
colord({r: 166, g: 205, b: 166}), // Darker Pale Mint
|
||||
colord({r: 205, g: 166, b: 205}), // Darker Pale Plum
|
||||
colord({r: 170, g: 205, b: 170}), // Darker Mint Cream
|
||||
colord({r: 205, g: 170, b: 170}), // Darker Pale Pink
|
||||
colord({r: 170, g: 170, b: 205}), // Darker Pale Blue
|
||||
colord({r: 205, g: 205, b: 170}), // Darker Light Goldenrod
|
||||
colord({r: 170, g: 205, b: 205}), // Darker Light Azure
|
||||
colord({r: 205, g: 170, b: 205}), // Darker Pale Magenta
|
||||
colord({r: 180, g: 205, b: 180}), // Darker Honeydew
|
||||
colord({r: 205, g: 180, b: 180}), // Darker Lavender Blush
|
||||
colord({r: 180, g: 180, b: 205}), // Darker Ghost White
|
||||
colord({r: 205, g: 189, b: 169}), // Darker Seashell
|
||||
colord({r: 169, g: 205, b: 189}), // Darker Mint Cream
|
||||
colord({r: 189, g: 169, b: 205}), // Darker Pale Lavender
|
||||
colord({r: 205, g: 200, b: 180}), // Darker Floral White
|
||||
colord({r: 180, g: 205, b: 200}), // Darker Azure Mist
|
||||
colord({r: 200, g: 180, b: 205}), // Darker Pale Purple
|
||||
colord({r: 200, g: 205, b: 180}), // Darker Ivory
|
||||
colord({r: 180, g: 200, b: 205}) // Darker Alice Blue
|
||||
];
|
||||
|
||||
playerInfoColor(id: PlayerID): Colord {
|
||||
return colord({r: 0, g: 0, b: 0})
|
||||
return colord({r: 50, g: 50, b: 50})
|
||||
}
|
||||
|
||||
territoryColor(id: PlayerID): Colord {
|
||||
@@ -78,9 +79,9 @@ export const pastelTheme = new class implements Theme {
|
||||
borderColor(id: PlayerID): Colord {
|
||||
const tc = this.territoryColor(id).rgba;
|
||||
return colord({
|
||||
r: Math.max(tc.r - 20, 0),
|
||||
g: Math.max(tc.g - 20, 0),
|
||||
b: Math.max(tc.b - 20, 0)
|
||||
r: Math.max(tc.r - 40, 0),
|
||||
g: Math.max(tc.g - 40, 0),
|
||||
b: Math.max(tc.b - 40, 0)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -93,13 +94,13 @@ export const pastelTheme = new class implements Theme {
|
||||
} else {
|
||||
const w = this.water.rgba
|
||||
if (tile.isShorelineWater()) {
|
||||
this.shorelineWater
|
||||
return this.shorelineWater
|
||||
}
|
||||
if (tile.magnitude() < 5) {
|
||||
if (tile.magnitude() < 7) {
|
||||
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)
|
||||
r: Math.max(w.r - 7 + tile.magnitude(), 0),
|
||||
g: Math.max(w.g - 7 + tile.magnitude(), 0),
|
||||
b: Math.max(w.b - 7 + tile.magnitude(), 0)
|
||||
})
|
||||
}
|
||||
return this.water
|
||||
|
||||
@@ -41,6 +41,11 @@ docker push us-central1-docker.pkg.dev/openfrontio/openfrontio/game-server:$TAG
|
||||
# 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 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
|
||||
gcloud compute instances update-container $INSTANCE_NAME \
|
||||
--container-image us-central1-docker.pkg.dev/openfrontio/openfrontio/game-server:$TAG \
|
||||
|
||||
Reference in New Issue
Block a user