Implement splashes and explosions, at least partially

js/main.js

@@ -39,7 +39,7 @@ class Tile {
     visual_position(tic_offset = 0) {
         let x = this.cell.x;
         let y = this.cell.y;
-        if (! this.animation_speed) {
+        if (! this.previous_cell) {
             return [x, y];
         }
         else {
@@ -336,6 +336,11 @@ class Level {
                 // Deal with movement animation
                 actor.animation_progress += 1;
                 if (actor.animation_progress >= actor.animation_speed) {
+                    if (actor.type.ttl) {
+                        // This is purely an animation so it disappears once it's played
+                        this.remove_tile(actor);
+                        continue;
+                    }
                     actor.previous_cell = null;
                     actor.animation_progress = null;
                     actor.animation_speed = null;
@@ -562,6 +567,9 @@ class Level {
             // FIXME actually, this prevents flicking!
             if (! blocked) {
                 let goal_cell = this.cells[goal_y][goal_x];
+                // FIXME splashes should block you (e.g. pushing a block off a
+                // turtle) but currently do not because of this copy; we don't
+                // notice a new thing was added to the tile  :(
                 for (let tile of Array.from(goal_cell)) {
                     if (check_for_slide && tile.type.slide_mode && ! actor.ignores(tile.type.name)) {
                         check_for_slide = false;
@@ -792,6 +800,7 @@ class Level {
     }
 
     // Tile stuff in particular
+    // TODO should add in the right layer?  maybe?
 
     remove_tile(tile) {
         let cell = tile.cell;
@@ -804,6 +813,19 @@ class Level {
         this.pending_undo.push(() => cell._remove(tile));
     }
 
+    spawn_animation(cell, name) {
+        let type = TILE_TYPES[name];
+        let tile = new Tile(type);
+        tile.animation_speed = type.ttl;
+        tile.animation_progress = 0;
+        cell._add(tile);
+        this.actors.push(tile);
+        this.pending_undo.push(() => {
+            this.actors.pop();
+            cell._remove(tile);
+        });
+    }
+
     transmute_tile(tile, name) {
         let current = tile.type.name;
         this.pending_undo.push(() => tile.type = TILE_TYPES[current]);
@@ -1521,6 +1543,7 @@ class Editor extends PrimaryView {
             'bomb',
             'button_red',
             'tank_blue',
+            'turtle',
         ])
         {
             let entry = mk('canvas.palette-entry', {

js/tileset.js

@@ -81,8 +81,8 @@ export const CC2_TILESET_LAYOUT = {
     wall_custom_yellow: [14, 4],
     wall_custom_blue: [15, 4],
 
-    // explosion
+    explosion: [[0, 5], [1, 5], [2, 5], [3, 5]],
-    // splash
+    splash: [[4, 5], [5, 5], [6, 5], [7, 5]],
     // flame jet
     // green walls...?
     forbidden: [14, 5],

js/tiletypes.js

@@ -256,13 +256,14 @@ const TILE_TYPES = {
             else {
                 level.remove_tile(other);
             }
+            level.spawn_animation(me.cell, 'splash');
         },
     },
     turtle: {
         draw_layer: LAYER_TERRAIN,
         on_depart(me, level, other) {
-            // TODO become a splash (good test: push a block on a turtle, then push again; you don't fall in water because the splash blocks you!)
             level.transmute_tile(me, 'water');
+            level.spawn_animation(me.cell, 'splash');
         },
     },
     ice: {
@@ -361,8 +362,10 @@ const TILE_TYPES = {
         draw_layer: LAYER_ITEM,
         // TODO explode
         on_arrive(me, level, other) {
+            let cell = me.cell;
             level.remove_tile(me);
             level.remove_tile(other);
+            level.spawn_animation(cell, 'explosion');
             if (other.type.is_player) {
                 level.fail("watch where you step");
             }
@@ -799,6 +802,20 @@ const TILE_TYPES = {
             }
         },
     },
+
+    // VFX
+    splash: {
+        draw_layer: LAYER_OVERLAY,
+        is_actor: true,
+        blocks_players: true,
+        ttl: 6,
+    },
+    explosion: {
+        draw_layer: LAYER_OVERLAY,
+        is_actor: true,
+        blocks_players: true,
+        ttl: 6,
+    },
 };
 
 // Tell them all their own names