use overpass font

src/client/Client.ts

@@ -8,6 +8,8 @@ import {loadTerrainMap} from "../core/TerrainMapLoader";
 import {ClientGame, createClientGame} from "./ClientGame";
 import {v4 as uuidv4} from 'uuid';
 import backgroundImage from '../../resources/images/empty_map.png';
+import './styles.css';
+
 
 
 // import WebSocket from 'ws';

src/client/graphics/NameRenderer.ts

@@ -39,13 +39,6 @@ export class NameRenderer {
     }
 
     public render(mainContex: CanvasRenderingContext2D, scale: number, uppperLeft: Cell, bottomRight: Cell) {
-        // mainContex.drawImage(
-        //     this.canvas,
-        //     -this.game.width() / 2,
-        //     -this.game.height() / 2,
-        //     this.game.width(),
-        //     this.game.height()
-        // )
         for (const render of this.toRender) {
             if (render.player.isAlive()) {
                 this.renderPlayerInfo(render, mainContex, scale, uppperLeft, bottomRight)
@@ -104,12 +97,13 @@ export class NameRenderer {
 
         context.textRendering = "optimizeSpeed";
 
-        context.font = `bold ${render.fontSize}px ${this.theme.font()}`;
+        context.font = `${render.fontSize}px ${this.theme.font()}`;
         context.fillStyle = this.theme.playerInfoColor(render.player.id()).toHex();
         context.textAlign = 'center';
         context.textBaseline = 'middle';
 
         context.fillText(render.player.info().name, nameCenterX, nameCenterY - render.fontSize / 2);
+        context.font = `bold ${render.fontSize}px ${this.theme.font()}`;
         context.fillText(String(Math.floor(render.player.troops())), nameCenterX, nameCenterY + render.fontSize);
     }
 }

src/client/index.html

@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>OpenFront</title>
+	<link rel="stylesheet" href="styles.css">
 	<style>
 		body {
 			font-family: Arial, sans-serif;
@@ -116,6 +117,15 @@
 			text-align: center;
 			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 		}
+
+		h1 {
+			font-family: 'Overpass', sans-serif;
+			text-align: center;
+			color: #ffffff;
+			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+			font-size: 2.5em;
+			margin-bottom: 30px;
+		}
 	</style>
 </head>
 

src/client/styles.css

@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'Overpass';
+    src: url('/resources/fonts/overpass.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'Overpass', sans-serif;
+}

src/core/configuration/PastelTheme.ts

@@ -87,6 +87,6 @@ export const pastelTheme = new class implements Theme {
     }
 
     font(): string {
-        return "Arial";
+        return "Overpass, sans-serif";
     }
 }