diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..1ff94f7
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
diff --git a/components/opt-toy/AOPActivationTable.tsx b/components/opt-toy/AOPActivationTable.tsx
index f0efd96..54e5e99 100644
--- a/components/opt-toy/AOPActivationTable.tsx
+++ b/components/opt-toy/AOPActivationTable.tsx
@@ -1,12 +1,26 @@
 import * as React from "react"
-import { OPT512 } from "./OPT512"
-import { betweenX } from "./between"
+import {
+  Blast,
+  Consume,
+  Feeling,
+  iNtuition,
+  OPT512,
+  Play,
+  Sensing,
+  Sleep,
+  Thinking,
+} from "./OPT512"
+import { FC } from "react"
+import { isSSR } from "../../util/constants"
 
 export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
+  if (isSSR) {
+    return null
+  }
   const showSex = op512.fmDe !== "?" || op512.fmS !== "?"
   return (
     <div className="AOPActivationTable">
-      <style jsx>{`
+      <style jsx global>{`
         .AOPActivationTable {
           box-sizing: border-box;
           font-size: 1em;
@@ -62,7 +76,7 @@ export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
 
 } */
 
-        .AOPActivationTable .pair {
+        .AOPActivationTable .pair:not(:empty) {
           border: 2px solid blue;
         }
         .AOPActivationTable .pair.next {
@@ -78,8 +92,8 @@ export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
           margin-right: 4px;
         }
 
-        .AOPActivationTable .animal.index0 .pair,
-        .AOPActivationTable .animal.index1 .pair.previous {
+        .AOPActivationTable .animal.index0 .pair:not(:empty),
+        .AOPActivationTable .animal.index1 .pair.previous:not(:empty) {
           border-color: #fff;
           background: blue;
           color: white;
@@ -97,39 +111,69 @@ export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
           ]
 
           return (
-            <span
+            <AnimalColumn
               key={code}
-              className={`animal ${Ox.sex + Dx.sex} ${code} ${flipSideIsLast &&
-                "flipSideIsLast"} index${index}`}
-            >
-              <span className="part sex">
-                {showSex && (Ox.sex + Dx.sex).toUpperCase()}
-              </span>
-              <span>
-                {Ox.code}
-                {Dx.code}
-              </span>
-              <span className={`aa`}>{code}</span>
-              <span
-                className={`part o ${next?.observer === Ox &&
-                  "pair next"} ${previous?.observer === Ox && "pair previous"}`}
-              >
-                {showSex && <i>{Ox.sex}</i>}
-                {Ox.code}
-                {Ox.focus}
-              </span>
-              <span
-                className={`part o ${next?.decider === Dx &&
-                  "pair next"} ${previous?.decider === Dx && "pair previous"}`}
-              >
-                {showSex && <i>{Dx.sex}</i>}
-                {Dx.code}
-                {Dx.focus}
-              </span>
-            </span>
+              {...{
+                code,
+                Ox,
+                Dx,
+                flipSideIsLast,
+                index,
+                showSex,
+                next,
+                previous,
+              }}
+            />
           )
         },
       )}
     </div>
   )
 }
+
+const AnimalColumn: FC<{
+  code: string
+  Ox?: Sensing | iNtuition
+  Dx?: Thinking | Feeling
+  flipSideIsLast: boolean
+  index: number
+  showSex: boolean
+  next?: Play | Sleep | Blast | Consume
+  previous?: Play | Sleep | Blast | Consume
+}> = ({ code, Ox, Dx, flipSideIsLast, index, showSex, next, previous }) => {
+  return (
+    <span
+      key={code}
+      className={`animal ${Ox?.sex + Dx?.sex} ${code} ${
+        flipSideIsLast && "flipSideIsLast"
+      } index${index}`}
+    >
+      {showSex && (
+        <span className="part sex">{(Ox?.sex + Dx?.sex).toUpperCase()}</span>
+      )}
+      <span>
+        {Ox?.code}
+        {Dx?.code}
+      </span>
+      <span className={`aa`}>{code}</span>
+      <span
+        className={`part o ${next?.observer === Ox && "pair next"} ${
+          previous?.observer === Ox && "pair previous"
+        }`}
+      >
+        {showSex && <i>{Ox?.sex}</i>}
+        {Ox?.code}
+        {Ox?.focus}
+      </span>
+      <span
+        className={`part o ${next?.decider === Dx && "pair next"} ${
+          previous?.decider === Dx && "pair previous"
+        }`}
+      >
+        {showSex && <i>{Dx?.sex}</i>}
+        {Dx?.code}
+        {Dx?.focus}
+      </span>
+    </span>
+  )
+}
diff --git a/components/opt-toy/Coin.test.ts b/components/opt-toy/Coin.test.ts
new file mode 100644
index 0000000..258caa8
--- /dev/null
+++ b/components/opt-toy/Coin.test.ts
@@ -0,0 +1,515 @@
+import { describe, it, expect, test } from "@jest/globals"
+import { Coin, COINS, NamedCOINS, parseCoinText } from "./Coin"
+import { OPT512 } from "./OPT512"
+
+const { coinOD, coinDiDe, coinOiOe, coinFT, coinNS, coinEnAct, coinInAct, coinSfm, coinDefm } = NamedCOINS
+
+describe("COINS", () => {
+  it("exists", () => {
+    expect(COINS).toBeDefined()
+  })
+})
+
+describe("parseCoinText", () => {
+  it("exists", () => {
+    expect(parseCoinText).toBeDefined()
+  })
+  it("matches", () => {
+    expect(parseCoinText("mmtesepbc").map(Number).join("")).toMatchInlineSnapshot(`"111111111"`)
+    expect(parseCoinText("fffesepbc").map(Number).join("")).toMatchInlineSnapshot(`"111101100"`)
+    expect(parseCoinText("fftinecsp").map(Number).join("")).toMatchInlineSnapshot(`"110010000"`)
+  })
+})
+
+describe("NamedCOINS", () => {
+  it("exists", () => {
+    expect(NamedCOINS).toBeDefined()
+  })
+  describe("every coin", () => {
+    describe("parse function", () => {
+      it("fails for blank string", () => {
+        for (const [name, coin] of Object.entries(NamedCOINS)) {
+          expect(coin.parse("")).toBeNull()
+        }
+      })
+      it("parses standard types", () => {
+        const type = "FF-Fe/Se-PC/B(S)"
+        for (const [name, coin] of Object.entries(NamedCOINS)) {
+          if (coin.index === -1) continue
+          if (coin.parse(type) === null) {
+            throw new Error(`${name} parser fails on ${type}`)
+          }
+          expect(coin.parse("FF-Fe/Se-PC/B(S)")).not.toBeNull()
+          expect(coin.parse("ff-fe/se-pc/b(s)")).not.toBeNull()
+          expect(coin.parse("fFe/fSe-PCB")).not.toBeNull()
+          expect(coin.parse("FFFeSePCBS")).not.toBeNull()
+          expect(coin.parse("FFFeSePCB")).not.toBeNull()
+          expect(coin.parse("fftinecsp")).not.toBeNull()
+        }
+      })
+      it("parses minimal types", () => {
+        for (const [name, coin] of Object.entries(NamedCOINS)) {
+          expect(coin.parse("FF-Fe/Se-PC/B")).not.toBeNull()
+        }
+      })
+    })
+  })
+
+  describe("coinOD", () => {
+    describe("parse function", () => {
+      it("parses as edge", () => {
+        expect(coinOD.parse("")).toBe(null)
+        expect(coinOD.parse("SB/P(S)")).toBe(null)
+        expect(coinOD.parse("FF-SB/P(S)")).toBe(null)
+      })
+      it("parses as heads", () => {
+        expect(coinOD.parse("Di")).toBe(true)
+        expect(coinOD.parse("Ti")).toBe(true)
+        expect(coinOD.parse("Fi")).toBe(true)
+        expect(coinOD.parse("De")).toBe(true)
+        expect(coinOD.parse("Te")).toBe(true)
+        expect(coinOD.parse("Fe")).toBe(true)
+
+        expect(coinOD.parse("fDi")).toBe(true)
+        expect(coinOD.parse("fTi")).toBe(true)
+        expect(coinOD.parse("fFi")).toBe(true)
+        expect(coinOD.parse("fDe")).toBe(true)
+        expect(coinOD.parse("fTe")).toBe(true)
+        expect(coinOD.parse("fFe")).toBe(true)
+
+        expect(coinOD.parse("mDi")).toBe(true)
+        expect(coinOD.parse("mTi")).toBe(true)
+        expect(coinOD.parse("mFi")).toBe(true)
+        expect(coinOD.parse("mDe")).toBe(true)
+        expect(coinOD.parse("mTe")).toBe(true)
+        expect(coinOD.parse("mFe")).toBe(true)
+
+        expect(coinOD.parse("fini")).toBe(true)
+        expect(coinOD.parse("fffini")).toBe(true)
+        expect(coinOD.parse("mffinisbp")).toBe(true)
+      })
+      it("parses as tails", () => {
+        expect(coinOD.parse("nifi")).toBe(false)
+        expect(coinOD.parse("ffnifi")).toBe(false)
+        expect(coinOD.parse("mfnifisbp")).toBe(false)
+
+        expect(coinOD.parse("Oi")).toBe(false)
+        expect(coinOD.parse("Si")).toBe(false)
+        expect(coinOD.parse("Ni")).toBe(false)
+        expect(coinOD.parse("Oe")).toBe(false)
+        expect(coinOD.parse("Se")).toBe(false)
+        expect(coinOD.parse("Ne")).toBe(false)
+        expect(coinOD.parse("fOi")).toBe(false)
+        expect(coinOD.parse("fSi")).toBe(false)
+        expect(coinOD.parse("fNi")).toBe(false)
+        expect(coinOD.parse("fOe")).toBe(false)
+        expect(coinOD.parse("fSe")).toBe(false)
+        expect(coinOD.parse("fNe")).toBe(false)
+        expect(coinOD.parse("mOi")).toBe(false)
+        expect(coinOD.parse("mSi")).toBe(false)
+        expect(coinOD.parse("mNi")).toBe(false)
+        expect(coinOD.parse("mOe")).toBe(false)
+        expect(coinOD.parse("mSe")).toBe(false)
+        expect(coinOD.parse("mNe")).toBe(false)
+      })
+    })
+  })
+
+  describe("coinDiDe", () => {
+    describe("parse function", () => {
+      it("parses as heads", () => {
+        expect(coinDiDe.parse("De/Se")).toBe(true)
+        expect(coinDiDe.parse("Te/Se")).toBe(true)
+        expect(coinDiDe.parse("Fe/Se")).toBe(true)
+        expect(coinDiDe.parse("Se/De")).toBe(true)
+        expect(coinDiDe.parse("Se/Te")).toBe(true)
+        expect(coinDiDe.parse("Se/Fe")).toBe(true)
+
+        expect(coinDiDe.parse("fDe")).toBe(true)
+        expect(coinDiDe.parse("fTe")).toBe(true)
+        expect(coinDiDe.parse("fFe")).toBe(true)
+
+        expect(coinDiDe.parse("mDe")).toBe(true)
+        expect(coinDiDe.parse("mTe")).toBe(true)
+        expect(coinDiDe.parse("mFe")).toBe(true)
+      })
+      it("parses as tails", () => {
+        expect(coinDiDe.parse("Di/Se")).toBe(false)
+        expect(coinDiDe.parse("Ti/Se")).toBe(false)
+        expect(coinDiDe.parse("Fi/Se")).toBe(false)
+        expect(coinDiDe.parse("Se/Di")).toBe(false)
+        expect(coinDiDe.parse("Se/Ti")).toBe(false)
+        expect(coinDiDe.parse("Se/Fi")).toBe(false)
+
+        expect(coinDiDe.parse("fDi")).toBe(false)
+        expect(coinDiDe.parse("fTi")).toBe(false)
+        expect(coinDiDe.parse("fFi")).toBe(false)
+
+        expect(coinDiDe.parse("mDi")).toBe(false)
+        expect(coinDiDe.parse("mTi")).toBe(false)
+        expect(coinDiDe.parse("mFi")).toBe(false)
+      })
+    })
+  })
+
+  describe("coinFT", () => {
+    describe("parse function", () => {
+      it("parses as edge", () => {
+        expect(coinFT.parse("?F-De/Se")).toBe(null)
+        expect(coinFT.parse("F?-De/Se")).toBe(null)
+        expect(coinFT.parse("FF-De/Se")).toBe(null)
+        expect(coinFT.parse("De/Se")).toBe(null)
+        expect(coinFT.parse("Se/De")).toBe(null)
+        expect(coinFT.parse("fDe")).toBe(null)
+        expect(coinFT.parse("mDe")).toBe(null)
+        expect(coinFT.parse("Di/Se")).toBe(null)
+        expect(coinFT.parse("Se/Di")).toBe(null)
+        expect(coinFT.parse("fDi")).toBe(null)
+        expect(coinFT.parse("mDi")).toBe(null)
+      })
+      it("parses as heads", () => {
+        expect(coinFT.parse("Te/Se")).toBe(true)
+        expect(coinFT.parse("Se/Te")).toBe(true)
+        expect(coinFT.parse("fTe")).toBe(true)
+        expect(coinFT.parse("mTe")).toBe(true)
+        expect(coinFT.parse("Ti/Se")).toBe(true)
+        expect(coinFT.parse("Se/Ti")).toBe(true)
+        expect(coinFT.parse("fTi")).toBe(true)
+        expect(coinFT.parse("mTi")).toBe(true)
+      })
+      it("parses as tails", () => {
+        expect(coinFT.parse("Fe/Se")).toBe(false)
+        expect(coinFT.parse("Se/Fe")).toBe(false)
+        expect(coinFT.parse("fFe")).toBe(false)
+        expect(coinFT.parse("mFe")).toBe(false)
+        expect(coinFT.parse("Fi/Se")).toBe(false)
+        expect(coinFT.parse("Se/Fi")).toBe(false)
+        expect(coinFT.parse("fFi")).toBe(false)
+        expect(coinFT.parse("mFi")).toBe(false)
+      })
+    })
+  })
+
+  describe("coinNS", () => {
+    describe("parse function", () => {
+      it("parses as edge", () => {
+        expect(coinNS.parse("?F-Oe/Dx")).toBe(null)
+        expect(coinNS.parse("F?-Oe/Dx")).toBe(null)
+        expect(coinNS.parse("FF-Oe/Dx")).toBe(null)
+        expect(coinNS.parse("Oe/Dx")).toBe(null)
+        expect(coinNS.parse("Dx/Oe")).toBe(null)
+        expect(coinNS.parse("fOe")).toBe(null)
+        expect(coinNS.parse("mOe")).toBe(null)
+        expect(coinNS.parse("Oi/Dx")).toBe(null)
+        expect(coinNS.parse("Dx/Oi")).toBe(null)
+        expect(coinNS.parse("fOi")).toBe(null)
+        expect(coinNS.parse("mOi")).toBe(null)
+      })
+      it("parses as heads", () => {
+        expect(coinNS.parse("Se/Dx")).toBe(true)
+        expect(coinNS.parse("Dx/Se")).toBe(true)
+        expect(coinNS.parse("fSe")).toBe(true)
+        expect(coinNS.parse("mSe")).toBe(true)
+        expect(coinNS.parse("Si/Dx")).toBe(true)
+        expect(coinNS.parse("Dx/Si")).toBe(true)
+        expect(coinNS.parse("fSi")).toBe(true)
+        expect(coinNS.parse("mSi")).toBe(true)
+        expect(coinNS.parse("si")).toBe(true)
+      })
+      it("parses as tails", () => {
+        expect(coinNS.parse("Ne/Dx")).toBe(false)
+        expect(coinNS.parse("Dx/Ne")).toBe(false)
+        expect(coinNS.parse("fNe")).toBe(false)
+        expect(coinNS.parse("mNe")).toBe(false)
+        expect(coinNS.parse("Ni/Dx")).toBe(false)
+        expect(coinNS.parse("Dx/Ni")).toBe(false)
+        expect(coinNS.parse("fNi")).toBe(false)
+        expect(coinNS.parse("mNi")).toBe(false)
+        expect(coinNS.parse("ni")).toBe(false)
+      })
+    })
+  })
+  describe("coinOiOe", () => {
+    describe("parse function", () => {
+      it("parses as null", () => {
+        expect(coinOiOe.parse("Ox")).toBe(null)
+        expect(coinOiOe.parse("Sx")).toBe(null)
+        expect(coinOiOe.parse("Nx")).toBe(null)
+        expect(coinOiOe.parse("fOx")).toBe(null)
+        expect(coinOiOe.parse("fSx")).toBe(null)
+        expect(coinOiOe.parse("fNx")).toBe(null)
+        expect(coinOiOe.parse("mOx")).toBe(null)
+        expect(coinOiOe.parse("mSx")).toBe(null)
+        expect(coinOiOe.parse("mNx")).toBe(null)
+      })
+      it("parses as heads", () => {
+        expect(coinOiOe.parse("Oe")).toBe(true)
+        expect(coinOiOe.parse("Se")).toBe(true)
+        expect(coinOiOe.parse("Ne")).toBe(true)
+        expect(coinOiOe.parse("fOe")).toBe(true)
+        expect(coinOiOe.parse("fSe")).toBe(true)
+        expect(coinOiOe.parse("fNe")).toBe(true)
+        expect(coinOiOe.parse("mOe")).toBe(true)
+        expect(coinOiOe.parse("mSe")).toBe(true)
+        expect(coinOiOe.parse("mNe")).toBe(true)
+      })
+      it("parses as tails", () => {
+        expect(coinOiOe.parse("Oi")).toBe(false)
+        expect(coinOiOe.parse("Si")).toBe(false)
+        expect(coinOiOe.parse("Ni")).toBe(false)
+        expect(coinOiOe.parse("fOi")).toBe(false)
+        expect(coinOiOe.parse("fSi")).toBe(false)
+        expect(coinOiOe.parse("fNi")).toBe(false)
+        expect(coinOiOe.parse("mOi")).toBe(false)
+        expect(coinOiOe.parse("mSi")).toBe(false)
+        expect(coinOiOe.parse("mNi")).toBe(false)
+      })
+    })
+  })
+
+  describe("coinEnAct", () => {
+    it("exists", () => {
+      expect(coinEnAct).toBeDefined()
+    })
+    describe("parse function", () => {
+      it("parses heads", () => {
+        expect(coinEnAct.parse("PBC")).toBe(true)
+        expect(coinEnAct.parse("PCB")).toBe(true)
+        expect(coinEnAct.parse("PBCS")).toBe(true)
+        expect(coinEnAct.parse("PCBS")).toBe(true)
+        expect(coinEnAct.parse("fffesepbcs")).toBe(true)
+        expect(coinEnAct.parse("FF-Fe/Se-PB/C(S)")).toBe(true)
+        expect(coinEnAct.parse("FF-Fi/Si-PB/C(S)")).toBe(true)
+        expect(coinEnAct.parse("sdkfjhsdkfjhdskjh-PB/C(S)")).toBe(true)
+
+        expect(coinEnAct.parse("PB/C(S)")).toBe(true)
+      })
+      describe("Play first & Sleep last", () => {
+        it("parses as heads", () => {
+          expect(coinEnAct.parse("PBC")).toBe(true)
+          expect(coinEnAct.parse("PCB")).toBe(true)
+          expect(coinEnAct.parse("P??S")).toBe(true)
+          expect(coinEnAct.parse("P(S)")).toBe(true)
+          expect(coinEnAct.parse("P?(S)")).toBe(true)
+          expect(coinEnAct.parse("P??(S)")).toBe(true)
+          expect(coinEnAct.parse("PB(S)")).toBe(true)
+          expect(coinEnAct.parse("PC(S)")).toBe(true)
+          expect(coinEnAct.parse("P(S")).toBe(true)
+        })
+      })
+      describe("Play with activated Sleep", () => {
+        it("parses as tails", () => {
+          expect(coinEnAct.parse("PBS")).toBe(false)
+          expect(coinEnAct.parse("PCS")).toBe(false)
+          expect(coinEnAct.parse("P?S")).toBe(false)
+          expect(coinEnAct.parse("P?S?")).toBe(false)
+          expect(coinEnAct.parse("PC?B")).toBe(false)
+          expect(coinEnAct.parse("PB?C")).toBe(false)
+          expect(coinEnAct.parse("P/S")).toBe(false)
+          expect(coinEnAct.parse("P/SC")).toBe(false)
+          expect(coinEnAct.parse("P/SB")).toBe(false)
+        })
+      })
+
+      describe("Sleep first & Play last", () => {
+        it("parses as tails", () => {
+          expect(coinEnAct.parse("SBC")).toBe(false)
+          expect(coinEnAct.parse("SCB")).toBe(false)
+        })
+      })
+      describe("Sleep with activated Play", () => {
+        it("parses as heads", () => {
+          expect(coinEnAct.parse("SBP")).toBe(true)
+          expect(coinEnAct.parse("SCP")).toBe(true)
+        })
+      })
+
+      describe("Blast Play", () => {
+        it("parses as heads", () => {
+          expect(coinEnAct.parse("BP")).toBe(true)
+          expect(coinEnAct.parse("BPS")).toBe(true)
+          expect(coinEnAct.parse("BPC")).toBe(true)
+        })
+      })
+      describe("Blast Sleep", () => {
+        it("parses as tails", () => {
+          expect(coinEnAct.parse("BS")).toBe(false)
+          expect(coinEnAct.parse("BSC")).toBe(false)
+          expect(coinEnAct.parse("BSP")).toBe(false)
+        })
+      })
+
+      describe("Consume Play", () => {
+        it("parses as heads", () => {
+          expect(coinEnAct.parse("CP")).toBe(true)
+          expect(coinEnAct.parse("CPB")).toBe(true)
+          expect(coinEnAct.parse("CPS")).toBe(true)
+        })
+      })
+      describe("Consume Sleep", () => {
+        it("parses as tails", () => {
+          expect(coinEnAct.parse("CS")).toBe(false)
+          expect(coinEnAct.parse("CSB")).toBe(false)
+          expect(coinEnAct.parse("CSP")).toBe(false)
+        })
+      })
+    })
+  })
+
+  describe("coinInAct", () => {
+    it("exists", () => {
+      expect(coinInAct).toBeDefined()
+    })
+    describe("parse function", () => {
+      it("parses heads", () => {
+        expect(coinInAct.parse("BPS")).toBe(true)
+        expect(coinInAct.parse("BSP")).toBe(true)
+        expect(coinInAct.parse("BPSC")).toBe(true)
+        expect(coinInAct.parse("BSPC")).toBe(true)
+        expect(coinInAct.parse("fffesepbcs")).toBe(true)
+        expect(coinInAct.parse("FF-Fe/Se-BP/S(C)")).toBe(true)
+        expect(coinInAct.parse("FF-Fi/Si-BP/S(C)")).toBe(true)
+        expect(coinInAct.parse("sdkfjhsdkfjhdskjh-BP/S(C)")).toBe(true)
+      })
+      describe("Blast first & Consume last", () => {
+        it("parses as heads", () => {
+          expect(coinInAct.parse("BPS")).toBe(true)
+          expect(coinInAct.parse("BSP")).toBe(true)
+          expect(coinInAct.parse("B??C")).toBe(true)
+          expect(coinInAct.parse("B(C)")).toBe(true)
+          expect(coinInAct.parse("B(C")).toBe(true)
+        })
+      })
+      describe("Blast with activated Consume", () => {
+        it("parses as tails", () => {
+          expect(coinInAct.parse("BPC")).toBe(false)
+          expect(coinInAct.parse("BSC")).toBe(false)
+          expect(coinInAct.parse("B?C")).toBe(false)
+          expect(coinInAct.parse("B?C?")).toBe(false)
+          expect(coinInAct.parse("BS?P")).toBe(false)
+          expect(coinInAct.parse("BP?S")).toBe(false)
+          expect(coinInAct.parse("B/C")).toBe(false)
+        })
+      })
+
+      describe("Consume first & Blast last", () => {
+        it("parses as tails", () => {
+          expect(coinInAct.parse("CPS")).toBe(false)
+          expect(coinInAct.parse("CSP")).toBe(false)
+        })
+      })
+      describe("Consume with activated Blast", () => {
+        it("parses as heads", () => {
+          expect(coinInAct.parse("CPB")).toBe(true)
+          expect(coinInAct.parse("CSB")).toBe(true)
+        })
+      })
+
+      describe("Plast Blast", () => {
+        it("parses as heads", () => {
+          expect(coinInAct.parse("PB")).toBe(true)
+          expect(coinInAct.parse("PBC")).toBe(true)
+          expect(coinInAct.parse("PBS")).toBe(true)
+        })
+      })
+      describe("Plast Consume", () => {
+        it("parses as tails", () => {
+          expect(coinInAct.parse("PC")).toBe(false)
+          expect(coinInAct.parse("PCS")).toBe(false)
+          expect(coinInAct.parse("PCB")).toBe(false)
+        })
+      })
+
+      describe("Sleep Blast", () => {
+        it("parses as heads", () => {
+          expect(coinInAct.parse("SB")).toBe(true)
+          expect(coinInAct.parse("SBP")).toBe(true)
+          expect(coinInAct.parse("SBC")).toBe(true)
+        })
+      })
+      describe("Sleep Consume", () => {
+        it("parses as tails", () => {
+          expect(coinInAct.parse("SC")).toBe(false)
+          expect(coinInAct.parse("SCP")).toBe(false)
+          expect(coinInAct.parse("SCB")).toBe(false)
+        })
+      })
+    })
+  })
+
+  describe("coinDefm", () => {
+    it("exists", () => {
+      expect(coinDefm).toBeDefined()
+    })
+    describe("parse function", () => {
+      it("is null", () => {
+        expect(coinDefm.parse("")).toBeNull()
+      })
+      it("is heads", () => {
+        expect(coinDefm.parse("FM-Fi/Si")).toBe(true)
+        expect(coinDefm.parse("MM-Fi/Si")).toBe(true)
+
+        expect(coinDefm.parse("mDe")).toBe(true)
+        expect(coinDefm.parse("mFe")).toBe(true)
+        expect(coinDefm.parse("mTe")).toBe(true)
+
+        expect(coinDefm.parse("fDi")).toBe(true)
+        expect(coinDefm.parse("fFi")).toBe(true)
+        expect(coinDefm.parse("fTi")).toBe(true)
+      })
+      it("is tails", () => {
+        expect(coinDefm.parse("MF-Fe/Se")).toBe(false)
+        expect(coinDefm.parse("FF-Fe/Se")).toBe(false)
+
+        expect(coinDefm.parse("mDi")).toBe(false)
+        expect(coinDefm.parse("mFi")).toBe(false)
+        expect(coinDefm.parse("mTi")).toBe(false)
+
+        expect(coinDefm.parse("fDe")).toBe(false)
+        expect(coinDefm.parse("fFe")).toBe(false)
+        expect(coinDefm.parse("fTe")).toBe(false)
+      })
+    })
+  })
+
+  describe("coinSfm", () => {
+    it("exists", () => {
+      expect(coinSfm).toBeDefined()
+    })
+    describe("parse function", () => {
+      it("is null", () => {
+        expect(coinSfm.parse("mO")).toBeNull()
+        expect(coinSfm.parse("mOe")).toBeNull()
+        expect(coinSfm.parse("mOi")).toBeNull()
+        expect(coinSfm.parse("mFi")).toBeNull()
+        expect(coinSfm.parse("mFe")).toBeNull()
+        expect(coinSfm.parse("mSB")).toBeNull()
+        expect(coinSfm.parse("fFi")).toBeNull()
+        expect(coinSfm.parse("fFe")).toBeNull()
+        expect(coinSfm.parse("fSB")).toBeNull()
+      })
+      it("is heads", () => {
+        expect(coinSfm.parse("mS")).toBe(true)
+        expect(coinSfm.parse("mSe")).toBe(true)
+        expect(coinSfm.parse("mSi")).toBe(true)
+
+        expect(coinSfm.parse("MM-Fi/Si")).toBe(true)
+        expect(coinSfm.parse("mFi/mSi")).toBe(true)
+        expect(coinSfm.parse("mSi/mFi")).toBe(true)
+
+        expect(coinSfm.parse("fN")).toBe(true)
+        expect(coinSfm.parse("fNe")).toBe(true)
+        expect(coinSfm.parse("fNi")).toBe(true)
+      })
+      it("is tails", () => {
+        expect(coinSfm.parse("mN")).toBe(false)
+        expect(coinSfm.parse("mNe")).toBe(false)
+        expect(coinSfm.parse("mNi")).toBe(false)
+
+        expect(coinSfm.parse("fS")).toBe(false)
+        expect(coinSfm.parse("fSe")).toBe(false)
+        expect(coinSfm.parse("fSi")).toBe(false)
+      })
+    })
+  })
+})
diff --git a/components/opt-toy/Coin.tsx b/components/opt-toy/Coin.tsx
index deda9ab..4910ab0 100644
--- a/components/opt-toy/Coin.tsx
+++ b/components/opt-toy/Coin.tsx
@@ -1,4 +1,6 @@
-export type BoolMaybe = 0 | 1 | true | false | undefined | null;
+import { OPT512 } from "./OPT512"
+
+export type BoolMaybe = 0 | 1 | true | false | undefined | null
 
 type OPT512Type = [
   boolean,
@@ -9,8 +11,8 @@ type OPT512Type = [
   boolean,
   boolean,
   boolean,
-  boolean
-];
+  boolean,
+]
 
 export type OPT512Maybe = [
   BoolMaybe,
@@ -21,8 +23,8 @@ export type OPT512Maybe = [
   BoolMaybe,
   BoolMaybe,
   BoolMaybe,
-  BoolMaybe
-];
+  BoolMaybe,
+]
 
 export const BLANK_TYPE: OPT512Maybe = [
   null,
@@ -34,165 +36,287 @@ export const BLANK_TYPE: OPT512Maybe = [
   null,
   null,
   null,
-];
-
-class Coin {
-  testHeads: RegExp;
-  testTails: RegExp;
-  defaultCoinParseMethod(type: string) {
-    const isHeads = this.testHeads.test(type);
-    const isTails = this.testTails.test(type);
-    return isHeads === true ? true : isTails === true ? false : null;
-  }
+]
+
+type RegExpish = {
+  test: (type: string) => boolean
+}
+
+const ParsableCoinDefault = {
+  testHeads: /./ as RegExpish,
+  testTails: /./ as RegExpish,
+  parse(type: string) {
+    const isHeads = this.testHeads.test(type)
+    const isTails = this.testTails.test(type)
+    if (isHeads && isTails) return null
+    return isHeads ? true : isTails ? false : null
+  },
+}
+
+type ParsableCoinType = typeof ParsableCoinDefault
+
+export interface Coin extends ParsableCoinType {
+  index: number
+  short: string
+  title: string
+  description: string
+  heads: string
+  tails: string
+  headsDetail: string
+  tailsDetail: string
+  clean?: (type: string) => string
 }
 
+export const extractAnimalsFromOP512 = (type: string) =>
+  String(type)
+    .trim()
+    .toUpperCase()
+    .replace(/[^a-z?(/]/gi, "")
+    .replace(/.*?([PBCS?(/]+)$/g, "$1")
+    .replace(/^([PBCS])[/]([PBCS]+)$/g, "$1?$2")
+    .replace(/^([PBCS])[(]([PBCS])$/g, "$1??$2")
+    .replace(/^([PBCS])([PBCS?])[(]([PBCS])$/g, "$1$2?$3")
+    .replace(/[(/]/g, "")
+
 export const NamedCOINS = {
   coinSfm: {
     index: -1,
     short: "coinSfm",
-    description: "Sensory Modality",
-    heads: "S masculine",
-    tails: "feminine S",
-    clean: type =>
-      type
-        .replace(/\?\?-/, "")
-        .replace(
-          /([fm][fm])[-]*([DTFOSN])?/i,
-          (_, FM, S1S2) =>
-            `${FM.toUpperCase()}${S1S2 == null ? "" : `-${S1S2}`}`
-        ),
-    testHeads: /^M[FM]|mS|fN/,
-    testTails: /^F[FM]|fS|mN/,
-    parse: Coin.prototype.defaultCoinParseMethod,
+    title: "Masculine",
+    description: "Info",
+    heads: "mS",
+    tails: "mN",
+    headsDetail: "masculine Sensory and feminine iNtuition",
+    tailsDetail: "masculine iNtuition and feminine Sensory",
+    ...ParsableCoinDefault,
+    // prettier-ignore
+    testHeads: { test: (type: string) => 
+      /^M[FM?](?![ie])/i.test(type) ||
+      /(^|[^fm])fN/i.test(type) ||
+      /(^|[^fm])mS([ie]|\b)/i.test(type) ||
+      false
+    },
+    // prettier-ignore
+    testTails: { test: (type: string) => 
+      /^F[FM?](?![ie])/i.test(type) ||
+      /(^|[^fm])mN/i.test(type) ||
+      /(^|[^fm])fS([ie]|\b)/i.test(type) ||
+      false
+    },
   },
   coinDefm: {
     index: -1,
     short: "coinDefm",
-    description: "Extroverted Decider Modality",
-    heads: "De masculine",
-    tails: "feminine De",
-    clean: type =>
-      type.replace(
-        /([fm])([DTFOSN][xei])/i,
-        (_, fm, De) => `${fm.toLowerCase()}${De}`
-      ),
-    testHeads: /^[FM]M|m[DTF]e|f[DTF]i/,
-    testTails: /^[FM]F|f[DTF]e|m[DTF]i/,
-    parse: Coin.prototype.defaultCoinParseMethod,
+    title: "Masculine",
+    description: "Energy",
+    heads: "mDe",
+    tails: "mDi",
+    headsDetail:
+      "masculine Extroverted Decider function (either mFe or mTe) and feminine Di (either fFi or fTi)",
+    tailsDetail:
+      "masculine Introverted Decider function (either mFi or mTi) and feminine De (either fFe or fTe)",
+    ...ParsableCoinDefault,
+    // prettier-ignore
+    testHeads: { test: (type: string) => 
+      /^[FM?]M/i.test(type) ||
+      /(^|[^fm])f[DTF]i/i.test(type) ||
+      /(^|[^fm])m[DTF]e/i.test(type) ||
+      false
+    },
+    // prettier-ignore
+    testTails: { test: (type: string) => 
+      /^[FM?]F(?![ie])/i.test(type) ||
+      /(^|[^fm])m[DTF]i/i.test(type) ||
+      /(^|[^fm])f[DTF]e/i.test(type) ||
+      false
+    },
   },
   coinOD: {
     index: -1,
     short: "coinOD",
-    description: "OD",
-    heads: "D+OO Decider",
-    tails: "Observer O+DD",
-    clean: type =>
+    title: "",
+    description: "Polarity",
+    heads: "Energy",
+    tails: "Info",
+    headsDetail: `Polar Energy — aka "Single Decider" and "Double Observer"`,
+    tailsDetail: `Polar Info — aka "Single Observer" and "Double Decider"`,
+    clean: (type) =>
       type
+        .replace(/[?()/-]/g, "")
+        .replace(/[fm]?([DTFOSN][xei])[fm]?([DTFOSN][ei])/g, "$1/$2")
         .replace(
-          /([fm]?)([DTF]|[OSN])([xei])/gi,
-          (_, fm0 = "", F1 = "", f2 = "") =>
-            `${fm0.toLowerCase()}${F1.toUpperCase()}${f2.toLowerCase()}`
+          /^.*([ODFTNS])([xie])([ODFTNS])([xie]).*$/gi,
+          (_, f1od, f1xie, f2od, f2xie) =>
+            `${f1od.toUpperCase()}${f1xie.toLowerCase()}/${f2od.toUpperCase()}${f2xie.toLowerCase()}`,
         )
-        .replace(/([DTFOSN][xei])([DTFOSN][ei])/g, "$1/$2"),
-    testHeads: /(^|-)[mf]?[DTF][xei]|[mf]?[DTF][xei]\//i,
-    testTails: /(^|-)[mf]?[OSN][xei]|[mf]?[OSN][xei]\//i,
-    parse: Coin.prototype.defaultCoinParseMethod,
+        .replace(/^(?![DTF][xie]\/[OSN][xie]|[OSN][xie]\/[DTF][xie]).*$/, ""),
+    ...ParsableCoinDefault,
+    testHeads: /^([mf?][mf?]-?)?[mf]?[DTF][xei]/i,
+    testTails: /^([mf?][mf?]-?)?[mf]?[OSN][xei]/i,
   },
   coinDiDe: {
     index: -1,
     short: "coinDiDe",
-    description: "Savior Decider Focus",
-    heads: "De Tribe",
-    tails: "Identity Di",
+    title: "Direction",
+    description: "Energy",
+    heads: "De",
+    headsDetail: "Energy directed Extrovertedly to Connections",
+    tails: "Di",
+    tailsDetail: "Energy directed Introvertedly to Significance",
+    ...ParsableCoinDefault,
     testHeads: /[mf]?[DTF]e/i,
     testTails: /[mf]?[DTF]i/i,
-    parse: Coin.prototype.defaultCoinParseMethod,
   },
   coinOiOe: {
     index: -1,
     short: "coinOiOe",
-    description: "Savior Observer Focus",
-    heads: "Oe Gather",
-    tails: "Organize Oi",
+    title: "Direction",
+    description: "Info",
+    heads: "Oe",
+    headsDetail: "Info directed Extrovertedly to Gather new",
+    tails: "Oi",
+    tailsDetail: "Info directed Introvertedly to Organize old",
+    ...ParsableCoinDefault,
     testHeads: /[mf]?[OSN]e/i,
     testTails: /[mf]?[OSN]i/i,
-    parse: Coin.prototype.defaultCoinParseMethod,
   },
+  /** @deprecated Use coin coinEnAct instead */
   coinA2ie: {
     index: -1,
     short: "coinA2ie",
+    title: "",
     description: "S2 Animal Focus",
-    heads: "A2 Extroverted",
-    tails: "Introverted A2",
-    clean: type =>
-      type
-        .replace("-??/?(?)", "")
-        .replace("?/?(?)", "")
-        .replace("/?(?)", "")
-        .replace(/[(][PBCS]$/, "")
-        .replace(
-          /([DTFOSN][xie]\/[DTFOSN][xie])-?([PBCS]{1,2})[/]?([PBCS]?)[(]?([PBCS]?)[)]?/i,
-          (_, S1S2, A1A2, A3, A4) =>
-            `${S1S2}-${A1A2.toUpperCase()}${!A3 ? "" : `/${A3.toUpperCase()}`}${
-              !A4 ? "" : `(${A4.toUpperCase()})`
-            }`
-        ),
-    testHeads: /-([SP]B|[CB]P)/i,
-    testTails: /-([SP]C|[CB]S)/i,
-    parse: Coin.prototype.defaultCoinParseMethod,
+    heads: "A2 E",
+    tails: "I A2",
+    ...ParsableCoinDefault,
+    testHeads: /(-|[xie])([SP]B|[CB]P)/i,
+    testTails: /(-|[xie])([SP]C|[CB]S)/i,
   },
+  /** @deprecated Use coin coinInAct instead */
   coinA3ie: {
     index: -1,
     short: "coinA3ie",
+    title: "",
     description: "Activated Demon Animal Focus",
-    heads: "A3 Extroverted",
-    tails: "Introverted A3",
+    heads: "A3 E",
+    tails: "I A3",
+    ...ParsableCoinDefault,
     testHeads: /[PB]{2}\/C|[CS]{2}\/P|[CP]{2}\/B|[SB]{2}\/P/,
     testTails: /[PB]{2}\/S|[CS]{2}\/B|[CP]{2}\/S|[SB]{2}\/C/,
-    parse: Coin.prototype.defaultCoinParseMethod,
   },
-  // { // Info / Energy isn't a core coin. It's more of an insight
-  //   short: "coinA3ie",
-  //   index: 4,
-  //   description: "Animal Focus",
-  //   heads: "Info",
-  //   tails: "Energy",
-  //   testHeads: /SC\/B|SB\/C|CS\/B|CP\/B|BS\/C|BP\/C|PC\/B|PB\/C/,
-  //   testTails: /SC\/P|SB\/P|CS\/P|CP\/S|BS\/P|BP\/S|PC\/S|PB\/S/,
-  //   parse: defaultCoinParseMethod
-  // },
+  coinEnAct: {
+    index: -1,
+    short: "coinEnAct",
+    title: "Activation",
+    description: "Energy",
+    heads: "EE",
+    tails: "II",
+    headsDetail: `Activated Double Extroverted Energy (Play)`,
+    tailsDetail: `Activated Double Introverted Energy (Sleep)`,
+    ...ParsableCoinDefault,
+    testHeads: {
+      test: (type: string) => {
+        const animals = extractAnimalsFromOP512(type)
+        return (
+          /^(PBC|PCB|P[CB?][CB?]S)/.test(animals) || // Play first & Sleep last
+          /^(SBP|SCP|S[?]P|SC[?]B|SB[?]C)/.test(animals) || // Sleep with activated Play
+          /^(BP)/.test(animals) || // Blast Play
+          /^(CP)/.test(animals) || // Consume Play
+          false
+        )
+      },
+    } as RegExpish,
+    testTails: {
+      test: (type: string) => {
+        const animals = extractAnimalsFromOP512(type)
+        return (
+          /^(SBC|SCB|S[CB?][CB?]P)/.test(animals) || // Sleep first & Play last
+          /^(PBS|PCS|P[?]S|PC[?]B|PB[?]C)/.test(animals) || // Play with activated Sleep
+          /^(BS)/.test(animals) || // Blast Sleep
+          /^(CS)/.test(animals) || // Consume Sleep
+          false
+        )
+      },
+    } as RegExpish,
+  },
+  coinInAct: {
+    index: -1,
+    short: "coinInAct",
+    title: "Activation",
+    description: "Info",
+    heads: "Oi De",
+    tails: "Oe Di",
+    headsDetail: `Activated Extroverted Info (Blast)`,
+    tailsDetail: `Activated Introverted Info (Consume)`,
+    ...ParsableCoinDefault,
+    testHeads: {
+      test: (type: string) => {
+        const animals = extractAnimalsFromOP512(type)
+        return (
+          /^(BPS|BSP|B[SP?][SP?]C)/.test(animals) || // Blast first & Consume last
+          /^(CPB|CSB|C[?]B|CP[?]S|CS[?]P)/.test(animals) || // Consume with activated Blast
+          /^(PB)/.test(animals) || // Plast Blast
+          /^(SB)/.test(animals) || // Sonsume Blast
+          false
+        )
+      },
+    } as RegExpish,
+    testTails: {
+      test: (type: string) => {
+        const animals = extractAnimalsFromOP512(type)
+        return (
+          /^(CPS|CSP|C[SP?][SP?]B)/.test(animals) || // Consume first & Blast last
+          /^(BSC|BPC|B[?]C|BS[?]P|BP[?]S)/.test(animals) || // Blast with activated Consume
+          /^(PC)/.test(animals) || // Plast Consume
+          /^(SC)/.test(animals) || // Sonsume Consume
+          false
+        )
+      },
+    } as RegExpish,
+  },
   coinFT: {
     index: -1,
     short: "coinFT",
-    description: "Savior Decider Letter",
-    heads: "Thinking",
-    tails: "Feeling",
-    testHeads: /T[xei]/,
-    testTails: /F[xei]/,
-    parse: Coin.prototype.defaultCoinParseMethod,
+    title: "Style",
+    description: "Energy",
+    heads: "T > F",
+    tails: "F > T",
+    headsDetail: ``,
+    tailsDetail: ``,
+    ...ParsableCoinDefault,
+    testHeads: /[mf]?T[xei]/i,
+    testTails: /[mf]?F[xei]/i,
   },
   coinNS: {
     index: -1,
     short: "coinNS",
-    description: "Savior Observer Letter",
-    heads: "Sensing",
-    tails: "iNtuition",
-    testHeads: /S[xei]/,
-    testTails: /N[xei]/,
-    parse: Coin.prototype.defaultCoinParseMethod,
+    title: "Style",
+    description: "Info",
+    heads: "S > N",
+    tails: "N > S",
+    headsDetail: ``,
+    tailsDetail: ``,
+    ...ParsableCoinDefault,
+    testHeads: /[mf]?S[xei]/i,
+    testTails: /[mf]?N[xei]/i,
   },
-};
-let COIN_INDEX = -1;
-export const COINS = [];
-COINS[(NamedCOINS.coinOD.index = ++COIN_INDEX)] = NamedCOINS.coinOD;
-COINS[(NamedCOINS.coinDiDe.index = ++COIN_INDEX)] = NamedCOINS.coinDiDe;
-COINS[(NamedCOINS.coinOiOe.index = ++COIN_INDEX)] = NamedCOINS.coinOiOe;
-COINS[(NamedCOINS.coinFT.index = ++COIN_INDEX)] = NamedCOINS.coinFT;
-COINS[(NamedCOINS.coinNS.index = ++COIN_INDEX)] = NamedCOINS.coinNS;
-COINS[(NamedCOINS.coinA2ie.index = ++COIN_INDEX)] = NamedCOINS.coinA2ie;
-COINS[(NamedCOINS.coinA3ie.index = ++COIN_INDEX)] = NamedCOINS.coinA3ie;
-COINS[(NamedCOINS.coinSfm.index = ++COIN_INDEX)] = NamedCOINS.coinSfm;
-COINS[(NamedCOINS.coinDefm.index = ++COIN_INDEX)] = NamedCOINS.coinDefm;
+}
+let COIN_INDEX = -1
+export const COINS: Coin[] = []
+COINS[(NamedCOINS.coinOD.index = ++COIN_INDEX)] = NamedCOINS.coinOD
+
+COINS[(NamedCOINS.coinOiOe.index = ++COIN_INDEX)] = NamedCOINS.coinOiOe
+COINS[(NamedCOINS.coinDiDe.index = ++COIN_INDEX)] = NamedCOINS.coinDiDe
+
+COINS[(NamedCOINS.coinNS.index = ++COIN_INDEX)] = NamedCOINS.coinNS
+COINS[(NamedCOINS.coinFT.index = ++COIN_INDEX)] = NamedCOINS.coinFT
+
+COINS[(NamedCOINS.coinInAct.index = ++COIN_INDEX)] = NamedCOINS.coinInAct
+COINS[(NamedCOINS.coinEnAct.index = ++COIN_INDEX)] = NamedCOINS.coinEnAct
+
+COINS[(NamedCOINS.coinSfm.index = ++COIN_INDEX)] = NamedCOINS.coinSfm
+COINS[(NamedCOINS.coinDefm.index = ++COIN_INDEX)] = NamedCOINS.coinDefm
+
 /*
 Introvert / Femmine:    Observers, Sleep, Consume, Feeling, Intuition
 Extrovert / Masculine:  Deciders, Play, Blast, Thinking, Sensing
@@ -202,7 +326,7 @@ Extrovert / Masculine:  Deciders, Play, Blast, Thinking, Sensing
 
 const numberToType = (number: number): OPT512Type => {
   if (number < 0 || number > 511)
-    throw new RangeError("expected a number between 0 and 511");
+    throw new RangeError("expected a number between 0 and 511")
   const [c0, c1, c2, c3, c4, c5, c6, c7, c8] = (
     Math.min(Math.max(number, 0), 511) + 0b1000000000
   )
@@ -210,27 +334,23 @@ const numberToType = (number: number): OPT512Type => {
     .split("")
     .slice(1)
     .map(Number)
-    .map(Boolean);
-  return [c0, c1, c2, c3, c4, c5, c6, c7, c8];
-};
+    .map(Boolean)
+  return [c0, c1, c2, c3, c4, c5, c6, c7, c8]
+}
 
 const ALL_POSSIBLE_TYPES: OPT512Type[] = Array(512)
   .join(";")
   .split(";")
-  .map((_, index) => numberToType(index));
+  .map((_, index) => numberToType(index))
 
-export const isBool = (value: BoolMaybe) => value === true || value === false;
+export const isBool = (value: BoolMaybe) => value === true || value === false
 
-const cleanerCoins = COINS.filter(COIN => typeof COIN.clean === "function");
-export const cleanCoinText = (value:string = ''):string =>
-  cleanerCoins.reduce((vvv, { clean }) => clean(vvv), value);
+export const cleanCoinText = (text: string = ""): string =>
+  OPT512.fromCoinText(text).OPSCode
 
-const parserCoins = COINS.filter(COIN => typeof COIN.parse === "function");
+const parserCoins = COINS.filter((COIN) => typeof COIN.parse === "function")
 export const parseCoinText = (type: string): OPT512Maybe =>
-  parserCoins.reduce(
-    (opTypeArray, COIN) => {
-      opTypeArray[COIN.index] = COIN.parse(type);
-      return opTypeArray;
-    },
-    BLANK_TYPE.slice(0) as OPT512Maybe
-  );
+  parserCoins.reduce((opTypeArray, COIN) => {
+    opTypeArray[COIN.index] = COIN.parse(type)
+    return opTypeArray
+  }, BLANK_TYPE.slice(0) as OPT512Maybe)
diff --git a/components/opt-toy/CoinSideVirtual.tsx b/components/opt-toy/CoinSideVirtual.tsx
index ac0c68b..d7e6339 100644
--- a/components/opt-toy/CoinSideVirtual.tsx
+++ b/components/opt-toy/CoinSideVirtual.tsx
@@ -1,63 +1,90 @@
-import * as React from "react";
-import { BoolMaybe, isBool } from "./Coin";
+import * as React from "react"
+import { BoolMaybe, isBool } from "./Coin"
 export function CoinSideVirtual({
-  coin: { heads, tails },
+  coin: { description, heads, tails, headsDetail = "", tailsDetail = "" },
   side,
   onFlip,
 }: {
   coin: {
-    heads: string;
-    tails: string;
-  };
-  side: BoolMaybe;
-  onFlip: (side: BoolMaybe) => void;
+    description: string
+    heads: string
+    tails: string
+    headsDetail?: string
+    tailsDetail?: string
+  }
+  side: BoolMaybe
+  onFlip: (side: BoolMaybe) => void
 }) {
   return (
     <tr>
       <td style={{ textAlign: "right" }}>
-        <label>
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            ...(isBool(side) && !side && { background: "#eee", color: "#000" }),
+            borderRadius: 999,
+            padding: "0 2px",
+          }}
+          title={tailsDetail}
+        >
           <span
-            style={
-              (isBool(side) &&
+            style={{
+              flex: 1,
+              ...((isBool(side) &&
                 (!side ? { fontWeight: "bold" } : { opacity: 0.5 })) ||
-              null
-            }
+                null),
+            }}
           >
             {tails}
           </span>
           <input
             type="radio"
             checked={isBool(side) && !side}
-            onChange={e => onFlip(!e.currentTarget.checked)}
+            onChange={(e) => onFlip(false)}
+            onClick={(e) => onFlip(false)}
+            style={{ margin: "1px 2px" }}
           />
         </label>
       </td>
-      <td>
-        <input
-          type="radio"
-          checked={!isBool(side)}
-          style={{ opacity: isBool(side) ? 1 : 0.1 }}
-          onChange={e => e.currentTarget.checked && onFlip(null)}
-        />
+      <td
+        style={{
+          textAlign: "center",
+          fontSize: "75%",
+        }}
+      >
+        <div onClick={() => onFlip(null)}>{description}</div>
       </td>
       <td>
-        <label>
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            ...(!!side && { background: "#eee", color: "#000" }),
+            borderRadius: 999,
+            padding: "0 2px",
+          }}
+          title={headsDetail}
+        >
           <input
             type="radio"
             checked={isBool(side) && !!side}
-            onChange={e => onFlip(e.currentTarget.checked)}
+            onChange={(e) => onFlip(true)}
+            onClick={(e) => onFlip(true)}
+            style={{ margin: "1px 2px" }}
           />
           <span
-            style={
-              (isBool(side) &&
+            style={{
+              flex: 1,
+              ...((isBool(side) &&
                 (side ? { fontWeight: "bold" } : { opacity: 0.5 })) ||
-              null
-            }
+                null),
+            }}
           >
             {heads}
           </span>
         </label>
       </td>
     </tr>
-  );
+  )
 }
diff --git a/components/opt-toy/OPActivationTable.tsx b/components/opt-toy/OPActivationTable.tsx
index bda74dc..c25fcc7 100644
--- a/components/opt-toy/OPActivationTable.tsx
+++ b/components/opt-toy/OPActivationTable.tsx
@@ -64,16 +64,10 @@ export default function OPActivationTable({ op512 }: { op512: OPT512 }) {
                   </tr>
                 </thead>
                 <tbody>
-                  {op512.functions.map(
-                    ({
-                      code,
-                      activation1or2,
-                      activation,
-                      saviorCode,
-                      opFn,
-                    }) => (
+                  {op512.functionStack.map(
+                    ({ code, activation1or2, saviorCode, opFn }) => (
                       <tr key={code}>
-                        <td title={activation + 1 + ''}>{activation1or2}</td>
+                        <td>{activation1or2}</td>
                         {showSex && (
                           <td
                             title={{ f: "feminine", m: "masculine" }[opFn?.sex]}
@@ -101,7 +95,7 @@ export default function OPActivationTable({ op512 }: { op512: OPT512 }) {
                   </tr>
                 </thead>
                 <tbody>
-                  {op512.animalStack.map(({ code, index }) => (
+                  {op512.animals.map(({ code, index }) => (
                     <tr key={code}>
                       <td
                         title={
diff --git a/components/opt-toy/OPCodeInput.tsx b/components/opt-toy/OPCodeInput.tsx
index 589396d..a79d7a3 100644
--- a/components/opt-toy/OPCodeInput.tsx
+++ b/components/opt-toy/OPCodeInput.tsx
@@ -1,48 +1,41 @@
 import * as React from "react"
 import { OPT512 } from "./OPT512"
-import { parseCoinText, cleanCoinText, OPT512Maybe } from "./Coin"
+import { useEffect } from "react"
 
 export function OPCodeInput({
-  coins,
-  onParsed,
+  opType,
+  onChange,
   style = null,
   ...props
-}: React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> & {
-  coins: OPT512Maybe
-  onParsed: (type: OPT512Maybe) => void
+}: Omit<JSX.IntrinsicElements["input"], "onChange"> & {
+  opType: OPT512
+  onChange: (type: OPT512) => void
   style?: React.CSSProperties
 }) {
-  const opType = new OPT512(coins)
-  let inputTypeText = opType.OP512
-  if (opType.isEmpty) inputTypeText = ""
-  let [value, setValue] = React.useState(inputTypeText)
-  let [isEditing, setIsEditing] = React.useState(false)
-  // if (!isEditing) value = inputTypeText
-  // if (type == null) type = value
-  // else value = inputTypeText
-  function handleChange(event: { currentTarget: { value: string } }) {
-    const newValue = cleanCoinText(event.currentTarget.value)
-    setValue(newValue)
-    onParsed(parseCoinText(newValue))
+  const defaultValue = opType.OPSCode
+  const [isEditing, setIsEditing] = React.useState(false)
+  let [inputValue, setInputValue] = React.useState("")
+
+  useEffect(() => {
+    const nextType = OPT512.fromCoinText(inputValue)
+    if (nextType.nullCount >= 7) return
+    console.log(nextType + "")
+    onChange(nextType)
+  }, [inputValue])
+
+  if (!isEditing) {
+    inputValue = defaultValue
   }
   return (
     <input
       {...props}
       spellCheck={false}
       style={{ opacity: isEditing ? 1 : 0.8, ...style }}
-      placeholder={inputTypeText}
-      onChange={handleChange}
-      value={isEditing ? value : inputTypeText}
-      onFocus={e => {
-        setValue(cleanCoinText(inputTypeText))
-        setIsEditing(true)
-      }}
-      onBlur={e => {
-        setIsEditing(false)
-      }}
+      placeholder={defaultValue}
+      value={isEditing ? inputValue : defaultValue}
+      onChange={(event) => setInputValue(event.currentTarget.value)}
+      onFocus={(e) => setIsEditing(true)}
+      onBlur={(e) => setIsEditing(false)}
     />
   )
 }
diff --git a/components/opt-toy/OPT512.test.ts b/components/opt-toy/OPT512.test.ts
new file mode 100644
index 0000000..85211d2
--- /dev/null
+++ b/components/opt-toy/OPT512.test.ts
@@ -0,0 +1,275 @@
+import { describe, it, expect, test } from "@jest/globals"
+import { extractAnimalsFromOP512 } from "./Coin"
+import { ActivationsToAnimalsString, FocusCodes, maybeBoolToIndex, NamedCOINS, OPT512, parseCoinText } from "./OPT512"
+const { coinOD, coinDiDe, coinOiOe, coinFT, coinNS, coinEnAct, coinInAct, coinSfm, coinDefm } = NamedCOINS
+
+const uniq = (item: unknown, index: number, items: unknown[]): boolean => items.indexOf(item) === index
+// import { OPT512 } from "./OPT512"
+// import { sortBy, sorterize } from "./sortBy"
+
+// const assert = (test: () => boolean, message?: string = "") => {
+//   const command = test.toString().replace(/^function \(\) {\s+|[;]|return\s+|\s*\}$|var \$_\$.+\n[^)]+\),\s+/g, "")
+//   const result = test()
+//   console.assert(result, `${message} ${command}`)
+//   return result
+// }
+
+// assert(() => OPT512.getAll().length === 512)
+
+// const Tom = OPT512.from("fffesepbcs")
+// const Britt = OPT512.from("mmfisisbpc")
+
+// assert(() => Britt.play.rawActivation < Tom.play.rawActivation) //?
+// assert(() => Britt.blast.rawActivation > Tom.blast.rawActivation) //?
+// assert(() => Britt.consume.rawActivation < Tom.consume.rawActivation) //?
+// assert(() => Britt.sleep.rawActivation > Tom.sleep.rawActivation) //?
+
+// function rawActivation(STNF) {
+//   const {
+//     opFn: { sex, index, grantStackIndex, savior },
+//     animals: [fA1, fA2],
+//     opType: {
+//       animals: [a1, a2, a3, a4],
+//     },
+//   } = STNF
+
+//   return [index, fA1.index, fA2.index]
+//     .map(Number)
+//     .reverse()
+//     .reduceRight((acc, value, index) => acc + value * 10 ** index, 0)
+// }
+
+// rawActivation(Tom.S) //?
+// rawActivation(Tom.T) //?
+// rawActivation(Tom.N) //?
+// rawActivation(Tom.F) //?
+
+// Britt.feeling.activationDetails
+
+// Tom.functions.sort(sorterize(rawActivation)).map((f) => f.code) //?
+// Britt.functions.sort(sorterize(rawActivation)).map((f) => f.code) //?
+
+// assert(() => Tom.feeling.rawActivation > Tom.thinking.rawActivation) //?
+// assert(() => Tom.feeling.rawActivation > Britt.feeling.rawActivation) //?
+
+// // assert(() => Britt.feeling.activation < Britt.thinking.activation, "bF < bT")
+
+// // console.log({
+// //   "B.f": Britt.feeling.activation,
+// //   "B.f+": JSON.stringify(Britt.feeling.activationDetails),
+
+// //   "T.f": Tom.feeling.activation,
+// //   "T.f+": JSON.stringify(Tom.feeling.activationDetails),
+// // })
+// // console.log("yay")
+
+// // Britt.feeling.activation
+
+describe("OPT512", () => {
+  it("exists", () => {
+    expect(OPT512).toBeDefined()
+  })
+
+  describe("setters", () => {
+    let opType: OPT512
+    beforeEach(() => (opType = OPT512.random()))
+    describe("dLetter", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        expect(opType.dLetter).not.toEqual("D")
+        opType.dLetter = "D";expect(opType.dLetter).toEqual("D")
+        opType.dLetter = "T";expect(opType.dLetter).toEqual("T")
+        opType.dLetter = "F";expect(opType.dLetter).toEqual("F")
+      })
+    })
+    describe("oLetter", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        opType.oLetter = "O";expect(opType.oLetter).toEqual("O")
+        opType.oLetter = "S";expect(opType.oLetter).toEqual("S")
+        opType.oLetter = "N";expect(opType.oLetter).toEqual("N")
+      })
+    })
+    describe("dFocus", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        opType.dFocus = "e";expect(opType.dFocus).toBe("e")
+        opType.dFocus = "i";expect(opType.dFocus).toBe("i")
+        opType.dFocus = "x";expect(opType.dFocus).toBe("x")
+        opType.dFocus = "?";expect(opType.dFocus).toBe("x")
+      })
+    })
+    describe("oFocus", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        opType.oFocus = "e";expect(opType.oFocus).toBe("e")
+        opType.oFocus = "i";expect(opType.oFocus).toBe("i")
+        opType.oFocus = "x";expect(opType.oFocus).toBe("x")
+        opType.oFocus = "?";expect(opType.oFocus).toBe("x")
+      })
+    })
+    describe("energyActivationBool", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        opType.energyActivationBool = null; expect(opType.energyActivationBool).toBe(null)
+        opType.energyActivationBool = true; expect(opType.energyActivationBool).toBe(true)
+        opType.energyActivationBool = false; expect(opType.energyActivationBool).toBe(false)
+      })
+    })
+    describe("infoActivationBool", () => {
+      // prettier-ignore
+      it("can be set", () => {
+        opType.infoActivationBool = null; expect(opType.infoActivationBool).toBe(null)
+        opType.infoActivationBool = true; expect(opType.infoActivationBool).toBe(true)
+        opType.infoActivationBool = false; expect(opType.infoActivationBool).toBe(false)
+      })
+    })
+  })
+
+  describe("partial types", () => {
+    describe("rendering", () => {
+      it("must not render undefined", () => {
+        const types = [new OPT512(null)]
+        for (const opType of types) {
+          expect(opType.OPSCode).not.toMatch(/undefined/)
+        }
+      })
+    })
+  })
+
+  describe("cloning", () => {
+    describe("ActivationsToAnimalStack", () => {
+      const animalStacks512 = OPT512.getAll()
+        .map((o) => o.toString())
+        .map((it) => extractAnimalsFromOP512(it).split(""))
+        .map(([A, B, C, D]) => `${A}${B}/${C}(${D})`)
+        .filter(uniq)
+      it("includes partial animal stacks", () => {
+        const animalStacks = [
+          ...animalStacks512,
+          "P",
+          "B",
+          "C",
+          "S",
+
+          "P(S)",
+          "B(C)",
+          "C(B)",
+          "S(P)",
+
+          "P/S",
+          "B/C",
+          "C/B",
+          "S/P",
+
+          "PB",
+          "BP",
+          "CS",
+          "SC",
+
+          "PC",
+          "BS",
+          "CP",
+          "SB",
+        ]
+        for (const animals of animalStacks) {
+          expect(Object.values(ActivationsToAnimalsString)).toContain(animals)
+        }
+      })
+      it("includes partial activation stacks", () => {
+        /*prettier-ignore*/
+        const animalStacks =
+          "PBCS".split("").map(PBCS => 
+          "xie".split('').map(xieIn => 
+          "xie".split('').map(xieEn => `${PBCS} ${xieEn}Energy ${xieIn}Info`))).flat(9)
+
+        for (const animals of animalStacks) {
+          expect(Object.keys(ActivationsToAnimalsString)).toContain(animals)
+        }
+      })
+
+      it("includes all stacks", () => {
+        for (const animals of animalStacks512) {
+          expect(Object.values(ActivationsToAnimalsString)).toContain(animals)
+        }
+      })
+
+      it("has unique values", () => {
+        expect(Object.values(ActivationsToAnimalsString).filter(uniq).length).toEqual(
+          Object.keys(ActivationsToAnimalsString).length,
+        )
+      })
+      it("has values that match its keys", () => {
+        for (const activationStack in ActivationsToAnimalsString) {
+          if (Object.prototype.hasOwnProperty.call(ActivationsToAnimalsString, activationStack)) {
+            const animals = ActivationsToAnimalsString[activationStack]
+            const [A1, energyActivation, infoActivation] = activationStack.split(" ")
+            expect(A1).toEqual(animals[0])
+            expect(animals + " Energy: " + energyActivation[0]).toEqual(
+              animals + " Energy: " + FocusCodes[maybeBoolToIndex(coinEnAct.parse(animals))],
+            )
+            expect(animals + " Info: " + infoActivation[0]).toEqual(
+              animals + " Info: " + FocusCodes[maybeBoolToIndex(coinInAct.parse(animals))],
+            )
+          }
+        }
+      })
+    })
+
+    describe("parseCoinText", () => {
+      it("must clone all types properly", () => {
+        for (const type of OPT512.getAll()) {
+          const parsed = parseCoinText(type.toString())
+          const clone = new OPT512(parsed)
+
+          expect(clone.toString()).toEqual(type.toString())
+          expect(clone.type).toEqual(parsed)
+
+          expect(clone.fmS).toEqual(type.fmS)
+          expect(clone.fmDe).toEqual(type.fmDe)
+          expect(clone.S1).toEqual(type.S1)
+          expect(clone.S2).toEqual(type.S2)
+          expect(clone.A1).toEqual(type.A1)
+          expect(clone.A2).toEqual(type.A2)
+          expect(clone.A3).toEqual(type.A3)
+          expect(clone.A4).toEqual(type.A4)
+
+          expect(type.type[coinOD.index]).toEqual(coinOD.parse(type.toString()))
+          expect(type.type[coinDiDe.index]).toEqual(coinDiDe.parse(type.toString()))
+          expect(type.type[coinOiOe.index]).toEqual(coinOiOe.parse(type.toString()))
+          expect(type.type[coinFT.index]).toEqual(coinFT.parse(type.toString()))
+          expect(type.type[coinNS.index]).toEqual(coinNS.parse(type.toString()))
+          expect(type.type[coinEnAct.index]).toEqual(coinEnAct.parse(type.toString()))
+          // @ts-expect-error
+          expect(type.activationStack + type.type[coinInAct.index])
+            // @ts-expect-error
+            .toEqual(type.activationStack + coinInAct.parse(type.toString()))
+          expect(type.type[coinSfm.index]).toEqual(coinSfm.parse(type.toString()))
+          expect(type.type[coinDefm.index]).toEqual(coinDefm.parse(type.toString()))
+
+          expect(clone.type[coinOD.index]).toEqual(coinOD.parse(clone.toString()))
+          expect(clone.type[coinDiDe.index]).toEqual(coinDiDe.parse(clone.toString()))
+          expect(clone.type[coinOiOe.index]).toEqual(coinOiOe.parse(clone.toString()))
+          expect(clone.type[coinFT.index]).toEqual(coinFT.parse(clone.toString()))
+          expect(clone.type[coinNS.index]).toEqual(coinNS.parse(clone.toString()))
+          expect(clone.type[coinEnAct.index]).toEqual(coinEnAct.parse(clone.toString()))
+          expect(clone.type[coinInAct.index]).toEqual(coinInAct.parse(clone.toString()))
+          expect(clone.type[coinSfm.index]).toEqual(coinSfm.parse(clone.toString()))
+          expect(clone.type[coinDefm.index]).toEqual(coinDefm.parse(clone.toString()))
+
+          expect("" + type + clone.type[coinOD.index]).toEqual("" + type + type.type[coinOD.index])
+          expect("" + type + clone.type[coinDiDe.index]).toEqual("" + type + type.type[coinDiDe.index])
+          expect("" + type + clone.type[coinOiOe.index]).toEqual("" + type + type.type[coinOiOe.index])
+          expect("" + type + clone.type[coinFT.index]).toEqual("" + type + type.type[coinFT.index])
+          expect("" + type + clone.type[coinNS.index]).toEqual("" + type + type.type[coinNS.index])
+          expect("" + type + clone.type[coinEnAct.index]).toEqual("" + type + type.type[coinEnAct.index])
+          expect("" + type + clone.type[coinInAct.index]).toEqual("" + type + type.type[coinInAct.index])
+          expect("" + type + clone.type[coinSfm.index]).toEqual("" + type + type.type[coinSfm.index])
+          expect("" + type + clone.type[coinDefm.index]).toEqual("" + type + type.type[coinDefm.index])
+
+          expect(clone.type).toEqual(type.type)
+        }
+      })
+    })
+  })
+})
diff --git a/components/opt-toy/OPT512.tsx b/components/opt-toy/OPT512.tsx
index 821d44e..e8df1fe 100644
--- a/components/opt-toy/OPT512.tsx
+++ b/components/opt-toy/OPT512.tsx
@@ -6,6 +6,7 @@ import {
   cleanCoinText,
   BLANK_TYPE,
   parseCoinText,
+  extractAnimalsFromOP512,
 } from "./Coin"
 import { sortBy } from "./sortBy"
 import getRandomInt from "./getRandomInt"
@@ -24,13 +25,67 @@ export {
   parseCoinText,
 }
 
-type OPODLetterType = "O" | "D" | "?"
-type OPDLetterType = "F" | "T" | "D"
-type OPOLetterType = "N" | "S" | "O"
+function codeForBoolMaybe<
+  Tails extends string,
+  Heads extends string,
+  Edge extends string,
+>(
+  values: readonly [tails: Tails, heads: Heads, edge: Edge],
+  side: BoolMaybe,
+): Tails | Heads | Edge {
+  return values[maybeBoolToIndex(side)]
+}
+
 type OPLetterType = OPDLetterType | OPOLetterType | OPODLetterType
-type OPFocusType = "i" | "e" | "x" | "?"
-type OPSexType = "f" | "m" | "?"
-type OPAnimalType = "P" | "B" | "C" | "S" | "?"
+type OPAnimalType = OPInfoType | OPEnergyType
+type OPCodeLetter = OPLetterType | OPFocusType | OPSexType
+
+type OPODLetterType    = "O"| "D"| "?" // prettier-ignore
+type OPDLetterType     = "F"| "T"| "D" // prettier-ignore
+type OPOLetterType     = "N"| "S"| "O" // prettier-ignore
+type OPFocusType       = "i"| "e"| "x" | "?" // prettier-ignore
+type OPSexType         = "f"| "m"| "?" // prettier-ignore
+type OPEnergyType      = "S"| "P"| "?" // prettier-ignore
+type OPInfoType        = "C"| "B"| "?" // prettier-ignore
+
+const OPODLetterCodes = ["O", "D", "?"] as const // prettier-ignore
+const OPDLetterCodes  = ["F", "T", "D"] as const // prettier-ignore
+const OPOLetterCodes  = ["N", "S", "O"] as const // prettier-ignore
+const OPFocusCodes    = ["i", "e", "x"] as const // prettier-ignore
+const OPSexCodes      = ["f", "m", "?"] as const // prettier-ignore
+const OPEnergyCodes   = ["S", "P", "?"] as const // prettier-ignore
+const OPInfoCodes     = ["C", "B", "?"] as const // prettier-ignore
+
+/** @deprecated use OPFocusCodes instead */
+export const FocusCodes = OPFocusCodes
+
+const getOPODLetterCodeForCoinEdge = (side: BoolMaybe) => codeForBoolMaybe(OPODLetterCodes, side) // prettier-ignore
+const getOPDLetterCodeForCoinEdge  = (side: BoolMaybe) => codeForBoolMaybe(OPDLetterCodes,  side) // prettier-ignore
+const getOPOLetterCodeForCoinEdge  = (side: BoolMaybe) => codeForBoolMaybe(OPOLetterCodes,  side) // prettier-ignore
+const getOPFocusCodeForCoinEdge    = (side: BoolMaybe) => codeForBoolMaybe(OPFocusCodes,    side) // prettier-ignore
+const getOPSexCodeForCoinEdge      = (side: BoolMaybe) => codeForBoolMaybe(OPSexCodes,      side) // prettier-ignore
+const getOPEnergyCodeForCoinEdge   = (side: BoolMaybe) => codeForBoolMaybe(OPEnergyCodes,   side) // prettier-ignore
+const getOPInfoCodeForCoinEdge     = (side: BoolMaybe) => codeForBoolMaybe(OPInfoCodes,     side) // prettier-ignore
+
+const OPCodeLetterToSide: { [F in OPCodeLetter]: BoolMaybe } = {
+  "?": null,
+  x: null,
+
+  e: true,
+  i: false,
+
+  D: null,
+  O: null,
+
+  T: true,
+  F: false,
+
+  S: true,
+  N: false,
+
+  m: true,
+  f: false,
+}
 
 export interface OPFunctionType {
   index: number
@@ -45,53 +100,95 @@ export interface OPFunctionType {
 
 type OP4Fns = [OPFunctionType, OPFunctionType, OPFunctionType, OPFunctionType]
 
+const filterByIndex = ({ index }) => index >= 0
 const sortByIndex = ({ index: a }, { index: b }) => sortBy(a, b)
 
 type DTFxei = "Dx" | "Tx" | "Fx" | "De" | "Te" | "Fe" | "Di" | "Ti" | "Fi"
 
 type OSNxei = "Oe" | "Se" | "Ne" | "Oi" | "Si" | "Ni" | "Ox" | "Sx" | "Nx"
 
+const MissingAnimal = {
+  BCP: "S" as "S",
+  BPS: "C" as "C",
+  CPS: "B" as "B",
+  BCS: "P" as "P",
+}
+
+export const ActivationsToAnimalsString = {
+  "B eEnergy eInfo": "BP/S(C)",
+  "B iEnergy eInfo": "BS/P(C)",
+  "B eEnergy iInfo": "BP/C(S)",
+  "B iEnergy iInfo": "BS/C(P)",
+  "C eEnergy eInfo": "CP/B(S)",
+  "C iEnergy eInfo": "CS/B(P)",
+  "C eEnergy iInfo": "CP/S(B)",
+  "C iEnergy iInfo": "CS/P(B)",
+  "P eEnergy eInfo": "PB/C(S)",
+  "P iEnergy eInfo": "PB/S(C)",
+  "P eEnergy iInfo": "PC/B(S)",
+  "P iEnergy iInfo": "PC/S(B)",
+  "S eEnergy eInfo": "SB/P(C)",
+  "S iEnergy eInfo": "SB/C(P)",
+  "S eEnergy iInfo": "SC/P(B)",
+  "S iEnergy iInfo": "SC/B(P)",
+
+  "P xEnergy xInfo": "P",
+  "B xEnergy xInfo": "B",
+  "C xEnergy xInfo": "C",
+  "S xEnergy xInfo": "S",
+
+  "P xEnergy eInfo": "PB",
+  "P xEnergy iInfo": "PC",
+  "S xEnergy eInfo": "SB",
+  "S xEnergy iInfo": "SC",
+
+  "B eEnergy xInfo": "BP",
+  "B iEnergy xInfo": "BS",
+  "C eEnergy xInfo": "CP",
+  "C iEnergy xInfo": "CS",
+
+  "S eEnergy xInfo": "S/P",
+  "P iEnergy xInfo": "P/S",
+  "B xEnergy iInfo": "B/C",
+  "C xEnergy eInfo": "C/B",
+
+  "P eEnergy xInfo": "P(S)",
+  "S iEnergy xInfo": "S(P)",
+  "B xEnergy eInfo": "B(C)",
+  "C xEnergy iInfo": "C(B)",
+}
+
 export class OPT512 {
   edit() {
     for (const key in this) {
-      if (key.charAt(0) !== "_") continue
+      if (!key.startsWith("memo_")) continue
       delete this[key]
     }
   }
 
-  static from(typeCode: string): OPT512 {
-    return new OPT512(parseCoinText(cleanCoinText(typeCode)))
-  }
-  static fromDirtyCoinText(typeCode: string): OPT512 {
-    return OPT512.from(typeCode)
-  }
-  static fromCoinText(typeCode: string): OPT512 {
-    return new OPT512(parseCoinText(typeCode))
-  }
+  static from(typeCode: string): OPT512 { return OPT512.fromCoinText(typeCode) } // prettier-ignore
+  static fromCoinText(typeCode: string): OPT512 { return new OPT512(parseCoinText(typeCode)) } // prettier-ignore
+  /** @deprecated */
+  static fromDirtyCoinText(typeCode: string): OPT512 { return OPT512.from(typeCode) } // prettier-ignore
 
-  get eDecider() {
-    return this.deciders.find((Dx) => Dx.focus === "e") || this.deciders[0]
-  }
-  get iDecider() {
-    return this.deciders.find((Dx) => Dx.focus === "i") || this.deciders[1]
-  }
+  get eDecider() { return this.deciders.find((Dx) => Dx.focus === "e") || this.deciders[0] } // prettier-ignore
+  get iDecider() { return this.deciders.find((Dx) => Dx.focus === "i") || this.deciders[1] } // prettier-ignore
   get deciders() {
     const { feeling, thinking } = this
-    return [feeling, thinking].sort(sortByIndex)
-  }
-  get eObserver() {
-    return this.observers.find((Ox) => Ox.focus === "e") || this.observers[0]
-  }
-  get iObserver() {
-    return this.observers.find((Ox) => Ox.focus === "i") || this.observers[1]
+    return [feeling, thinking].filter(filterByIndex).sort(sortByIndex)
   }
+  get eObserver() { return this.observers.find((Ox) => Ox.focus === "e") || this.observers[0] } // prettier-ignore
+  get iObserver() { return this.observers.find((Ox) => Ox.focus === "i") || this.observers[1] } // prettier-ignore
   get observers() {
     const { intuition, sensing } = this
-    return [intuition, sensing].sort(sortByIndex)
+    return [intuition, sensing].filter(filterByIndex).sort(sortByIndex)
   }
+  get functionStack() { return this.opFunctions.map(({ letter }) => this[letter]).filter(Boolean) } // prettier-ignore
   get functions() {
     const { feeling, thinking, intuition, sensing } = this
-    return [feeling, thinking, intuition, sensing].sort(sortByIndex)
+    return [feeling, thinking, intuition, sensing]
+      .filter(filterByIndex)
+      .sort(sortByIndex)
   }
   readonly S = new Sensing(this)
   readonly T = new Thinking(this)
@@ -103,18 +200,10 @@ export class OPT512 {
   readonly intuition = this.N
   readonly feeling = this.F
 
-  get Di(): Thinking | Feeling {
-    return this[this.codeDi[0]]
-  }
-  get De(): Thinking | Feeling {
-    return this[this.codeDe[0]]
-  }
-  get Oi(): Sensing | iNtuition {
-    return this[this.codeOi[0]]
-  }
-  get Oe(): Sensing | iNtuition {
-    return this[this.codeOe[0]]
-  }
+  get Di(): Thinking | Feeling { return this[this.codeDi[0]] } // prettier-ignore
+  get De(): Thinking | Feeling { return this[this.codeDe[0]] } // prettier-ignore
+  get Oi(): Sensing | iNtuition { return this[this.codeOi[0]] } // prettier-ignore
+  get Oe(): Sensing | iNtuition { return this[this.codeOe[0]] } // prettier-ignore
 
   get animalStack() {
     const { play, blast, consume, sleep, A1 } = this
@@ -133,7 +222,7 @@ export class OPT512 {
   }
   get animals() {
     const { play, sleep, blast, consume } = this
-    return [play, sleep, blast, consume].sort(sortByIndex)
+    return [play, sleep, blast, consume].filter(filterByIndex).sort(sortByIndex)
   }
 
   public readonly play = new Play(this)
@@ -147,44 +236,24 @@ export class OPT512 {
     const index = animals.findIndex((animal) => animal.letters === letters)
     return animals[index]
   }
-  get ST() {
-    return this.getAnimalByLetters("ST")
-  }
-  get SF() {
-    return this.getAnimalByLetters("SF")
-  }
-  get NT() {
-    return this.getAnimalByLetters("NT")
-  }
-  get NF() {
-    return this.getAnimalByLetters("NF")
-  }
+  get ST() { return this.getAnimalByLetters("ST") } // prettier-ignore
+  get SF() { return this.getAnimalByLetters("SF") } // prettier-ignore
+  get NT() { return this.getAnimalByLetters("NT") } // prettier-ignore
+  get NF() { return this.getAnimalByLetters("NF") } // prettier-ignore
 
   constructor(public type: OPT512Maybe) {
     this.type = (type || BLANK_TYPE).slice(0) as OPT512Maybe
   }
-  toJSON() {
-    return this.type
-  }
-  static fromJSON(type: OPT512Maybe) {
-    return new OPT512(type)
-  }
+  toJSON() { return this.type } // prettier-ignore
+  static fromJSON(type: OPT512Maybe) { return new OPT512(type) } // prettier-ignore
 
-  get typeNumber() {
-    return parseInt(this.type.map(Number).reverse().join(""), 2)
-  }
-  get typeNumberString() {
-    return this.type.map(Number).reverse().join("")
-  }
-  getComplimentType(): OPT512 {
-    return OPT512.fromTypeNumber(this.typeNumber ^ 0b111111111)
-  }
-  static fromTypeNumber(typeNumber: number): OPT512 {
-    return new OPT512(typeNumberToCoins(typeNumber))
-  }
-  static random() {
-    return OPT512.fromTypeNumber(getRandomInt(0, 0b111111111))
-  }
+  get typeNumber() { return parseInt(this.typeNumberString, 2) } // prettier-ignore
+  get typeNumberString() { return this.type.map(Number).reverse().join("") } // prettier-ignore
+  getComplimentType(): OPT512 { return OPT512.fromTypeNumber(this.typeNumber ^ 0b111111111) } // prettier-ignore
+  static fromTypeNumber(typeNumber: number): OPT512 { return new OPT512(typeNumberToCoins(typeNumber)) } // prettier-ignore
+  static random() { return OPT512.fromTypeNumber(getRandomInt(0, 0b111111111)) } // prettier-ignore
+
+  /** @deprecated*/
   get sortValue() {
     return (
       sideToDistance(this.type[NamedCOINS.coinNS.index]) *
@@ -194,227 +263,176 @@ export class OPT512 {
       sideToDistance(this.type[NamedCOINS.coinOD.index]) * 1000
     )
   }
-  private _position: number[]
+
+  /** @deprecated*/
+  get dPosition() { return this.De.rawActivation - this.Di.rawActivation } // prettier-ignore
+  /** @deprecated*/
+  get dRotation() {
+    return (
+      Math.round(
+        ((Math.atan2(this.De.rawActivation, this.Di.rawActivation) * 180) /
+          Math.PI) *
+          100,
+      ) / 100
+    )
+  }
+  /** @deprecated*/
+  get oPosition() { return this.Oe.rawActivation - this.Oi.rawActivation } // prettier-ignore
+  /** @deprecated*/
+  get oRotation() {
+    return (
+      Math.round(
+        ((Math.atan2(this.Oe.rawActivation, this.Oi.rawActivation) * 180) /
+          Math.PI) *
+          100,
+      ) / 100
+    )
+  }
+  /** @deprecated*/
+  get temperamentPosition(): [number, number] { return [this.dPosition, this.oPosition] } // prettier-ignore
+  /** @deprecated*/
+  get temperamentRotation() {
+    return (
+      Math.round(
+        ((Math.atan2(...this.temperamentPosition) * 180) / Math.PI) * 100,
+      ) / 100
+    )
+  }
+
+  /** @deprecated*/
+  get positionSTNF() {
+    return (
+      (4 - this.ST.rawActivation) * 100 + (4 - this.NF.rawActivation) * -100
+    )
+  }
+  /** @deprecated*/
+  get positionSFNT() {
+    return (
+      (4 - this.SF.rawActivation) * 100 + (4 - this.NT.rawActivation) * -100
+    )
+  }
+
+  private memo_position: number[]
+  /** @deprecated*/
   get position() {
     return (
-      this._position ||
-      (this._position = [
-        this.tIndex,
+      this.memo_position ||
+      (this.memo_position = [
         this.sIndex,
-        this.fIndex,
+        this.tIndex,
         this.nIndex,
+        this.fIndex,
+
         this.PlayIndex,
         this.BlastIndex,
         this.ConsumeIndex,
         this.SleepIndex,
+
+        this.play.rawActivation,
+        this.blast.rawActivation,
+        this.consume.rawActivation,
+        this.sleep.rawActivation,
+
+        this.positionSTNF,
+        // this.NT.index,
+        // this.SF.index,
+
         ...[
-          this.sideOfEnergyInfo,
-          this.sideOfNFST,
-          this.sideOfSFNT,
-          this.sideOfFiTe,
-          this.sideOfNiSe,
-          this.sideOfSiNe,
-          this.sideOfTiFe,
+          OPCodeLetterToSide[this.S.focus],
+          OPCodeLetterToSide[this.T.focus],
+
+          OPCodeLetterToSide[this.S.sex],
+          OPCodeLetterToSide[this.De.sex],
+          OPCodeLetterToSide[this.T.sex],
+
+          // this.sideOfEnergyInfo,
+          // this.sideOfNFST,
+          // this.sideOfSFNT,
+          // this.sideOfFiTe,
+          // this.sideOfNiSe,
+          // this.sideOfSiNe,
+          // this.sideOfTiFe,
+          ...this.type,
         ].map(sideToDistance),
-        ...this.type.map(sideToDistance),
       ].map(Number))
     )
   }
-  static getCoinDistanceBetween(a: OPT512, b: OPT512) {
-    return euclideanDistanceSquared(a.position, b.position)
-  }
+  /** @deprecated*/
+  static getCoinDistanceBetween(a: OPT512, b: OPT512) { return euclideanDistance(a?.position, b?.position) } // prettier-ignore
 
-  get rawActivation() {
-    return this.functions.reduce((aaa, fn) => aaa + fn.activation, 0)
-  }
+  /** @deprecated*/
+  get rawActivation() { return this.functions.reduce((aaa, fn) => aaa + fn?.activation, 0) } // prettier-ignore
 
   static getAll(): OPT512[] {
-    return Array(511)
+    return Array(512)
       .fill(0)
       .map((_, i) => OPT512.fromTypeNumber(i))
   }
 
-  get eCount() {
-    return this.type.filter((it) => it === true).length
-  }
-  get iCount() {
-    return this.type.filter((it) => it === false).length
-  }
-  get nullCount() {
-    return this.type.filter((it) => it == null).length
-  }
-  get isEmpty() {
-    return this.nullCount === this.type.length
-  }
-  get isFull() {
-    return this.nullCount === 0
-  }
-  get fmS(): OPSexType {
-    return ["f", "m", "?"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinSfm.index])
-    ] as OPSexType
-  }
-  get fmDe(): OPSexType {
-    return ["f", "m", "?"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinDefm.index])
-    ] as OPSexType
-  }
-  get odLetter(): OPODLetterType {
-    return ["O", "D", "?"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinOD.index])
-    ] as OPODLetterType
-  }
-  get dLetter(): OPDLetterType {
-    return ["F", "T", "D"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinFT.index])
-    ] as OPDLetterType
-  }
-  set dLetter(letter: OPDLetterType) {
-    this.edit()
-    switch (letter) {
-      case "F":
-        this.type[NamedCOINS.coinFT.index] = false
-        break
-
-      case "T":
-        this.type[NamedCOINS.coinFT.index] = true
-        break
-
-      case "D":
-      default:
-        this.type[NamedCOINS.coinFT.index] = null
-    }
-  }
-  get oLetter(): OPOLetterType {
-    return ["N", "S", "O"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinNS.index])
-    ] as OPOLetterType
-  }
-  set oLetter(letter: OPOLetterType) {
-    this.edit()
-    switch (letter) {
-      case "N":
-        this.type[NamedCOINS.coinNS.index] = false
-        break
-
-      case "S":
-        this.type[NamedCOINS.coinNS.index] = true
-        break
-
-      case "O":
-      default:
-        this.type[NamedCOINS.coinNS.index] = null
-    }
-  }
-
-  get dFocus(): OPFocusType {
-    return ["i", "e", "x"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinDiDe.index])
-    ] as OPFocusType
-  }
-  set dFocus(letter: OPFocusType) {
-    this.edit()
-    switch (letter) {
-      case "i":
-        this.type[NamedCOINS.coinDiDe.index] = false
-        break
-
-      case "e":
-        this.type[NamedCOINS.coinDiDe.index] = true
-        break
-
-      case "x":
-      default:
-        this.type[NamedCOINS.coinDiDe.index] = null
-    }
-  }
-
-  get oFocus(): OPFocusType {
-    return ["i", "e", "x"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinOiOe.index])
-    ] as OPFocusType
-  }
-  set oFocus(letter: OPFocusType) {
-    this.edit()
-    switch (letter) {
-      case "i":
-        this.type[NamedCOINS.coinOiOe.index] = false
-        break
-
-      case "e":
-        this.type[NamedCOINS.coinOiOe.index] = true
-        break
-
-      case "x":
-      default:
-        this.type[NamedCOINS.coinOiOe.index] = null
-    }
-  }
-
-  get a2Focus() {
-    return ["i", "e", "x"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinA2ie.index])
-    ]
-  }
-  get a2FocusBool() {
-    return this.type[NamedCOINS.coinA2ie.index]
-  }
-  get a3FocusBool() {
-    return this.type[NamedCOINS.coinA3ie.index]
-  }
-  set a2FocusBool(side: BoolMaybe) {
-    this.edit()
-    this.type[NamedCOINS.coinA2ie.index] = side
-  }
-  set a3FocusBool(side: BoolMaybe) {
-    this.edit()
-    this.type[NamedCOINS.coinA3ie.index] = side
-  }
-  get a3Focus(): "i" | "e" | "x" {
-    return ["i", "e", "x"][
-      maybeBoolToIndex(this.type[NamedCOINS.coinA3ie.index])
-    ] as any
-  }
-  get DTFxei(): DTFxei {
-    return `${this.dLetter}${this.dFocus}` as any
-  }
-  get OSNxei(): OSNxei {
-    return `${this.oLetter}${this.oFocus}` as any
-  }
-  get S1() {
-    return [this.OSNxei, this.DTFxei, this.DTFxei][
-      maybeBoolToIndex(this.type[NamedCOINS.coinOD.index])
-    ]
-  }
-  get S2() {
-    return [this.DTFxei, this.OSNxei, this.OSNxei][
-      maybeBoolToIndex(this.type[NamedCOINS.coinOD.index])
-    ]
-  }
-  get D1() {
-    return Flipped[this.S2] || this.S2
-  }
-  get D2() {
-    return Flipped[this.S1] || this.S1
-  }
-  get codeDe(): "De" | "Te" | "Fe" {
-    return { e: this.DTFxei, i: Flipped[this.DTFxei] }[this.dFocus]
-  }
-  get codeDi(): "Di" | "Ti" | "Fi" {
-    return Flipped[this.codeDe]
-  }
-  get codeOe(): "Oe" | "Se" | "Ne" {
-    return { e: this.OSNxei, i: Flipped[this.OSNxei] }[this.oFocus]
-  }
-  get codeOi(): "Oi" | "Si" | "Ni" {
-    return Flipped[this.codeOe]
-  }
-  get isJumper() {
-    return this.dFocus === "x" ? null : this.dFocus === this.oFocus
-  }
-  private _opFunctions: OP4Fns
+  get eCount() { return this.type.filter((it) => it === true).length } // prettier-ignore
+  get iCount() { return this.type.filter((it) => it === false).length } // prettier-ignore
+  get nullCount() { return this.type.filter((it) => it == null).length } // prettier-ignore
+  get isEmpty() { return this.nullCount === this.type.length } // prettier-ignore
+  get isFull() { return this.nullCount === 0 } // prettier-ignore
+  get fmS(): OPSexType { return getOPSexCodeForCoinEdge(this.type[NamedCOINS.coinSfm.index]) } // prettier-ignore
+  get fmDe() { return getOPSexCodeForCoinEdge(this.type[NamedCOINS.coinDefm.index]) } // prettier-ignore
+
+  get odLetter() { return getOPODLetterCodeForCoinEdge(this.type[NamedCOINS.coinOD.index]) } // prettier-ignore
+  set odLetter(letter: OPODLetterType) { this.edit(); this.type[NamedCOINS.coinOD.index] = OPCodeLetterToSide[letter] } // prettier-ignore
+
+  get dLetter() { return getOPDLetterCodeForCoinEdge(this.type[NamedCOINS.coinFT.index]) } // prettier-ignore
+  set dLetter(letter: OPDLetterType) { this.edit(); this.type[NamedCOINS.coinFT.index] = OPCodeLetterToSide[letter] } // prettier-ignore
+
+  get oLetter(): OPOLetterType { return getOPOLetterCodeForCoinEdge(this.type[NamedCOINS.coinNS.index]) } // prettier-ignore
+  set oLetter(letter: OPOLetterType) { this.edit(); this.type[NamedCOINS.coinNS.index] = OPCodeLetterToSide[letter] } // prettier-ignore
+
+  get dFocus() { return getOPFocusCodeForCoinEdge(this.type[NamedCOINS.coinDiDe.index]) } // prettier-ignore
+  set dFocus(letter: OPFocusType) { this.edit(); this.type[NamedCOINS.coinDiDe.index] = OPCodeLetterToSide[letter] } // prettier-ignore
+
+  get oFocus() { return getOPFocusCodeForCoinEdge(this.type[NamedCOINS.coinOiOe.index]) } // prettier-ignore
+  set oFocus(letter: OPFocusType) { this.edit(); this.type[NamedCOINS.coinOiOe.index] = OPCodeLetterToSide[letter] } // prettier-ignore
+
+  /** @deprecated use energyActivation or infoActivation instead */
+  get a2Focus() { return getOPFocusCodeForCoinEdge(this.a2FocusBool) } // prettier-ignore
+  /** @deprecated use energyActivationBool or infoActivationBool instead */
+  get a2FocusBool() { return null } // prettier-ignore
+  /** @deprecated use energyActivationBool or infoActivationBool instead */
+  get a3FocusBool() { return null } // prettier-ignore
+  /** @deprecated use energyActivationBool or infoActivationBool instead */
+  set a2FocusBool(side: BoolMaybe) { this.edit() } // prettier-ignore
+  /** @deprecated use energyActivationBool or infoActivationBool instead */
+  set a3FocusBool(side: BoolMaybe) { this.edit() } // prettier-ignore
+  /** @deprecated use energyActivation or infoActivation instead */
+  get a3Focus() { return getOPFocusCodeForCoinEdge(this.a3FocusBool) } // prettier-ignore
+
+  get energyActivation() { return getOPFocusCodeForCoinEdge(this.energyActivationBool) } // prettier-ignore
+  get energyActivationBool() { return this.type[NamedCOINS.coinEnAct.index] } // prettier-ignore
+  set energyActivation(letter: OPFocusType) { this.energyActivationBool = OPCodeLetterToSide[letter] } // prettier-ignore
+  set energyActivationBool(side: BoolMaybe) { this.edit(); this.type[NamedCOINS.coinEnAct.index] = side } // prettier-ignore
+
+  get infoActivation() { return getOPFocusCodeForCoinEdge(this.infoActivationBool) } // prettier-ignore
+  get infoActivationBool() { return this.type[NamedCOINS.coinInAct.index] } // prettier-ignore
+  set infoActivation(letter: OPFocusType) { this.infoActivationBool = OPCodeLetterToSide[letter] } // prettier-ignore
+  set infoActivationBool(side: BoolMaybe) { this.edit(); this.type[NamedCOINS.coinInAct.index] = side } // prettier-ignore
+
+  get DTFxei(): DTFxei { return `${this.dLetter}${this.dFocus}` as any } // prettier-ignore
+  get OSNxei(): OSNxei { return `${this.oLetter}${this.oFocus}` as any } // prettier-ignore
+
+  get S1() { return codeForBoolMaybe([this.OSNxei, this.DTFxei, this.DTFxei], this.type[NamedCOINS.coinOD.index]) } // prettier-ignore
+  get S2() { return codeForBoolMaybe([this.DTFxei, this.OSNxei, this.OSNxei], this.type[NamedCOINS.coinOD.index]) } // prettier-ignore
+  get D1() { return Flipped[this.S2] || this.S2 } // prettier-ignore
+  get D2() { return Flipped[this.S1] || this.S1 } // prettier-ignore
+
+  get codeDe(): "De" | "Te" | "Fe" { return { e: this.DTFxei, i: Flipped[this.DTFxei] }[this.dFocus] } // prettier-ignore
+  get codeOe(): "Oe" | "Se" | "Ne" { return { e: this.OSNxei, i: Flipped[this.OSNxei] }[this.oFocus] } // prettier-ignore
+  get codeDi(): "Di" | "Ti" | "Fi" { return Flipped[this.codeDe] } // prettier-ignore
+  get codeOi(): "Oi" | "Si" | "Ni" { return Flipped[this.codeOe] } // prettier-ignore
+
+  get isJumper() { return this.dFocus === "x" ? null : this.dFocus === this.oFocus } // prettier-ignore
+
+  private memo_opFunctions: OP4Fns
   get opFunctions(): OP4Fns {
-    if (this._opFunctions) return this._opFunctions
+    if (this.memo_opFunctions) return this.memo_opFunctions
     const sex = {
       Si: this.fmS,
       Se: this.fmS,
@@ -478,91 +496,51 @@ export class OPT512 {
       s2.grantStackIndex = 2
     }
     const [fn1, fn2, fn3, fn4] = fns
-    return (this._opFunctions = [fn1, fn2, fn3, fn4])
+    return (this.memo_opFunctions = [fn1, fn2, fn3, fn4])
   }
 
-  get letters() {
-    return this.opFunctions.sort(sortByIndex).map((opFn) => opFn.letter[0])
-  }
-  get tIndex() {
-    return this.letters.indexOf("T")
-  }
-  get sIndex() {
-    return this.letters.indexOf("S")
-  }
-  get fIndex() {
-    return this.letters.indexOf("F")
-  }
-  get nIndex() {
-    return this.letters.indexOf("N")
-  }
-  get animalCodes(): [OPAnimalType, OPAnimalType, OPAnimalType, OPAnimalType] {
-    return [this.A1, this.A2, this.A3, this.A4]
-  }
-  get PlayIndex() {
-    return this.animalCodes.indexOf("P")
-  }
-  get BlastIndex() {
-    return this.animalCodes.indexOf("B")
-  }
-  get ConsumeIndex() {
-    return this.animalCodes.indexOf("C")
-  }
-  get SleepIndex() {
-    return this.animalCodes.indexOf("S")
-  }
+  get letters() { return this.opFunctions.sort(sortByIndex).map((opFn) => opFn.letter[0])  } // prettier-ignore
+  get tIndex() { return this.letters.indexOf("T")  } // prettier-ignore
+  get sIndex() { return this.letters.indexOf("S")  } // prettier-ignore
+  get fIndex() { return this.letters.indexOf("F")  } // prettier-ignore
+  get nIndex() { return this.letters.indexOf("N")  } // prettier-ignore
 
-  get A1Code() {
-    return `O${this.oFocus}D${this.dFocus}`
-  }
-  get A1() {
-    return AnimalCodeToAnimalLetter[this.A1Code] || "?"
-  }
-  get A2() {
-    return (
-      AnimalLetterFocusCodeToAnimalLetters[`${this.A1}${this.a2Focus}`] || "?"
-    )
-  }
-  get A3() {
-    return (
-      AnimalLetterFocusCodeToAnimalLetters[
-        `${this.A1}${this.A2}${this.a3Focus}`
-      ] || "?"
-    )
-  }
-  get A4() {
-    return (
-      {
-        BCP: "S",
-        BPS: "C",
-        CPS: "B",
-        BCS: "P",
-      }[[this.A1, this.A2, this.A3].sort().join("")] || "?"
-    )
+  get PlayIndex() { return this.animalLetters.indexOf("P")  } // prettier-ignore
+  get BlastIndex() { return this.animalLetters.indexOf("B")  } // prettier-ignore
+  get ConsumeIndex() { return this.animalLetters.indexOf("C")  } // prettier-ignore
+  get SleepIndex() { return this.animalLetters.indexOf("S")  } // prettier-ignore
+  get A1Code() { return `O${this.oFocus}D${this.dFocus}`  } // prettier-ignore
+
+  private get activationStack() { return `${this.A1} ${this.energyActivation}Energy ${this.infoActivation}Info`  } // prettier-ignore
+  private get animalString(): any { return ActivationsToAnimalsString[this.activationStack] ?? "?"  } // prettier-ignore
+  private get animalLetters(): any { return extractAnimalsFromOP512(this.animalString)  } // prettier-ignore
+
+  get animalCodes(): [OPAnimalType, OPAnimalType, OPAnimalType, OPAnimalType] { return this.animalLetters.split("")  } // prettier-ignore
+
+  get A1(): OPAnimalType { return AnimalCodeToAnimalLetter[this.A1Code] || "?"  } // prettier-ignore
+  get A2(): OPAnimalType { return this.animalLetters[1] ?? "?"  } // prettier-ignore
+  get A3(): OPAnimalType { return this.animalLetters[2] ?? "?"  } // prettier-ignore
+  get A4(): OPAnimalType { return this.animalLetters[3] ?? "?"  } // prettier-ignore
+
+  toString() { return this.OPSCode  } // prettier-ignore
+  valueOf() { return this.toString()  } // prettier-ignore
+
+  get OPSCode(): string {
+    const { sexString, S1, S2, animalString } = this
+    return `${sexString}${S1}/${S2}-${animalString}`
   }
-  toString() {
-    return this.OP512
+  private get sexString() {
+    const { fmS, fmDe } = this
+    return fmS === "?" && fmDe === "?" ? "" : `${fmS}${fmDe}-`.toUpperCase()
   }
+
+  /** @deprecated use toString instead */
   get OP512(): string {
-    const opt = this
-    const fmS = opt.fmS
-    const fmDe = opt.fmDe
-    const S1 = opt.S1
-    const S2 = opt.S2
-    const A1 = opt.A1
-    const A2 = opt.A2
-    const A3 = opt.A3
-    const A4 = opt.A4
-    return cleanCoinText(`${fmS}${fmDe}-${S1}/${S2}-${A1}${A2}/${A3}(${A4})`)
-  }
-  get sideOfEnergyInfo(): BoolMaybe {
-    return {
-      S: true,
-      C: false,
-      B: false,
-      P: true,
-    }[this.A4]
+    const { fmS, fmDe, S1, S2, A1, A2, A3, A4 } = this
+    return `${fmS}${fmDe}-${S1}/${S2}-${A1}${A2}/${A3}(${A4})`
   }
+
+  get sideOfEnergyInfo(): BoolMaybe { return { P:true, S:true, C:false, B:false }[this.A4] } // prettier-ignore
   get sideOfSiNe(): BoolMaybe {
     if (this.oLetter === "N" && this.oFocus === "e") return true
     if (this.oLetter === "S" && this.oFocus === "i") return false
@@ -593,13 +571,10 @@ export class OPT512 {
     if (this.oLetter === "N" && this.dLetter === "F") return false
     return null
   }
-
-  includesText(type: string) {
-    return this.toString().includes(type)
-  }
-  includesAnyText(...types: string[]) {
-    return types.findIndex((type) => this.includesText(type)) > -1
-  }
+  /** @deprecated*/
+  includesText(type: string) { return this.toString().includes(type) } // prettier-ignore
+  /** @deprecated*/
+  includesAnyText(...types: string[]) { return types.findIndex((type) => this.includesText(type)) > -1 } // prettier-ignore
 }
 
 const Flipped = {
@@ -637,45 +612,15 @@ const Flipped = {
   De: "Di" as "Di",
 }
 
-const rawActivations = [
-  7206,
-  7207,
-  7216,
-  7217,
-  8106,
-  8107,
-  8116,
-  8117,
-  8206,
-  8207,
-  8216,
-  8217,
-  ,
-  9008,
-  9009,
-  9018,
-  9019,
-  9108,
-  9109,
-  9118,
-  9119,
-  19208,
-  109209,
-  1009218,
-  10009219,
-]
-
 export abstract class OPPart {
   readonly code: string
   constructor(public opType: OPT512) {}
   abstract get flipSide(): OPPart
   abstract get rawActivation(): number
-  get activation() {
-    return rawActivations.indexOf(this.rawActivation)
-  }
-  get activationDistance() {
-    return this.activation - 12
-  }
+  /** @deprecated*/
+  get activation() { return -1 } // prettier-ignore
+  /** @deprecated*/
+  get activationDistance() { return this.activation - 12 } // prettier-ignore
 }
 
 type AnimalFunctionPair = [Sensing | iNtuition, Thinking | Feeling]
@@ -688,156 +633,113 @@ abstract class OPAnimal extends OPPart {
     return (letterO + letterD) as any // TODO(tom): remove any once we upgrade to the latest TS
   }
   readonly code: OPAnimalType
+  get name() { return this.constructor.name } // prettier-ignore
   readonly focus: OPFocusType
-  get index(): number {
-    return this.opType.animalCodes.indexOf(this.code)
-  }
+  get index(): number { return this.opType.animalCodes.indexOf(this.code) } // prettier-ignore
   abstract get flipSide(): OPAnimal
   abstract get functions(): AnimalFunctionPair
-  get sex(): "MM" | "MF" | "FM" | "FF" {
-    return (this.observer.sex + this.decider.sex).toUpperCase() as any
-  }
-  get observer() {
-    return this.functions[0]
-  }
-  get decider() {
-    return this.functions[1]
-  }
-  get flipSideIsLast() {
-    return this.flipSide.index === 3
-  }
+  get sex(): "MM" | "MF" | "FM" | "FF" { return (this.observer.sex + this.decider.sex).toUpperCase() as any } // prettier-ignore
+  get observer() { return this.functions[0] } // prettier-ignore
+  get decider() { return this.functions[1] } // prettier-ignore
+  get flipSideIsLast() { return this.flipSide.index === 3 } // prettier-ignore
   get rawActivation() {
-    return 1 // TODO: implement
-    // const [{ activation: aO }, { activation: aD }] = this.functions
-    // return aO + aD
+    return (
+      2 -
+      this.index +
+      (this.flipSideIsLast ? 0.5 : 0) +
+      0.1 * ({ MM: 2, MF: 1, FM: -1, FF: -2 }[this.sex] ?? 0)
+    )
   }
+  get temperament() { return `${this.observer.code}${this.decider.code}` } // prettier-ignore
+  get label() { return `${this.sex} ${this.temperament} ${this.name}` } // prettier-ignore
 }
-abstract class Info extends OPAnimal {
+abstract class InfoAnimal extends OPAnimal {
   kind = "info"
 }
-abstract class Energy extends OPAnimal {
+abstract class EnergyAnimal extends OPAnimal {
   kind = "energy"
 }
 
-class Blast extends Info {
+export class Blast extends InfoAnimal {
   readonly code = "B" as "B"
   readonly focus = "e" as "e"
-  get flipSide() {
-    return this.opType.consume
-  }
-  get functions(): AnimalFunctionPair {
-    return [this.opType.iObserver, this.opType.eDecider]
-  }
+  get flipSide() { return this.opType.consume } // prettier-ignore
+  get functions(): AnimalFunctionPair { return [this.opType.iObserver, this.opType.eDecider] } // prettier-ignore
 }
-class Consume extends Info {
+export class Consume extends InfoAnimal {
   readonly code = "C" as "C"
   readonly focus = "i" as "i"
-  get flipSide() {
-    return this.opType.blast
-  }
-  get functions(): AnimalFunctionPair {
-    return [this.opType.eObserver, this.opType.iDecider]
-  }
+  get flipSide() { return this.opType.blast } // prettier-ignore
+  get functions(): AnimalFunctionPair { return [this.opType.eObserver, this.opType.iDecider] } // prettier-ignore
 }
-class Play extends Energy {
+export class Play extends EnergyAnimal {
   readonly code = "P" as "P"
   readonly focus = "e" as "e"
-  get flipSide() {
-    return this.opType.sleep
-  }
-  get functions(): AnimalFunctionPair {
-    return [this.opType.eObserver, this.opType.eDecider]
-  }
+  get flipSide() { return this.opType.sleep } // prettier-ignore
+  get functions(): AnimalFunctionPair { return [this.opType.eObserver, this.opType.eDecider] } // prettier-ignore
 }
-class Sleep extends Energy {
+export class Sleep extends EnergyAnimal {
   readonly code = "S" as "S"
   readonly focus = "i" as "i"
-  get flipSide() {
-    return this.opType.play
-  }
-  get functions(): AnimalFunctionPair {
-    return [this.opType.iObserver, this.opType.iDecider]
-  }
+  get flipSide() { return this.opType.play } // prettier-ignore
+  get functions(): AnimalFunctionPair { return [this.opType.iObserver, this.opType.iDecider] } // prettier-ignore
 }
 
-const IndexActivationMap = {
-  "-1": 0,
-  0: 4,
-  1: 3,
-  2: 2,
-  3: 1,
-}
-
-const activationReducer = (activation: number, { index }) =>
-  activation + IndexActivationMap[index]
-
-const activationCodeReducer = (activation: number, { index }) =>
-  activation + IndexActivationMap[index]
-
-export abstract class OPFn extends OPPart {
+abstract class OPFn extends OPPart {
+  get label() { return this.fullCode } // prettier-ignore
   code = "X"
   get saviorCode() {
-    const {
-      opFn: { index },
-      animals: [a1],
-    } = this
-    switch (a1.index) {
+    const { opFn, animals } = this
+    const { index } = opFn || {}
+    switch (animals[0]?.index) {
       case 0:
         return ["S1", "S2", "ERROR", "ERROR", "ERROR"][index]
-      case 1: //return 'A1'
-      case 2: //return 'A2'
+      case 1:
+        return "A"
+      case 2:
+        return "-"
       case 3:
         return index
     }
   }
   get activation1or2() {
-    return { 0: 1, 1: 1, 2: 1, 3: 2, 4: 2, 5: 2 }[this.activation]
-  }
-  get gapBetweenAnimals(): 0 | 1 | 2 {
-    return (this.animals[1].index - this.animals[0].index - 1) as any
-  }
-  get activationDetails() {
-    const {
-      opFn: { sex, index, grantStackIndex, savior },
-      animals: [fA1, fA2],
-      opType: {
-        animals: [a1, a2, a3, a4],
-      },
-      gapBetweenAnimals,
-    } = this
-    return {
-      index,
-      grantStackIndex,
-      sex,
-      gapBetweenAnimals,
-    }
-  }
-  get isPolar() {
-    return this.gapBetweenAnimals === 2
-  }
-  get isPairActive() {
-    return this.gapBetweenAnimals === 0
+    const [A1, A2] = this.animals
+    const [A1i, A2i] = [
+      (this.opType.animals as OPAnimal[]).indexOf(A1),
+      (this.opType.animals as OPAnimal[]).indexOf(A2),
+    ]
+    if (A1i === -1 || A2i === -1) return
+    return A1i === 3 || A2i === 3 ? 1 : 2
   }
+  get gapBetweenAnimals(): 0 | 1 | 2 { return (this.animals[1]?.index - this.animals[0]?.index - 1) as any } // prettier-ignore
+
+  get isPolar() { return this.gapBetweenAnimals === 2 } // prettier-ignore
+  get isPairActive() { return this.gapBetweenAnimals === 0 } // prettier-ignore
 
   get rawActivation() {
     const {
-      opFn: { sex, index, grantStackIndex, savior },
+      opFn,
       animals: [fA1, fA2],
       opType: {
         animals: [a1, a2, a3, a4],
       },
     } = this
+    const { sex, index, grantStackIndex, savior } = opFn || {}
+
     return [
       // savior,
-      this.isPairActive && fA1.index === 0 && sex === "m" && index === 0, // M double pair activated 1st
-      this.isPairActive && fA1.index === 0 && sex === "m" && index === 1, // M double pair activated 2nd
-      this.isPairActive && fA1.index === 0 && sex === "f" && index === 0, // F double pair activated 1st
-      this.isPairActive && fA1.index === 0 && sex === "f" && index === 1, // F double pair activated 2nd
+      // this.isPairActive && fA1.index === 0 && sex === "m" && index === 0, // M double pair activated 1st
+      // this.isPairActive && fA1.index === 0 && sex === "m" && index === 1, // M double pair activated 2nd
+      // this.isPairActive && fA1.index === 0 && sex === "f" && index === 0, // F double pair activated 1st
+      // this.isPairActive && fA1.index === 0 && sex === "f" && index === 1, // F double pair activated 2nd
 
-      9 - fA1.index,
-      2 - this.gapBetweenAnimals,
-      sex === "m",
-      9 - index,
+      1 + index,
+      1 + fA1?.index,
+      1 + fA2?.index,
+      // 2 - this.gapBetweenAnimals,
+      // sex === "m",
+
+      // { info: -1, energy: 1 }[fA1.kind] ?? 0,
 
       // this.isPairActive && fA1.index === 1 && index === 2 && sex === "m",
       // this.isPairActive && fA1.index === 1 && index === 2 && sex === "f",
@@ -909,10 +811,10 @@ export abstract class OPFn extends OPPart {
       .reverse()
       .reduceRight((acc, value, index) => acc + value * 10 ** index, 0)
   }
-  get animals(): [Info, Energy] | [Energy, Info] | [] {
+  get animals(): [InfoAnimal, EnergyAnimal] | [EnergyAnimal, InfoAnimal] | [] {
     const { opFn, opType } = this
     const { play, blast, consume, sleep } = opType
-    let animals: [Info, Energy] | [Energy, Info] | []
+    let animals: [InfoAnimal, EnergyAnimal] | [EnergyAnimal, InfoAnimal] | []
     switch (opFn?.odLetter + opFn?.focus) {
       case "Oi":
         animals = [sleep, blast]
@@ -931,41 +833,32 @@ export abstract class OPFn extends OPPart {
     }
     return animals.sort(sortByIndex)
   }
-  get opFn() {
-    return this.opType.opFunctions.filter(
-      ({ letter }) => letter === this.code,
-    )[0]
+  get opFn(): OPFunctionType | null {
+    return (
+      this.opType.opFunctions.filter(({ letter }) => letter === this.code)[0] ||
+      null
+    )
   }
   get fullCode() {
     const { sex, code, focus } = this
     return (sex === "?" ? "" : sex) + code + focus
   }
-  get sex() {
-    return this.opFn?.sex ?? "?"
-  }
-  get focus() {
-    return this.opFn?.focus ?? "?"
-  }
-  get index() {
-    return this.opFn?.index ?? -1
-  }
+  get sex() { return this.opFn?.sex ?? "?" } // prettier-ignore
+  get focus() { return this.opFn?.focus ?? "?" } // prettier-ignore
+  get index() { return this.opFn?.index ?? -1 } // prettier-ignore
 }
 abstract class DeciderFn extends OPFn {
   isObserver = false
   isDecider = true
   code = "D"
 }
-class Feeling extends DeciderFn {
+export class Feeling extends DeciderFn {
   readonly code = "F"
-  get flipSide() {
-    return this.opType.thinking
-  }
+  get flipSide() { return this.opType.thinking } // prettier-ignore
 }
-class Thinking extends DeciderFn {
+export class Thinking extends DeciderFn {
   readonly code = "T"
-  get flipSide() {
-    return this.opType.feeling
-  }
+  get flipSide() { return this.opType.feeling } // prettier-ignore
 }
 
 abstract class ObserverFn extends OPFn {
@@ -973,20 +866,16 @@ abstract class ObserverFn extends OPFn {
   isDecider = false
   code = "O"
 }
-class iNtuition extends ObserverFn {
+export class iNtuition extends ObserverFn {
   readonly code = "N"
-  get flipSide() {
-    return this.opType.sensing
-  }
+  get flipSide() { return this.opType.sensing } // prettier-ignore
 }
-class Sensing extends ObserverFn {
+export class Sensing extends ObserverFn {
   readonly code = "S"
-  get flipSide() {
-    return this.opType.intuition
-  }
+  get flipSide() { return this.opType.intuition } // prettier-ignore
 }
 
-const maybeBoolToIndex = (value: BoolMaybe) =>
+export const maybeBoolToIndex = (value: BoolMaybe) =>
   !isBool(value) ? 2 : value ? 1 : 0
 
 const AnimalCodeToAnimalLetter = {
@@ -996,6 +885,9 @@ const AnimalCodeToAnimalLetter = {
   OeDe: "P",
 }
 
+/**
+ * @deprecated
+ */
 const AnimalLetterFocusCodeToAnimalLetters = {
   Si: "C",
   Ci: "S",
@@ -1042,31 +934,3 @@ export const sideToDistance = (side: number | boolean): number =>
     : typeof side === "number"
     ? [0, -1, 1][side + 1] || 0
     : 0
-
-if (process.env.NODE_ENV !== "production") {
-  const assert = (test: () => boolean, message?: string) => {
-    console.log(
-      test.toString().replace(/^function \(\) {\s+|[;]|return\s+|\s*\}$/g, ""),
-    )
-    console.assert(test(), message)
-  }
-  const Tom = OPT512.from("fffesepbcs")
-  const Britt = OPT512.from("mmfisisbpc")
-
-  assert(() => Tom.functions[0].activation > 0)
-  assert(() => Britt.functions[0].activation > 0)
-
-  assert(() => Tom.feeling.activation > Tom.thinking.activation, "tF > tT")
-  assert(() => Tom.feeling.activation > Britt.feeling.activation, "tF > bF")
-
-  assert(() => Britt.feeling.activation < Britt.thinking.activation, "bF < bT")
-
-  console.log({
-    "B.f": Britt.feeling.activation,
-    "B.f+": JSON.stringify(Britt.feeling.activationDetails),
-
-    "T.f": Tom.feeling.activation,
-    "T.f+": JSON.stringify(Tom.feeling.activationDetails),
-  })
-  console.log("yay")
-}
diff --git a/components/opt-toy/OPTypeBinaryForm.tsx b/components/opt-toy/OPTypeBinaryForm.tsx
index 8c4a6ba..a4f1dca 100644
--- a/components/opt-toy/OPTypeBinaryForm.tsx
+++ b/components/opt-toy/OPTypeBinaryForm.tsx
@@ -14,6 +14,7 @@ export function OPTypeBinaryForm({
   if (!type) type = BLANK_TYPE
   const opType = new OPT512(type)
   return (
+    // <SVG_OP_Bubble color="red" width={128} children="Fe" />
     <div
       className="OPTypeBinaryForm"
       style={{
@@ -34,18 +35,49 @@ export function OPTypeBinaryForm({
           </tr>
         </tbody>
         <tbody>
-          {type.map((coinSide, coinIndex) => (
-            <CoinSideVirtual
-              key={coinIndex}
-              side={coinSide}
-              coin={COINS[coinIndex]}
-              onFlip={side => {
-                const newType = type.slice(0) as OPT512Maybe
-                newType[coinIndex] = side
-                onChange(newType)
-              }}
-            />
-          ))}
+          {type.map((coinSide, coinIndex) => {
+            const lastCoin = COINS[coinIndex - 1]
+            return (
+              <React.Fragment key={coinIndex}>
+                {lastCoin?.title !== COINS[coinIndex].title && (
+                  <>
+                    <tr>
+                      <td colSpan={3} style={{ paddingTop: 8 }} />
+                    </tr>
+                    <tr>
+                      <td
+                        colSpan={3}
+                        style={
+                          lastCoin && {
+                            textAlign: "center",
+                            fontWeight: "bold",
+                            // borderTop: "8px solid white",
+                            padding: "2px",
+                            background: "#DDD",
+                            fontSize: "85%",
+                            borderRadius: 999,
+                            borderBottomRightRadius: 0,
+                            borderBottomLeftRadius: 0,
+                          }
+                        }
+                      >
+                        {COINS[coinIndex].title}
+                      </td>
+                    </tr>
+                  </>
+                )}
+                <CoinSideVirtual
+                  side={coinSide}
+                  coin={COINS[coinIndex]}
+                  onFlip={(side) => {
+                    const newType = type.slice(0) as OPT512Maybe
+                    newType[coinIndex] = side
+                    onChange(newType)
+                  }}
+                />
+              </React.Fragment>
+            )
+          })}
         </tbody>
 
         <tbody style={{ background: "#ddd" }}>
@@ -72,12 +104,12 @@ export function OPTypeBinaryForm({
           <CoinSideVirtual
             side={opType.sideOfEnergyInfo}
             coin={{
+              description: "Dominant",
               heads: "Info",
               tails: "Energy",
             }}
-            onFlip={side => {
-              opType.a3FocusBool = side == null ? null : !opType.a3FocusBool
-              onChange(opType.type)
+            onFlip={(side) => {
+              console.warn("modifying sideOfEnergyInfo Not implemented")
             }}
           />
           <CoinSideVirtual2
@@ -93,8 +125,8 @@ export function OPTypeBinaryForm({
           />
           <CoinSideVirtual2
             side={opType.sideOfSFNT}
-            tails="SF"
-            heads="NT"
+            tails="NT"
+            heads="SF"
             edge={"OD"}
             onFlipWithXx={(OOO, DDD) => {
               opType.oLetter = OOO
@@ -150,19 +182,26 @@ export function OPTypeBinaryForm({
         </tbody>
       </table>
     </div>
-    // <SVG_OP_Bubble color="red" width={128} children="Fe" />
   )
 }
 
-function CoinSideVirtual2({ side, heads, tails, edge, onFlipWithXx }) {
+function CoinSideVirtual2({
+  description = "",
+  side,
+  heads,
+  tails,
+  edge,
+  onFlipWithXx,
+}) {
   return (
     <CoinSideVirtual
       side={side}
       coin={{
+        description,
         heads,
         tails,
       }}
-      onFlip={side => {
+      onFlip={(side) => {
         onFlipWithXx(
           !isBool(side) ? edge[0] : side ? heads[0] : tails[0],
           !isBool(side) ? edge[1] : side ? heads[1] : tails[1],
diff --git a/components/opt-toy/OptToyApp.tsx b/components/opt-toy/OptToyApp.tsx
index 29507b8..60a3422 100644
--- a/components/opt-toy/OptToyApp.tsx
+++ b/components/opt-toy/OptToyApp.tsx
@@ -1,10 +1,11 @@
-import React, { FC } from "react"
+import React, { FC, useEffect } from "react"
 import { useState } from "react"
 import { betweenRootStylesX, betweenX } from "./between"
 import { KnownTypes, SelectedTypes } from "./KnownTypes"
 import { useQueryDataKey } from "./ParsedQuery"
 import { TypeThing, TypeThingProps } from "./TypeThing"
 import { GlobalDefs } from "./OPBubbles4"
+import { isSSR } from "../../util/constants"
 
 let UID = -1 // user as a unique key for each type
 const getNextUID = () => ++UID
@@ -182,14 +183,56 @@ const DragableTypeThing: FC<
   )
 }
 
+function useLocationHash() {
+  const [renderId, setRenderId] = useState(-1)
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const handleHashChange = () => setRenderId((n) => n + 1)
+    window.addEventListener("hashchange", handleHashChange, false)
+    return () =>
+      window.removeEventListener("hashchange", handleHashChange, false)
+  }, [])
+  const { hash } = location
+  return hash
+}
+
+const Settings: FC<{
+  showOPTable: boolean
+  setShowOPTable: (show: ["0" | "1"]) => unknown
+}> = ({ showOPTable, setShowOPTable }) => {
+  const hash = useLocationHash()
+  return (
+    <div className="settings">
+      <style jsx>{`
+        .settings {
+          padding: 1rem;
+          background: #ddd;
+          display: flex;
+        }
+      `}</style>
+      <label>
+        <input
+          type="checkbox"
+          checked={showOPTable}
+          onChange={({ target: { checked } }) =>
+            void setShowOPTable(!checked ? ["0"] : ["1"])
+          }
+        />
+        show OP table?
+      </label>
+      <Spacer />
+      <div className="old">
+        <a href={`https://opt-toy-h8kz9h0ex.vercel.app/${hash}`}>
+          Open in previous version of opt-toy
+        </a>
+      </div>
+    </div>
+  )
+}
+
 export default function OptToyApp() {
-  const {
-    setOPTypeTextAtIndex,
-    typeIDs,
-    typeIDInsertBefore,
-    types,
-    addType,
-  } = useStuff()
+  const { setOPTypeTextAtIndex, typeIDs, typeIDInsertBefore, types, addType } =
+    useStuff()
   const [showKnowns, setShowKnown] = useQueryDataKey("showKnown", [])
   const showKnown = showKnowns.length > 0
   const [showSettings, setShowSettings] = useState(false)
@@ -246,18 +289,10 @@ export default function OptToyApp() {
 
         <div className="settings">
           {showSettings && (
-            <div>
-              <label>
-                <input
-                  type="checkbox"
-                  checked={showOPTable}
-                  onChange={({ target: { checked } }) =>
-                    void setShowOPTable(!checked ? ["0"] : ["1"])
-                  }
-                />
-                show OP table?
-              </label>
-            </div>
+            <Settings
+              setShowOPTable={setShowOPTable}
+              showOPTable={showOPTable}
+            ></Settings>
           )}
         </div>
 
@@ -265,27 +300,28 @@ export default function OptToyApp() {
           {showKnown && <KnownTypes addType={addType} />}
         </div>
 
-        <div
-          className="all-the-TypeThings"
-          style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}
-        >
-          {types.map((defaultType, index) => (
-            <DragableTypeThing
-              key={typeIDs[index]}
-              tID={typeIDs[index]}
-              onDropOnto={typeIDInsertBefore}
-              {...{
-                onClose: () => void setOPTypeTextAtIndex(index, null),
-                onChangeText: (opTypeText: any) =>
-                  void setOPTypeTextAtIndex(index, opTypeText),
-                selected: types.length === 1,
-                defaultType,
-                showOPTable,
-              }}
-            />
-          ))}
-        </div>
-        
+        {!isSSR && (
+          <div
+            className="all-the-TypeThings"
+            style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}
+          >
+            {types.map((defaultType, index) => (
+              <DragableTypeThing
+                key={typeIDs[index]}
+                tID={typeIDs[index]}
+                onDropOnto={typeIDInsertBefore}
+                {...{
+                  onClose: () => void setOPTypeTextAtIndex(index, null),
+                  onChangeText: (opTypeText: any) =>
+                    void setOPTypeTextAtIndex(index, opTypeText),
+                  selected: types.length === 1,
+                  defaultType,
+                  showOPTable,
+                }}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </SelectedTypes.Provider>
   )
diff --git a/components/opt-toy/TypeThing.tsx b/components/opt-toy/TypeThing.tsx
index e90024f..29719b2 100644
--- a/components/opt-toy/TypeThing.tsx
+++ b/components/opt-toy/TypeThing.tsx
@@ -1,20 +1,20 @@
-import React, { FC, useEffect, useState, createContext } from "react"
+import React, { FC, useEffect, useState, createContext, useMemo } from "react"
 import useUndo from "use-undo"
 import { AOPActivationSpectrums } from "./AOPActivationSpectrums"
 import AOPActivationTable from "./AOPActivationTable"
 import { betweenX } from "./between"
-import { BLANK_TYPE, cleanCoinText, OPT512Maybe, parseCoinText } from "./Coin"
+import { BLANK_TYPE, OPT512Maybe, parseCoinText } from "./Coin"
 import OPActivationTable from "./OPActivationTable"
 import { OPCodeInput } from "./OPCodeInput"
 import { OPTGraph } from "./opt128-svgr"
-import { OPT512 } from "./OPT512"
+import { cleanCoinText, OPT512 } from "./OPT512"
 import { OPTypeBinaryForm } from "./OPTypeBinaryForm"
 
 const isSSR = typeof window === "undefined"
 
 function OPTypeBinaryText({ type }: { type: OPT512Maybe }) {
   const opt = new OPT512(type)
-  return <span>{opt.OP512}</span>
+  return <span>{opt.OPSCode}</span>
 }
 
 const SEPARATOR = `!`
@@ -38,7 +38,7 @@ const History = (props) => (
       redo
     </button>
     <button
-      key="reset"
+      key="clear"
       onClick={() =>
         props.opTypeActions.reset({
           name: "",
@@ -46,7 +46,7 @@ const History = (props) => (
         })
       }
     >
-      reset
+      clear
     </button>
   </div>
 )
@@ -68,39 +68,44 @@ export type TypeThingProps = {
   HTMLDivElement
 >
 
+type NameAndTypeText = {
+  name: string
+  typeText: string
+}
+
 export const TypeThing: FC<TypeThingProps> = ({
   selected = false,
-  defaultType,
+  defaultType: defaultTypeAndName,
   onClose = null,
   onChangeText = null,
   showOPTable = true,
   ...props
 }) => {
-  useEffect(() => {
-    opTypeActions.reset({
-      name: String(defaultType.split(SEPARATOR)[1] || ""),
-      type: parseCoinText(cleanCoinText(defaultType.split(SEPARATOR)[0])),
-    })
-  }, [])
+  const defaultState = useMemo<NameAndTypeText>(
+    () => ({
+      name: String(defaultTypeAndName.split(SEPARATOR)[1] || ""),
+      typeText: defaultTypeAndName
+        ? cleanCoinText(defaultTypeAndName.split(SEPARATOR)[0])
+        : "",
+    }),
+    [defaultTypeAndName],
+  )
+  const [name, setName] = useState(defaultState.name)
+  const [type, setType] = useState<OPT512Maybe>(
+    () => OPT512.from(defaultState.typeText).type,
+  )
+  const opTypeInstance = new OPT512(type)
+  const typeText = opTypeInstance.OPSCode
 
-  const [isOpen, setIsOpen] = useState(selected)
-  const [opType, opTypeActions] = useUndo({
-    name: "loading...",
-    type: BLANK_TYPE,
-  })
-  const opTypeInstance = new OPT512(opType.present.type)
-  const typeText = opTypeInstance.OP512
+  useEffect(() => {
+    console.log(opTypeInstance)
+  }, [typeText, ...type])
 
   useEffect(() => {
-    if (opType.past.length === 0) return
-    if (onChangeText) {
-      onChangeText(
-        `${typeText}${
-          opType.present.name ? SEPARATOR + opType.present.name : ""
-        }`,
-      )
-    }
-  }, [opType.present.name, typeText])
+    onChangeText?.(`${typeText}${name ? SEPARATOR + name : ""}`)
+  }, [name, typeText])
+
+  const [isOpen, setIsOpen] = useState(selected)
 
   const placeholderName = `${opTypeInstance.S1}/${opTypeInstance.S2}`
   return (
@@ -164,19 +169,12 @@ export const TypeThing: FC<TypeThingProps> = ({
               <input
                 style={{ font: "inherit", textAlign: "center", color: "#333" }}
                 onClick={(e) => e.stopPropagation()}
-                onChange={(e) =>
-                  opTypeActions.set({
-                    type: opType.present.type,
-                    name: e.currentTarget.value,
-                  })
-                }
-                value={opType.present.name}
+                onChange={({ currentTarget: { value: name } }) => setName(name)}
+                value={name}
                 placeholder={placeholderName}
               />
             ) : (
-              <div style={{ padding: 3 }}>
-                {opType.present.name || placeholderName}
-              </div>
+              <div style={{ padding: 3 }}>{name || placeholderName}</div>
             )}
           </h3>
         </div>
@@ -189,14 +187,12 @@ export const TypeThing: FC<TypeThingProps> = ({
               <OPCodeInput
                 style={{ font: "inherit", textAlign: "center" }}
                 onClick={(e) => e.stopPropagation()}
-                coins={opTypeInstance.type}
-                onParsed={(type) => {
-                  opTypeActions.set({ name: opType.present.name, type })
-                }}
+                opType={opTypeInstance}
+                onChange={(opType) => setType(opType.type)}
               />
             ) : (
               <div style={{ padding: 3 }}>
-                <OPTypeBinaryText type={opTypeInstance.type} />
+                <OPTypeBinaryText type={type} />
               </div>
             )}
           </h4>
@@ -207,7 +203,9 @@ export const TypeThing: FC<TypeThingProps> = ({
           </div>
         )}
         <AOPActivationTable op512={opTypeInstance} />
-        {opTypeInstance.isFull && <AOPActivationSpectrums op512={opTypeInstance} />}
+        {opTypeInstance.isFull && (
+          <AOPActivationSpectrums op512={opTypeInstance} />
+        )}
         <div style={{ height: betweenX(8, 16) }}></div>
       </div>
       {isOpen && (
@@ -222,8 +220,8 @@ export const TypeThing: FC<TypeThingProps> = ({
             }}
           >
             <Permalink typeText={typeText}></Permalink>
-            <Spacer />
-            <History opTypeActions={opTypeActions}></History>
+            {/* <Spacer /> */}
+            {/* <History opTypeActions={opTypeUndoActions}></History> */}
             <Spacer />
             {onClose && (
               <button onClick={onClose} title="Delete">
@@ -231,12 +229,7 @@ export const TypeThing: FC<TypeThingProps> = ({
               </button>
             )}
           </div>
-          <OPTypeBinaryForm
-            type={opType.present.type}
-            onChange={(type) => {
-              opTypeActions.set({ name: opType.present.name, type })
-            }}
-          />
+          <OPTypeBinaryForm type={type} onChange={setType} />
         </div>
       )}{" "}
     </div>
diff --git a/components/opt-toy/euclideanDistance.ts b/components/opt-toy/euclideanDistance.ts
index f5044c9..fdbfcd0 100644
--- a/components/opt-toy/euclideanDistance.ts
+++ b/components/opt-toy/euclideanDistance.ts
@@ -1,4 +1,5 @@
 export const euclideanDistance = (aaa: number[], bbb: number[]) => {
+  if (!(aaa && bbb)) return NaN;
   return Math.sqrt(euclideanDistanceSquared(aaa, bbb))
 }
 
diff --git a/components/opt-toy/opt128-svgr.tsx b/components/opt-toy/opt128-svgr.tsx
index 651f698..d5d67cf 100644
--- a/components/opt-toy/opt128-svgr.tsx
+++ b/components/opt-toy/opt128-svgr.tsx
@@ -4,12 +4,16 @@ import { SVG_OP_Bubble, SVG_OP_Bubble_border } from "./SVG_OP_Bubble"
 import { bubbleTextStyle } from "./SVG_OP_BubbleText"
 import { OPFunctionType, OPT512 } from "./OPT512"
 import { download } from "../../util/download"
-import { renderToStaticMarkup } from 'react-dom/server'
+import { renderToStaticMarkup } from "react-dom/server"
+import { isSSR } from "../../util/constants"
 
 export const OPTGraph = forwardRef<
   SVGSVGElement,
   { opType: OPT512 } & React.SVGProps<SVGSVGElement>
 >(({ opType, ...props }, svgRef0) => {
+  if (isSSR) {
+    return null
+  }
   const svgRef = useRef<SVGSVGElement>()
   const { opFunctions } = opType
   const opAnimals = {
@@ -39,7 +43,10 @@ export const OPTGraph = forwardRef<
       onContextMenu={(e) => {
         download(
           opType.toString().replace(/[-/()]/g, "") + ".svg",
-          svgRef.current.outerHTML.replace(`</svg>`,`${renderToStaticMarkup(<Defs/>)}</svg>`),
+          svgRef.current.outerHTML.replace(
+            `</svg>`,
+            `${renderToStaticMarkup(<Defs />)}</svg>`,
+          ),
         )
       }}
     >
diff --git a/components/opt-toy/sortBy.tsx b/components/opt-toy/sortBy.tsx
index d2cef93..4f9d1ea 100644
--- a/components/opt-toy/sortBy.tsx
+++ b/components/opt-toy/sortBy.tsx
@@ -2,7 +2,8 @@ export const sortBy = (a: string | number, b: string | number) =>
   a > b ? 1 : b > a ? -1 : 0
 
 export const sorterize = <T extends any>(
-  getSortValue: (thing: T) => number | string,
-) => (a: T, b: T) => sortBy(getSortValue(a), getSortValue(b))
+  getSortValue: (thing: T) => any,
+  _sortBy: typeof sortBy = sortBy
+) => (a: T, b: T) => _sortBy(getSortValue(a), getSortValue(b))
 
 export const sortByRandom = sorterize(Math.random)
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
new file mode 100644
index 0000000..a99f754
--- /dev/null
+++ b/config/jest/cssTransform.js
@@ -0,0 +1,9 @@
+// https://jestjs.io/docs/code-transformation#writing-custom-transformers
+module.exports = {
+  process() {
+    return "module.exports = {};"
+  },
+  getCacheKey() {
+    return "cssTransform"
+  },
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..a2a6ff1
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,21 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  collectCoverageFrom: [
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/*.d.ts",
+    "!**/node_modules/**",
+  ],
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
+  testPathIgnorePatterns: ["/node_modules/", "/.next/"],
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+  },
+  transformIgnorePatterns: [
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
+  moduleNameMapper: {
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+  },
+}
diff --git a/next-env.d.ts b/next-env.d.ts
index 7b7aa2c..c6643fd 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/package.json b/package.json
index fce2db0..6fcb186 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,39 @@
 {
   "name": "@opdex/toy",
-  "version": "10.0.0",
+  "version": "11.0.0",
   "private": true,
   "prettier": {
     "trailingComma": "all",
-    "semi": false
+    "semi": false,
+    "printWidth": 80
   },
   "main": "./components/opt-toy/index.tsx",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
   },
   "dependencies": {
-    "next": "10.0.5",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "next": "11.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "use-undo": "^1.0.3"
   },
   "devDependencies": {
-    "@types/node": "^14.14.21",
+    "@babel/core": "^7.14.8",
+    "@babel/preset-env": "^7.14.8",
+    "@babel/preset-typescript": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/node": "^16.4.12",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "babel-jest": "^27.0.6",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.6",
+    "react-test-renderer": "^17.0.2",
     "typescript": "^4.1.3"
   }
 }
diff --git a/setupTests.js b/setupTests.js
new file mode 100644
index 0000000..9b5f04e
--- /dev/null
+++ b/setupTests.js
@@ -0,0 +1,6 @@
+// optional: configure or set up a testing framework before each test
+// if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// used for __tests__/testing-library.js
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom/extend-expect"
diff --git a/util/constants.ts b/util/constants.ts
new file mode 100644
index 0000000..0319a77
--- /dev/null
+++ b/util/constants.ts
@@ -0,0 +1 @@
+export const isSSR = typeof window === "undefined"