ai-zone/wings88
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Implement loading screen with retro 80s aesthetic and unit tests
Run Tests / test (pull_request) Failing after 36s
Details

Browse Source
This commit is contained in:
User
2026-03-22 11:37:11 +00:00
parent a29b01f26e
commit 37b5511439
5 changed files with 260 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+23
View File
@@ -0,0 +1,23 @@
/* Main styles for retro 80s aesthetic */
:root {
--primary-color: #00FF00;
--secondary-color: #000080;
--background-color: #000000;
--text-color: #FFFFFF;
--border-color: #00FF00;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace;
background-color: var(--background-color);
color: var(--text-color);
overflow: hidden;
height: 100vh;
}
src/css/screens.css
+62
View File
@@ -0,0 +1,62 @@
/* Loading screen styles */
.loading-screen {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background-color: var(--background-color);
position: relative;
}
.loading-content {
text-align: center;
padding: 20px;
border: 2px solid var(--border-color);
background-color: rgba(0, 0, 0, 0.8);
}
.logo {
margin-bottom: 20px;
}
.logo-block {
width: 40px;
height: 40px;
background-color: var(--primary-color);
margin: 0 auto 5px;
display: block;
}
.logo-text {
font-size: 24px;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 15px;
}
.copyright {
font-size: 12px;
color: var(--text-color);
margin-bottom: 20px;
}
.loading-bar {
width: 200px;
height: 20px;
background-color: var(--secondary-color);
margin: 0 auto 10px;
position: relative;
}
.loading-progress {
width: 0%;
height: 100%;
background-color: var(--primary-color);
transition: width 0.3s ease;
}
.loading-text {
font-size: 14px;
color: var(--text-color);
}
src/index.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Flight Simulator - Loading</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/screens.css">
</head>
<body>
<div id="loading-screen" class="loading-screen">
<div class="loading-content">
<div class="logo">
<div class="logo-block"></div>
<div class="logo-block"></div>
<div class="logo-block"></div>
<div class="logo-text">WINGS88</div>
</div>
<div class="copyright">(c) 1988 RetroWeb Games</div>
<div class="loading-bar">
<div class="loading-progress"></div>
</div>
<div class="loading-text">Loading assets...</div>
</div>
</div>
<script src="js/screens/loading.js"></script>
</body>
</html>
src/js/screens/loading.js
+100
View File
@@ -0,0 +1,100 @@
/**
* Loading screen functionality for WINGS88 3D Flight Simulator
*/
class LoadingScreen {
constructor() {
this.progress = 0;
this.assets = [
'texture1.png',
'texture2.png',
'sound1.mp3',
'sound2.mp3',
'model1.obj',
'model2.obj'
];
this.audioContext = null;
this.audioBuffer = null;
}
init() {
this.setupEventListeners();
this.startLoading();
this.initAudio();
}
setupEventListeners() {
document.addEventListener('DOMContentLoaded', () => {
this.init();
});
}
startLoading() {
const progressBar = document.querySelector('.loading-progress');
const loadingText = document.querySelector('.loading-text');
const interval = setInterval(() => {
this.progress += 5;
if (progressBar) progressBar.style.width = `${this.progress}%`;
if (this.progress >= 100) {
clearInterval(interval);
if (loadingText) loadingText.textContent = 'Loading complete! Starting game...';
setTimeout(() => {
this.transitionToIntro();
}, 1000);
}
}, 200);
}
initAudio() {
try {
// Check if audio is supported
if (typeof AudioContext !== 'undefined') {
this.audioContext = new AudioContext();
this.loadBackgroundMusic();
}
} catch (e) {
console.log('Audio initialization error:', e);
}
}
loadBackgroundMusic() {
// In a real implementation, this would load actual audio files
// For now, we'll simulate loading
setTimeout(() => {
console.log('Background music loaded');
}, 500);
}
playBackgroundMusic() {
if (this.audioContext && this.audioBuffer) {
const source = this.audioContext.createBufferSource();
source.buffer = this.audioBuffer;
source.connect(this.audioContext.destination);
source.start(0);
}
}
transitionToIntro() {
// In a real implementation, this would transition to the intro screen
console.log('Transitioning to intro screen');
// For now, we'll just log the transition
document.querySelector('.loading-text').textContent = 'Welcome to WINGS88!';
}
getProgress() {
return this.progress;
}
}
// Initialize loading screen when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
const loadingScreen = new LoadingScreen();
loadingScreen.init();
});
// Export for testing
if (typeof module !== 'undefined' && module.exports) {
module.exports = LoadingScreen;
}
tests/unit/loading.test.js
+46
View File
@@ -0,0 +1,46 @@
/**
* Unit tests for LoadingScreen class
*/
const LoadingScreen = require('../../src/js/screens/loading');
describe('LoadingScreen', () => {
let loadingScreen;
beforeEach(() => {
loadingScreen = new LoadingScreen();
});
describe('constructor', () => {
it('should initialize with progress 0', () => {
expect(loadingScreen.getProgress()).toBe(0);
});
it('should have assets array', () => {
expect(loadingScreen.assets).toBeDefined();
expect(Array.isArray(loadingScreen.assets)).toBe(true);
expect(loadingScreen.assets.length).toBeGreaterThan(0);
});
});
describe('getProgress', () => {
it('should return current progress', () => {
expect(loadingScreen.getProgress()).toBe(0);
// Simulate progress update
loadingScreen.progress = 50;
expect(loadingScreen.getProgress()).toBe(50);
});
});
describe('asset loading', () => {
it('should have expected assets', () => {
expect(loadingScreen.assets).toContain('texture1.png');
expect(loadingScreen.assets).toContain('texture2.png');
expect(loadingScreen.assets).toContain('sound1.mp3');
expect(loadingScreen.assets).toContain('sound2.mp3');
expect(loadingScreen.assets).toContain('model1.obj');
expect(loadingScreen.assets).toContain('model2.obj');
});
});
});