switched to pastel theme, improved it

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
+1 -2
View File
@@ -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';
+2 -8
View File
@@ -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();
+3 -2
View File
@@ -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
View File
@@ -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 {