Update typescript: 4.7.4 → 4.8.2 (minor)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

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>
+  )
+}