Update tileset: minor touchups, lighter popwalls, killer indicator, some experiments

js/renderer-canvas.js

@@ -50,11 +50,15 @@ export class CanvasRenderer {
             this.viewport_size_x = 9;
             this.viewport_size_y = 9;
         }
-        this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y});
+        this.canvas = this.constructor.make_canvas(
-        this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+            tileset.size_x * this.viewport_size_x,
-        this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+            tileset.size_y * this.viewport_size_y);
-        this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`);
+        if (this.canvas.style) {
-        this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`);
+            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+            this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`);
+            this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`);
+        }
         this.ctx = this.canvas.getContext('2d');
         this.viewport_x = 0;
         this.viewport_y = 0;
@@ -70,6 +74,11 @@ export class CanvasRenderer {
         this.active_player = null;
     }
 
+    // This is here so command-line Node stuff can swap it out for the canvas package
+    static make_canvas(w, h) {
+        return mk('canvas', {width: w, height: h});
+    }
+
     set_level(level) {
         this.level = level;
         // TODO update viewport size...  or maybe Game should do that since you might be cheating
@@ -154,12 +163,14 @@ export class CanvasRenderer {
             return;
 
         this.viewport_dirty = false;
-        this.canvas.setAttribute('width', this.tileset.size_x * this.viewport_size_x);
+        this.canvas.width = this.tileset.size_x * this.viewport_size_x;
-        this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y);
+        this.canvas.height = this.tileset.size_y * this.viewport_size_y;
-        this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+        if (this.canvas.style) {
-        this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
-        this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`);
+            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
-        this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`);
+            this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`);
+            this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`);
+        }
     }
 
     draw(update_progress = 0) {
@@ -277,7 +288,6 @@ export class CanvasRenderer {
                 // If they killed the player, indicate as such.  The indicator has an arrow at the
                 // bottom; align that about 3/4 up the killer
                 if (actor.is_killer && '#killer-indicator' in this.tileset.layout) {
-                    packet.y -= Math.floor(th * 3/4) / th;
                     this.tileset.draw_type('#killer-indicator', null, packet);
                 }
             }
@@ -426,7 +436,7 @@ export class CanvasRenderer {
     // or something, or maybe make this a tileset method
     draw_single_tile_type(name, tile = null, canvas = null, x = 0, y = 0) {
         if (! canvas) {
-            canvas = mk('canvas', {width: this.tileset.size_x, height: this.tileset.size_y});
+            canvas = this.constructor.make_canvas(this.tileset.size_x, this.tileset.size_y);
         }
         let ctx = canvas.getContext('2d');
 

js/tileset.js

@@ -512,6 +512,8 @@ export const CC2_TILESET_LAYOUT = {
         __special__: 'animated',
         duration: 20,
         cc2_duration: 16,
+        // Nice little touch: green teleporters aren't animated in sync
+        positionally_hashed: true,
         all: [[4, 19], [5, 19], [6, 19], [7, 19]],
     },
     teleport_yellow: {
@@ -1016,10 +1018,10 @@ export const LL_TILESET_LAYOUT = {
     '#supported-versions': new Set(['cc1', 'cc2', 'll']),
     '#wire-width': 1/16,
     '#editor-arrows': {
-        north: [6, 1],
+        north: [25, 31],
-        east: [6.5, 1],
+        east: [25.5, 31],
-        south: [6, 1.5],
+        south: [25, 31.5],
-        west: [6.5, 1.5],
+        west: [25.5, 31.5],
     },
 
     // ------------------------------------------------------------------------------------------------
@@ -1113,24 +1115,29 @@ export const LL_TILESET_LAYOUT = {
     },
     no_player1_sign: [10, 2],
     no_player2_sign: [10, 3],
-    '#active-player-background': [11, 2],
+    socket: [11, 2],
-    // TODO dopps can push but i don't think they have any other visuals
-    doppelganger1: {
-        __special__: 'overlay',
-        base: [11, 3],
-        overlay: 'player',
-    },
-    doppelganger2: {
-        __special__: 'overlay',
-        base: [11, 3],
-        overlay: 'player2',
-    },
     exit: {
         __special__: 'animated',
         duration: 16,
         all: [[12, 2], [13, 2], [14, 2], [15, 2]],
     },
-    socket: [12, 3],
+    '#active-player-background': {
+        __special__: 'animated',
+        duration: 120,
+        all: [[12, 3], [13, 3]],
+    },
+    // TODO dopps can push but i don't think they have any other visuals
+    doppelganger1: {
+        __special__: 'overlay',
+        base: [14, 3],
+        overlay: 'player',
+    },
+    doppelganger2: {
+        __special__: 'overlay',
+        base: [14, 3],
+        overlay: 'player2',
+    },
+    '#killer-indicator': [15, 3],
 
     floor_custom_green: [0, 4],
     floor_custom_pink: [1, 4],
@@ -1415,6 +1422,8 @@ export const LL_TILESET_LAYOUT = {
         __special__: 'animated',
         duration: 20,
         cc2_duration: 16,
+        // Nice little touch: green teleporters aren't animated in sync
+        positionally_hashed: true,
         all: [[4, 23], [5, 23], [6, 23], [7, 23]],
     },
     teleport_blue_exit: {