Gisela and target point added.

js/module.js

@@ -1,8 +1,11 @@
+'use strict';
+
 import Key from "./Key.js";
 import MrCroc from "./MrCroc.js";
 import RetroArchitecture from "./retro/RetroArchitecture.js";
 import FileLoader from "./FileLoader.js";
 import Camera from "./Camera.js";
+import Gisela from "./Gisela.js";
 
 class ImageLoader
 {
@@ -78,7 +81,7 @@ function MainLoop(timestamp)
     }
 
     /* Movement left and right */
-    if (KeyLeft.isPressed()) {
+    if (!hasPlayerLeftArchitecture && KeyLeft.isPressed()) {
         let lastWallLeft = Math.min(
             architecture.getWallLeft(mrCroc.getPositionHeadLeft()),
             architecture.getWallLeft(mrCroc.getPositionFootLeft())
@@ -89,7 +92,7 @@ function MainLoop(timestamp)
         if (mrCroc.position.x <= lastWallLeft + mrCroc.getWidth() * 0.5) {
             mrCroc.position.x = lastWallLeft + mrCroc.getWidth() * 0.5 + 1;
         }
-    } else if (KeyRight.isPressed()) {
+    } else if (!hasPlayerLeftArchitecture && KeyRight.isPressed()) {
         let lastWallRight = Math.max(
             architecture.getWallRight(mrCroc.getPositionHeadRight()),
             architecture.getWallRight(mrCroc.getPositionFootRight())
@@ -102,8 +105,27 @@ function MainLoop(timestamp)
         }
     }
 
-    if (!architecture.isInsideArchitecture(mrCroc.position)) {
-        architecture.resetMovableToStartPosition(mrCroc);
+    if (!hasPlayerLeftArchitecture && !architecture.isInsideArchitecture(mrCroc.position)) {
+        hasPlayerLeftArchitecture = true;
+
+        setTimeout(
+            function () {
+                architecture.setMovableToStartPosition(mrCroc);
+                hasPlayerLeftArchitecture = false;
+            }, 2000
+        );
+    }
+
+    if (!gameFinished && architecture.isMovableInsideTargetPosition(mrCroc)) {
+        gameFinished = true;
+
+        setTimeout(
+            function () {
+                alert('Gisela: "Thanks for showing up, Mr. Croc, but I\'m not in danger."');
+                lastTimestamp = timestamp;
+                lastRendered = timestamp;
+            }, 1000
+        )
     }
 
     /* Drawing */
@@ -113,19 +135,7 @@ function MainLoop(timestamp)
         camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5);
         architecture.draw(context, camera);
         mrCroc.draw(context, camera);
-
-        /*
-        context.fillRect(0, ceilingHeight, window.innerWidth, 1);
-        context.fillRect(0, groundHeight, window.innerWidth, 1);
-        context.fillStyle = 'black';
-        context.fillRect(lastWallRight, 0, 1, window.innerHeight);
-        context.fillStyle = 'red';
-        context.fillRect(lastWallLeft, 0, 1, window.innerHeight);
-        mrCroc.getPositionHeadRight().draw(context);
-        mrCroc.getPositionFootRight().draw(context);
-        mrCroc.getPositionHeadLeft().draw(context);
-        mrCroc.getPositionFootLeft().draw(context);
-        */
+        gisela.draw(context, camera);
 
         lastRendered = timestamp;
     }
@@ -147,8 +157,10 @@ const LEVEL = JSON.parse(levelJson.getContent());
 let lastRendered = undefined;
 let lastTimestamp = undefined;
 let context;
-let mrCroc, architecture;
+let mrCroc, gisela, architecture;
 let camera = new Camera();
+let gameFinished = false;
+let hasPlayerLeftArchitecture = false;
 
 let KeyLeft = new Key('ArrowLeft');
 let KeyRight = new Key('ArrowRight');
@@ -168,6 +180,10 @@ let imgArch = new Image();
 imgArch.src = 'graphics/tileset-landscape01.jpg';
 loader.addImage(imgArch);
 
+let imgGisela = new Image();
+imgGisela.src = 'graphics/gisela-right.png';
+loader.addImage(imgGisela);
+
 window.addEventListener(
     'imagesloaded',
     () => {
@@ -190,11 +206,10 @@ window.addEventListener(
         camera.borderBottom = architecture.rows * architecture.tileHeight;
 
         mrCroc = new MrCroc();
-        architecture.resetMovableToStartPosition(mrCroc);
-        /*
-        mrCroc.position.x = architecture.tileWidth * LEVEL.startX + architecture.tileWidth * 0.5;
-        mrCroc.position.y = architecture.tileHeight * LEVEL.startY;
-        */
+        architecture.setMovableToStartPosition(mrCroc);
+
+        gisela = new Gisela();
+        architecture.setMovableToTargetPosition(gisela);
 
         window.requestAnimationFrame(MainLoop);
     }