0.4.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "rubic-cube",
-  "version": "0.0.27",
+  "version": "0.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rubic-cube",
-      "version": "0.0.27",
+      "version": "0.4.2",
       "dependencies": {
         "lucide-vue-next": "^0.564.0",
         "rubiks-js": "^1.0.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rubic-cube",
   "private": true,
-  "version": "0.0.29",
+  "version": "0.4.2",
   "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/CubeMoveControls.vue

@@ -0,0 +1,87 @@
+<script setup>
+const emit = defineEmits(['move', 'scramble'])
+</script>
+
+<template>
+  <div>
+    <div class="controls controls-left">
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'U')">U</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'D')">D</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'L')">L</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'U-prime')">U'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'D-prime')">D'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'L-prime')">L'</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'U2')">U2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'D2')">D2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'L2')">L2</button>
+      </div>
+    </div>
+
+    <div class="controls controls-right">
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'R')">R</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'F')">F</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'B')">B</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'R-prime')">R'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'F-prime')">F'</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'B-prime')">B'</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="emit('move', 'R2')">R2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'F2')">F2</button>
+        <button class="btn-neon move-btn" @click="emit('move', 'B2')">B2</button>
+      </div>
+    </div>
+
+    <button class="btn-neon move-btn scramble-btn" @click="emit('scramble')">
+      Scramble
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.controls {
+  position: absolute;
+  top: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 50;
+}
+
+.controls-left {
+  left: 24px;
+}
+
+.controls-right {
+  right: 24px;
+}
+
+.controls-row {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.move-btn {
+  min-width: 44px;
+  height: 36px;
+  font-size: 0.9rem;
+  padding: 0 10px;
+}
+
+.scramble-btn {
+  position: absolute;
+  bottom: 72px;
+  left: 24px;
+  z-index: 50;
+}
+</style>
+

src/components/renderers/MoveHistoryPanel.vue

@@ -0,0 +1,222 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  moves: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['reset', 'copy', 'add-moves', 'open-add-modal'])
+
+const MIN_MOVES_COLUMN_GAP = 6
+
+const movesHistoryEl = ref(null)
+const samplePillEl = ref(null)
+const movesPerRow = ref(0)
+const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP)
+
+const displayMoves = computed(() => props.moves || [])
+
+const moveRows = computed(() => {
+  const perRow = movesPerRow.value || displayMoves.value.length || 1
+  const rows = []
+  const all = displayMoves.value
+  for (let i = 0; i < all.length; i += perRow) {
+    rows.push(all.slice(i, i + perRow))
+  }
+  return rows
+})
+
+const hasMoves = computed(() => displayMoves.value.length > 0)
+
+const copyQueueToClipboard = () => {
+  emit('copy')
+}
+
+const resetQueue = () => {
+  emit('reset')
+}
+
+const setSamplePill = (el) => {
+  if (el && !samplePillEl.value) {
+    samplePillEl.value = el
+  }
+}
+
+const recalcMovesLayout = () => {
+  const container = movesHistoryEl.value
+  const pill = samplePillEl.value
+  if (!container || !pill) return
+
+  const containerWidth = container.clientWidth
+  const pillWidth = pill.offsetWidth
+  if (pillWidth <= 0) return
+
+  const totalWidth = (cols) => {
+    if (cols <= 0) return 0
+    if (cols === 1) return pillWidth
+    return cols * pillWidth + (cols - 1) * MIN_MOVES_COLUMN_GAP
+  }
+
+  let cols = Math.floor((containerWidth + MIN_MOVES_COLUMN_GAP) / (pillWidth + MIN_MOVES_COLUMN_GAP))
+  if (cols < 1) cols = 1
+  while (cols > 1 && totalWidth(cols) > containerWidth) {
+    cols -= 1
+  }
+
+  let gap = 0
+  if (cols > 1) {
+    gap = (containerWidth - cols * pillWidth) / (cols - 1)
+  }
+
+  movesPerRow.value = cols
+  movesColumnGap.value = gap
+}
+
+const openAddModal = () => {
+  emit('open-add-modal')
+}
+
+watch(displayMoves, () => {
+  nextTick(recalcMovesLayout)
+})
+
+onMounted(() => {
+  window.addEventListener('resize', recalcMovesLayout)
+  nextTick(recalcMovesLayout)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', recalcMovesLayout)
+})
+</script>
+
+<template>
+  <div class="moves-history">
+    <div class="moves-inner" ref="movesHistoryEl">
+      <div
+        v-for="(row, rowIndex) in moveRows"
+        :key="rowIndex"
+        class="moves-row"
+        :style="{ columnGap: movesColumnGap + 'px' }"
+      >
+        <span
+          v-for="(m, idx) in row"
+          :key="m.id"
+          class="move-pill"
+          :class="{
+            'move-pill-active': m.status === 'in_progress',
+            'move-pill-pending': m.status === 'pending'
+          }"
+          :ref="rowIndex === 0 && idx === 0 ? setSamplePill : null"
+        >
+          {{ m.label }}
+        </span>
+      </div>
+    </div>
+    <div class="moves-actions">
+      <button class="queue-action" @click="openAddModal">add</button>
+      <button
+        class="queue-action"
+        :class="{ 'queue-action-disabled': !hasMoves }"
+        :disabled="!hasMoves"
+        @click="copyQueueToClipboard"
+      >
+        copy
+      </button>
+      <button
+        class="queue-action"
+        :class="{ 'queue-action-disabled': !hasMoves }"
+        :disabled="!hasMoves"
+        @click="resetQueue"
+      >
+        reset
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.moves-history {
+  position: absolute;
+  bottom: 72px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: calc(100vw - 360px);
+  overflow-x: hidden;
+  padding: 12px 12px 26px 12px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+}
+
+.moves-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.moves-row {
+  display: flex;
+}
+
+.move-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 0.8rem;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.move-pill-active {
+  background: #ffd500;
+  color: #000;
+  border-color: #ffd500;
+}
+
+.move-pill-pending {
+  opacity: 0.4;
+}
+
+.moves-actions {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  display: flex;
+  gap: 0px;
+}
+
+.queue-action {
+  border: none;
+  background: transparent;
+  padding: 6px 6px;
+  color: #fff;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.queue-action-disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
+}
+
+.moves-history::after {
+  content: none;
+}
+
+.queue-action:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+</style>

src/components/renderers/SmartCube.vue

@@ -1,18 +1,22 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useCube } from '../../composables/useCube'
 import { useSettings } from '../../composables/useSettings'
-import Line3D from '../common/Line3D.vue'
+import { LAYER_ANIMATION_DURATION } from '../../config/animationSettings'
+import CubeMoveControls from './CubeMoveControls.vue'
+import MoveHistoryPanel from './MoveHistoryPanel.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
+const rx = ref(-25)
-const ry = ref(45)  // Initial View Rotation Y
+const ry = ref(45)
 const rz = ref(0)
-const SCALE = 100 // Size of one cubie in px
+const SCALE = 100
-const GAP = 0     // Gap between cubies
+const GAP = 0
+const MIN_MOVES_COLUMN_GAP = 6
+const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP)
 
 // --- Interaction State ---
 const isDragging = ref(false)
@@ -29,6 +33,23 @@ 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)
+const currentMoveId = ref(null)
+const programmaticAnimation = ref(null)
+
+const rotationDebugTarget = computed(() => {
+  const anim = programmaticAnimation.value
+  if (!anim) return null
+  const angle = anim.targetRotation || 0
+  return Math.round(angle)
+})
+
+const rotationDebugCurrent = computed(() => {
+  const anim = programmaticAnimation.value
+  if (!anim) return null
+  const angle = currentLayerRotation.value || 0
+  return Math.round(angle)
+})
 
 // --- Constants & Helpers ---
 
@@ -74,113 +95,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) => {
@@ -308,11 +236,10 @@ const handleLayerDrag = (totalDx, totalDy, dx, dy) => {
 }
 
 const onMouseUp = () => {
-  isDragging.value = false
+  if (isDragging.value && activeLayer.value) {
-
-  if (activeLayer.value) {
     snapRotation()
   }
+  isDragging.value = false
 }
 
 const snapRotation = () => {
@@ -322,15 +249,13 @@ const snapRotation = () => {
   const target = Math.round(currentLayerRotation.value / 90) * 90
   const steps = Math.round(currentLayerRotation.value / 90)
 
-  // Animation loop
   const start = currentLayerRotation.value
   const startTime = performance.now()
-  const duration = 200
+  const duration = LAYER_ANIMATION_DURATION
 
   const animate = (time) => {
     const p = Math.min((time - startTime) / duration, 1)
-    // Ease out
+    const ease = easeInOutCubic(p)
-    const ease = 1 - Math.pow(1 - p, 3)
 
     currentLayerRotation.value = start + (target - start) * ease
 
@@ -344,24 +269,146 @@ 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
+const movesHistory = ref([])
-  activeLayer.value = null
+
-  currentLayerRotation.value = 0
+const displayMoves = computed(() => {
-  isAnimating.value = false
+  const list = movesHistory.value.slice()
-  selectedCubie.value = null
+
-  selectedFace.value = null
+  moveQueue.value.forEach((q, idx) => {
+    const stepsMod = ((q.steps % 4) + 4) % 4
+    if (stepsMod === 0) return
+
+    let modifier = ''
+    if (stepsMod === 1) modifier = "'"
+    else if (stepsMod === 2) modifier = '2'
+    else if (stepsMod === 3) modifier = ''
+
+    const baseLabel = q.displayBase || q.base
+    const label = baseLabel + (modifier === "'" ? "'" : modifier === '2' ? '2' : '')
+
+    list.push({
+      id: `q-${idx}`,
+      label,
+      status: 'pending'
+    })
+  })
+
+  return list
+})
+
+const getAxisIndexForBase = (base) => {
+  if (base === 'U') return { axis: 'y', index: 1 }
+  if (base === 'D') return { axis: 'y', index: -1 }
+  if (base === 'L') return { axis: 'x', index: -1 }
+  if (base === 'R') return { axis: 'x', index: 1 }
+  if (base === 'F') return { axis: 'z', index: 1 }
+  if (base === 'B') return { axis: 'z', index: -1 }
+  return { axis: 'y', index: 0 }
+}
+
+const getVisualFactor = (axis, base) => {
+  let factor = 1
+  if (axis === 'z') factor *= -1
+  if (base === 'U' || base === 'D') factor *= -1
+  return factor
+}
+
+const coerceStepsToSign = (steps, sign) => {
+  if (steps === 0) return 0
+  const mod = ((steps % 4) + 4) % 4
+  if (sign < 0) {
+    if (mod === 1) return -3
+    if (mod === 2) return -2
+    return -1
+  }
+  if (mod === 1) return 1
+  if (mod === 2) return 2
+  return 3
+}
+
+const formatMoveLabel = (displayBase, steps) => {
+  const stepsMod = ((steps % 4) + 4) % 4
+  if (stepsMod === 0) return displayBase
+  let modifier = ''
+  if (stepsMod === 1) modifier = "'"
+  else if (stepsMod === 2) modifier = '2'
+  else if (stepsMod === 3) modifier = ''
+  return displayBase + (modifier === "'" ? "'" : modifier === '2' ? '2' : '')
+}
+
+const updateCurrentMoveLabel = (displayBase, steps) => {
+  if (currentMoveId.value === null) return
+  const idx = movesHistory.value.findIndex(m => m.id === currentMoveId.value)
+  if (idx === -1) return
+  movesHistory.value[idx] = {
+    ...movesHistory.value[idx],
+    label: formatMoveLabel(displayBase, steps)
+  }
+}
+
+const copyQueueToClipboard = async () => {
+  if (!displayMoves.value.length) return
+  const text = displayMoves.value.map(m => m.label).join(' ')
+  try {
+    if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.focus()
+      textarea.select()
+      try {
+        document.execCommand('copy')
+      } finally {
+        document.body.removeChild(textarea)
+      }
+    }
+  } catch (e) {
+  }
+}
+
+const resetQueue = () => {
+  moveQueue.value = []
+  movesHistory.value = []
+  currentMoveId.value = null
+}
+
+const handleAddMoves = (text) => {
+  const tokens = text.split(/\s+/).filter(Boolean)
+  const moves = []
+
+  tokens.forEach((token) => {
+    const t = token.trim()
+    if (!t) return
+    const base = t[0]
+    if (!'UDLRFB'.includes(base)) return
+    const rest = t.slice(1)
+    let key = null
+    if (rest === '') key = base
+    else if (rest === '2') key = base + '2'
+    else if (rest === "'" || rest === '’') key = base + '-prime'
+    if (key && MOVE_MAP[key]) {
+      moves.push(key)
+    }
+  })
+
+  moves.forEach((m) => applyMove(m))
 }
 
 const getCubieStyle = (c) => {
@@ -405,57 +452,291 @@ const getCubieStyle = (c) => {
   return { transform }
 }
 
-const getProjectionStyle = (c, face) => {
+const getProjectionStyle = () => ({})
-  let col = 0
-  let row = 0
 
-  if (face === FACES.LEFT) {
+const moveQueue = ref([])
-    col = 1 - c.z
+
-    row = 1 - c.y
+const dequeueMove = () => {
-  } else if (face === FACES.BACK) {
+  while (moveQueue.value.length) {
-    col = 1 - c.x
+    const next = moveQueue.value.shift()
-    row = 1 - c.y
+    const stepsMod = ((next.steps % 4) + 4) % 4
-  } else if (face === FACES.DOWN) {
+    if (stepsMod === 0) continue
-    col = c.x + 1
+
-    row = 1 - c.z
+    let modifier = ''
+    if (stepsMod === 1) modifier = "'"       // +90 (logical +1)
+    else if (stepsMod === 2) modifier = '2'  // 180 (logical -2)
+    else if (stepsMod === 3) modifier = ''   // -90 (logical -1)
+
+    return { base: next.base, modifier, displayBase: next.displayBase }
+  }
+  return null
+}
+
+const processNextMove = () => {
+  if (isAnimating.value || activeLayer.value) return
+  const next = dequeueMove()
+  if (!next) return
+
+  const baseLabel = next.displayBase || next.base
+  const label = baseLabel + (next.modifier === "'" ? "'" : next.modifier === '2' ? '2' : '')
+  const id = movesHistory.value.length
+  movesHistory.value.push({ id, label, status: 'in_progress' })
+  currentMoveId.value = id
+
+  animateProgrammaticMove(next.base, next.modifier, baseLabel)
+}
+
+const easeInOutCubic = (t) => {
+  if (t < 0.5) return 4 * t * t * t
+  return 1 - Math.pow(-2 * t + 2, 3) / 2
+}
+
+// Derivative of standard easeInOutCubic for instantaneous velocity calculations
+const easeInOutCubicDerivative = (t) => {
+  if (t < 0.5) return 12 * t * t
+  return 3 * Math.pow(-2 * t + 2, 2)
+}
+
+// Custom easing function that preserves initial velocity $v_0$
+// The polynomial is $P(t) = (v_0 - 2)t^3 + (3 - 2v_0)t^2 + v_0 t$
+const cubicEaseWithInitialVelocity = (t, v0) => {
+  return (v0 - 2) * t * t * t + (3 - 2 * v0) * t * t + v0 * t
+}
+
+// Derivative of the custom easing function
+const cubicEaseWithInitialVelocityDerivative = (t, v0) => {
+  return 3 * (v0 - 2) * t * t + 2 * (3 - 2 * v0) * t + v0
+}
+
+const sampleProgrammaticAngle = (anim, time) => {
+  const p = Math.min((time - anim.startTime) / anim.duration, 1)
+  const ease = anim.v0 !== undefined
+    ? cubicEaseWithInitialVelocity(p, anim.v0)
+    : easeInOutCubic(p)
+  return anim.startRotation + (anim.targetRotation - anim.startRotation) * ease
+}
+
+// Calculate the current rotation derivative (Velocity in degrees per millisecond)
+const programmaticVelocity = (anim, time) => {
+  if (time >= anim.startTime + anim.duration) return 0
+  const p = Math.max(0, Math.min((time - anim.startTime) / anim.duration, 1))
+
+  const d_ease_dp = anim.v0 !== undefined
+    ? cubicEaseWithInitialVelocityDerivative(p, anim.v0)
+    : easeInOutCubicDerivative(p)
+
+  const totalVisualDelta = anim.targetRotation - anim.startRotation
+  // dp/dt = 1 / duration
+  // d_angle/dt = (totalVisualDelta) * (d_ease_dp) * (dp/dt)
+  return (totalVisualDelta * d_ease_dp) / anim.duration
+}
+
+const stepProgrammaticAnimation = (time) => {
+  const anim = programmaticAnimation.value
+  if (!anim) return
+  const nextRotation = sampleProgrammaticAngle(anim, time)
+  currentLayerRotation.value = nextRotation
+  if (time - anim.startTime < anim.duration) {
+    requestAnimationFrame(stepProgrammaticAnimation)
+  } else {
+    let steps = Math.abs(anim.logicalSteps)
+    const dir = anim.logicalSteps >= 0 ? 1 : -1
+    pendingLogicalUpdate.value = true
+    for (let i = 0; i < steps; i += 1) {
+      rotateLayer(anim.axis, anim.index, dir)
+    }
+    programmaticAnimation.value = null
+  }
+}
+
+const animateProgrammaticMove = (base, modifier, displayBase) => {
+  if (isAnimating.value || activeLayer.value) return
+
+  const { axis, index } = getAxisIndexForBase(base)
+
+  const count = modifier === '2' ? 2 : 1
+  const direction = modifier === "'" ? 1 : -1
+  const logicalSteps = direction * count
+  const visualFactor = getVisualFactor(axis, displayBase)
+  const visualDelta = logicalSteps * visualFactor * 90
+
+  activeLayer.value = {
+    axis,
+    index,
+    tangent: { x: 1, y: 0 }
+  }
+  isAnimating.value = true
+
+  currentLayerRotation.value = 0
+  const startRotation = 0
+  const targetRotation = visualDelta
+
+  programmaticAnimation.value = {
+    axis,
+    index,
+    displayBase,
+    logicalSteps,
+    visualFactor,
+    targetRotation,
+    startRotation,
+    startTime: performance.now(),
+    duration: LAYER_ANIMATION_DURATION * Math.max(Math.abs(visualDelta) / 90 || 1, 0.01)
   }
 
-  const x = (col - 1) * SCALE
+  requestAnimationFrame(stepProgrammaticAnimation)
-  const y = (row - 1) * SCALE
+}
 
-  return { transform: `translate3d(${x}px, ${y}px, 0px)` }
+const MOVE_MAP = {
+  'U':       { base: 'U', modifier: '' },
+  'U-prime': { base: 'U', modifier: "'" },
+  'U2':      { base: 'U', modifier: '2' },
+
+  'D':       { base: 'D', modifier: "'" },
+  'D-prime': { base: 'D', modifier: '' },
+  'D2':      { base: 'D', modifier: '2' },
+
+  'L':       { base: 'B', modifier: "'" },
+  'L-prime': { base: 'B', modifier: '' },
+  'L2':      { base: 'B', modifier: '2' },
+
+  'R':       { base: 'F', modifier: '' },
+  'R-prime': { base: 'F', modifier: "'" },
+  'R2':      { base: 'F', modifier: '2' },
+
+  'F':       { base: 'L', modifier: "'" },
+  'F-prime': { base: 'L', modifier: '' },
+  'F2':      { base: 'L', modifier: '2' },
+
+  'B':       { base: 'R', modifier: '' },
+  'B-prime': { base: 'R', modifier: "'" },
+  'B2':      { base: 'R', modifier: '2' }
+}
+
+const isAddModalOpen = ref(false)
+const addMovesText = ref('')
+
+const openAddModal = () => {
+  addMovesText.value = ''
+  isAddModalOpen.value = true
+}
+
+const closeAddModal = () => {
+  isAddModalOpen.value = false
+}
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isAddModalOpen.value) {
+    e.preventDefault()
+    closeAddModal()
+  }
 }
 
 const applyMove = (move) => {
-  let base = move
+  const mapping = MOVE_MAP[move]
-  let isPrime = false
+  if (!mapping) return
-  let turns = 1
 
-  if (move.endsWith('2')) {
+  let delta = 0
-    turns = 2
+  if (mapping.modifier === "'") delta = 1          // logical +1
-    base = move[0]
+  else if (mapping.modifier === '') delta = -1     // logical -1
-  } else if (move.endsWith('-prime')) {
+  else if (mapping.modifier === '2') delta = -2    // logical -2
-    isPrime = true
+
-    base = move[0]
+  const displayBase = move[0]
+  const { axis, index } = getAxisIndexForBase(mapping.base)
+  const visualFactor = getVisualFactor(axis, displayBase)
+  const currentAnim = programmaticAnimation.value
+
+  if (
+    currentAnim &&
+    isAnimating.value &&
+    activeLayer.value &&
+    currentAnim.axis === axis &&
+    currentAnim.index === index
+  ) {
+    const now = performance.now()
+
+    const currentAngle = sampleProgrammaticAngle(currentAnim, now)
+    const currentVelocity = programmaticVelocity(currentAnim, now) // degrees per ms
+
+    currentLayerRotation.value = currentAngle
+    currentAnim.logicalSteps += delta
+    const additionalVisualDelta = delta * currentAnim.visualFactor * 90
+
+    // Setup new target
+    currentAnim.startRotation = currentAngle
+    currentAnim.targetRotation += additionalVisualDelta
+    currentAnim.startTime = now
+
+    const remainingVisualDelta = currentAnim.targetRotation - currentAngle
+    // Recalculate duration based on how far we still have to go
+    currentAnim.duration = LAYER_ANIMATION_DURATION * Math.max(Math.abs(remainingVisualDelta) / 90, 0.01)
+
+    // Calculate normalized initial velocity v0
+    let v0 = 0
+    if (Math.abs(remainingVisualDelta) > 0.01) {
+       v0 = (currentVelocity * currentAnim.duration) / remainingVisualDelta
+    }
+
+    currentAnim.v0 = Math.max(-3, Math.min(3, v0))
+
+    // Format the new label instantly
+    const label = formatMoveLabel(displayBase, currentAnim.logicalSteps)
+    updateCurrentMoveLabel(displayBase, currentAnim.logicalSteps)
+
+    return
   }
 
-  const notation = isPrime ? `${base}'` : base
+  const last = moveQueue.value[moveQueue.value.length - 1]
+  if (last && last.base === mapping.base && last.displayBase === displayBase) {
+    last.steps += delta
+  } else {
+    moveQueue.value.push({ base: mapping.base, displayBase, steps: delta })
+  }
 
-  for (let i = 0; i < turns; i += 1) {
+  processNextMove()
-    turn(notation)
+}
+
+const allMoves = Object.keys(MOVE_MAP)
+
+const scramble = () => {
+  for (let i = 0; i < 30; i += 1) {
+    const move = allMoves[Math.floor(Math.random() * allMoves.length)]
+    applyMove(move)
   }
 }
 
+watch(cubies, () => {
+  if (!pendingLogicalUpdate.value) return
+  pendingLogicalUpdate.value = false
+
+  if (currentMoveId.value !== null) {
+    const idx = movesHistory.value.findIndex(m => m.id === currentMoveId.value)
+    if (idx !== -1) {
+      movesHistory.value[idx] = {
+        ...movesHistory.value[idx],
+        status: 'done'
+      }
+    }
+    currentMoveId.value = null
+  }
+
+  activeLayer.value = null
+  isAnimating.value = false
+  selectedCubie.value = null
+  selectedFace.value = null
+  processNextMove()
+})
+
 onMounted(() => {
   initCube()
   window.addEventListener('mousemove', onMouseMove)
   window.addEventListener('mouseup', onMouseUp)
+  window.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
   window.removeEventListener('mousemove', onMouseMove)
   window.removeEventListener('mouseup', onMouseUp)
-  // Clean up any potential animation frames? rafId is local to snapRotation, but harmless.
+  window.removeEventListener('keydown', handleKeydown)
 })
 
 </script>
@@ -479,59 +760,46 @@ 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">
+    <CubeMoveControls
-      <div class="controls-row">
+      @move="applyMove"
-        <button class="btn-neon move-btn" @click="applyMove('U')">U</button>
+      @scramble="scramble"
-        <button class="btn-neon move-btn" @click="applyMove('U-prime')">U'</button>
+    />
-        <button class="btn-neon move-btn" @click="applyMove('U2')">U2</button>
+
+    <MoveHistoryPanel
+      :moves="displayMoves"
+      @reset="resetQueue"
+      @copy="copyQueueToClipboard"
+      @add-moves="handleAddMoves"
+      @open-add-modal="openAddModal"
+    />
+    <div
+      v-if="isAddModalOpen"
+      class="moves-modal-backdrop"
+      @click.self="closeAddModal"
+    >
+      <div class="moves-modal">
+        <textarea
+          v-model="addMovesText"
+          class="moves-modal-textarea"
+        />
+        <div class="moves-modal-actions">
+          <button class="btn-neon move-btn moves-modal-button" @click="closeAddModal">
+            cancel
+          </button>
+          <button class="btn-neon move-btn moves-modal-button" @click="handleAddMoves(addMovesText)">
+            add moves
+          </button>
+        </div>
       </div>
-      <div class="controls-row">
+    </div>
-        <button class="btn-neon move-btn" @click="applyMove('L')">L</button>
+    <div class="rotation-debug">
-        <button class="btn-neon move-btn" @click="applyMove('L-prime')">L'</button>
+      <div class="rotation-debug-target">
-        <button class="btn-neon move-btn" @click="applyMove('L2')">L2</button>
+        {{ rotationDebugTarget !== null ? rotationDebugTarget : '-' }}
       </div>
-      <div class="controls-row">
+      <div class="rotation-debug-current">
-        <button class="btn-neon move-btn" @click="applyMove('F')">F</button>
+        {{ rotationDebugCurrent !== null ? rotationDebugCurrent : '-' }}
-        <button class="btn-neon move-btn" @click="applyMove('F-prime')">F'</button>
-        <button class="btn-neon move-btn" @click="applyMove('F2')">F2</button>
       </div>
     </div>
   </div>
@@ -570,27 +838,86 @@ onUnmounted(() => {
   transform-style: preserve-3d;
 }
 
-.controls {
+.rotation-debug {
-  position: absolute;
+  position: fixed;
-  top: 96px;
   right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  align-items: flex-end;
-  z-index: 50;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  z-index: 60;
 }
 
-.controls-row {
+.rotation-debug-target {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.rotation-debug-current {
+  font-size: 0.95rem;
+  opacity: 0.8;
+}
+
+.moves-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
   display: flex;
-  gap: 8px;
+  align-items: center;
   justify-content: center;
+  z-index: 200;
 }
 
-.move-btn {
+.moves-modal {
-  min-width: 44px;
+  background: var(--panel-bg);
-  height: 36px;
+  border: 1px solid var(--panel-border);
-  font-size: 0.9rem;
+  color: var(--text-color);
-  padding: 0 10px;
+  border-radius: 10px;
+  padding: 24px;
+  min-width: 480px;
+  max-width: 800px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
+}
+
+.moves-modal-textarea {
+  width: 100%;
+  min-height: 220px;
+  background: var(--panel-bg);
+  color: var(--text-color);
+  box-sizing: border-box;
+  border-radius: 6px;
+  border: 1px solid var(--panel-border);
+  padding: 10px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 0.85rem;
+}
+
+.moves-modal-textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.moves-modal-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.moves-modal-button {
+  font-size: 0.85rem;
+}
+
+.moves-modal-button:focus {
+  outline: none;
+  box-shadow: none;
 }
 
 /* Projection Styles */

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

src/config/animationSettings.js

@@ -0,0 +1 @@
+export const LAYER_ANIMATION_DURATION = 200

src/style.css

@@ -13,7 +13,7 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* --- Glassmorphism Design System (from Nonograms) --- */
-  --bg-gradient: radial-gradient(circle at center, #2b2b2b 0%, #000000 100%);
+  --bg-gradient: radial-gradient(circle at center, #444 0%, #000000 100%);
   --glass-bg: rgba(255, 255, 255, 0.1);
   --glass-border: rgba(255, 255, 255, 0.2);
   --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
@@ -31,7 +31,7 @@
   --toggle-btn-border: rgba(255, 255, 255, 0.2);
   --toggle-hover-border: #ffffff;
   --toggle-active-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
-  --panel-bg: rgba(255, 255, 255, 0.1);
+  --panel-bg: rgba(0, 0, 0, 0.4);
   --panel-border: rgba(255, 255, 255, 0.1);
   --panel-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   --button-bg: rgba(255, 255, 255, 0.1);
@@ -45,7 +45,7 @@
 }
 
 :root[data-theme="light"] {
-  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e0e0e0 100%);
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #cccccc 100%);
   --glass-bg: rgba(255, 255, 255, 0.75);
   --glass-border: rgba(15, 23, 42, 0.12);
   --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);