phase 11 koncano

src/scenes/PreloadScene.js

@@ -218,35 +218,75 @@ class PreloadScene extends Phaser.Scene {
         const width = this.cameras.main.width;
         const height = this.cameras.main.height;
 
-        const progressBar = this.add.graphics();
-        const progressBox = this.add.graphics();
-        progressBox.fillStyle(0x222222, 0.8);
-        progressBox.fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
+        // Background for loading screen
+        const bg = this.add.graphics();
+        bg.fillStyle(0x000000, 1);
+        bg.fillRect(0, 0, width, height);
 
-        const loadingText = this.add.text(width / 2, height / 2 - 50, 'Loading NovaFarma...', {
-            font: '20px Courier New',
-            fill: '#ffffff'
-        });
-        loadingText.setOrigin(0.5, 0.5);
+        // Styling
+        const primaryColor = 0x00ff41; // Matrix Green
+        const secondaryColor = 0xffffff;
+
+        // Logo / Title
+        const title = this.add.text(width / 2, height / 2 - 80, 'NOVA FARMA', {
+            fontFamily: 'Courier New', fontSize: '32px', fontStyle: 'bold', fill: '#00cc00'
+        }).setOrigin(0.5);
+
+        const tipText = this.add.text(width / 2, height - 50, 'Tip: Zombies drop blueprints for new tech...', {
+            fontFamily: 'monospace', fontSize: '14px', fill: '#888888', fontStyle: 'italic'
+        }).setOrigin(0.5);
+
+        // Progress Bar container
+        const progressBox = this.add.graphics();
+        progressBox.fillStyle(0x111111, 0.8);
+        progressBox.fillRoundedRect(width / 2 - 160, height / 2 - 15, 320, 30, 5);
+        progressBox.lineStyle(2, 0x333333, 1);
+        progressBox.strokeRoundedRect(width / 2 - 160, height / 2 - 15, 320, 30, 5);
+
+        const progressBar = this.add.graphics();
 
         const percentText = this.add.text(width / 2, height / 2, '0%', {
-            font: '18px Courier New',
-            fill: '#ffffff'
-        });
-        percentText.setOrigin(0.5, 0.5);
+            font: '16px Courier New',
+            fill: '#ffffff',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        const assetLoadingText = this.add.text(width / 2, height / 2 + 30, 'Initializing...', {
+            font: '12px console', fill: '#aaaaaa'
+        }).setOrigin(0.5);
 
         this.load.on('progress', (value) => {
             percentText.setText(parseInt(value * 100) + '%');
             progressBar.clear();
-            progressBar.fillStyle(0x00ff00, 1); // Matrix Green
-            progressBar.fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
+            progressBar.fillStyle(primaryColor, 1);
+
+            // Smooth fill
+            const w = 310 * value;
+            if (w > 0) {
+                progressBar.fillRoundedRect(width / 2 - 155, height / 2 - 10, w, 20, 2);
+            }
+        });
+
+        this.load.on('fileprogress', (file) => {
+            assetLoadingText.setText(`Loading: ${file.key}`);
         });
 
         this.load.on('complete', () => {
-            progressBar.destroy();
-            progressBox.destroy();
-            loadingText.destroy();
-            percentText.destroy();
+            // Fade out animation
+            this.tweens.add({
+                targets: [progressBar, progressBox, percentText, assetLoadingText, title, tipText, bg],
+                alpha: 0,
+                duration: 1000,
+                onComplete: () => {
+                    progressBar.destroy();
+                    progressBox.destroy();
+                    percentText.destroy();
+                    assetLoadingText.destroy();
+                    title.destroy();
+                    tipText.destroy();
+                    bg.destroy();
+                }
+            });
         });
     }