better map bg renderer

3 files changed, 77 insertions, 77 deletions

diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
index b406ab1..8ee4a6f 100644
--- a/client/js/gfx/graphics.js
+++ b/client/js/gfx/graphics.js
@@ -20,6 +20,12 @@ const draw_players = (data, players, sprites) => {
                 sprites[id].rotate(180)
                 break
         }
+
+        if (data.players[id].moving) {
+            sprites[id].set_img("img/pac.gif")
+        } else {
+            sprites[id].set_img("img/pac.png")
+        }
     }
 }
 
@@ -34,7 +40,7 @@ const update_player_sprites = (data, players, sprites) => {
     new_sprites.fill(undefined)
 
     for (let id of players) {
-        let sprite = new Sprite("/img/pac.png", data.map)
+        let sprite = new Sprite("img/pac.png", data.map)
         sprite.layer(3)
         sprite.resize(1,1)
         sprite.show()
@@ -45,7 +51,7 @@ const update_player_sprites = (data, players, sprites) => {
 }
 
 const create_map_dot = (data, x, y) => {
-    let dot = new Sprite("/img/dot.png", data.map)
+    let dot = new Sprite("img/dot.png", data.map)
     dot.move(x, y)
     dot.resize(.2,.2)
     dot.show()
diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js
index e629b17..a9ef0ad 100644
--- a/client/js/gfx/map.js
+++ b/client/js/gfx/map.js
@@ -1,6 +1,6 @@
 import { ItemType, get_item_key } from "../logic.js";
 
-const gen_style = (map, style) => {
+const update_style = (map, style) => {
     const css = `
         * {
             --scale: 100;
@@ -18,13 +18,6 @@ const gen_style = (map, style) => {
             vertical-align: top;
             line-height: 0;
         }
-        
-        #container img {
-            display: inline-block;
-            width: ${100/map.width}%;
-            height: ${100/map.height}%;
-            image-rendering: pixelated;
-        }
 
         @media (max-aspect-ratio: ${map.width}/${map.height}) {
             #container {
@@ -58,86 +51,87 @@ const Direction = {
     WALL_END_WEST: 16
 }
 
-const place_tile = (container, type) => {
-
-    const img = document.createElement("img")
+/**
+ * @param {CanvasRenderingContext2D} context
+ */
+const draw_tile = (context, x, y, w, type) => {
 
-    let image_src, class_name;
+    let atlas_index, rotation;
     switch(type) {
         case Direction.EMPTY:
-            image_src = "/img/wall_empty.png"
-            class_name = ""
-            break
+            return
         case Direction.WALL_HZ:
-            image_src = "/img/wall_straight.png" 
-            class_name = ""
+            atlas_index = [1, 1]
+            rotation = 0
             break
         case Direction.WALL_VT:
-            image_src = "/img/wall_straight.png"
-            class_name = "rotate90"
+            atlas_index = [1, 1]
+            rotation = 90
             break
         case Direction.TURN_Q1:
-            image_src = "/img/wall_turn.png" 
-            class_name = ""
+            atlas_index = [2, 0]
+            rotation = 0
             break
         case Direction.TURN_Q2:
-            image_src = "/img/wall_turn.png" 
-            class_name = "rotate270"
+            atlas_index = [2, 0]
+            rotation = 270
             break
         case Direction.TURN_Q3:
-            image_src = "/img/wall_turn.png" 
-            class_name = "rotate180"
+            atlas_index = [2, 0]
+            rotation = 180
             break
         case Direction.TURN_Q4:
-            image_src = "/img/wall_turn.png" 
-            class_name = "rotate90"
+            atlas_index = [2, 0]
+            rotation = 90
             break
         case Direction.TEE_NORTH:
-            image_src = "/img/wall_tee.png"
-            class_name = "rotate180"
+            atlas_index = [1, 0]
+            rotation = 180
             break
         case Direction.TEE_EAST:
-            image_src = "/img/wall_tee.png"
-            class_name = "rotate270"
+            atlas_index = [1, 0]
+            rotation = 270
             break
         case Direction.TEE_SOUTH:
-            image_src = "/img/wall_tee.png"
-            class_name = ""
+            atlas_index = [1, 0]
+            rotation = 0
             break
         case Direction.TEE_WEST:
-            image_src = "/img/wall_tee.png"
-            class_name = "rotate90"
+            atlas_index = [1, 0]
+            rotation = 90
             break
         case Direction.CROSS:
-            image_src = "/img/wall_cross.png"
-            class_name = ""
+            atlas_index = [0, 0]
+            rotation = 0
             break
         case Direction.DOT:
-            image_src = "/img/wall_dot.png"
-            class_name = ""
+            atlas_index = [2, 1]
+            rotation = 0
             break
         case Direction.WALL_END_NORTH:
-            image_src = "/img/wall_end.png"
-            class_name = ""
+            atlas_index = [0, 1]
+            rotation = 0
             break;
         case Direction.WALL_END_EAST:
-            image_src = "/img/wall_end.png"
-            class_name = "rotate90"
+            atlas_index = [0, 1]
+            rotation = 90
             break;
         case Direction.WALL_END_SOUTH:
-            image_src = "/img/wall_end.png"
-            class_name = "rotate180"
+            atlas_index = [0, 1]
+            rotation = 180
             break;
         case Direction.WALL_END_WEST:
-            image_src = "/img/wall_end.png"
-            class_name = "rotate270"
+            atlas_index = [0, 1]
+            rotation = 270
             break;
     }
 
-    img.setAttribute("class", class_name)
-    img.setAttribute("src", image_src)
-    
-    container.appendChild(img)
+    let atlas = document.getElementById("atlas")
+    context.save()
+    context.translate((x+.5)*w, (y+.5)*w)
+    context.rotate(rotation * Math.PI / 180)
+    context.drawImage(atlas, atlas_index[0]*w, atlas_index[1]*w, w, w, -w/2, -w/2, w, w)
+    context.restore() 
 }
 
 const get_point = (width, height, data, x, y) => {
@@ -209,10 +203,11 @@ const gen_walls = (width, height, data) => {
     return walls
 }
 
-const gen_map = (map, container) => {
+const update_canvas = (map, canvas) => {
+    let context = canvas.getContext("2d");
     for (let y = 0; y < map.height; y++) {
         for (let x = 0; x < map.width; x++) {
-            place_tile(container, map.walls[y * map.width + x])
+            draw_tile(context, x, y, map.tile_width, map.walls[y * map.width + x])
         }
     }
 }
@@ -256,47 +251,42 @@ export class Map {
 
     constructor(width, height, data) {
 
-        let last = document.getElementById("container")
-        if (last) last.remove()
-
         this.width = width
         this.height = height
         this.data = data
         this.walls = gen_walls(width, height, data)
         this.items = gen_items(this)
         this.visible = false
+        this.tile_width = 32
+
+        canvas.width = this.width * this.tile_width
+        canvas.height = this.height * this.tile_width
+
+
 
     }
 
     show() {
-        this.hide()
 
         let container = document.getElementById("container")
-        if (!container) {
-            container = document.createElement("div")
-            container.id = "container"
-            document.body.appendChild(container)
-        }
+        container.style.display = ""
+
+        let canvas = document.getElementById("canvas") 
+        canvas.style.display = ""
 
-        gen_map(this, container)
-        
         let style = document.getElementById("style")
-        if (!style) {
-            style = document.createElement("style")
-            style.id = "style"
-            document.body.appendChild(style)
-        }
-        
-        gen_style(this, style)
+
+        update_canvas(this, canvas)
+        update_style(this, style)
 
         this.visible = true
     }
 
     hide() {
-        let container = document.getElementById("container")
-        if (container) container.remove()
-        let style = document.getElementById("style")
-        if (style) style.remove()
+
+        let canvas = document.getElementById("canvas") 
+        canvas.style.display = "none"
+        container.style.display = "none"
 
         this.visible = false
     }
diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js
index b793d89..07360f1 100644
--- a/client/js/gfx/sprite.js
+++ b/client/js/gfx/sprite.js
@@ -47,6 +47,10 @@ export class Sprite {
         this.#update_pos()
     }
 
+    set_img(src) {
+        this.element.src = src
+    }
+
     rotate(d) {
         this.d = d
         this.#update_pos()