feat: Implement loading screen with retro 80s aesthetic and unit tests

2026-03-22 11:37:11 +00:00
parent a29b01f26e
commit 37b5511439
5 changed files with 260 additions and 0 deletions
@@ -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;
+}
+
@@ -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);
+}
@@ -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>
@@ -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;
+}
@@ -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');
+    });
+  });
+});