Add beach level!

src/config.ts

@@ -1,6 +1,6 @@
 import * as ex from "excalibur";
 
-import { KnightIdle, SlimeIdle, SpiderIdle } from "./resources";
+import { CrabIdle, KnightIdle, SlimeIdle, SpiderIdle } from "./resources";
 const seed = Date.now();
 console.log("Random seed:", seed);
 export const RANDOM = new ex.Random(seed);
@@ -9,7 +9,7 @@ export const SCALE = ex.vec(3, 3);
 export const BOARD_OFFSET = ex.vec(32 * 3, 32 * 4);
 export const ENEMY_SPEED = 200;
 
-export type UnitType = "Knight" | "Spider" | "Slime";
+export type UnitType = "Knight" | "Spider" | "Slime" | "Crab";
 export interface UnitConfig {
     graphics: {
         offset: ex.Vector,
@@ -27,7 +27,7 @@ export const UNIT_CONFIG: Record<UnitType, UnitConfig> = {
             idle: KnightIdle
         },
         health: 5,
-        movement: 3,
+        movement: 2,
         attack: 2,
         range: 1
     },
@@ -37,7 +37,7 @@ export const UNIT_CONFIG: Record<UnitType, UnitConfig> = {
             idle: SpiderIdle
         },
         health: 3,
-        movement: 3,
+        movement: 2,
         attack: 1,
         range: 1
     },
@@ -50,6 +50,16 @@ export const UNIT_CONFIG: Record<UnitType, UnitConfig> = {
         movement: 1,
         attack: 4,
         range: 1
+    },
+    Crab: {
+        graphics: {
+            offset: ex.vec(0, 8 * SCALE.y),
+            idle: CrabIdle
+        },
+        health: 3,
+        movement: 3,
+        attack: 2,
+        range: 1
     }
 } as const;
 

src/levels/level-base.ts

@@ -1,7 +1,7 @@
 import * as ex from 'excalibur';
 import { Board } from '../board';
 import { Terrain } from '../cell';
-import { UnitType } from '../config';
+import { SCALE, UnitType } from '../config';
 import { Unit } from '../unit';
 import { Player } from '../player';
 import { HumanPlayer } from '../human-player';
@@ -47,7 +47,8 @@ export interface LevelData {
 export const CharToUnit = {
     K: 'Knight',
     S: 'Spider',
-    M: 'Slime'
+    M: 'Slime',
+    C: 'Crab'
 } as const;
 
 export class LevelBase extends ex.Scene {
@@ -58,12 +59,26 @@ export class LevelBase extends ex.Scene {
     engine!: ex.Engine;
     players!: Player[];
     turnManager!: TurnManager;
+    levelName!: ex.Actor;
     constructor(public levelData: LevelData, public name: string) {
         super();
     }
 
     override onInitialize(engine: ex.Engine): void {
         this.engine = engine;
+        // Add entities to resetAndLoad()!
+    }
+
+    async showLevelName() {
+        const transitionTime = 1500;
+        await this.levelName.actions.runAction(
+            new ex.ParallelActions([
+                new ex.ActionSequence(this.levelName, ctx => 
+                    ctx.easeTo(ex.vec(600, 50), transitionTime, ex.EasingFunctions.EaseInOutCubic)),
+                new ex.ActionSequence(this.levelName, ctx => 
+                    ctx.fade(1, transitionTime))
+            ])
+        ).toPromise();
     }
 
     resetAndLoad() {
@@ -84,12 +99,39 @@ export class LevelBase extends ex.Scene {
         this.add(DustParticles);
 
         this.camera.pos = this.board.getCenter();
+
+        const levelName = new ex.Text({
+            text: this.levelData.displayName,
+            font: new ex.Font({
+                family: 'notjamslab14',
+                size: 16 * SCALE.x,
+                unit: ex.FontUnit.Px,
+                color: ex.Color.White,
+                baseAlign: ex.BaseAlign.Top,
+                quality: 4
+            }),
+        });
+
+        this.levelName = new ex.Actor({
+            name: 'level',
+            pos: ex.vec(2000, 50),
+            coordPlane: ex.CoordPlane.Screen,
+            color: new ex.Color(50, 240, 50, .4),
+            width: 400,
+            height: 100,
+            z: 10
+        });
+        this.levelName.graphics.opacity = 0;
+        this.levelName.graphics.add('text', levelName);
+        this.levelName.graphics.show('text')
+        this.add(this.levelName);
     }
 
     private _subscriptions: ex.Subscription[] = [];
-    override onActivate(): void {
+    override onActivate() {
         this.resetAndLoad();
         this.turnManager.start();
+        this.showLevelName();
         Resources.LevelMusic2.loop = true;
         Resources.LevelMusic2.play();
 
@@ -132,7 +174,7 @@ export class LevelBase extends ex.Scene {
                 const terrain = data.charAt(0) as Terrain;
                 let unit: Unit | null = null;
                 if (data.length === 3) {
-                    const unitType: UnitType = CharToUnit[data.charAt(1) as 'K' | 'S' | 'M']
+                    const unitType: UnitType = CharToUnit[data.charAt(1) as 'K' | 'S' | 'M' | 'C']
                     const playerIndex = (+data.charAt(2)) - 1;
 
                     unit = new Unit(x, y, unitType, board, this.players[playerIndex]);

src/main.ts

@@ -47,7 +47,7 @@ game.addScene(level1.name, level1);
 export const Level2Data: LevelData = {
     displayName: 'Gentle Plains 2',
     name: 'level2',
-    nextLevel: 'start',
+    nextLevel: 'level3',
     width: 6,
     height: 6,
     maxTurns: 100,
@@ -65,6 +65,28 @@ export const Level2Data: LevelData = {
 const level2 = new LevelBase(Level2Data, 'level2')
 game.addScene(level2.name, level2);
 
+
+export const Level3Data: LevelData = {
+    displayName: 'Beach Danger',
+    name: 'level3',
+    nextLevel: 'start',
+    width: 6,
+    height: 6,
+    maxTurns: 100,
+    players: ['human', 'computer'],
+    data: [
+        'S', 'S',   'SM2', 'S',  'SK1',   'W',
+        'SK1', 'S',   'S',   'SK1', 'W',   'W',
+        'SK1', 'S',   'W',   'W', 'W',   'W',
+        'S',   'S',   'S',   'W', 'W',   'W',
+        'S',   'S',   'SM2',   'SC2', 'SC2',   'W',
+        'S',   'SC2',   'S',   'SM2', 'SM2', 'W',
+    ]
+}
+
+const level3 = new LevelBase(Level3Data, 'level3')
+game.addScene(level3.name, level3);
+
 game.start(loader).then(() => {
     game.goToScene('start');
 });

src/resources.ts

@@ -5,6 +5,7 @@ import TitleImagePath from '../res/title.png';
 import KnightSpriteSheetPath from '../res/KnightSheet.png';
 import SpiderSheetPath from '../res/SpiderSheet.png';
 import SlimeSheetPath from '../res/slime.png';
+import CrabSheetPath from '../res/crab.png';
 import HeartSheetPath from '../res/HeartSheet.png';
 import UISheetPath from '../res/UISheet.png';
 import TerrainSheetPath from '../res/TerrainSheet.png';
@@ -28,6 +29,7 @@ export const Resources = {
     KnightSpriteSheet: new ex.ImageSource(KnightSpriteSheetPath),
     SpiderSheet: new ex.ImageSource(SpiderSheetPath),
     SlimeSheet: new ex.ImageSource(SlimeSheetPath),
+    CrabSheet: new ex.ImageSource(CrabSheetPath),
     HeartSheet: new ex.ImageSource(HeartSheetPath),
     UISheet: new ex.ImageSource(UISheetPath),
     TerrainSheet: new ex.ImageSource(TerrainSheetPath),
@@ -165,6 +167,27 @@ export const SlimeIdle =  ex.Animation.fromSpriteSheetCoordinates({
     ]
 });
 
+export const CrabSpriteSheet = ex.SpriteSheet.fromImageSource({
+    image: Resources.CrabSheet,
+    grid: {
+        rows: 1,
+        columns: 4,
+        spriteHeight: 32,
+        spriteWidth: 32
+    }
+});
+
+export const CrabIdle =  ex.Animation.fromSpriteSheetCoordinates({
+    spriteSheet: CrabSpriteSheet,
+    strategy: ex.AnimationStrategy.Loop,
+    frameCoordinates: [
+        {x: 0, y: 0, duration: 200},
+        {x: 1, y: 0, duration: 200},
+        {x: 2, y: 0, duration: 200},
+        {x: 3, y: 0, duration: 200}
+    ]
+});
+
 export const KnightSpriteSheet = ex.SpriteSheet.fromImageSource({
     image: Resources.KnightSpriteSheet,
     grid: {