dots and new sprites

3 files changed, 156 insertions, 58 deletions

diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
index e73927e..31565a8 100644
--- a/client/js/gfx/graphics.js
+++ b/client/js/gfx/graphics.js
@@ -1,56 +1,105 @@
 import { Sprite } from './sprite.js'
-import { Rotation } from '../logic.js'
+import { ItemType, Rotation } from '../logic.js'
 
 
+const draw_players = (data, players, sprites) => {
+    for (let id of players) {
+        let pos = data.players[id].pos
+        sprites[id].move(pos[0], pos[1])
+        switch (data.players[id].move_rot) {
+            case Rotation.NORTH:
+                sprites[id].rotate(270)
+                break
+            case Rotation.EAST:
+                sprites[id].rotate(0)
+                break
+            case Rotation.SOUTH:
+                sprites[id].rotate(90)
+                break
+            case Rotation.WEST:
+                sprites[id].rotate(180)
+                break
+        }
+    }
+}
+
+const update_player_sprites = (data, players, sprites) => {
+    for (const sprite of sprites) {
+        if (sprite !== undefined) {
+            sprite.destroy()
+        }
+    }
+
+    let new_sprites = Array(players)
+    new_sprites.fill(undefined)
+
+    for (let id of players) {
+        let sprite = new Sprite("/img/pac.png", data.map)
+        sprite.layer(3)
+        sprite.resize(1,1)
+        sprite.show()
+        new_sprites[id] = sprite
+    }
+
+    return new_sprites
+}
+
+const create_map_dot = (data, x, y) => {
+    let dot = new Sprite("/img/dot.png", data.map)
+    dot.move(x, y)
+    dot.resize(.2,.2)
+    dot.show()
+    return dot
+}
+
+const update_item_sprites = (data) => {
+
+    let item_sprites = {}
+
+    for (let item_key in data.map.items) {
+        let item = data.map.items[item_key]
+        switch (item.type) {
+            case ItemType.DOT:
+                item_sprites[item_key] = create_map_dot(data, item.pos[0], item.pos[1])
+                break;
+        }
+    }
+
+    return item_sprites
+}
+
 export const startGraphicsUpdater = () => {
     
-    let sprites = []
+    let player_sprites = []
+    let item_sprites = {}
 
     /**
 	 * @type {(data: import("../logic.js").GameState) => void}
 	 */
     return (data) => {
 
-        if (!data.started) return
+        if (!data.map || !data.map.visible) return
 
         let players = Object.keys(data.players).filter(k => data.players[k] !== undefined)
 
-        if (sprites.length !== players.length) {
-
-            for (const sprite of sprites) {
-                if (sprite !== undefined) {
-                    sprite.destroy()
-                }
-            }
-
-            sprites = Array(players)
-            sprites.fill(undefined)
+        if (player_sprites.length !== players.length) {
+            player_sprites = update_player_sprites(data, players, player_sprites)
+            console.log("updating player sprites")
+        }
 
-            for (let id of players) {
-                let sprite = new Sprite("/static/tux.png", data.map)
-                sprite.show()
-                sprite.resize(1.5,1.5)
-                sprites[id] = sprite
-            }
+        for (let item_key of data.items_eaten) {
+            if (!(item_sprites[item_key])) continue
+            item_sprites[item_key].destroy()
+            delete item_sprites[item_key]
+            delete data.items_eaten[item_key]
         }
 
-        for (let id of players) {
-            let pos = data.players[id].pos
-            sprites[id].move(pos[0], pos[1])
-            switch (data.players[id].move_rot) {
-                case Rotation.NORTH:
-                    sprites[id].rotate(270)
-                    break
-                case Rotation.EAST:
-                    sprites[id].rotate(0)
-                    break
-                case Rotation.SOUTH:
-                    sprites[id].rotate(90)
-                    break
-                case Rotation.WEST:
-                    sprites[id].rotate(180)
-                    break
-            }
+        if (Object.keys(item_sprites).length !== Object.keys(data.map.items).length) {
+            item_sprites = update_item_sprites(data)
+            console.log("updating item sprites")
         }
+
+        draw_players(data, players, player_sprites)
+
     }
 }
diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js
index 0ba7f9c..e629b17 100644
--- a/client/js/gfx/map.js
+++ b/client/js/gfx/map.js
@@ -1,3 +1,5 @@
+import { ItemType, get_item_key } from "../logic.js";
+
 const gen_style = (map, style) => {
     const css = `
         * {
@@ -63,71 +65,71 @@ const place_tile = (container, type) => {
     let image_src, class_name;
     switch(type) {
         case Direction.EMPTY:
-            image_src = "/static/empty.png"
+            image_src = "/img/wall_empty.png"
             class_name = ""
             break
         case Direction.WALL_HZ:
-            image_src = "/static/wall.png"
+            image_src = "/img/wall_straight.png" 
             class_name = ""
             break
         case Direction.WALL_VT:
-            image_src = "/static/wall.png"
+            image_src = "/img/wall_straight.png"
             class_name = "rotate90"
             break
         case Direction.TURN_Q1:
-            image_src = "/static/turn.png" 
+            image_src = "/img/wall_turn.png" 
             class_name = ""
             break
         case Direction.TURN_Q2:
-            image_src = "/static/turn.png" 
+            image_src = "/img/wall_turn.png" 
             class_name = "rotate270"
             break
         case Direction.TURN_Q3:
-            image_src = "/static/turn.png" 
+            image_src = "/img/wall_turn.png" 
             class_name = "rotate180"
             break
         case Direction.TURN_Q4:
-            image_src = "/static/turn.png" 
+            image_src = "/img/wall_turn.png" 
             class_name = "rotate90"
             break
         case Direction.TEE_NORTH:
-            image_src = "/static/tee.png"
+            image_src = "/img/wall_tee.png"
             class_name = "rotate180"
             break
         case Direction.TEE_EAST:
-            image_src = "/static/tee.png"
+            image_src = "/img/wall_tee.png"
             class_name = "rotate270"
             break
         case Direction.TEE_SOUTH:
-            image_src = "/static/tee.png"
+            image_src = "/img/wall_tee.png"
             class_name = ""
             break
         case Direction.TEE_WEST:
-            image_src = "/static/tee.png"
+            image_src = "/img/wall_tee.png"
             class_name = "rotate90"
             break
         case Direction.CROSS:
-            image_src = "/static/cross.png"
+            image_src = "/img/wall_cross.png"
             class_name = ""
             break
         case Direction.DOT:
-            image_src = "/static/dot.png"
+            image_src = "/img/wall_dot.png"
             class_name = ""
             break
         case Direction.WALL_END_NORTH:
-            image_src = "/static/wall_end.png"
+            image_src = "/img/wall_end.png"
             class_name = ""
             break;
         case Direction.WALL_END_EAST:
-            image_src = "/static/wall_end.png"
+            image_src = "/img/wall_end.png"
             class_name = "rotate90"
             break;
         case Direction.WALL_END_SOUTH:
-            image_src = "/static/wall_end.png"
+            image_src = "/img/wall_end.png"
             class_name = "rotate180"
             break;
         case Direction.WALL_END_WEST:
-            image_src = "/static/wall_end.png"
+            image_src = "/img/wall_end.png"
             class_name = "rotate270"
             break;
     }
@@ -152,11 +154,11 @@ const gen_walls = (width, height, data) => {
     for (let y = 0; y < height; y++) {
         for (let x = 0; x < width; x++) {
             
-            let north = get_point(width, height, data, x, y-1)
-            let south = get_point(width, height, data, x, y+1)
-            let east = get_point(width, height, data, x+1, y)
-            let west = get_point(width, height, data, x-1, y)
-            let current = get_point(width, height, data, x, y)
+            let north = get_point(width, height, data, x, y-1) == 1
+            let south = get_point(width, height, data, x, y+1) == 1
+            let east = get_point(width, height, data, x+1, y) == 1
+            let west = get_point(width, height, data, x-1, y) == 1
+            let current = get_point(width, height, data, x, y) == 1
 
             let point = Direction.EMPTY
             
@@ -213,11 +215,45 @@ const gen_map = (map, container) => {
             place_tile(container, map.walls[y * map.width + x])
         }
     }
+}
+
+const gen_items = (map) => {
+    
+    let width = map.width
+    let height = map.height
+
+    let items = {}
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            let tile = get_point(width, height, map.data, x, y)
+            if (tile != 0) continue
+
+            let item_key = get_item_key(x, y, width)
+            items[item_key] = {type: ItemType.DOT, pos: [x, y]}
+
+            let tile_south = get_point(width, height, map.data, x, y + 1)
+            if (tile_south == 0) {
+                item_key = get_item_key(x, y + .5, width)
+                items[item_key] = {type: ItemType.DOT, pos: [x, y + .5]}
+            }
+
+            let tile_east = get_point(width, height, map.data, x + 1, y)
+            if (tile_east == 0) {
+                item_key = get_item_key(x + .5, y, width)
+                items[item_key] = {type: ItemType.DOT, pos: [x + .5, y]}
+            }
+        }
+    }
 
+    return items
 }
 
 export class Map {
 
+    static data
+    static walls
+
     constructor(width, height, data) {
 
         let last = document.getElementById("container")
@@ -227,6 +263,8 @@ export class Map {
         this.height = height
         this.data = data
         this.walls = gen_walls(width, height, data)
+        this.items = gen_items(this)
+        this.visible = false
 
     }
 
@@ -250,6 +288,8 @@ export class Map {
         }
         
         gen_style(this, style)
+
+        this.visible = true
     }
 
     hide() {
@@ -257,5 +297,7 @@ export class Map {
         if (container) container.remove()
         let style = document.getElementById("style")
         if (style) style.remove()
+
+        this.visible = false
     }
 }
diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js
index 1ed8136..b793d89 100644
--- a/client/js/gfx/sprite.js
+++ b/client/js/gfx/sprite.js
@@ -11,6 +11,7 @@ export class Sprite {
         this.y = 0
         this.w = 1
         this.h = 1
+        this.z = 1
         this.d = 0
         this.hide()
     }
@@ -26,6 +27,7 @@ export class Sprite {
         this.element.style.left = `${left}%`
         this.element.style.top = `${top}%`
         this.element.style.transform = `rotate(${this.d}deg)`
+        this.element.style.zIndex = `${this.z}`
     }
 
     move(x, y) {
@@ -40,6 +42,11 @@ export class Sprite {
         this.#update_pos()
     }
 
+    layer(z) {
+        this.z = z
+        this.#update_pos()
+    }
+
     rotate(d) {
         this.d = d
         this.#update_pos()