From 0ffe6c39b15207cb68494dc383b2e183de32cab3 Mon Sep 17 00:00:00 2001
From: RGBCube <git@rgbcu.be>
Date: Tue, 3 Jun 2025 03:50:41 +0300
Subject: [PATCH] cube: multicube support

---
 site/404.vto            |  1 +
 site/_includes/cube.vto | 13 +++++++++----
 site/index.vto          |  1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/site/404.vto b/site/404.vto
index ec2edba..10fc0c2 100644
--- a/site/404.vto
+++ b/site/404.vto
@@ -39,4 +39,5 @@ prevent_zoom: true
 {{ set cube_face_bottom = cube_face }}
 
 {{ set cube_size = "5rem" }}
+{{ set cube_last = true }}
 {{ include "cube.vto" }}
diff --git a/site/_includes/cube.vto b/site/_includes/cube.vto
index 8740086..fd4c4ed 100644
--- a/site/_includes/cube.vto
+++ b/site/_includes/cube.vto
@@ -1,3 +1,4 @@
+{{ if cube_last }}
 <style>
   cube-face {
     height: {{ cube_size }};
@@ -14,6 +15,7 @@
   .cube-face-right  { transform: rotateY( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
   .cube-face-left   { transform: rotateY(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
 </style>
+{{ /if }}
 
 <cube-scene class="
   flex items-center justify-center
@@ -33,6 +35,7 @@
   </cube-itself>
 </cube-scene>
 
+{{ if cube_last }}
 <script>
   "use strict";
 
@@ -117,15 +120,16 @@
   };
 
   const orient = {
-    element: document.querySelector("cube-itself"),
+    elements: document.querySelectorAll("cube-itself"),
     quat: Quat(0, 0, 0, 1),
 
     set(q) {
       this.quat = q;
 
-      this.element.style.transform = `rotate3d(${q.x}, ${q.y}, ${q.z}, ${
-        Math.acos(q.w) * 2
-      }rad)`;
+      for (const element of this.elements) {
+        element.style.transform =
+          `rotate3d(${q.x}, ${q.y}, ${q.z}, ${Math.acos(q.w) * 2}rad)`;
+      }
     },
 
     get() {
@@ -265,3 +269,4 @@
 
   updateFrame(0);
 </script>
+{{ /if }}
diff --git a/site/index.vto b/site/index.vto
index 1e32257..576b2ef 100644
--- a/site/index.vto
+++ b/site/index.vto
@@ -42,4 +42,5 @@ prevent_zoom: true
 {{ /set }}
 
 {{ set cube_size = "5rem" }}
+{{ set cube_last = true }}
 {{ include "rgbcube.vto" }}