Instead of expensive sinkhole battle, apply deep water effect in postprocessing

island.ts

@@ -42,6 +42,7 @@ export function IslandApplet() {
           ticks += 3;
           if (islands.done) {
             clearInterval(timerId);
+            islands.deepenWater();
           }
 
           renderIslands(islands, cx);

island/grid.ts

@@ -1,5 +1,5 @@
 import { Prng, UINT_MAX, mulberry32 } from "../lib/prng";
-import { BEACH, ICECAP } from "./data";
+import { BEACH, ICECAP, WATER } from "./data";
 import {
   ALL_ISLANDS,
   BIG_ISLANDS,
@@ -21,7 +21,7 @@ export class IslandGrid {
   done = false;
 
   constructor(public width: number, public height: number, seed: number) {
-    this.data = Array(width * height).fill(-1);
+    this.data = Array(width * height).fill(WATER);
     this.rng = mulberry32(seed);
 
     const islandBag = this.shuffle([
@@ -161,6 +161,23 @@ export class IslandGrid {
     this.forCardinals(pos, action);
     this.forDiagonals(pos, action);
   }
+
+  public deepenWater() {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.data[i] == WATER) {
+        let isShore = false;
+        this.forNeighbors(i, (adjPos) => {
+          if (this.data[adjPos] > WATER) {
+            isShore = true;
+          }
+        });
+        if (!isShore) {
+          this.data[i] = WATER - 1;
+        }
+      }
+    }
+  }
+
   public choose<T>(list: T[]) {
     if (list.length == 0) {
       throw new Error("Picking from empty list");