From 453935176eef4c051235a60e87a71a01e3534147 Mon Sep 17 00:00:00 2001 From: evanpelle Date: Sun, 25 Aug 2024 09:52:40 -0700 Subject: [PATCH] fixed MIME error, wait for css to load --- src/client/index.html | 118 ++++------------------------------- src/client/styles.css | 103 ++++++++++++++++++++++++++++++ src/core/TerrainMapLoader.ts | 2 +- src/server/Server.ts | 11 ++-- 4 files changed, 124 insertions(+), 110 deletions(-) diff --git a/src/client/index.html b/src/client/index.html index 7fe9f640a..76f439141 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -5,111 +5,6 @@ OpenFront (ALPHA) - - @@ -127,6 +22,19 @@ + + + diff --git a/src/client/styles.css b/src/client/styles.css index bf5a27655..f6cbc507b 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -7,4 +7,107 @@ body { font-family: 'Overpass', sans-serif; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + min-height: 100vh; + background-color: #15151500; + background-image: url('/resources/images/watercolor_worldmap.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; + background-blend-mode: overlay; +} + +.content { + max-width: 1020px; + margin: 0 auto; + padding: 20px; + position: relative; +} + +h1 { + font-family: Arial, serif; + text-align: center; + color: #2e2e2e; + font-size: 8em; + margin-bottom: 30px; +} + +#username-container { + margin-bottom: 30px; +} + +#username { + width: 100%; + padding: 15px; + font-size: 18px; + border: 2px solid #007bff; + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.8); +} + +#lobbies-container { + display: flex; + justify-content: center; +} + + +.lobby-button { + width: 500px; + height: 500px; + font-size: 24px; + font-weight: bold; + border: 3px solid #007bff; + background-color: rgba(0, 123, 255, 0.2); + color: #ffffff; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + padding: 20px; + text-align: center; + box-sizing: border-box; +} + +.lobby-button:hover { + background-color: rgba(0, 123, 255, 0.4); + transform: translateY(-5px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); +} + +.lobby-button.highlighted { + background-color: rgba(0, 123, 255, 0.6); + transform: translateY(-5px); + box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6); + border-color: #ffffff; +} + +.lobby-name { + font-size: 36px; + margin-bottom: 20px; +} + +.lobby-timer { + font-size: 28px; + margin-bottom: 20px; +} + +.player-count { + font-size: 24px; + color: #000000; +} + +.joining-message { + font-size: 48px; + color: rgb(0, 0, 0); + text-align: center; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } \ No newline at end of file diff --git a/src/core/TerrainMapLoader.ts b/src/core/TerrainMapLoader.ts index d9348e05a..ba1fd5fc7 100644 --- a/src/core/TerrainMapLoader.ts +++ b/src/core/TerrainMapLoader.ts @@ -41,7 +41,7 @@ export function loadTerrainMap(): TerrainMap { console.log(`Decoded dimensions: ${width}x${height}`); // Log the first 100 bytes of data (including the width and height bytes) - logBinaryAsAscii(fileData, 100); + // logBinaryAsAscii(fileData, 100); // Check if the data length matches the expected size if (fileData.length != width * height + 4) { // +4 for the width and height bytes diff --git a/src/server/Server.ts b/src/server/Server.ts index f6540674f..18d244c98 100644 --- a/src/server/Server.ts +++ b/src/server/Server.ts @@ -6,7 +6,6 @@ import {fileURLToPath} from 'url'; import {GameManager} from './GameManager'; import {Client} from './Client'; import {ClientMessage, ClientMessageSchema} from '../core/Schemas'; -import {defaultConfig} from '../core/configuration/DefaultConfig'; import {GamePhase} from './GameServer'; import {getConfig} from '../core/configuration/Config'; @@ -17,9 +16,13 @@ const app = express(); const server = http.createServer(app); const wss = new WebSocketServer({server}); -// Serve static files from the 'out' directory -app.use(express.static(path.join(__dirname, '../../out'))); -app.use(express.json()) +app.use(express.static(path.join(__dirname, '../../resources/styles'), { + setHeaders: (res, path, stat) => { + if (path.endsWith('.css')) { + res.set('Content-Type', 'text/css'); + } + } +})); const gm = new GameManager(getConfig())