You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
7.9 KiB
270 lines
7.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>I love X Engine</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #000;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
font-family: Arial, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#game {
|
|
text-align: center;
|
|
}
|
|
|
|
.welcome-screen {
|
|
opacity: 1;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.welcome-screen.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 48px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.start-message {
|
|
font-size: 24px;
|
|
color: #aaa;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#gameCanvas {
|
|
border: 1px solid #333;
|
|
background: #000;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.loader {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 5px solid #ffffff;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
#loading {
|
|
text-align: center;
|
|
}
|
|
|
|
#loading p {
|
|
font-size: 18px;
|
|
color: #aaa;
|
|
}
|
|
|
|
#pauseMenu {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0, 0, 0, 0.9);
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
border: 1px solid #333;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#pauseMenu h2 {
|
|
font-size: 32px;
|
|
margin-bottom: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.menu-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.menu-buttons button {
|
|
background: #333;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 18px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.menu-buttons button:hover {
|
|
background: #444;
|
|
}
|
|
|
|
.menu-buttons button:active {
|
|
background: #555;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="game">
|
|
<div id="welcome" class="welcome-screen">
|
|
<h1>Welkom bij I love X!</h1>
|
|
<p class="start-message">Druk op SPATIE om te beginnen</p>
|
|
</div>
|
|
<canvas id="gameCanvas" class="hidden"></canvas>
|
|
<div id="loading" class="hidden">
|
|
<div class="loader"></div>
|
|
<p>Loading... <span id="progress">0%</span></p>
|
|
</div>
|
|
<div id="pauseMenu" class="hidden">
|
|
<h2>Pauze</h2>
|
|
<div class="menu-buttons">
|
|
<button onclick="resumeGame()">Doorgaan</button>
|
|
<button onclick="restartGame()">Opnieuw</button>
|
|
<button onclick="quitGame()">Afsluiten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
// Game states
|
|
const STATES = {
|
|
WELCOME: 'welcome',
|
|
LOADING: 'loading',
|
|
PLAYING: 'playing',
|
|
PAUSED: 'paused',
|
|
ERROR: 'error'
|
|
};
|
|
|
|
let gameState = STATES.WELCOME;
|
|
let loadingProgress = 0;
|
|
|
|
// Error handling
|
|
window.onerror = function(msg, url, line) {
|
|
console.error(`Error: ${msg}\nAt: ${url}:${line}`);
|
|
gameState = STATES.ERROR;
|
|
ipcRenderer.send('error:occurred', { msg, url, line });
|
|
};
|
|
|
|
// Handle keyboard input
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.code === 'Space' && gameState === STATES.WELCOME) {
|
|
startGame();
|
|
} else if (event.code === 'Escape' && gameState === STATES.PLAYING) {
|
|
pauseGame();
|
|
}
|
|
});
|
|
|
|
// Start game
|
|
function startGame() {
|
|
gameState = STATES.LOADING;
|
|
loadingProgress = 0;
|
|
document.getElementById('welcome').classList.add('hidden');
|
|
document.getElementById('loading').classList.remove('hidden');
|
|
startLoadingProgress();
|
|
}
|
|
|
|
function startLoadingProgress() {
|
|
const progressElement = document.getElementById('progress');
|
|
const updateProgress = () => {
|
|
if (loadingProgress < 100 && gameState === STATES.LOADING) {
|
|
// Verhoog met een random getal tussen 1 en 5
|
|
loadingProgress += Math.floor(Math.random() * 5) + 1;
|
|
if (loadingProgress > 100) loadingProgress = 100;
|
|
|
|
// Update de tekst
|
|
progressElement.textContent = `${loadingProgress}%`;
|
|
|
|
if (loadingProgress >= 100) {
|
|
// Als we klaar zijn, wacht even en ga naar het game scherm
|
|
setTimeout(() => {
|
|
document.getElementById('loading').classList.add('hidden');
|
|
document.getElementById('gameCanvas').classList.remove('hidden');
|
|
gameState = STATES.PLAYING;
|
|
}, 500);
|
|
} else {
|
|
// Random vertraging tussen updates (tussen 50 en 200ms)
|
|
const delay = Math.floor(Math.random() * 150) + 50;
|
|
setTimeout(updateProgress, delay);
|
|
}
|
|
}
|
|
};
|
|
updateProgress();
|
|
}
|
|
|
|
function pauseGame() {
|
|
gameState = STATES.PAUSED;
|
|
document.getElementById('pauseMenu').classList.remove('hidden');
|
|
ipcRenderer.send('game:pause');
|
|
}
|
|
|
|
function resumeGame() {
|
|
gameState = STATES.PLAYING;
|
|
document.getElementById('pauseMenu').classList.add('hidden');
|
|
ipcRenderer.send('game:resume');
|
|
}
|
|
|
|
function restartGame() {
|
|
gameState = STATES.PLAYING;
|
|
document.getElementById('pauseMenu').classList.add('hidden');
|
|
ipcRenderer.send('game:restart');
|
|
}
|
|
|
|
function quitGame() {
|
|
// Reset game state
|
|
gameState = STATES.WELCOME;
|
|
loadingProgress = 0;
|
|
|
|
// Verberg game canvas en pauze menu
|
|
document.getElementById('gameCanvas').classList.add('hidden');
|
|
document.getElementById('pauseMenu').classList.add('hidden');
|
|
|
|
// Toon welkomstscherm
|
|
document.getElementById('welcome').classList.remove('hidden');
|
|
|
|
// Stuur event naar main process
|
|
ipcRenderer.send('game:return-to-welcome');
|
|
}
|
|
|
|
// Listen for engine events
|
|
ipcRenderer.on('engine:ready', (event, data) => {
|
|
console.log('Engine ready:', data);
|
|
});
|
|
|
|
ipcRenderer.on('game:started', () => {
|
|
console.log('Game started');
|
|
});
|
|
|
|
ipcRenderer.on('game:paused', () => {
|
|
console.log('Game paused');
|
|
});
|
|
|
|
ipcRenderer.on('error:engine', (event, error) => {
|
|
console.error('Engine error:', error);
|
|
gameState = STATES.ERROR;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|