mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:50:42 +00:00
fixed MIME error, wait for css to load
This commit is contained in:
evanpelle
+13
-105
@@ -5,111 +5,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenFront (ALPHA)</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<style>
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -127,6 +22,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
body {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.body.style.visibility = 'visible';
|
||||
document.body.style.opacity = 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Cloudflare Web Analytics -->
|
||||
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||
data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script><!-- End Cloudflare Web Analytics -->
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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())
|
||||
|
||||
|
||||
Reference in New Issue
Block a user