ready for prod

src/components/GameCanvas.tsx

@@ -11,7 +11,7 @@ export interface GameCanvasProps {
 export const GameCanvas = ({ width, height }: GameCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [game, setGame] = useState<TheAbstractionEngine>();
-  const [ready, setReady] = useState(true); // false);
+  const [ready, setReady] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {

src/engine/TheAbstractionEngine.ts

@@ -33,7 +33,7 @@ export class TheAbstractionEngine {
     const facingDirectionSystem = new FacingDirection(inputSystem);
 
     [
-      new Level(LevelNames.Tutorial),
+      new Level(LevelNames.LevelSelection),
       inputSystem,
       facingDirectionSystem,
       new Grid(

src/engine/config/sounds.ts

@@ -22,29 +22,31 @@ export const LambdaTransformSound: SoundSpec = {
 export const LambdaSave: SoundSpec = {
   name: "lambdaSave",
   url: "/assets/sound/lambda_save.wav",
+  volume: 0.3,
 };
 
 export const Failure: SoundSpec = {
   name: "failure",
   url: "/assets/sound/failure.wav",
-  volume: 0.5,
+  volume: 0.3,
 };
 
 export const ModalOpen: SoundSpec = {
   name: "modalOpen",
   url: "/assets/sound/modal_open.wav",
-  volume: 0.5,
+  volume: 0.3,
 };
 
 export const ModalClose: SoundSpec = {
   name: "modalClose",
   url: "/assets/sound/modal_close.wav",
-  volume: 0.5,
+  volume: 0.3,
 };
 
 export const KeyOpen: SoundSpec = {
   name: "keyOpen",
   url: "/assets/sound/keyopen.wav",
+  volume: 0.5,
 };
 
 export const Music: SoundSpec = {

src/engine/entities/Grass.ts

@@ -1,5 +1,5 @@
 import { Entity, EntityNames } from ".";
-import { Grid, Sprite } from "../components";
+import { BoundingBox, Grid, Sprite } from "../components";
 import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
 import { Coord2D } from "../interfaces";
 
@@ -11,17 +11,28 @@ export class Grass extends Entity {
 
     this.addComponent(new Grid(gridPosition));
 
+    const dimensions = {
+      width: Grass.spriteSpec.width,
+      height: Grass.spriteSpec.height,
+    };
     this.addComponent(
       new Sprite(
         IMAGES.get(Grass.spriteSpec.sheet)!,
         { x: 0, y: 0 },
-        {
+        dimensions,
-          width: Grass.spriteSpec.width,
-          height: Grass.spriteSpec.height,
-        },
         Grass.spriteSpec.msPerFrame,
         Grass.spriteSpec.frames,
       ),
     );
+
+    this.addComponent(
+      new BoundingBox(
+        {
+          x: 0,
+          y: 0,
+        },
+        dimensions,
+      ),
+    );
   }
 }

src/engine/levels/Tutorial.ts

@@ -3,21 +3,49 @@ import { Game } from "..";
 import {
   Curry,
   FunctionApplication,
+  Grass,
   LambdaFactory,
   LockedDoor,
   Player,
   Sign,
   Wall,
 } from "../entities";
+import { Grid, SystemNames } from "../systems";
+import { normalRandom } from "../utils";
 
 export class Tutorial extends Level {
   constructor() {
     super(LevelNames.Tutorial);
   }
 
-  public init(game: Game): void {
+  public init(game: Game) {
+    const grid = game.getSystem<Grid>(SystemNames.Grid);
+    const dimensions = grid.getGridDimensions();
+
+    const grasses = Array.from({ length: dimensions.width })
+      .fill(0)
+      .map(() => {
+        // random grass
+        return new Grass({
+          x: Math.floor(
+            normalRandom(dimensions.width / 2, dimensions.width / 4, 1.5),
+          ),
+          y: Math.floor(
+            normalRandom(dimensions.height / 2, dimensions.height / 4, 1.5),
+          ),
+        });
+      });
+
     const entities = [
-      new Sign("TODO: Explain entities", { x: 4, y: 3 }),
+      ...grasses,
+      new Sign(
+        "<div>this is a Lambda Factory<br><br>modify the produced term by interacting from the top or bottom ↕️<br><br>then produce the term by pressing the button on the left or right ↔️<br><br></div>",
+        { x: 4, y: 3 },
+      ),
+      new Sign(
+        "this is a Term Application; interact to view its code<br><br>push the term ➡️ created by the factory any direction into the Application to produce a new one 💭<br><br>note that:<br><br>+ _INPUT is the term replaced by the pushed term<br><br>+ in this case _KEY is applied to the function to make a new KEY! 🔑",
+        { x: 4, y: 6 },
+      ),
       new Wall({ x: 10, y: 9 }),
       new Wall({ x: 10, y: 11 }),
       new Wall({ x: 11, y: 10 }),

src/engine/systems/Grid.ts

@@ -28,6 +28,13 @@ export class Grid extends System {
       .map(() => new Array(columns).fill(null).map(() => new Set()));
   }
 
+  public getGridDimensions() {
+    return {
+      width: this.grid[0].length,
+      height: this.grid.length,
+    };
+  }
+
   public update(dt: number, game: Game) {
     this.putUninitializedEntitiesInGrid(game);
     this.rebuildGrid(game);