feat: Outer-totalistic rules (#3)

* feat: read outer-totalistic rule

* feat: add message

* feat: improve style

index.html

@@ -83,6 +83,14 @@ <h2>Input</h2>
               >RLE</a
             ></label
           >
+          (Accept
+          <a
+            href="https://conwaylife.com/wiki/Totalistic_Life-like_cellular_automaton"
+            target="_blank"
+            rel="noopener"
+            >outer-totalistic</a
+          >
+          rule)
           <br />
           <textarea
             id="inputRLE"

package.json

@@ -19,11 +19,11 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@ca-ts/algo": "npm:@jsr/ca-ts__algo@^0.2.0",
+    "@ca-ts/algo": "npm:@jsr/ca-ts__algo@^0.4.0",
     "@ca-ts/rle": "npm:@jsr/ca-ts__rle@^0.8.0",
+    "@ca-ts/rule": "npm:@jsr/ca-ts__rule@^0.2.0",
     "babylonjs": "^7.29.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.1"
-  },
-  "dependencies": {}
+  }
 }

src/lib/setRLE.ts

@@ -1,9 +1,16 @@
 import type { BitWorld } from "@ca-ts/algo/bit";
 import { parseRLE } from "@ca-ts/rle";
+import { parseRule } from "@ca-ts/rule";
 
 export function setRLE(bitWorld: BitWorld, sourceRLE: string) {
   const data = parseRLE(sourceRLE);
 
+  try {
+    bitWorld.setRule(parseRule(data.ruleString).transition);
+  } catch {
+    bitWorld.setRule({ birth: [3], survive: [2, 3] });
+  }
+
   const width = data.size?.width ?? 0;
   const height = data.size?.height ?? 0;
 

src/style.css

@@ -53,6 +53,10 @@ canvas {
   top: 4px;
 }
 
+h2 {
+  margin-top: 8px;
+}
+
 dialog form {
   margin: 12px;
 }