Scenes and Buttons implemented (#77)

* Implement scenes

Add Scenes framework
- Implement Scene class
- Implement Elements
- Implement SceneRenderer
- Implement ElementRenderer
- Implement SceneManager
- Add SceneRenderer to RenderPipeline
- Add ElementRenderer to RenderPipeline
- Other adaptations

* Scene framework changes

- Remove LevelScene
- Add InGame Scene

* Scenes added

- Implement Level Overview Scene
- Implement GameOver Scene

* Left and SoundButton added

* Put Sound and Music Buttons to the right places

---------

Co-authored-by: Kitt3120 <[email protected]>

src/ts/engine/math/rectangle.ts

@@ -9,6 +9,10 @@ class Rectangle {
     return this._location;
   }
 
+  set location(value: Vector2D) {
+    this._location = value;
+  }
+
   get width(): number {
     return this._width;
   }

src/ts/engine/renderer/renderers/debugrenderer.ts

@@ -173,8 +173,8 @@ class DebugRenderer extends Renderer {
     delta: number
   ): void {
     if (this._game && this._entityManager && this._inputHandler) {
-      this.drawInfoBox(glContext);
       if (this._inputHandler.isKeyDown("b")) {
+        this.drawInfoBox(glContext);
         for (let entity of this._entityManager.entities) {
           this.drawBoundingBoxes(glContext, entity);
         }

src/ts/game/gamesetup.ts

@@ -8,8 +8,9 @@ import SceneManager from "../engine/scene/scenemanager.js";
 import Level1 from "./levels/level1.js";
 import Level2 from "./levels/level2.js";
 import Level3 from "./levels/level3.js";
+import GameOver from "./scenes/gameover.js";
 import InGame from "./scenes/ingame.js";
-import Scene1 from "./scenes/ingame.js";
+import LevelOverview from "./scenes/leveloverview.js";
 import MainMenu from "./scenes/mainmenu.js";
 
 class GameSetup extends EngineSetup {
@@ -985,6 +986,8 @@ class GameSetup extends EngineSetup {
   registerScenes(sceneManager: SceneManager): void {
     sceneManager.register("mainmenu", new MainMenu());
     sceneManager.register("ingame", new InGame());
+    sceneManager.register("leveloverview", new LevelOverview());
+    sceneManager.register("gameover", new GameOver());
   }
 }
 

src/ts/game/levels/level3.ts

@@ -21,6 +21,8 @@ import PlayerArmRight from "../entities/playerarm.js";
 import MetalWallEntity from "../entities/metalwallentity.js";
 import PlayerEntity from "../entities/playerentity.js";
 import Vector2D from "../../engine/math/vector2d.js";
+import LevelManager from "../../engine/level/levelmanager.js";
+import SceneManager from "../../engine/scene/scenemanager.js";
 
 class Level3 implements Level {
   private _inputHandler: InputHandler;
@@ -29,6 +31,7 @@ class Level3 implements Level {
   private _buttonGround1!: ButtonGround;
   private _buttonGround2!: ButtonGround;
   private _companionCubes!: CompanionCube[];
+  private _goal!: Goal;
 
   constructor() {
     this._inputHandler = Services.resolve<InputHandler>("InputHandler");
@@ -69,7 +72,7 @@ class Level3 implements Level {
     let companionCube2 = new CompanionCube(600, 0, 0.5, 0.5, 0, 0);
     this._companionCubes = [companionCube1, companionCube2];
 
-    let goal = new Goal(70, 470, 1.6, 1.6, 0, 0);
+    this._goal = new Goal(70, 470, 1.6, 1.6, 0, 0);
 
     let entities: Entity[] = [
       window,
@@ -80,7 +83,7 @@ class Level3 implements Level {
       this._buttonGround2,
       companionCube1,
       companionCube2,
-      goal,
+      this._goal,
       player,
     ];
 
@@ -137,6 +140,10 @@ class Level3 implements Level {
   }
 
   public load(): void {
+    this._goal.onTouch.subscribe((engineEvent: EngineEvent<Goal>) => {
+      Services.resolve<LevelManager>("LevelManager").unload();
+      Services.resolve<SceneManager>("SceneManager").switchScene("gameover");
+    });
     this._buttonGround1.onUnpress.subscribe(
       (engineEvent: EngineEvent<ButtonGround>) => {
         if (

src/ts/game/scenes/base.ts

@@ -0,0 +1,96 @@
+import Texture from "../../engine/assets/texture/texture.js";
+import Services from "../../engine/dependencyinjection/services.js";
+import MouseClickEvent from "../../engine/event/events/mouseclickevent/mouseclickevent.js";
+import LevelManager from "../../engine/level/levelmanager.js";
+import Button from "../../engine/scene/elements/button.js";
+import CheckBox from "../../engine/scene/elements/checkbox.js";
+import Scene from "../../engine/scene/scene.js";
+import SceneManager from "../../engine/scene/scenemanager.js";
+
+class Base extends Scene {
+  private _soundCheckBox: CheckBox;
+  private _musicCheckBox: CheckBox;
+
+  protected get soundCheckBox(): CheckBox {
+    return this._soundCheckBox;
+  }
+
+  protected get musicCheckBox(): CheckBox {
+    return this._musicCheckBox;
+  }
+
+  public constructor(
+    background: string | CanvasGradient | CanvasPattern | Texture
+  ) {
+    super(background);
+
+    this._soundCheckBox = new CheckBox(
+      375,
+      0,
+      50,
+      50,
+      "rgba(0, 0, 0, 0)",
+      "rgba(0, 255, 0, 0.5)",
+      "rgba(255, 255, 255, 0.25)",
+      "rgba(0, 255, 0, 0.25)",
+      "white",
+      "white",
+      "white",
+      "white",
+      "black",
+      "black",
+      "black",
+      "black",
+      1,
+      "bold 20px Arial",
+      "center",
+      "middle",
+      "⛔",
+      "🔊",
+      true,
+      true
+    );
+
+    this._musicCheckBox = new CheckBox(
+      450,
+      0,
+      50,
+      50,
+      "rgba(0, 0, 0, 0)",
+      "rgba(0, 255, 0, 0.5)",
+      "rgba(255, 255, 255, 0.25)",
+      "rgba(0, 255, 0, 0.25)",
+      "white",
+      "white",
+      "white",
+      "white",
+      "black",
+      "black",
+      "black",
+      "black",
+      1,
+      "bold 20px Arial",
+      "center",
+      "middle",
+      "⛔",
+      "🎵",
+      true,
+      true
+    );
+
+    this._soundCheckBox.onClick = () => {
+      this._soundCheckBox.toggle();
+      console.log("Sound: " + this._soundCheckBox.checked);
+    };
+
+    this._musicCheckBox.onClick = () => {
+      this._musicCheckBox.toggle();
+      console.log("Music: " + this._musicCheckBox.checked);
+    };
+
+    this.addElement(this._soundCheckBox);
+    this.addElement(this._musicCheckBox);
+  }
+}
+
+export default Base;

src/ts/game/scenes/gameover.ts

@@ -0,0 +1,117 @@
+import AssetManager from "../../engine/assets/assetmanager.js";
+import Services from "../../engine/dependencyinjection/services.js";
+import MouseClickEvent from "../../engine/event/events/mouseclickevent/mouseclickevent.js";
+import Game from "../../engine/game.js";
+import LevelManager from "../../engine/level/levelmanager.js";
+import Vector2D from "../../engine/math/vector2d.js";
+import Button from "../../engine/scene/elements/button.js";
+import Text from "../../engine/scene/elements/text.js";
+import Scene from "../../engine/scene/scene.js";
+import SceneManager from "../../engine/scene/scenemanager.js";
+import Base from "./base.js";
+
+class GameOver extends Base {
+  private _buttonLevelOverview: any;
+  private _backToMainMenu: Button;
+  private _runAgain: Button;
+
+  public constructor() {
+    super(
+      Services.resolve<AssetManager>("AssetManager").getTexture(
+        "level1-background"
+      )
+    );
+
+    this.musicCheckBox.location = new Vector2D(450, 500);
+    this.soundCheckBox.location = new Vector2D(300, 500);
+
+    let title = new Text(
+      400,
+      100,
+      "yellow",
+      "bolder 50px Arial",
+      "center",
+      "middle",
+      "Game Finished!",
+      true
+    );
+    this._runAgain = new Button(
+      250,
+      200,
+      300,
+      50,
+      "rgba(0, 0, 0, 0.5)",
+      "white",
+      "white",
+      "black",
+      "white",
+      "green",
+      1,
+      "bold 20px Arial",
+      "center",
+      "middle",
+      "Run Again",
+      true
+    );
+
+    this._runAgain.onClick = (mouseClickEvent: MouseClickEvent) => {
+      Services.resolve<SceneManager>("SceneManager").switchScene("ingame");
+      Services.resolve<LevelManager>("LevelManager").start("level1");
+    };
+
+    this._backToMainMenu = new Button(
+      250,
+      300,
+      300,
+      50,
+      "rgba(0, 0, 0, 0.5)",
+      "white",
+      "white",
+      "black",
+      "white",
+      "green",
+      1,
+      "bold 20px Arial",
+      "center",
+      "middle",
+      "Back to Main Menu",
+      true
+    );
+
+    this._backToMainMenu.onClick = (mouseClickEvent: MouseClickEvent) => {
+      Services.resolve<SceneManager>("SceneManager").switchScene("mainmenu");
+    };
+
+    this._buttonLevelOverview = new Button(
+      250,
+      400,
+      300,
+      50,
+      "rgba(0, 0, 0, 0.5)",
+      "white",
+      "white",
+      "black",
+      "white",
+      "green",
+      1,
+      "bold 20px Arial",
+      "center",
+      "middle",
+      "Level Overview",
+      true
+    );
+
+    this._buttonLevelOverview.onClick = (mouseClickEvent: MouseClickEvent) => {
+      Services.resolve<SceneManager>("SceneManager").switchScene(
+        "leveloverview"
+      );
+    };
+
+    this.addElement(title);
+    this.addElement(this._runAgain);
+    this.addElement(this._backToMainMenu);
+    this.addElement(this._buttonLevelOverview);
+  }
+}
+
+export default GameOver;

src/ts/game/scenes/ingame.ts

@@ -1,43 +1,41 @@
+import Services from "../../engine/dependencyinjection/services.js";
+import MouseClickEvent from "../../engine/event/events/mouseclickevent/mouseclickevent.js";
+import LevelManager from "../../engine/level/levelmanager.js";
+import Button from "../../engine/scene/elements/button.js";
 import CheckBox from "../../engine/scene/elements/checkbox.js";
 import Scene from "../../engine/scene/scene.js";
+import SceneManager from "../../engine/scene/scenemanager.js";
+import Base from "./base.js";
 
-class InGame extends Scene {
+class InGame extends Base {
   public constructor() {
     super("rgba(0, 0, 0, 0)");
 
-    let testCheckBox = new CheckBox(
-      375,
+    let leftButton = new Button(
+      300,
       0,
       50,
       50,
-      "rgba(0, 0, 0, 0)",
-      "rgba(0, 255, 0, 0.5)",
-      "rgba(255, 255, 255, 0.25)",
-      "rgba(0, 255, 0, 0.25)",
+      "rgba(255, 0, 0, 0.5)",
+      "rgba(255, 0, 0, 0.75)",
       "white",
       "white",
-      "white",
-      "white",
-      "black",
-      "black",
       "black",
       "black",
       1,
       "bold 20px Arial",
       "center",
       "middle",
-      "⛔",
-      "🎵",
-      true,
+      "❌",
       true
     );
 
-    testCheckBox.onClick = () => {
-      testCheckBox.toggle();
-      console.log("Music: " + testCheckBox.checked);
+    leftButton.onClick = (mouseClickEvent: MouseClickEvent) => {
+      Services.resolve<LevelManager>("LevelManager").unload();
+      Services.resolve<SceneManager>("SceneManager").switchScene("mainmenu");
     };
 
-    this.addElement(testCheckBox);
+    this.addElement(leftButton);
   }
 }