feat: 3-state projection toggle, English UI titles, fix simple mode

2026-02-24 18:05:32 +00:00
parent 4be710a69f
commit 97157ddb7a
4 changed files with 151 additions and 100 deletions
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { Sun, Moon, Grid2x2, Layers } from "lucide-vue-next";
-import { ref, onMounted } from "vue";
+import { Sun, Moon, Grid2x2, Layers, Layers2, LayersPlus } from "lucide-vue-next";
+import { ref, onMounted, computed } from "vue";
 import { useSettings } from "../composables/useSettings";

-const { isCubeTranslucent, toggleCubeTranslucent, showFaceProjections, toggleFaceProjections } = useSettings();
+const { isCubeTranslucent, toggleCubeTranslucent, projectionMode, cycleProjectionMode } = useSettings();
 const isDark = ref(true);

 const setTheme = (dark) => {
@@ -17,6 +17,12 @@ const toggleTheme = () => {
  setTheme(!isDark.value);
 };

+const projectionTitle = computed(() => {
+  if (projectionMode.value === 0) return 'Show rear face projections';
+  if (projectionMode.value === 1) return 'Enable animated projections';
+  return 'Disable projections';
+});
+
 onMounted(() => {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme) {
@@ -40,33 +46,31 @@ onMounted(() => {
        @click="toggleCubeTranslucent"
        :title="
          isCubeTranslucent
-            ? 'Wyłącz przezroczystość kostki'
-            : 'Włącz przezroczystość kostki'
+            ? 'Disable cube transparency'
+            : 'Enable cube transparency'
        "
        :class="{ active: isCubeTranslucent }"
      >
        <Grid2x2 :size="20" />
      </button>

-      <!-- Face Projections Toggle -->
+      <!-- Face Projections Toggle (3-state) -->
      <button
        class="btn-neon nav-btn icon-only"
-        @click="toggleFaceProjections"
-        :title="
-          showFaceProjections
-            ? 'Ukryj podgląd tylnych ścian'
-            : 'Pokaż podgląd tylnych ścian'
-        "
-        :class="{ active: showFaceProjections }"
+        @click="cycleProjectionMode"
+        :title="projectionTitle"
+        :class="{ active: projectionMode > 0 }"
      >
-        <Layers :size="20" />
+        <Layers2 v-if="projectionMode === 0" :size="20" />
+        <Layers v-else-if="projectionMode === 1" :size="20" />
+        <LayersPlus v-else :size="20" />
      </button>

      <!-- Theme Toggle -->
      <button
        class="btn-neon nav-btn icon-only"
        @click="toggleTheme"
-        :title="isDark ? 'Przełącz na jasny' : 'Przełącz na ciemny'"
+        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
      >
        <Sun v-if="isDark" :size="20" />
        <Moon v-else :size="20" />
--- a/src/components/renderers/FaceProjections.vue
+++ b/src/components/renderers/FaceProjections.vue
@@ -7,9 +7,12 @@ const props = defineProps({
  viewMatrix: { type: Array, required: true },
  FACES: { type: Object, required: true },
  SCALE: { type: Number, default: 100 },
+  activeLayer: { type: Object, default: null },
+  currentLayerRotation: { type: Number, default: 0 },
+  animateLayers: { type: Boolean, default: false },
 });

-// The 6 face definitions with logical-space normals and grid axes
+// Face definitions with logical normals and grid axes
 const FACE_DEFS = computed(() => {
  const F = props.FACES;
  return [
@@ -22,27 +25,40 @@ const FACE_DEFS = computed(() => {
  ];
 });

-// Determine which 3 faces are hidden (transformed normal Z < 0 in CSS space)
-const hiddenFaces = computed(() => {
+// Which faces are hidden (for static cells)
+const hiddenFaceKeys = computed(() => {
  const m = props.viewMatrix;
-  return FACE_DEFS.value.filter((fd) => {
+  const keys = new Set();
+  for (const fd of FACE_DEFS.value) {
    const [nx, ny, nz] = fd.normal;
-    // viewMatrix is in CSS space where Y is inverted, so negate ny
-    const cssNy = -ny;
-    const tz = nx * m[2] + cssNy * m[6] + nz * m[10];
-    return tz < 0; // Pointing away from camera = hidden
-  });
+    const tz = nx * m[2] + (-ny) * m[6] + nz * m[10];
+    if (tz < 0) keys.add(fd.faceKey);
+  }
+  return keys;
 });

-// For each hidden face, extract the 3x3 grid of sticker colors and 3D transform
-const faceGrids = computed(() => {
-  const S = props.SCALE;
-  const dist = REAR_FACE_DISTANCE * S * 3; // distance in px (cube width = 3*SCALE)
+// Orientation: cells face INWARD (toward cube center)
+// Combined with backface-visibility: hidden, this means:
+// - hidden face cells: front faces camera → visible
+// - visible face cells: front faces away → invisible
+// - rotating cells crossing the plane: naturally swap visibility
+const inwardRotation = (nx, ny, nz) => {
+  if (nx === 1) return 'rotateY(-90deg)';
+  if (nx === -1) return 'rotateY(90deg)';
+  if (ny === 1) return 'rotateX(-90deg)';
+  if (ny === -1) return 'rotateX(90deg)';
+  if (nz === -1) return ''; // front faces +Z (toward camera)
+  return 'rotateY(180deg)'; // nz === 1: flip to face -Z (toward center)
+};

-  return hiddenFaces.value.map((fd) => {
+// Build cells for one face
+const buildFaceCells = (fd, S, dist, al, rot, isRotatingOnly) => {
  const [nx, ny, nz] = fd.normal;
+  const [gu, gv] = [fd.gridU, fd.gridV];
+  const orient = inwardRotation(nx, ny, nz);
+  const d = S * 1.5 + dist;
+  const cells = [];

-    // Get the 9 cubies on this face
  const faceCubies = props.cubies.filter((c) => {
    if (nx !== 0) return c.x === nx;
    if (ny !== 0) return c.y === ny;
@@ -50,81 +66,108 @@ const faceGrids = computed(() => {
    return false;
  });

-    // Build 3x3 grid: map cubie positions to grid cells
-    const [gu, gv] = [fd.gridU, fd.gridV];
-    const cells = [];
-    for (let v = 1; v >= -1; v--) { // top to bottom
-      for (let u = -1; u <= 1; u++) { // left to right
+  for (let v = 1; v >= -1; v--) {
+    for (let u = -1; u <= 1; u++) {
      const cx = nx * Math.max(Math.abs(nx), 0) || u * gu[0] + v * gv[0];
      const cy = ny * Math.max(Math.abs(ny), 0) || u * gu[1] + v * gv[1];
      const cz = nz * Math.max(Math.abs(nz), 0) || u * gu[2] + v * gv[2];

+      const inLayer = al && (
+        (al.axis === 'x' && cx === al.index) ||
+        (al.axis === 'y' && cy === al.index) ||
+        (al.axis === 'z' && cz === al.index)
+      );
+
+      // Skip: if isRotatingOnly, only include rotating cells
+      // If not isRotatingOnly (hidden face), include non-rotating cells
+      if (isRotatingOnly && !inLayer) continue;
+      if (!isRotatingOnly && inLayer && props.animateLayers) continue;
+
      const cubie = faceCubies.find(
        (c) => c.x === cx && c.y === cy && c.z === cz
      );
      const color = cubie ? cubie.faces[fd.faceKey] || 'black' : 'black';
-        cells.push(color);
-      }
+
+      // 3D position
+      const posX = nx * d + u * gu[0] * S + v * gv[0] * S;
+      const posY = ny * d + u * gu[1] * S + v * gv[1] * S;
+      const posZ = nz * d + u * gu[2] * S + v * gv[2] * S;
+
+      let transform = `translate3d(${posX}px, ${-posY}px, ${posZ}px) ${orient}`;
+
+      // Rotating cells: prepend rotation around scene center (only in advanced mode)
+      if (props.animateLayers && inLayer && rot !== 0) {
+        let rotPre = '';
+        if (al.axis === 'x') rotPre = `rotateX(${-rot}deg)`;
+        else if (al.axis === 'y') rotPre = `rotateY(${rot}deg)`;
+        else if (al.axis === 'z') rotPre = `rotateZ(${-rot}deg)`;
+        transform = `${rotPre} ${transform}`;
      }

-    // Position: ALONG the normal direction (behind the cube from camera's perspective)
-    const d = S * 1.5 + dist;
-    const offsetX = nx * d;
-    const cssY = -ny * d; // Logical Y → CSS Y (inverted)
-    const offsetZ = nz * d;
-
-    let transform = `translate3d(${offsetX}px, ${cssY}px, ${offsetZ}px)`;
-
-    // Rotate panel to face OUTWARD from cube center
-    if (nx === 1) transform += ' rotateY(90deg)';
-    else if (nx === -1) transform += ' rotateY(-90deg)';
-    else if (ny === 1) transform += ' rotateX(90deg)';
-    else if (ny === -1) transform += ' rotateX(-90deg)';
-    else if (nz === -1) transform += ' rotateY(180deg)';
-    // nz === 1: default orientation (front faces +z)
-
-    return {
-      faceKey: fd.faceKey,
-      cells,
+      cells.push({
+        key: `${fd.faceKey}-${u}-${v}`,
+        color,
        transform,
-    };
      });
+    }
+  }
+  return cells;
+};
+
+// All cells to render
+const allCells = computed(() => {
+  const S = props.SCALE;
+  const dist = REAR_FACE_DISTANCE * S * 3;
+  const al = props.activeLayer;
+  const rot = props.currentLayerRotation;
+  const cells = [];
+
+  for (const fd of FACE_DEFS.value) {
+    const isHidden = hiddenFaceKeys.value.has(fd.faceKey);
+
+    if (isHidden) {
+      // Hidden face: render non-rotating cells (static projections)
+      cells.push(...buildFaceCells(fd, S, dist, al, rot, false));
+    }
+
+    // ALL faces: render rotating-layer cells (they swap via backface-visibility)
+    if (props.animateLayers && al && rot !== 0) {
+      cells.push(...buildFaceCells(fd, S, dist, al, rot, true));
+    }
+  }
+
+  return cells;
 });
 </script>

 <template>
+  <div class="face-projections-root">
    <div
-    v-for="grid in faceGrids"
-    :key="grid.faceKey"
-    class="face-projection"
-    :style="{ transform: grid.transform }"
-  >
-    <div
-      v-for="(color, idx) in grid.cells"
-      :key="idx"
+      v-for="cell in allCells"
+      :key="cell.key"
      class="proj-cell"
-      :class="color"
+      :class="cell.color"
+      :style="{ transform: cell.transform }"
    ></div>
  </div>
 </template>

 <style scoped>
-.face-projection {
+.face-projections-root {
  position: absolute;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  width: 300px;
-  height: 300px;
-  /* Center the grid on its position */
-  margin-left: -150px;
-  margin-top: -150px;
+  transform-style: preserve-3d;
 }

 .proj-cell {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
+  margin-top: -50px;
  box-sizing: border-box;
  background: #000;
  border: 1px solid #000;
-  position: relative;
+  backface-visibility: hidden;
 }

 .proj-cell::after {
--- a/src/components/renderers/SmartCube.vue
+++ b/src/components/renderers/SmartCube.vue
@@ -15,7 +15,7 @@ import { getFaceNormal as getFaceNormalRaw, getAllowedAxes as getAllowedAxesRaw,
 import { tokenReducer } from "../../utils/tokenReducer.js";

 const { cubies, deepCubeState, initCube, rotateLayer, rotateSlice, turn, FACES, solve, solveResult, solveError, isSolverReady } = useCube();
-const { isCubeTranslucent, showFaceProjections } = useSettings();
+const { isCubeTranslucent, projectionMode } = useSettings();

 // Bind FACES and viewMatrix to imported helpers
 const getFaceNormal = (face) => getFaceNormalRaw(face, FACES);
@@ -881,11 +881,14 @@ onUnmounted(() => {
      </div>

      <FaceProjections
-        v-if="showFaceProjections"
+        v-if="projectionMode > 0"
        :cubies="cubies"
        :view-matrix="viewMatrix"
        :FACES="FACES"
        :SCALE="SCALE"
+        :active-layer="activeLayer"
+        :current-layer-rotation="currentLayerRotation"
+        :animate-layers="projectionMode === 2"
      />
    </div>

--- a/src/composables/useSettings.js
+++ b/src/composables/useSettings.js
@@ -8,16 +8,17 @@ try {
  }
 } catch (e) { }

-let initialShowFaceProjections = false;
+// 0 = off, 1 = simple projections, 2 = advanced (animated layers)
+let initialProjectionMode = 0;
 try {
-  const stored = localStorage.getItem("showFaceProjections");
+  const stored = localStorage.getItem("projectionMode");
  if (stored !== null) {
-    initialShowFaceProjections = stored === "true";
+    initialProjectionMode = Math.min(2, Math.max(0, parseInt(stored, 10) || 0));
  }
 } catch (e) { }

 const isCubeTranslucent = ref(initialCubeTranslucent);
-const showFaceProjections = ref(initialShowFaceProjections);
+const projectionMode = ref(initialProjectionMode);

 export function useSettings() {
  const toggleCubeTranslucent = () => {
@@ -27,17 +28,17 @@ export function useSettings() {
    } catch (e) { }
  };

-  const toggleFaceProjections = () => {
-    showFaceProjections.value = !showFaceProjections.value;
+  const cycleProjectionMode = () => {
+    projectionMode.value = (projectionMode.value + 1) % 3;
    try {
-      localStorage.setItem("showFaceProjections", String(showFaceProjections.value));
+      localStorage.setItem("projectionMode", String(projectionMode.value));
    } catch (e) { }
  };

  return {
    isCubeTranslucent,
    toggleCubeTranslucent,
-    showFaceProjections,
-    toggleFaceProjections,
+    projectionMode,
+    cycleProjectionMode,
  };
 }