feat: refactor utils, add tokenReducer, rear face projections with toggle

2026-02-24 17:20:17 +00:00
parent d82eef86f9
commit 3bd919a1cf
6 changed files with 216 additions and 9 deletions
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { Sun, Moon, Grid2x2 } from "lucide-vue-next";
+import { Sun, Moon, Grid2x2, Layers } from "lucide-vue-next";
 import { ref, onMounted } from "vue";
 import { useSettings } from "../composables/useSettings";

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

 const setTheme = (dark) => {
@@ -48,6 +48,20 @@ onMounted(() => {
        <Grid2x2 :size="20" />
      </button>

+      <!-- Face Projections Toggle -->
+      <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 }"
+      >
+        <Layers :size="20" />
+      </button>
+
      <!-- Theme Toggle -->
      <button
        class="btn-neon nav-btn icon-only"
--- a/src/components/renderers/FaceProjections.vue
+++ b/src/components/renderers/FaceProjections.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { computed } from "vue";
+import { REAR_FACE_DISTANCE } from "../../config/settings.js";
+
+const props = defineProps({
+  cubies: { type: Array, required: true },
+  viewMatrix: { type: Array, required: true },
+  FACES: { type: Object, required: true },
+  SCALE: { type: Number, default: 100 },
+});
+
+// The 6 face definitions with logical-space normals and grid axes
+const FACE_DEFS = computed(() => {
+  const F = props.FACES;
+  return [
+    { face: F.FRONT, normal: [0, 0, 1], gridU: [1, 0, 0], gridV: [0, 1, 0], faceKey: 'front' },
+    { face: F.BACK, normal: [0, 0, -1], gridU: [-1, 0, 0], gridV: [0, 1, 0], faceKey: 'back' },
+    { face: F.RIGHT, normal: [1, 0, 0], gridU: [0, 0, -1], gridV: [0, 1, 0], faceKey: 'right' },
+    { face: F.LEFT, normal: [-1, 0, 0], gridU: [0, 0, 1], gridV: [0, 1, 0], faceKey: 'left' },
+    { face: F.UP, normal: [0, 1, 0], gridU: [1, 0, 0], gridV: [0, 0, -1], faceKey: 'up' },
+    { face: F.DOWN, normal: [0, -1, 0], gridU: [1, 0, 0], gridV: [0, 0, 1], faceKey: 'down' },
+  ];
+});
+
+// Determine which 3 faces are hidden (transformed normal Z < 0 in CSS space)
+const hiddenFaces = computed(() => {
+  const m = props.viewMatrix;
+  return FACE_DEFS.value.filter((fd) => {
+    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
+  });
+});
+
+// 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)
+
+  return hiddenFaces.value.map((fd) => {
+    const [nx, ny, nz] = fd.normal;
+
+    // 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;
+      if (nz !== 0) return c.z === nz;
+      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
+        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 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);
+      }
+    }
+
+    // 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,
+      transform,
+    };
+  });
+});
+</script>
+
+<template>
+  <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"
+      class="proj-cell"
+      :class="color"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.face-projection {
+  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;
+}
+
+.proj-cell {
+  box-sizing: border-box;
+  background: #000;
+  border: 1px solid #000;
+  position: relative;
+}
+
+.proj-cell::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  border-radius: 8px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+/* Colors - use global design system variables */
+.proj-cell.white::after { background: var(--sticker-white); }
+.proj-cell.yellow::after { background: var(--sticker-yellow); }
+.proj-cell.green::after { background: var(--sticker-green); }
+.proj-cell.blue::after { background: var(--sticker-blue); }
+.proj-cell.orange::after { background: var(--sticker-orange); }
+.proj-cell.red::after { background: var(--sticker-red); }
+.proj-cell.black::after { display: none; }
+</style>
--- a/src/components/renderers/SmartCube.vue
+++ b/src/components/renderers/SmartCube.vue
@@ -5,6 +5,7 @@ import { useSettings } from "../../composables/useSettings";
 import { LAYER_ANIMATION_DURATION, MIDDLE_SLICES_ENABLED } from "../../config/settings";
 import CubeMoveControls from "./CubeMoveControls.vue";
 import MoveHistoryPanel from "./MoveHistoryPanel.vue";
+import FaceProjections from "./FaceProjections.vue";
 import { DeepCube } from "../../utils/DeepCube.js";
 import { showToast } from "../../utils/toastHelper.js";
 import { identityMatrix, rotateXMatrix, rotateYMatrix, rotateZMatrix, multiplyMatrices, matToQuat, slerp, quatToMat } from "../../utils/matrix.js";
@@ -14,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 } = useSettings();
+const { isCubeTranslucent, showFaceProjections } = useSettings();

 // Bind FACES and viewMatrix to imported helpers
 const getFaceNormal = (face) => getFaceNormalRaw(face, FACES);
@@ -878,6 +879,14 @@ onUnmounted(() => {
          ></div>
        </div>
      </div>
+
+      <FaceProjections
+        v-if="showFaceProjections"
+        :cubies="cubies"
+        :view-matrix="viewMatrix"
+        :FACES="FACES"
+        :SCALE="SCALE"
+      />
    </div>

    <CubeMoveControls
@@ -1146,22 +1155,22 @@ onUnmounted(() => {

 /* Colors - apply to the pseudo-element */
 .white::after {
-  background: #e0e0e0;
+  background: var(--sticker-white);
 }
 .yellow::after {
-  background: #ffd500;
+  background: var(--sticker-yellow);
 }
 .green::after {
-  background: #009e60;
+  background: var(--sticker-green);
 }
 .blue::after {
-  background: #0051ba;
+  background: var(--sticker-blue);
 }
 .orange::after {
-  background: #ff5800;
+  background: var(--sticker-orange);
 }
 .red::after {
-  background: #c41e3a;
+  background: var(--sticker-red);
 }

 /* Black internal faces - no sticker needed */
--- a/src/composables/useSettings.js
+++ b/src/composables/useSettings.js
@@ -8,7 +8,16 @@ try {
  }
 } catch (e) { }

+let initialShowFaceProjections = false;
+try {
+  const stored = localStorage.getItem("showFaceProjections");
+  if (stored !== null) {
+    initialShowFaceProjections = stored === "true";
+  }
+} catch (e) { }
+
 const isCubeTranslucent = ref(initialCubeTranslucent);
+const showFaceProjections = ref(initialShowFaceProjections);

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

+  const toggleFaceProjections = () => {
+    showFaceProjections.value = !showFaceProjections.value;
+    try {
+      localStorage.setItem("showFaceProjections", String(showFaceProjections.value));
+    } catch (e) { }
+  };
+
  return {
    isCubeTranslucent,
    toggleCubeTranslucent,
+    showFaceProjections,
+    toggleFaceProjections,
  };
 }
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -2,3 +2,7 @@
 export const LAYER_ANIMATION_DURATION = 200;

 export const MIDDLE_SLICES_ENABLED = false;
+
+// Distance of rear face projections from cube center (in cube-size units)
+// 1.0 = one cube width, 0.5 = half cube width
+export const REAR_FACE_DISTANCE = 1.0;
--- a/src/style.css
+++ b/src/style.css
@@ -42,6 +42,14 @@
  --button-active-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
  --cube-edge-color: #333333;
  --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
+
+  /* Cube sticker colors */
+  --sticker-white: #e0e0e0;
+  --sticker-yellow: #ffd500;
+  --sticker-green: #009e60;
+  --sticker-blue: #0051ba;
+  --sticker-orange: #ff5800;
+  --sticker-red: #c41e3a;
 }

 :root[data-theme="light"] {
@@ -81,6 +89,7 @@ a {
  color: #646cff;
  text-decoration: inherit;
 }
+
 a:hover {
  color: #535bf2;
 }
@@ -113,9 +122,11 @@ button {
  cursor: pointer;
  transition: border-color 0.25s;
 }
+
 button:hover {
  border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
@@ -191,9 +202,11 @@ button.btn-neon.icon-only {
    color: #213547;
    background-color: #ffffff;
  }
+
  a:hover {
    color: #747bff;
  }
+
  button {
    background-color: #f9f9f9;
  }