Fixed pick up dead

src/games/zombies/character.ts

@@ -6,6 +6,7 @@ export default class Character extends Item {
     public health: number;
     public inventory: Item[] = [];
     public tile: Tile = new Tile([0, 0], 1);
+    public lastDoor: Tile | undefined;
 
     constructor(type: ItemTypeImage) {
         super(type);
@@ -76,6 +77,15 @@ export default class Character extends Item {
         return false;
     }
 
+    public hasItem(item: Item | null | undefined): boolean {
+        if (!item) {
+            return false;
+        }
+        const itemIndex = this.inventory.findIndex(i => i === item);
+
+        return itemIndex >= 0;
+    }
+
     /** @returns true, if action was performed */
     public handleSpin(action: SpinnerAction): boolean {
         switch (action) {

src/games/zombies/index.ts

@@ -2,27 +2,28 @@ import { createCanvas } from "@common/display/canvas";
 import Spinner from "./spinner";
 import type Entity from "./entity";
 import { getRealPoint } from "@common/dom";
-import { nextFrame } from "@common/utils";
+import { clamp, nextFrame } from "@common/utils";
 import bgImg from './assets/bg.jpg';
 import TileMap from "./tilemap";
 import Inventory from "./inventory";
 
 const MAP_SIZE = 12;
-const MAP_PIXEL_SIZE = 1000;
+const MAP_PIXEL_SIZE = window.innerHeight;
 const MAP_PADDING = 10;
 const TILE_SIZE = (MAP_PIXEL_SIZE - MAP_PADDING * 2) / MAP_SIZE;
-const SPINNER_SIZE = 200;
-const canvas = createCanvas(MAP_PIXEL_SIZE + SPINNER_SIZE, MAP_PIXEL_SIZE);
-const spinner = new Spinner([MAP_PIXEL_SIZE, 0], [SPINNER_SIZE, SPINNER_SIZE]);
+const SIDEBAR_SIZE = clamp((window.innerWidth - window.innerHeight) / 2, 300, 600);
+
+const canvas = createCanvas(MAP_PIXEL_SIZE + SIDEBAR_SIZE * 2, MAP_PIXEL_SIZE);
 const map = new TileMap(
-    [MAP_PADDING, MAP_PADDING],
+    [MAP_PADDING + SIDEBAR_SIZE, MAP_PADDING],
     MAP_SIZE,
     TILE_SIZE,
 );
+const spinner = new Spinner([MAP_PIXEL_SIZE + SIDEBAR_SIZE, 0], [SIDEBAR_SIZE, SIDEBAR_SIZE]);
 const inventory = new Inventory(
-    map.characters,
-    [MAP_PIXEL_SIZE, SPINNER_SIZE],
-    [SPINNER_SIZE, MAP_PIXEL_SIZE - SPINNER_SIZE],
+    map,
+    [0, 0],
+    [SIDEBAR_SIZE, MAP_PIXEL_SIZE],
 );
 
 const entities: Entity[] = [
@@ -42,7 +43,7 @@ async function render(ctx: CanvasRenderingContext2D) {
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    ctx.drawImage(bgImg, 0, 0, MAP_PIXEL_SIZE, MAP_PIXEL_SIZE);
+    ctx.drawImage(bgImg, SIDEBAR_SIZE, 0, MAP_PIXEL_SIZE, MAP_PIXEL_SIZE);
 
     entities.forEach(entity => entity.render(ctx));
 }
@@ -65,7 +66,6 @@ export default async function main() {
     const ctx = canvas.getContext('2d');
 
     spinner.addListener((a) => map.handleSpin(a));
-    inventory.addListener((c, i) => map.handleItemUse(c, i));
 
     canvas.addEventListener('click', onClick);
     canvas.addEventListener('mousemove', onMouseMove);

src/games/zombies/inventory.ts

@@ -4,14 +4,14 @@ import { Characters } from "./character";
 import Entity from "./entity";
 import Tile from "./tile";
 import type Item from "./item";
+import type TileMap from "./tilemap";
 
 export type UseListener = (character: Character, item: Item) => void;
 
 export default class Inventory extends Entity {
     private tiles: Tile[][];
-    private listeners = new Set<UseListener>();
 
-    constructor(public readonly characters: Character[], position: [number, number], size: [number, number]) {
+    constructor(public readonly map: TileMap, position: [number, number], size: [number, number]) {
         super(position, size);
 
         const numCharacters = Object.keys(Characters).length;
@@ -25,10 +25,20 @@ export default class Inventory extends Entity {
         );
     }
 
+    private get characters() {
+        return this.map.characters;
+    }
+
     private drawCharacter(ctx: CanvasRenderingContext2D, idx: number) {
         const character = this.characters[idx];
         ctx.drawImage(character.type, 0.1, 0.1, 0.8, 0.8);
         ctx.fillText(`💖 ${character.health}`, 0.5, 1.5);
+        if (character === this.map.character) {
+            ctx.strokeStyle = 'black';
+            ctx.lineWidth = 0.03;
+
+            ctx.strokeRect(0.1, 0.1, 0.8, 0.8);
+        }
 
         let y = 2;
         for (const item of character.inventory) {
@@ -40,7 +50,7 @@ export default class Inventory extends Entity {
     public override handleClick(x: number, y: number): void {
         for (const { tile, item, character } of this.activeTiles) {
             if (tile.isPointInBounds(x - this.left, y - this.top)) {
-                this.listeners.forEach(l => l(character, item));
+                this.map.handleItemUse(character, item);
                 break;
             }
         }
@@ -63,14 +73,6 @@ export default class Inventory extends Entity {
             );
     }
 
-    public addListener(listener: UseListener) {
-        this.listeners.add(listener);
-    }
-
-    public removeListener(listener: UseListener) {
-        this.listeners.delete(listener);
-    }
-
     protected override draw(ctx: CanvasRenderingContext2D): void {
         const step = 1 / Object.keys(Characters).length;
         const columnWidth = this.width * step;

src/games/zombies/pathfinding.ts

@@ -43,7 +43,7 @@ namespace Pathfinding {
 
             if (current !== start && current.items.length > 0) continue;
 
-            for (const neighbor of current.connections) {
+            for (const neighbor of current.activeConnections) {
                 // tentative gScore is current’s gScore plus cost to move to neighbor
                 const tentativeG = (gScore.get(current) ?? Infinity) + distance(current, neighbor);
 

src/games/zombies/spinner.ts

@@ -1,3 +1,4 @@
+import { randInt } from "@common/utils";
 import Entity from "./entity";
 
 export enum SpinnerAction {
@@ -15,9 +16,8 @@ export default class Spinner extends Entity {
     private readonly symbols = ['🏃‍♂️', '🧟‍♂️', '🔪', '🎯'];
     private readonly startAngle = -Math.PI / 2 - this.probabilities[0] * 2 * Math.PI;
 
-    private angle = this.startAngle;
-    private speed = 0;
-    private friction = 0.3;
+    private angle = -Math.PI / 2;
+    private nextAngle = this.angle;
     private fired = true;
     private listeners = new Set<SpinnerListener>();
 
@@ -83,22 +83,19 @@ export default class Spinner extends Entity {
 
     public override update(dt: number) {
         if (this.fired) return;
-        if (this.speed < 0.1) {
+        if (this.nextAngle - this.angle <= 0.1) {
             this.fire();
             return;
         }
 
-        this.angle += this.speed * dt;
-        this.speed *= 1.0 - this.friction * dt;
-        this.friction += 0.7 * dt;
+        this.angle += (this.nextAngle - this.angle) * dt;
     }
 
     public override onClick() {
         if (!this.fired) return;
 
         this.fired = false;
-        this.speed = 25 + Math.random() * 25;
-        this.friction = 0.3 + Math.random() * 0.3;
+        this.nextAngle = this.angle + (randInt(5, 10) + Math.random()) * 2 * Math.PI;
     }
 
     public addListener(listener: SpinnerListener) {
@@ -128,6 +125,6 @@ export default class Spinner extends Entity {
                 angle = nextAngle;
             }
             checkAngle += Math.PI * 2;
-        }        
+        }
     }
 }

src/games/zombies/tile.ts

@@ -1,9 +1,14 @@
 import Entity from "./entity";
 import type Item from "./item";
 
+import planks from './assets/items/planks.jpg';
+
 export enum TileType {
     NORMAL,
     START,
+    DOOR,
+    LOCKED_DOOR,
+    DOORWAY,
     END,
 }
 
@@ -17,6 +22,8 @@ export default class Tile extends Entity {
     }
 
     protected draw(ctx: CanvasRenderingContext2D) {
+        ctx.font = '0.3px Arial';
+
         if (this.hovered) {
             ctx.fillStyle = `rgba(255, 255, 255, 0.2)`;
             ctx.fillRect(0, 0, 1, 1);
@@ -38,36 +45,50 @@ export default class Tile extends Entity {
         }
         if (this.items.length > 0) {
             if (this.isOpen) {
-                const item = this.items[0];
+                const item = this.enemy ?? this.items[0];
                 ctx.drawImage(item.type, 0.1, 0.1, 0.8, 0.8);
+
+                if (this.items.length > 1) {
+                    ctx.fillStyle = 'black';
+                    ctx.fillText('💀', 0.8, 0.2);
+                }
             } else {
                 ctx.fillStyle = 'white';
                 ctx.fillRect(0.1, 0.1, 0.8, 0.8);
-
                 ctx.fillStyle = 'black';
-                ctx.font = '0.2px Arial';
                 ctx.fillText('❓', 0.5, 0.5);
             }
         }
+        if (this.type === TileType.LOCKED_DOOR) {
+            const doorway = this.connections.find(t => t.type === TileType.DOORWAY);
+            let x = 0.5;
+            let y = 0.5;
+
+            if (doorway) {
+                x += (Number(this.left < doorway.left) - Number(doorway.left < this.left)) * 0.5;
+                y += (Number(this.top < doorway.top) - Number(doorway.top < this.top)) * 0.5;
+            }
+
+            ctx.drawImage(planks, x - 0.2, y - 0.2, 0.4, 0.4);
+        }
     }
 
     get enemy() {
         return this.items.find(i => i.isEnemy);
     }
 
-    public open(): Item[] {
-        if (!this.isOpen) {
-            this.isOpen = true;
-            const { pickable = [], notPickable = [] } = Object.groupBy(
-                this.items,
-                (i) => i.isPickable ? 'pickable' : 'notPickable',
-            );
-
-            this.items = notPickable;
-            return pickable;
+    get activeConnections() {
+        if (this.type === TileType.LOCKED_DOOR) {
+            return this.connections.filter(t => t.type !== TileType.DOORWAY);
         }
+        if (this.type === TileType.DOORWAY) {
+            return this.connections.filter(t => t.type !== TileType.LOCKED_DOOR);
+        }
+        return this.connections;
+    }
 
-        return [];
+    public open() {
+        this.isOpen = true;
     }
 
     public removeItem(item: Item | null | undefined): boolean {

src/games/zombies/tilemap.ts

@@ -103,6 +103,27 @@ export default class TileMap extends Entity {
             map[x][y].type = TileType.END;
         }
 
+        const doors = [
+            [2, 4, 1, 4],
+            [2, 7, 1, 7],
+            [3, 5, 4, 5],
+            [4, 6, 4, 5],
+            [4, 10, 4, 9],
+            [5, 3, 5, 2],
+            [5, 10, 5, 9],
+            [6, 4, 7, 4],
+            [6, 7, 7, 7],
+            [8, 10, 8, 9],
+            [9, 6, 9, 5],
+            [10, 4, 11, 4],
+            [10, 7, 11, 7],
+        ];
+
+        for (const [doorX, doorY, wayX, wayY] of doors) {
+            map[doorX][doorY].type = TileType.DOOR;
+            map[wayX][wayY].type = TileType.DOORWAY;
+        }
+
         this.tiles = map.flat();
         this.startTile = startTile;
 
@@ -150,7 +171,8 @@ export default class TileMap extends Entity {
 
         const endTiles = this.tiles.filter(t => t.type === TileType.END);
         const endTilesNeighbors = new Set(endTiles.flatMap(t => t.connections));
-        const normalTiles = this.tiles.filter(t => 
+        const doorTiles = this.tiles.filter(t => t.type === TileType.DOOR || t.type === TileType.DOORWAY);
+        const normalTiles = this.tiles.filter(t =>
             t.type === TileType.NORMAL
             && !endTilesNeighbors.has(t)
             && !this.startTile.connections.includes(t)
@@ -159,6 +181,7 @@ export default class TileMap extends Entity {
         const fillableTiles = [
             ...endTilesNeighbors,
             ...this.startTile.connections,
+            ...doorTiles,
             ...shuffle(normalTiles),
         ];
 
@@ -174,11 +197,16 @@ export default class TileMap extends Entity {
         return this.characters[this.currentCharacterIdx];
     }
 
+    get activeTiles() {
+        return this.tiles.filter(tile => (
+            tile.items.length > 0 
+            || tile.type === TileType.LOCKED_DOOR
+            || (this.state === GameState.NORMAL && this.availableTiles.includes(tile))
+        ));
+    }
+
     public override handleMouseMove(x: number, y: number): void {
-        if (this.state !== GameState.NORMAL) {
-            return;
-        }
-        this.availableTiles.forEach(tile => tile.handleMouseMove(x - this.left, y - this.top));
+        this.activeTiles.forEach(tile => tile.handleMouseMove(x - this.left, y - this.top));
     }
 
     public override handleClick(x: number, y: number): void {
@@ -189,25 +217,28 @@ export default class TileMap extends Entity {
             if (tile.isPointInBounds(x - this.left, y - this.top)) {
                 const path = Pathfinding.findPath(this.character.tile, tile);
                 if (path.length > 1) {
+                    this.character.lastDoor = path.find(t => t.type === TileType.DOOR);
                     this.character.tile = tile;
-                    const items = tile.open();
-                    this.character.inventory.push(...items);
-                    if (tile.items.length > 0) {
-                        for (const item of tile.items) { // iterate remaining items
-                            if (item instanceof Character) {
+                    tile.open();
+                    for (const item of tile.items.slice()) { // iterate remaining items
+                        if (item.isPickable) {
+                            if (!tile.enemy) {
                                 tile.removeItem(item);
-                                this.characters.push(item);
-                                this.nextCharacter();
-                            } else if (item.isBoss && this.character.removeItem(this.character.rocketLauncher)) {
-                                tile.killEnemy();
-                                this.nextCharacter();
-                            } else if (item.isEnemy) {
-                                this.state = GameState.FIGHT;
-                            } else {
-                                alert(`Unknown item found: ${item}`);
+                                this.character.inventory.push(item);
                             }
+                        } else if (item instanceof Character) {
+                            tile.removeItem(item);
+                            this.characters.push(item);
+                        } else if (item.isBoss && this.character.removeItem(this.character.rocketLauncher)) {
+                            tile.killEnemy();
+                        } else if (item.isEnemy) {
+                            this.state = GameState.FIGHT;
+                            break;
+                        } else {
+                            alert(`Unknown item found: ${item}`);
                         }
-                    } else {
+                    }
+                    if (this.state === GameState.NORMAL) {
                         this.nextCharacter();
                     }
                 }
@@ -249,14 +280,22 @@ export default class TileMap extends Entity {
     }
 
     public handleItemUse(character: Character, item: Item) {
-        const success = character.removeItem(item);
+        let success = character.hasItem(item);
         if (success) {
             if (item.type === ItemType.ITEM_HEAL) {
                 character.heal(character);
             } else if (item.type === ItemType.WEAPON_GRENADE && this.state === GameState.FIGHT) {
                 this.killEnemy();
+            } else if (item.type === ItemType.ITEM_PLANKS && character.lastDoor && !character.lastDoor.enemy) {
+                character.lastDoor.type = TileType.LOCKED_DOOR;
+            } else {
+                success = false;
+                console.warn(`Dont know how to use ${item}`);
             }
         }
+        if (success) {
+            character.removeItem(item);
+        }
     }
 
     private findAvailableTiles(moveDistance: number = 1) {
@@ -276,6 +315,12 @@ export default class TileMap extends Entity {
 
     private killEnemy() {
         this.character.tile.killEnemy();
+        this.character.tile.items.forEach((item) => {
+            if (item.isPickable) {
+                this.character.inventory.push(item);
+                this.character.tile.removeItem(item);
+            }
+        });
         this.nextCharacter();
         this.setNormalState();
     }
@@ -286,28 +331,20 @@ export default class TileMap extends Entity {
         ctx.lineWidth = 2;
         ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 
-        if (this.state === GameState.NORMAL && this.availableTiles.length > 0) {
-            ctx.beginPath();
-
+        if (this.state === GameState.NORMAL) {
             this.availableTiles.forEach(t =>
                 ctx.fillRect(t.centerX - t.width / 2, t.centerY - t.height / 2, t.width, t.height)
             );
-
-            ctx.stroke();
         }
 
         const w = this.tileSize * 0.8;
-        this.characters.toReversed().forEach(c =>
+        [...this.characters, this.character].forEach(c =>
             ctx.drawImage(c.type, c.tile.centerX - w / 2, c.tile.centerY - w / 2, w, w)
         );
 
-        this.tiles.forEach(t => {
-            if (t.items.length > 0 || (this.state === GameState.NORMAL && this.availableTiles.includes(t))) {
-                t.render(ctx);
-            }
-        });
+        this.activeTiles.forEach(t => t.render(ctx));
 
-        ctx.lineWidth = 3;
+        ctx.lineWidth = 5;
         ctx.strokeStyle = 'yellow';
 
         ctx.strokeRect(this.character.tile.centerX - w / 2, this.character.tile.centerY - w / 2, w, w);