Sync with published result of episode 23.

public/js/scenes/CompositionScene.js → public/js/CompositionScene.js

@@ -1,18 +1,12 @@
-import Scene from "../Scene.js";
+import Scene from './Scene.js';
 
 export default class CompositionScene extends Scene {
     constructor() {
         super();
-        this.layers = [];
         this.countDown = 2;
     }
 
     update(gameContext) {
-        const videoContext = gameContext.videoContext;
-        videoContext.fillRect(0, 0, videoContext.canvas.width, videoContext.canvas.height);
-        for (const layer of this.layers) {
-            layer(videoContext);
-        }
         this.countDown -= gameContext.deltaTime;
         if (this.countDown <= 0) {
             this.events.emit(Scene.EVENT_COMPLETE);

public/js/Level.js

@@ -3,31 +3,31 @@ import Compositor from './Compositor.js';
 import EventEmitter from './EventEmitter.js';
 import MusicController from './MusicController.js';
 import EntityCollider from './EntityCollider.js';
+import Scene from './Scene.js';
 import TileCollider from './TileCollider.js';
 import { findPlayers } from './player.js';
 
 function focusPlayer(level) {
     for (const player of findPlayers(level)) {
         level.camera.pos.x = Math.max(0, player.pos.x - 100);
-        return;
     }
 }
 
-export default class Level {
-    static EVENT_GOTO_SCENE = Symbol('go to scene event');
+export default class Level extends Scene {
+    static EVENT_TRIGGER = Symbol('trigger');
 
     constructor() {
+        super();
+
         this.name = "";
 
         this.gravity = 1500;
         this.totalTime = 0;
 
         this.camera = new Camera();
-        this.events = new EventEmitter();
 
         this.music = new MusicController();
 
-        this.comp = new Compositor();
         this.entities = new Set();
 
         this.entityCollider = new EntityCollider(this.entities);
@@ -55,4 +55,8 @@ export default class Level {
 
         this.totalTime += gameContext.deltaTime;
     }
+
+    pause() {
+        this.music.pause();
+    }
 }

public/js/MusicController.js

@@ -20,7 +20,7 @@ export default class MusicController {
         }, {once: true});
     }
 
-    stop() {
-        this.player.pause();
+    pause() {
+        this.player.pauseAll();
     }
 }

public/js/MusicPlayer.js

@@ -11,13 +11,13 @@ export default class MusicPlayer {
     }
 
     playTrack(name) {
-        this.pause();
+        this.pauseAll();
         const audio = this.tracks.get(name);
         audio.play();
         return audio;
     }
 
-    pause() {
+    pauseAll() {
         for (const audio of this.tracks.values()) {
             audio.pause();
         }

public/js/Scene.js

@@ -1,12 +1,22 @@
-import EventEmitter from "./EventEmitter.js";
+import Compositor from './Compositor.js';
+import EventEmitter from './EventEmitter.js';
 
 export default class Scene {
     static EVENT_COMPLETE = Symbol('scene complete');
 
     constructor() {
         this.events = new EventEmitter();
+        this.comp = new Compositor();
     }
 
-    end() {
+    draw(gameContext) {
+        this.comp.draw(gameContext.videoContext);
+    }
+
+    update(gameContext) {
+    }
+
+    pause() {
+        console.log("Pause", this);
     }
 }

public/js/SceneRunner.js

@@ -1,4 +1,4 @@
-import Scene from "./Scene.js";
+import Scene from './Scene.js';
 
 export default class SceneRunner {
     constructor() {
@@ -16,16 +16,16 @@ export default class SceneRunner {
     runNext() {
         const currentScene = this.scenes[this.sceneIndex];
         if (currentScene) {
-            currentScene.end();
+            currentScene.pause();
         }
         this.sceneIndex++;
     }
 
     update(gameContext) {
         const currentScene = this.scenes[this.sceneIndex];
-        if (!currentScene) {
-            return;
+        if (currentScene) {
+            currentScene.update(gameContext);
+            currentScene.draw(gameContext);
         }
-        currentScene.update(gameContext);
     }
 }

public/js/input.js

@@ -6,6 +6,7 @@ export function setupKeyboard(window) {
     const router = new InputRouter();
 
     input.listenTo(window);
+
     input.addMapping('KeyP', keyState => {
         if (keyState) {
             router.route(entity => entity.jump.start());

public/js/layers/color.js

@@ -0,0 +1,6 @@
+export function createColorLayer(color) {
+    return function drawColor(context) {
+        context.fillStyle = color;
+        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+    };
+}

public/js/layers/dashboard.js

@@ -14,25 +14,24 @@ function getTimerTrait(level) {
     }
 }
 
-export function createDashboardRenderer(font) {
+export function createDashboardLayer(font, level) {
     const LINE1 = font.size;
     const LINE2 = font.size * 2;
 
-    return function createDashboardLayer(level) {
+    const timerTrait = getTimerTrait(level);
+
+    return function drawDashboard(context) {
         const playerTrait = getPlayerTrait(level);
-        const timerTrait = getTimerTrait(level);
 
-        return function drawDashboard(context) {
-            font.print(playerTrait.name, context, 16, LINE1);
-            font.print(playerTrait.score.toString().padStart(6, '0'), context, 16, LINE2);
+        font.print(playerTrait.name, context, 16, LINE1);
+        font.print(playerTrait.score.toString().padStart(6, '0'), context, 16, LINE2);
 
-            font.print('@x' + playerTrait.coins.toString().padStart(2, '0'), context, 96, LINE2);
+        font.print('@x' + playerTrait.coins.toString().padStart(2, '0'), context, 96, LINE2);
 
-            font.print('WORLD', context, 152, LINE1);
-            font.print(level.name.slice(0, 4), context, 160, LINE2);
+        font.print('WORLD', context, 152, LINE1);
+        font.print(level.name, context, 160, LINE2);
 
-            font.print('TIME', context, 208, LINE1);
-            font.print(timerTrait.currentTime.toFixed().toString().padStart(3, '0'), context, 216, LINE2);
-        };
+        font.print('TIME', context, 208, LINE1);
+        font.print(timerTrait.currentTime.toFixed().toString().padStart(3, '0'), context, 216, LINE2);
     };
-};
+}

public/js/layers/player-progress.js

@@ -0,0 +1,29 @@
+import {findPlayers} from "../player.js";
+
+function getPlayer(level) {
+    for (const entity of findPlayers(level)) {
+        return entity;
+    }
+}
+
+export function createPlayerProgressLayer(font, level) {
+    const size = font.size;
+
+    const spriteBuffer = document.createElement('canvas');
+    spriteBuffer.width = 32;
+    spriteBuffer.height = 32;
+    const spriteBufferContext = spriteBuffer.getContext('2d');
+
+    return function drawPlayerProgress(context) {
+        const entity = getPlayer(level);
+        font.print('WORLD ' + level.name, context, size * 12, size * 12);
+
+        font.print('x ' + entity.player.lives.toString().padStart(3, ' '),
+            context, size * 16, size * 16);
+
+        spriteBufferContext.clearRect(0, 0,
+            spriteBuffer.width, spriteBuffer.height);
+        entity.draw(spriteBufferContext);
+        context.drawImage(spriteBuffer, size * 12, size * 15);
+    };
+}

public/js/loaders/level.js

@@ -15,19 +15,9 @@ function createTimer() {
     return timer;
 }
 
-function createGotoTrigger(name) {
+function createTrigger() {
     const entity = new Entity();
-    entity.size.set(24, 24);
-    const trigger = new Trigger();
-    trigger.conditions.push((touches, _, level) => {
-        for (const entity of touches) {
-            if (entity.player) {
-                level.events.emit(Level.EVENT_GOTO_SCENE, name);
-                return;
-            }
-        }
-    });
-    entity.addTrait(trigger);
+    entity.addTrait(new Trigger());
     return entity;
 }
 
@@ -72,12 +62,16 @@ function setupTriggers(levelSpec, level) {
     if (!levelSpec.triggers) {
         return;
     }
+
     for (const triggerSpec of levelSpec.triggers) {
-        if (triggerSpec.type === "goto") {
-            const trigger = createGotoTrigger(triggerSpec.pointer);
-            trigger.pos.set(...triggerSpec.pos);
-            level.entities.add(trigger);
-        }
+        const entity = createTrigger();
+        entity.trigger.conditions.push((entity, touches, gc, level) => {
+            level.events.emit(Level.EVENT_TRIGGER, triggerSpec, entity, touches);
+        });
+        console.log(entity);
+        entity.size.set(64, 64);
+        entity.pos.set(triggerSpec.pos[0], triggerSpec.pos[1]);
+        level.entities.add(entity);
     }
 }