chore: remove projections toggle and bump to 0.1.0

package.json

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

src/components/NavBar.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { Sun, Moon, Layers, Grid2x2 } from 'lucide-vue-next';
+import { Sun, Moon, Grid2x2 } from 'lucide-vue-next';
 import { ref, onMounted } from 'vue';
 import { useSettings } from '../composables/useSettings';
 
-const { showProjections, toggleProjections, isCubeTranslucent, toggleCubeTranslucent } = useSettings();
+const { isCubeTranslucent, toggleCubeTranslucent } = useSettings();
 const isDark = ref(true);
 
 const setTheme = (dark) => {
@@ -34,11 +34,6 @@ onMounted(() => {
     </div>
 
     <div class="nav-container">
-      <!-- Projections Toggle -->
-      <button class="btn-neon nav-btn icon-only" @click="toggleProjections" :title="showProjections ? 'Ukryj rzuty' : 'Pokaż rzuty'" :class="{ active: showProjections }">
-        <Layers :size="20" />
-      </button>
-
       <!-- Cube Opacity Toggle -->
       <button
         class="btn-neon nav-btn icon-only"

src/components/renderers/SmartCube.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useCube } from '../../composables/useCube'
 import { useSettings } from '../../composables/useSettings'
-import Line3D from '../common/Line3D.vue'
 
 const { cubies, initCube, rotateLayer, turn, FACES } = useCube()
-const { showProjections, isCubeTranslucent } = useSettings()
+const { isCubeTranslucent } = useSettings()
 
 // --- Visual State ---
 const rx = ref(-25) // Initial View Rotation X
@@ -29,6 +28,7 @@ const selectedFace = ref(null)  // 'front', 'up', etc.
 const activeLayer = ref(null)   // { axis, index, tangent, direction }
 const currentLayerRotation = ref(0) // Visual rotation in degrees
 const isAnimating = ref(false)
+const pendingLogicalUpdate = ref(false)
 
 // --- Constants & Helpers ---
 
@@ -74,113 +74,20 @@ const project = (v) => {
   const radY = ry.value * Math.PI / 180
   const radZ = rz.value * Math.PI / 180
 
-  // 1. Rotate Z
   let x1 = v.x * Math.cos(radZ) - v.y * Math.sin(radZ)
   let y1 = v.x * Math.sin(radZ) + v.y * Math.cos(radZ)
   let z1 = v.z
 
-  // 2. Rotate Y
   let x2 = x1 * Math.cos(radY) + z1 * Math.sin(radY)
   let y2 = y1
   let z2 = -x1 * Math.sin(radY) + z1 * Math.cos(radY)
 
-  // 3. Rotate X
   let x3 = x2
   let y3 = y2 * Math.cos(radX) - z2 * Math.sin(radX)
-  // let z3 = ... (depth not needed for projection vector direction)
 
   return { x: x3, y: y3 }
 }
 
-const projectedCubies = computed(() => {
-  // Filter cubies for each face based on logical coordinates
-  // x: -1 (Left), 1 (Right)
-  // y: -1 (Down/Bottom), 1 (Up/Top)
-  // z: -1 (Back), 1 (Front)
-
-  const left = cubies.value.filter(c => Math.round(c.x) === -1)
-  const back = cubies.value.filter(c => Math.round(c.z) === -1)
-  const down = cubies.value.filter(c => Math.round(c.y) === -1)
-
-  return { left, back, down }
-})
-
-const projectionTransforms = {
-  left: { tx: -350, ty: 0, tz: 0, ry: -90 },
-  back: { tx: 0, ty: -200, tz: -350, ry: 0 },
-  down: { tx: 0, ty: 350, tz: 0, rx: 90 }
-}
-
-const projectionLines = computed(() => {
-  const lines = []
-
-  // Helper to transform point
-  const transformPoint = (p, transform) => {
-    let x = p.x, y = p.y, z = p.z
-
-    // Rotate
-    if (transform.ry) {
-      const rad = transform.ry * Math.PI / 180
-      const x0 = x, z0 = z
-      x = x0 * Math.cos(rad) + z0 * Math.sin(rad)
-      z = -x0 * Math.sin(rad) + z0 * Math.cos(rad)
-    }
-    if (transform.rx) {
-      const rad = transform.rx * Math.PI / 180
-      const y0 = y, z0 = z
-      y = y0 * Math.cos(rad) - z0 * Math.sin(rad)
-      z = y0 * Math.sin(rad) + z0 * Math.cos(rad)
-    }
-
-    // Translate
-    x += transform.tx || 0
-    y += transform.ty || 0
-    z += transform.tz || 0
-
-    return { x, y, z }
-  }
-
-  const S = 150 // Half size
-
-  // 1. Left Projection
-  {
-    const t = projectionTransforms.left
-    // Start: Left Face corners (x = -S)
-    const start = [
-      { x: -S, y: -S, z: -S }, { x: -S, y: -S, z: S },
-      { x: -S, y: S, z: -S }, { x: -S, y: S, z: S }
-    ]
-    const end = start.map(p => transformPoint(p, t))
-    start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
-  }
-
-  // 2. Back Projection
-  {
-    const t = projectionTransforms.back
-    // Start: Back Face corners (z = -S)
-    const start = [
-      { x: -S, y: -S, z: -S }, { x: S, y: -S, z: -S },
-      { x: -S, y: S, z: -S }, { x: S, y: S, z: -S }
-    ]
-    const end = start.map(p => transformPoint(p, t))
-    start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
-  }
-
-  // 3. Down Projection (Down Face)
-  {
-    const t = projectionTransforms.down
-    // Start: Down Face corners (y = -S)
-    const start = [
-      { x: -S, y: -S, z: -S }, { x: S, y: -S, z: -S },
-      { x: -S, y: -S, z: S }, { x: S, y: -S, z: S }
-    ]
-    const end = start.map(p => transformPoint(p, t))
-    start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
-  }
-
-  return lines
-})
-
 // --- Interaction Logic ---
 
 const onMouseDown = (e) => {
@@ -344,24 +251,17 @@ const snapRotation = () => {
   requestAnimationFrame(animate)
 }
 
-const finishMove = (steps) => {
+const finishMove = (steps, directionOverride = null) => {
   if (steps !== 0 && activeLayer.value) {
     const { axis, index } = activeLayer.value
-    // Logic Call
     const count = Math.abs(steps)
-    const direction = steps > 0 ? 1 : -1
+    const direction = directionOverride !== null ? directionOverride : (steps > 0 ? 1 : -1)
 
+    pendingLogicalUpdate.value = true
     for (let i = 0; i < count; i++) {
       rotateLayer(axis, index, direction)
     }
   }
-
-  // Reset
-  activeLayer.value = null
-  currentLayerRotation.value = 0
-  isAnimating.value = false
-  selectedCubie.value = null
-  selectedFace.value = null
 }
 
 const getCubieStyle = (c) => {
@@ -405,47 +305,93 @@ const getCubieStyle = (c) => {
   return { transform }
 }
 
-const getProjectionStyle = (c, face) => {
-  let col = 0
-  let row = 0
+const getProjectionStyle = () => ({})
 
-  if (face === FACES.LEFT) {
-    col = 1 - c.z
-    row = 1 - c.y
-  } else if (face === FACES.BACK) {
-    col = 1 - c.x
-    row = 1 - c.y
-  } else if (face === FACES.DOWN) {
-    col = c.x + 1
-    row = 1 - c.z
+const animateProgrammaticMove = (base, modifier) => {
+  if (isAnimating.value || activeLayer.value) return
+
+  // Map base move to axis/index (same warstwa jak przy dragowaniu)
+  let axis = 'y'
+  let index = 1
+  if (base === 'U') {
+    axis = 'y'; index = 1
+  } else if (base === 'D') {
+    axis = 'y'; index = -1
+  } else if (base === 'L') {
+    axis = 'x'; index = -1
+  } else if (base === 'R') {
+    axis = 'x'; index = 1
+  } else if (base === 'F') {
+    axis = 'z'; index = 1
+  } else if (base === 'B') {
+    axis = 'z'; index = -1
   }
 
-  const x = (col - 1) * SCALE
-  const y = (row - 1) * SCALE
+  // Kierunek zgodny z RubiksJSModel.rotateLayer:
+  // dir === 1 -> ruch z apostrofem, dir === -1 -> ruch podstawowy (bez apostrofu)
+  const count = modifier === '2' ? 2 : 1
+  const direction = modifier === "'" ? 1 : -1
 
-  return { transform: `translate3d(${x}px, ${y}px, 0px)` }
+  activeLayer.value = {
+    axis,
+    index,
+    tangent: { x: 1, y: 0 }
+  }
+  currentLayerRotation.value = 0
+  isAnimating.value = true
+
+  const logicalSteps = direction * count
+  let visualSteps = logicalSteps
+  if (axis === 'z') visualSteps = -visualSteps
+  if (base === 'U') visualSteps = -visualSteps
+  const target = visualSteps * 90
+  const start = 0
+  const startTime = performance.now()
+  const duration = 200 * count
+
+  const animate = (time) => {
+    const p = Math.min((time - startTime) / duration, 1)
+    const ease = 1 - Math.pow(1 - p, 3)
+    currentLayerRotation.value = start + (target - start) * ease
+
+    if (p < 1) {
+      requestAnimationFrame(animate)
+    } else {
+      pendingLogicalUpdate.value = true
+      for (let i = 0; i < count; i += 1) {
+        rotateLayer(axis, index, direction)
+      }
+    }
+  }
+
+  requestAnimationFrame(animate)
 }
 
 const applyMove = (move) => {
   let base = move
-  let isPrime = false
-  let turns = 1
+  let modifier = ''
 
   if (move.endsWith('2')) {
-    turns = 2
+    modifier = '2'
     base = move[0]
   } else if (move.endsWith('-prime')) {
-    isPrime = true
+    modifier = "'"
     base = move[0]
   }
 
-  const notation = isPrime ? `${base}'` : base
-
-  for (let i = 0; i < turns; i += 1) {
-    turn(notation)
-  }
+  animateProgrammaticMove(base, modifier)
 }
 
+watch(cubies, () => {
+  if (!pendingLogicalUpdate.value) return
+  pendingLogicalUpdate.value = false
+  activeLayer.value = null
+  currentLayerRotation.value = 0
+  isAnimating.value = false
+  selectedCubie.value = null
+  selectedFace.value = null
+})
+
 onMounted(() => {
   initCube()
   window.addEventListener('mousemove', onMouseMove)
@@ -479,42 +425,6 @@ onUnmounted(() => {
 
         </div>
       </div>
-      <!-- Projections of Hidden Faces -->
-      <div v-if="showProjections" class="projections">
-        <!-- Guide Lines -->
-        <Line3D v-for="(line, i) in projectionLines" :key="'line-'+i"
-          :start="line.start" :end="line.end"
-          :color="'var(--text-strong)'"
-          :thickness="1" />
-
-        <!-- Left Face Projection -->
-        <div class="projection-group left-projection">
-          <div v-for="c in projectedCubies.left" :key="c.id"
-               class="cubie-placeholder"
-               :style="getProjectionStyle(c, FACES.LEFT)">
-            <div class="sticker" :class="c.faces.left"></div>
-          </div>
-        </div>
-
-        <!-- Back Face Projection -->
-        <div class="projection-group back-projection">
-          <div v-for="c in projectedCubies.back" :key="c.id"
-               class="cubie-placeholder"
-               :style="getProjectionStyle(c, FACES.BACK)">
-            <div class="sticker" :class="c.faces.back"></div>
-          </div>
-        </div>
-
-        <!-- Down Face Projection (Exploded View) -->
-        <div class="projection-group down-projection">
-          <div v-for="c in projectedCubies.down" :key="c.id"
-               class="cubie-placeholder"
-               :style="getProjectionStyle(c, FACES.DOWN)">
-            <div class="sticker" :class="c.faces.down"></div>
-          </div>
-        </div>
-      </div>
-
     </div>
 
     <div class="controls">

src/composables/useSettings.js

@@ -1,15 +1,5 @@
 import { ref } from 'vue';
 
-let initialShowProjections = false;
-try {
-  const stored = localStorage.getItem('showProjections');
-  if (stored !== null) {
-    initialShowProjections = stored === 'true';
-  }
-} catch (e) {}
-
-const showProjections = ref(initialShowProjections);
-
 let initialCubeTranslucent = false;
 try {
   const stored = localStorage.getItem('cubeTranslucent');
@@ -21,13 +11,6 @@ try {
 const isCubeTranslucent = ref(initialCubeTranslucent);
 
 export function useSettings() {
-  const toggleProjections = () => {
-    showProjections.value = !showProjections.value;
-    try {
-      localStorage.setItem('showProjections', String(showProjections.value));
-    } catch (e) {}
-  };
-
   const toggleCubeTranslucent = () => {
     isCubeTranslucent.value = !isCubeTranslucent.value;
     try {
@@ -36,8 +19,6 @@ export function useSettings() {
   };
 
   return {
-    showProjections,
-    toggleProjections,
     isCubeTranslucent,
     toggleCubeTranslucent
   };