adamdaghmah
/
i-love-x-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance loading screen and game state management; add loading progress indicator and error handling

Browse Source
master
SanjarBLZK 1 week ago
parent 7ed68c79c8
commit 31684cbc02
1 changed files with 92 additions and 5 deletions
Show Stats Download Patch File Download Diff File

97
index.html
Unescape View File

@ -41,6 +41,37 @@
.hidden { .hidden {
display: none; display: none;
} }
#gameCanvas {
border: 1px solid #333;
background: #000;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #fff;
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;
}
</style> </style>
</head> </head>
<body> <body>
@ -49,31 +80,82 @@
<h1>Welkom bij I love X!</h1> <h1>Welkom bij I love X!</h1>
<p class="start-message">Druk op SPATIE om te beginnen</p> <p class="start-message">Druk op SPATIE om te beginnen</p>
</div> </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> </div>
<script> <script>
const { ipcRenderer } = require('electron'); const { ipcRenderer } = require('electron');
// Game state // Game states
let gameState = 'welcome'; 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 // Handle keyboard input
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
if (event.code === 'Space' && gameState === 'welcome') { if (event.code === 'Space' && gameState === STATES.WELCOME) {
startGame(); startGame();
} else if (event.code === 'Escape' && gameState === STATES.PLAYING) {
pauseGame();
} }
}); });
// Start game // Start game
function startGame() { function startGame() {
gameState = 'playing'; showLoading();
document.getElementById('welcome').classList.add('hidden'); gameState = STATES.LOADING;
ipcRenderer.send('game:start'); ipcRenderer.send('game:start');
} }
function showLoading() {
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) {
loadingProgress += 1;
progressElement.textContent = `${loadingProgress}%`;
setTimeout(updateProgress, 50);
}
};
updateProgress();
}
function pauseGame() {
gameState = STATES.PAUSED;
ipcRenderer.send('game:pause');
}
// Listen for engine events // Listen for engine events
ipcRenderer.on('engine:ready', (event, data) => { ipcRenderer.on('engine:ready', (event, data) => {
console.log('Engine ready:', data); console.log('Engine ready:', data);
if (gameState === STATES.LOADING) {
document.getElementById('loading').classList.add('hidden');
document.getElementById('gameCanvas').classList.remove('hidden');
gameState = STATES.PLAYING;
}
}); });
ipcRenderer.on('game:started', () => { ipcRenderer.on('game:started', () => {
@ -83,6 +165,11 @@
ipcRenderer.on('game:paused', () => { ipcRenderer.on('game:paused', () => {
console.log('Game paused'); console.log('Game paused');
}); });
ipcRenderer.on('error:engine', (event, error) => {
console.error('Engine error:', error);
gameState = STATES.ERROR;
});
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save