global: snap

website/scripts/explorer/cube.js

@@ -0,0 +1,51 @@
+/**
+ * HTML cube generator. Populates a .cube element with 15 face divs
+ * styled in explorer.css. Uses pure CSS transforms (no SVG); the
+ * earlier SVG-based implementation broke in Safari due to its
+ * long-standing bugs around SVG transforms on <foreignObject>.
+ *
+ * Face order = z-order:
+ *   3× .glass  rear   — translucent glass back faces
+ *   3× .liquid rear   — opaque liquid backing (hidden at fill 0)
+ *   3× .liquid front  — opaque liquid front (the visible 3 faces)
+ *   3× .glass  front  — translucent glass front
+ *   3× .face-text     — text overlays (top / right / left)
+ *
+ * @param {HTMLElement} cube
+ * @param {number} [fill]
+ * @returns {{ topFace: HTMLDivElement, rightFace: HTMLDivElement, leftFace: HTMLDivElement }}
+ */
+export function createCube(cube, fill = 1) {
+  cube.style.setProperty("--fill", String(fill));
+
+  /** @param {...string} cls */
+  const face = (...cls) => {
+    const d = document.createElement("div");
+    d.className = `face ${cls.join(" ")}`;
+    return /** @type {HTMLDivElement} */ (d);
+  };
+
+  const topFace   = face("face-text", "top");
+  const rightFace = face("face-text", "right");
+  const leftFace  = face("face-text", "left");
+
+  cube.append(
+    face("glass",  "bottom"),
+    face("glass",  "rear-right"),
+    face("glass",  "rear-left"),
+    face("liquid", "bottom"),
+    face("liquid", "rear-right"),
+    face("liquid", "rear-left"),
+    face("liquid", "right"),
+    face("liquid", "left"),
+    face("liquid", "top"),
+    face("glass",  "right"),
+    face("glass",  "left"),
+    face("glass",  "top"),
+    rightFace,
+    leftFace,
+    topFace,
+  );
+
+  return { topFace, rightFace, leftFace };
+}