ghost

1 files changed, 216 insertions, 76 deletions

diff --git a/client/src/renderer.ts b/client/src/renderer.ts
index bc6cf83..cf3189a 100644
--- a/client/src/renderer.ts
+++ b/client/src/renderer.ts
@@ -1,7 +1,7 @@
 import { getMap } from "./map.js";
-import { Items, Players, Rotation, ItemType, Map, Wall, GameState, Tile, ATLAS_TILE_WIDTH } from "./types.js";
+import { Items, Players, Rotation, ItemType, Map, Wall, GameState, Tile, ATLAS_TILE_WIDTH, Ghosts, Ghost, GhostType, GhostState } from "./types.js";
 
-const update_style = (width: number, height: number) => {
+const updateStyle = (width: number, height: number) => {
 
     let style = document.getElementById("style")
 
@@ -35,37 +35,82 @@ const update_style = (width: number, height: number) => {
     style.innerHTML = css
 }
 
-const draw_sprite = (
+const drawSprite = (
     ctx: CanvasRenderingContext2D, 
     x: number, 
     y: number, 
     width: number,
     atlas: CanvasImageSource,
-    atlas_index: [number, number],
-    atlas_tile_width: number,
+    atlasIndex: [number, number],
+    atlasTileWidth: number,
     rotation: Rotation
 ) => {
     ctx.save()
     ctx.translate(
-        (x + 0.5) * ATLAS_TILE_WIDTH, 
-        (y + 0.5) * ATLAS_TILE_WIDTH
+        (x + 0.5) * atlasTileWidth, 
+        (y + 0.5) * atlasTileWidth
     )
     ctx.rotate(rotation * Math.PI / 180)
     ctx.drawImage(
         atlas, 
-        atlas_index[0] * atlas_tile_width,
-        atlas_index[1] * atlas_tile_width, 
-        atlas_tile_width, 
-        atlas_tile_width, 
-        -width * ATLAS_TILE_WIDTH / 2,
-        -width * ATLAS_TILE_WIDTH / 2, 
-        width * ATLAS_TILE_WIDTH, 
-        width * ATLAS_TILE_WIDTH
+        atlasIndex[0] * atlasTileWidth,
+        atlasIndex[1] * atlasTileWidth, 
+        atlasTileWidth, 
+        atlasTileWidth, 
+        -width * atlasTileWidth / 2,
+        -width * atlasTileWidth / 2, 
+        width * atlasTileWidth, 
+        width * atlasTileWidth
     )
     ctx.restore() 
 }
 
-const draw_players = (
+const hueCanvas = document.createElement("canvas");
+const drawSpriteHue = (
+    ctx: CanvasRenderingContext2D, 
+    x: number, 
+    y: number, 
+    width: number,
+    atlas: CanvasImageSource,
+    atlasIndex: [number, number],
+    atlasTileWidth: number,
+    rotation: Rotation,
+    color: string
+) => {
+	hueCanvas.width = atlasTileWidth;
+	hueCanvas.height = atlasTileWidth;
+	const hueCtx = hueCanvas.getContext('2d');
+
+    hueCtx.globalCompositeOperation = "copy"
+	hueCtx.fillStyle = color;
+	hueCtx.fillRect(0, 0, atlasTileWidth, atlasTileWidth);
+	
+	hueCtx.globalCompositeOperation = "destination-in";
+    hueCtx.drawImage (
+        atlas,
+        atlasIndex[0] * atlasTileWidth,
+        atlasIndex[1] * atlasTileWidth,
+        atlasTileWidth,
+        atlasTileWidth,
+        0,
+        0,
+        atlasTileWidth,
+        atlasTileWidth
+    )
+	
+    drawSprite (
+        ctx,
+        x, y,
+        width,
+        hueCanvas,
+        [0, 0],
+        atlasTileWidth,
+        rotation
+    )
+
+}
+
+const drawPlayers = (
     ctx: CanvasRenderingContext2D,
     atlas: CanvasImageSource,
     players: Players, 
@@ -88,9 +133,9 @@ const draw_players = (
         let player = players[id] 
         if (!player) continue
 
-        let atlas_index = atlas_frames[0]
+        let atlasIndex = atlas_frames[0]
         if (player.moving) {
-            atlas_index = atlas_frames[Math.floor(frame / 2) % atlas_frames.length]
+            atlasIndex = atlas_frames[Math.floor(frame / 2) % atlas_frames.length]
         }
 
         let rotation: number
@@ -110,20 +155,117 @@ const draw_players = (
                 break
         }
 
-        draw_sprite (
+        drawSprite (
             ctx,
             player.pos.x,
             player.pos.y,
             1,
             atlas,
-            atlas_index,
+            atlasIndex,
             ATLAS_TILE_WIDTH,
             rotation
         )
     }  
 }
 
-const draw_items = (
+const drawGhosts = (
+    ctx: CanvasRenderingContext2D,
+    atlas: CanvasImageSource,
+    ghosts: Ghosts 
+) => {
+    for (let type in ghosts) {
+        let ghost: Ghost = ghosts[type]
+        if (!ghost) continue
+
+        let color: string
+        switch (ghost.type) {
+            case GhostType.BLINKY:
+                color = '#ed2724'
+                break
+            case GhostType.PINKY:
+                color = '#ffb9de'
+                break
+            case GhostType.INKY:
+                color = '#00ffdf'
+                break
+            case GhostType.CLYDE:
+                color = '#ffb748'
+                break
+        }
+        
+        if (
+            ghost.state == GhostState.SCATTER || 
+            ghost.state == GhostState.CHASE
+        ) {
+            drawSpriteHue (
+                ctx,
+                ghost.pos.x,
+                ghost.pos.y,
+                1,
+                atlas,
+                [0, 4],
+                ATLAS_TILE_WIDTH,
+                0,
+                color
+            )
+        }
+
+        if (ghost.state != GhostState.SCARED) {
+            let eyes: [number, number]
+            switch (ghost.currentDirection) {
+                case Rotation.EAST:
+                    eyes = [1, 4]
+                    break
+                case Rotation.WEST:
+                    eyes = [2, 4]
+                    break
+                case Rotation.NORTH:
+                    eyes = [3, 4]
+                    break
+                case Rotation.SOUTH:
+                    eyes = [4, 4]
+                    break
+            }
+
+            drawSprite (
+                ctx,
+                ghost.pos.x,
+                ghost.pos.y,
+                1,
+                atlas,
+                eyes,
+                ATLAS_TILE_WIDTH,
+                0
+            )
+        } else {
+            drawSprite (
+                ctx,
+                ghost.pos.x,
+                ghost.pos.y,
+                1,
+                atlas,
+                [4, 3],
+                ATLAS_TILE_WIDTH,
+                0
+            )
+        }
+
+        // drawSpriteHue (
+        //     ctx,
+        //     ghost.target.x,
+        //     ghost.target.y,
+        //     1,
+        //     atlas,
+        //     [3, 0],
+        //     ATLAS_TILE_WIDTH,
+        //     0,
+        //     color
+        // )
+
+    }
+}
+
+const drawItems = (
     ctx: CanvasRenderingContext2D, 
     atlas: CanvasImageSource,
     items: Items 
@@ -134,31 +276,31 @@ const draw_items = (
         let item = items[item_key]
         if (!item) continue
 
-        let width: number, atlas_index: [number, number]
+        let width: number, atlasIndex: [number, number]
         switch (item.type) {
             case ItemType.DOT:
                 width = .2
-                atlas_index = [2, 3]
+                atlasIndex = [2, 3]
                 break
             case ItemType.THICC_DOT:
                 width = .4
-                atlas_index = [2, 3]
+                atlasIndex = [2, 3]
                 break
             case ItemType.FOOD:
                 width = 1
-                atlas_index = [3, 3]
+                atlasIndex = [3, 3]
                 break
             default:
                 continue
         }
 
-        draw_sprite (
+        drawSprite (
             ctx,
             item.pos.x,
             item.pos.y,
             width,
             atlas,
-            atlas_index,
+            atlasIndex,
             ATLAS_TILE_WIDTH,
             0
         )
@@ -167,7 +309,7 @@ const draw_items = (
 
 }
 
-const draw_map_canvas = (
+const drawMapCanvas = (
     ctx: CanvasRenderingContext2D, 
     atlas: CanvasImageSource, 
     map: Map
@@ -178,83 +320,83 @@ const draw_map_canvas = (
 
             let wall_type = map.walls[y * map.width + x]
 
-            let atlas_index: [number, number], rotation: number;
+            let atlasIndex: [number, number], rotation: number;
             switch(wall_type) {
                 case Wall.EMPTY:
                     continue
                 case Wall.WALL_HZ:
-                    atlas_index = [1, 1]
+                    atlasIndex = [1, 1]
                     rotation = 0
                     break
                 case Wall.WALL_VT:
-                    atlas_index = [1, 1]
+                    atlasIndex = [1, 1]
                     rotation = 90
                     break
                 case Wall.TURN_Q1:
-                    atlas_index = [2, 0]
+                    atlasIndex = [2, 0]
                     rotation = 0
                     break
                 case Wall.TURN_Q2:
-                    atlas_index = [2, 0]
+                    atlasIndex = [2, 0]
                     rotation = 270
                     break
                 case Wall.TURN_Q3:
-                    atlas_index = [2, 0]
+                    atlasIndex = [2, 0]
                     rotation = 180
                     break
                 case Wall.TURN_Q4:
-                    atlas_index = [2, 0]
+                    atlasIndex = [2, 0]
                     rotation = 90
                     break
                 case Wall.TEE_NORTH:
-                    atlas_index = [1, 0]
+                    atlasIndex = [1, 0]
                     rotation = 180
                     break
                 case Wall.TEE_EAST:
-                    atlas_index = [1, 0]
+                    atlasIndex = [1, 0]
                     rotation = 270
                     break
                 case Wall.TEE_SOUTH:
-                    atlas_index = [1, 0]
+                    atlasIndex = [1, 0]
                     rotation = 0
                     break
                 case Wall.TEE_WEST:
-                    atlas_index = [1, 0]
+                    atlasIndex = [1, 0]
                     rotation = 90
                     break
                 case Wall.CROSS:
-                    atlas_index = [0, 0]
+                    atlasIndex = [0, 0]
                     rotation = 0
                     break
                 case Wall.DOT:
-                    atlas_index = [2, 1]
+                    atlasIndex = [2, 1]
                     rotation = 0
                     break
                 case Wall.WALL_END_NORTH:
-                    atlas_index = [0, 1]
+                    atlasIndex = [0, 1]
                     rotation = 0
                     break;
                 case Wall.WALL_END_EAST:
-                    atlas_index = [0, 1]
+                    atlasIndex = [0, 1]
                     rotation = 90
                     break;
                 case Wall.WALL_END_SOUTH:
-                    atlas_index = [0, 1]
+                    atlasIndex = [0, 1]
                     rotation = 180
                     break;
                 case Wall.WALL_END_WEST:
-                    atlas_index = [0, 1]
+                    atlasIndex = [0, 1]
                     rotation = 270
                     break;
             }
 
-            draw_sprite (
+            drawSprite (
                 ctx,
                 x, 
                 y,
                 1,
                 atlas,
-                atlas_index,
+                atlasIndex,
                 ATLAS_TILE_WIDTH,
                 rotation
             )
@@ -276,49 +418,49 @@ const draw_debug_sprites = (
 
         
             let size = 1
-            let atlas_index: [number, number];
+            let atlasIndex: [number, number];
             switch (tile_type) {
                 case Tile.EMPTY:
                 case Tile.WALL:
                     continue
                 case Tile.GHOST_WALL:
-                    atlas_index = [4, 0]
+                    atlasIndex = [4, 0]
                     break
                 case Tile.GHOST_SPAWN: 
-                    atlas_index = [3, 0]
+                    atlasIndex = [3, 0]
                     break
                 case Tile.FOOD:
-                    atlas_index = [3, 3]
+                    atlasIndex = [3, 3]
                     break
                 case Tile.PLAYER_SPAWN_1:
-                    atlas_index = [3, 1]
+                    atlasIndex = [3, 1]
                     break
                 case Tile.PLAYER_SPAWN_2:
-                    atlas_index = [4, 1]
+                    atlasIndex = [4, 1]
                     break
                 case Tile.PLAYER_SPAWN_3:
-                    atlas_index = [3, 2]
+                    atlasIndex = [3, 2]
                     break
                 case Tile.PLAYER_SPAWN_4:
-                    atlas_index = [4, 2]
+                    atlasIndex = [4, 2]
                     break
                 case Tile.THICC_DOT:
-                    atlas_index = [2, 3]
+                    atlasIndex = [2, 3]
                     size = .4
                     break
                 case Tile.INITIAL_DOT:
-                    atlas_index = [2, 3]
+                    atlasIndex = [2, 3]
                     size = .2
                     break
             }
 
-            draw_sprite (
+            drawSprite (
                 ctx,
                 x, 
                 y,
                 size,
                 atlas,
-                atlas_index,
+                atlasIndex,
                 ATLAS_TILE_WIDTH,
                 0
             )
@@ -327,8 +469,8 @@ const draw_debug_sprites = (
     }
 }
 
-let map_canvas = document.createElement("canvas")
-const draw_map = (
+let mapCanvas = document.createElement("canvas")
+const drawMap = (
     ctx: CanvasRenderingContext2D, 
     atlas: CanvasImageSource, 
     map: Map, 
@@ -337,33 +479,30 @@ const draw_map = (
 ) => {
 
     if (map.id !== last || editor) {
-        map_canvas.width = map.width * ATLAS_TILE_WIDTH
-        map_canvas.height = map.height * ATLAS_TILE_WIDTH
+        mapCanvas.width = map.width * ATLAS_TILE_WIDTH
+        mapCanvas.height = map.height * ATLAS_TILE_WIDTH
         
-        let map_ctx = map_canvas.getContext("2d")
-        draw_map_canvas(map_ctx, atlas, map)
+        let map_ctx = mapCanvas.getContext("2d")
+        drawMapCanvas(map_ctx, atlas, map)
         if (editor) {
             draw_debug_sprites(map_ctx, atlas, map)
         }
     }
 
     ctx.drawImage (
-        map_canvas,
+        mapCanvas,
         0,
         0
     )
 
 }
 
-let last_map_drawn: number | undefined
+let lastMapDrawn: number | undefined
 export const startGraphicsUpdater = () => {
 
     let canvas = document.getElementById("canvas") as HTMLCanvasElement
     let atlas = document.getElementById("atlas") as HTMLImageElement
 
-    /**
-     * @param {import("./logic").GameState} data 
-     */
     return (
         data: GameState, 
         frame: number,
@@ -374,7 +513,7 @@ export const startGraphicsUpdater = () => {
 
         if (!map) return
 
-        if (map.id !== last_map_drawn) {
+        if (map.id !== lastMapDrawn) {
             canvas.style.display = ""
             canvas.width = map.width * ATLAS_TILE_WIDTH
             canvas.height = map.height * ATLAS_TILE_WIDTH
@@ -383,12 +522,13 @@ export const startGraphicsUpdater = () => {
         let ctx = canvas.getContext("2d")
         ctx.clearRect(0, 0, canvas.width, canvas.height)
         
-        draw_map(ctx, atlas, map, last_map_drawn, editor)
-        draw_items(ctx, atlas, data.items)
-        draw_players(ctx, atlas, data.players, frame)
-        update_style(map.width, map.height)
+        drawMap(ctx, atlas, map, lastMapDrawn, editor)
+        drawItems(ctx, atlas, data.items)
+        drawGhosts(ctx, atlas, data.ghosts)
+        drawPlayers(ctx, atlas, data.players, frame)
+        updateStyle(map.width, map.height)
 
-        last_map_drawn = map.id
+        lastMapDrawn = map.id
 
     }