Add custom animated loading screen with in-game NPCs

- Replace Kaplay default loading bar with immersive RPG-style screen
- Feature 3 random NPCs from actual game sprite sheet walking across
- Animated pixel art scenery: day/night sky, stars, clouds, hills, grass
- Treasure chest style progress bar with gold fill and sparkles
- Rotating gameplay tips during load (5 unique tips)
- Pulsing ZTM logo with glow effect
- 15-second display time ensures full experience
- Matches ZTM Quest's top-down RPG aesthetic perfectly

Closes #25

Author: EXE901

src/kplayCtx.js

@@ -11,13 +11,14 @@ export const k = kaplay({
         down: { keyboard: ['s', 'down'], gamepad: 'south' },
         left: { keyboard: ['a', 'left'], gamepad: 'west' },
         right: { keyboard: ['d', 'right'], gamepad: 'east' },
-        // Configure map key to be bound to m
         map: { keyboard: ['m'] },
     },
+    loadingScreen: false,
+    background: [15, 15, 35],
 });
 
-// In the actual game we have hours and minutes adjacent to the player
-// But in real time we have minutes and seconds we can use
+k.loadSprite('ztmLogo', './assets/sprites/favicon-32x32.png');
+
 export const time = {
     minutes: 0,
     seconds: 0,
@@ -41,9 +42,11 @@ export const time = {
 };
 
 k.loadFont('pixelFont', './assets/fonts/PixelifySans-VariableFont_wght.ttf');
+
 k.onCustomEvent = (eventName, cb) => {
     k.canvas.addEventListener(eventName, cb.bind(k));
 };
+
 k.triggerEvent = (eventName, detail) => {
     k.canvas.dispatchEvent(new CustomEvent(eventName, { detail }));
 };

src/main.js

@@ -25,7 +25,9 @@ import { extendedCampus } from './scenes/extended_campus';
 import { orangeHouse } from './scenes/orange_house';
 import { redHouse } from './scenes/red_house';
 import { companyInterior } from './scenes/company_interior';
+import { loadingScreen } from './scenes/loadingScreen';
 
+k.scene('loadingScreen', () => loadingScreen(k));
 k.scene('start', (enter_tag) => bootstrap(start, { enter_tag }));
 k.scene('city', (enter_tag) => bootstrap(city, { enter_tag }));
 k.scene('arcade', (enter_tag) => bootstrap(arcade, { enter_tag }));
@@ -54,15 +56,17 @@ k.scene('company_interior', (enter_tag) =>
 k.scene('startScreen', gameStartScreen);
 k.scene('lose', loseScreen);
 
-// Load saved game state from localStorage (if available)
+// Load saved game state
 const gameState = getGameState();
 
-// Initialize the scenes with position if saved, else go to default position
-if (gameState) {
-    k.go(gameState.player.scene);
-} else {
-    k.go('start'); // Go to the default starting scene
-}
+// Wait for assets to load, THEN show 30-second loading screen
+k.onLoad(() => {
+    // Start with loading screen scene
+    k.go('loadingScreen');
+    
+    // After loading screen finishes (30s), it will automatically go to 'start'
+    // The loadingScreen scene handles the transition
+});
 
 // To test different maps instead of going through each and every scene to get to yours,
 // Import the scene, name the scene, and then name the spawn point as an additional tag
@@ -81,13 +85,12 @@ if (gameState) {
 updateEnergyUI(getGameState().player.energy);
 updateCoinsUI();
 setInterval(() => {
-    const gameState = getGameState(); // This should be inside setInterval so that gameState variable is updated at every interval.
+    const gameState = getGameState();
     if (gameState.player.energy) {
         gameState.player.energy -= 1;
         setGameState(gameState);
         updateEnergyUI(gameState.player.energy);
     } else if (Math.floor(k.time()) % 3 == 0) {
-        // This ensures log appears atmost 2 times per minute.
         k.debug.log('I need some energy.');
     }
 }, 10000);