Update src/components/Footer.vue

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "rubic-cube",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rubic-cube",
-      "version": "0.5.5",
+      "version": "0.6.1",
       "dependencies": {
         "cubejs": "^1.3.2",
         "lucide-vue-next": "^0.564.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rubic-cube",
   "private": true,
-  "version": "0.5.5",
+  "version": "0.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Footer.vue

@@ -6,7 +6,7 @@ const version = __APP_VERSION__;
 <template>
   <footer class="app-footer glass-panel">
     <div class="footer-content">
-      <p>&copy; {{ currentYear }} Rubic Cube. Wersja {{ version }}</p>
+      <p>&copy; {{ currentYear }} Rubic Cube. v{{ version }}</p>
     </div>
   </footer>
 </template>

src/components/NavBar.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { Sun, Moon, Grid2x2 } 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 } = 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,19 +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 (3-state) -->
+      <button
+        class="btn-neon nav-btn icon-only"
+        @click="cycleProjectionMode"
+        :title="projectionTitle"
+        :class="{ active: projectionMode > 0 }"
+      >
+        <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" />

src/components/renderers/FaceProjections.vue

@@ -0,0 +1,192 @@
+<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 },
+  activeLayer: { type: Object, default: null },
+  currentLayerRotation: { type: Number, default: 0 },
+  animateLayers: { type: Boolean, default: false },
+});
+
+// Face definitions with logical 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' },
+  ];
+});
+
+// Which faces are hidden (for static cells)
+const hiddenFaceKeys = computed(() => {
+  const m = props.viewMatrix;
+  const keys = new Set();
+  for (const fd of FACE_DEFS.value) {
+    const [nx, ny, nz] = fd.normal;
+    const tz = nx * m[2] + (-ny) * m[6] + nz * m[10];
+    if (tz < 0) keys.add(fd.faceKey);
+  }
+  return keys;
+});
+
+// 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)
+};
+
+// 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 = [];
+
+  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;
+  });
+
+  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';
+
+      // 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}`;
+      }
+
+      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="cell in allCells"
+      :key="cell.key"
+      class="proj-cell"
+      :class="cell.color"
+      :style="{ transform: cell.transform }"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.face-projections-root {
+  position: absolute;
+  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;
+  backface-visibility: hidden;
+}
+
+.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>

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, projectionMode } = useSettings();
 
 // Bind FACES and viewMatrix to imported helpers
 const getFaceNormal = (face) => getFaceNormalRaw(face, FACES);
@@ -878,6 +879,17 @@ onUnmounted(() => {
           ></div>
         </div>
       </div>
+
+      <FaceProjections
+        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>
 
     <CubeMoveControls
@@ -1146,22 +1158,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 */

src/composables/useSettings.js

@@ -8,7 +8,17 @@ try {
   }
 } catch (e) { }
 
+// 0 = off, 1 = simple projections, 2 = advanced (animated layers)
+let initialProjectionMode = 0;
+try {
+  const stored = localStorage.getItem("projectionMode");
+  if (stored !== null) {
+    initialProjectionMode = Math.min(2, Math.max(0, parseInt(stored, 10) || 0));
+  }
+} catch (e) { }
+
 const isCubeTranslucent = ref(initialCubeTranslucent);
+const projectionMode = ref(initialProjectionMode);
 
 export function useSettings() {
   const toggleCubeTranslucent = () => {
@@ -18,8 +28,17 @@ export function useSettings() {
     } catch (e) { }
   };
 
+  const cycleProjectionMode = () => {
+    projectionMode.value = (projectionMode.value + 1) % 3;
+    try {
+      localStorage.setItem("projectionMode", String(projectionMode.value));
+    } catch (e) { }
+  };
+
   return {
     isCubeTranslucent,
     toggleCubeTranslucent,
+    projectionMode,
+    cycleProjectionMode,
   };
 }

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;

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;
   }