Add fish nav and oxygen

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .cache
 .vscode
-package-lock.json
+package-lock.json
+assets/*

package.json

@@ -56,6 +56,7 @@
     "workbox-webpack-plugin": "^6.0.2"
   },
   "dependencies": {
-    "phaser": "^3.53.1"
+    "phaser": "^3.53.1",
+    "phaser-raycaster": "^0.9.3"
   }
 }

src/scripts/game.ts

@@ -1,6 +1,8 @@
 import 'phaser';
+import PhaserRaycaster from 'phaser-raycaster';
 import MainScene from './scenes/mainScene';
 import PreloadScene from './scenes/preloadScene';
+import UIScene from './scenes/uiScene';
 
 const config = {
     type: Phaser.AUTO,
@@ -12,13 +14,22 @@ const config = {
         width: window.innerWidth,
         height: window.innerHeight
     },
-    scene: [PreloadScene, MainScene],
+    scene: [PreloadScene, MainScene, UIScene],
     physics: {
         default: 'matter',
         matter: {
             debug: false,
             gravity: { y: 0 }
         }
+    },
+    plugins: {
+        scene: [
+            {
+                key: 'PhaserRaycaster',
+                plugin: PhaserRaycaster,
+                mapping: 'raycasterPlugin'
+            }
+        ]
     }
 }
 

src/scripts/objects/Background.ts

@@ -1,4 +1,5 @@
 import { Math } from "phaser";
+import { Raycaster } from "./Raycaster";
 
 export default class Background extends Phaser.GameObjects.GameObject {
     private readonly BACKGROUND_COLOUR: number = 0x244b7e;
@@ -8,7 +9,7 @@ export default class Background extends Phaser.GameObjects.GameObject {
     private width: number;
     private height: number;
 
-    constructor(scene: Phaser.Scene, maxDepth: number) {
+    constructor(scene: Phaser.Scene, maxDepth: number, raycaster: Raycaster) {
         super(scene, 'background');
 
         scene.add.existing(this);
@@ -20,22 +21,34 @@ export default class Background extends Phaser.GameObjects.GameObject {
         const size: number = 64;
         const numberOfColumns = Math.CeilTo(this.width / size);
         const overshootX = Math.CeilTo(((numberOfColumns * size) - this.width) / 2);
-        const row: number[] = [0];
+        const row: number[] = [1];
         for (let i = 0; i < numberOfColumns - 2; i++)
-            row.push(-1);
-        row.push(0);
+            row.push(0);
+        row.push(1);
 
-        const level: number[][] = [];
+        const air: number[] = [];
+        for (let i = 0; i < numberOfColumns ; i++)
+            air.push(0);
+
+        const toprow: number[] = [];
+        for (let i = 0; i < numberOfColumns ; i++)
+            toprow.push(2);
+
+        const level: number[][] = [air, air, toprow];
         const numberOfRows = Math.FloorTo(this.height / size) + 1;
         for (let i = 0; i < numberOfRows; i++)
             level.push(row.slice());
 
-        this.tilemap = scene.make.tilemap({ data: level, tileWidth: size, tileHeight: size });
+        this.tilemap = scene.make.tilemap({ data: level, tileWidth: size, tileHeight: size, insertNull: false });
         this.tilemap.addTilesetImage('background-tiles', undefined, 256, 256);
-        this.tilemap.createLayer(0, 'background-tiles', -overshootX, 0);
+        const layer = this.tilemap.createLayer(0, 'background-tiles', -overshootX, 0);
+        layer.setCollisionByExclusion([0, 2]);
+        scene.matter.world.convertTilemapLayer(layer);
 
         for (let i = 0; i < numberOfRows; i++)
             this.tilemap.getTileAt(0, i).setFlip(true, false);
+
+        raycaster.registerBodies(layer, numberOfColumns, numberOfRows);
     }
 
     public draw(): void {

src/scripts/objects/Bar.ts

@@ -0,0 +1,61 @@
+
+interface BarConfig {
+    color: number;
+    lowColor: number;
+    lowThreshold: number;
+    width: number;
+    height: number
+}
+const defaultConfig: BarConfig = {
+    width: 80, height: 16,
+    lowColor: 0xff0000,
+    color: 0x0088ff,
+    lowThreshold: 0.3
+
+}
+const BAR_WIDTH = 80, BAR_HEIGHT = 16;
+export class Bar extends Phaser.GameObjects.Graphics{
+    x: number;
+    y: number;
+    value: number;
+    maxValue: number;
+    config: BarConfig;
+
+    constructor (scene: Phaser.Scene, x: number, y: number, maxValue: number, value = maxValue, config: BarConfig = defaultConfig)
+    {
+        super(scene);
+        this.x = x;
+        this.y = y;
+        this.maxValue = maxValue;
+        this.value = value;
+        scene.add.existing(this);
+        this.config = config;
+    }
+
+    update (x: number, y:number, value: number, maxValue?: number) {
+        if (maxValue) this.maxValue = maxValue;
+        this.value = value;
+        this.x = x;
+        this.y = y;
+        this.clear();
+
+        //  BG
+        this.fillStyle(0x000000);
+        this.fillRect(-this.config.width/2, 0, this.config.width, this.config.height);
+
+        //  Health
+        this.fillStyle(0xffffff);
+        this.fillRect(-this.config.width/2 + 2, 0 + 2, this.config.width - 4, this.config.height - 4);
+        const percent = this.value / this.maxValue
+        if (percent < this.config.lowThreshold) {
+            this.fillStyle(this.config.lowColor);
+        } else {
+            this.fillStyle(this.config.color);
+        }
+
+        var d = Math.floor(percent * (this.config.width - 4));
+
+        this.fillRect(-this.config.width/2 + 2, 0 + 2, d, this.config.height - 4);
+    }
+
+}