mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-04-26 07:39:59 -07:00
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
/**
|
||
* 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 };
|
||
}
|