0.4.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "rubic-cube",
-  "version": "0.3.0",
+  "version": "0.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rubic-cube",
-      "version": "0.3.0",
+      "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.3.0",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

@@ -3,6 +3,8 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useCube } from '../../composables/useCube'
 import { useSettings } from '../../composables/useSettings'
 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 { isCubeTranslucent } = useSettings()
@@ -13,6 +15,8 @@ const ry = ref(45)
 const rz = ref(0)
 const SCALE = 100
 const GAP = 0
+const MIN_MOVES_COLUMN_GAP = 6
+const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP)
 
 // --- Interaction State ---
 const isDragging = ref(false)
@@ -31,6 +35,21 @@ 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 ---
 
@@ -217,11 +236,10 @@ const handleLayerDrag = (totalDx, totalDy, dx, dy) => {
 }
 
 const onMouseUp = () => {
-  isDragging.value = false
-
-  if (activeLayer.value) {
+  if (isDragging.value && activeLayer.value) {
     snapRotation()
   }
+  isDragging.value = false
 }
 
 const snapRotation = () => {
@@ -237,8 +255,7 @@ const snapRotation = () => {
 
   const animate = (time) => {
     const p = Math.min((time - startTime) / duration, 1)
-    // Ease out
-    const ease = 1 - Math.pow(1 - p, 3)
+    const ease = easeInOutCubic(p)
 
     currentLayerRotation.value = start + (target - start) * ease
 
@@ -266,14 +283,11 @@ const finishMove = (steps, directionOverride = null) => {
 }
 
 const movesHistory = ref([])
-const movesHistoryEl = ref(null)
-const samplePillEl = ref(null)
-const movesPerRow = ref(0)
 
 const displayMoves = computed(() => {
   const list = movesHistory.value.slice()
 
-  moveQueue.forEach((q, idx) => {
+  moveQueue.value.forEach((q, idx) => {
     const stepsMod = ((q.steps % 4) + 4) % 4
     if (stepsMod === 0) return
 
@@ -295,15 +309,55 @@ const displayMoves = computed(() => {
   return list
 })
 
-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))
+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
   }
-  return rows
-})
+  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
@@ -329,31 +383,32 @@ const copyQueueToClipboard = async () => {
   }
 }
 
-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 - 4
-  const pillWidth = pill.offsetWidth + 8
-  if (pillWidth <= 0) return
-
-  const rawCount = Math.floor(containerWidth / pillWidth)
-  const count = Math.max(1, rawCount - 1)
-  movesPerRow.value = count
-}
-
 const resetQueue = () => {
-  moveQueue.length = 0
+  moveQueue.value = []
   movesHistory.value = []
   currentMoveId.value = null
-  nextTick(recalcMovesLayout)
+}
+
+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) => {
@@ -399,11 +454,11 @@ const getCubieStyle = (c) => {
 
 const getProjectionStyle = () => ({})
 
-const moveQueue = []
+const moveQueue = ref([])
 
 const dequeueMove = () => {
-  while (moveQueue.length) {
-    const next = moveQueue.shift()
+  while (moveQueue.value.length) {
+    const next = moveQueue.value.shift()
     const stepsMod = ((next.steps % 4) + 4) % 4
     if (stepsMod === 0) continue
 
@@ -428,67 +483,107 @@ const processNextMove = () => {
   movesHistory.value.push({ id, label, status: 'in_progress' })
   currentMoveId.value = id
 
-  animateProgrammaticMove(next.base, next.modifier)
+  animateProgrammaticMove(next.base, next.modifier, baseLabel)
 }
 
-const animateProgrammaticMove = (base, modifier) => {
+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
 
-  // 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 { axis, index } = getAxisIndexForBase(base)
 
-  // 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
+  const logicalSteps = direction * count
+  const visualFactor = getVisualFactor(axis, displayBase)
+  const visualDelta = logicalSteps * visualFactor * 90
 
   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' || base === 'D') visualSteps = -visualSteps
-  const target = visualSteps * 90
-  const start = 0
-  const startTime = performance.now()
-  const duration = LAYER_ANIMATION_DURATION * count
+  currentLayerRotation.value = 0
+  const startRotation = 0
+  const targetRotation = visualDelta
 
-  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)
-      }
-    }
+  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)
   }
 
-  requestAnimationFrame(animate)
+  requestAnimationFrame(stepProgrammaticAnimation)
 }
 
 const MOVE_MAP = {
@@ -517,6 +612,25 @@ const MOVE_MAP = {
   '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) => {
   const mapping = MOVE_MAP[move]
   if (!mapping) return
@@ -527,12 +641,55 @@ const applyMove = (move) => {
   else if (mapping.modifier === '2') delta = -2    // logical -2
 
   const displayBase = move[0]
+  const { axis, index } = getAxisIndexForBase(mapping.base)
+  const visualFactor = getVisualFactor(axis, displayBase)
+  const currentAnim = programmaticAnimation.value
 
-  const last = moveQueue[moveQueue.length - 1]
+  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 last = moveQueue.value[moveQueue.value.length - 1]
   if (last && last.base === mapping.base && last.displayBase === displayBase) {
     last.steps += delta
   } else {
-    moveQueue.push({ base: mapping.base, displayBase, steps: delta })
+    moveQueue.value.push({ base: mapping.base, displayBase, steps: delta })
   }
 
   processNextMove()
@@ -563,7 +720,6 @@ watch(cubies, () => {
   }
 
   activeLayer.value = null
-  currentLayerRotation.value = 0
   isAnimating.value = false
   selectedCubie.value = null
   selectedFace.value = null
@@ -574,18 +730,13 @@ onMounted(() => {
   initCube()
   window.addEventListener('mousemove', onMouseMove)
   window.addEventListener('mouseup', onMouseUp)
-  window.addEventListener('resize', recalcMovesLayout)
-  nextTick(recalcMovesLayout)
+  window.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
   window.removeEventListener('mousemove', onMouseMove)
   window.removeEventListener('mouseup', onMouseUp)
-  window.removeEventListener('resize', recalcMovesLayout)
-})
-
-watch(displayMoves, () => {
-  nextTick(recalcMovesLayout)
+  window.removeEventListener('keydown', handleKeydown)
 })
 
 </script>
@@ -611,71 +762,44 @@ watch(displayMoves, () => {
       </div>
     </div>
 
-    <div class="controls controls-left">
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('U')">U</button>
-        <button class="btn-neon move-btn" @click="applyMove('D')">D</button>
-        <button class="btn-neon move-btn" @click="applyMove('L')">L</button>
-      </div>
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('U-prime')">U'</button>
-        <button class="btn-neon move-btn" @click="applyMove('D-prime')">D'</button>
-        <button class="btn-neon move-btn" @click="applyMove('L-prime')">L'</button>
-      </div>
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('U2')">U2</button>
-        <button class="btn-neon move-btn" @click="applyMove('D2')">D2</button>
-        <button class="btn-neon move-btn" @click="applyMove('L2')">L2</button>
-      </div>
-    </div>
+    <CubeMoveControls
+      @move="applyMove"
+      @scramble="scramble"
+    />
 
-    <div class="controls controls-right">
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('R')">R</button>
-        <button class="btn-neon move-btn" @click="applyMove('F')">F</button>
-        <button class="btn-neon move-btn" @click="applyMove('B')">B</button>
-      </div>
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('R-prime')">R'</button>
-        <button class="btn-neon move-btn" @click="applyMove('F-prime')">F'</button>
-        <button class="btn-neon move-btn" @click="applyMove('B-prime')">B'</button>
-      </div>
-      <div class="controls-row">
-        <button class="btn-neon move-btn" @click="applyMove('R2')">R2</button>
-        <button class="btn-neon move-btn" @click="applyMove('F2')">F2</button>
-        <button class="btn-neon move-btn" @click="applyMove('B2')">B2</button>
-      </div>
-    </div>
-
-    <button class="btn-neon move-btn scramble-btn" @click="scramble">
-      Scramble
-    </button>
-
-    <div class="moves-history">
-      <div class="moves-inner" ref="movesHistoryEl">
+    <MoveHistoryPanel
+      :moves="displayMoves"
+      @reset="resetQueue"
+      @copy="copyQueueToClipboard"
+      @add-moves="handleAddMoves"
+      @open-add-modal="openAddModal"
+    />
     <div
-          v-for="(row, rowIndex) in moveRows"
-          :key="rowIndex"
-          class="moves-row"
-          :class="{ 'moves-row-justify': rowIndex < moveRows.length - 1 }"
+      v-if="isAddModalOpen"
+      class="moves-modal-backdrop"
+      @click.self="closeAddModal"
     >
-          <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 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 v-if="displayMoves.length" class="moves-actions">
-        <button class="queue-action" @click="copyQueueToClipboard">copy</button>
-        <button class="queue-action" @click="resetQueue">reset</button>
+    </div>
+    <div class="rotation-debug">
+      <div class="rotation-debug-target">
+        {{ rotationDebugTarget !== null ? rotationDebugTarget : '-' }}
+      </div>
+      <div class="rotation-debug-current">
+        {{ rotationDebugCurrent !== null ? rotationDebugCurrent : '-' }}
       </div>
     </div>
   </div>
@@ -714,116 +838,84 @@ watch(displayMoves, () => {
   transform-style: preserve-3d;
 }
 
-.controls {
-  position: absolute;
-  top: 96px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  z-index: 50;
-}
-
-.controls-left {
-  left: 24px;
-}
-
-.controls-right {
+.rotation-debug {
+  position: fixed;
   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;
-}
-
-.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 {
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  z-index: 60;
 }
 
-.moves-row {
-  display: flex;
-  column-gap: 8px;
+.rotation-debug-target {
+  font-size: 1.1rem;
+  font-weight: 700;
 }
 
-.moves-row-justify {
-  justify-content: space-between;
+.rotation-debug-current {
+  font-size: 0.95rem;
+  opacity: 0.8;
 }
 
-.move-pill {
+.moves-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px 8px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-size: 0.8rem;
-  color: #f0f0f0;
-  white-space: nowrap;
+  z-index: 200;
 }
 
-.move-pill-active {
-  background: #ffd500;
-  color: #000;
-  border-color: #ffd500;
+.moves-modal {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  color: var(--text-color);
+  border-radius: 10px;
+  padding: 24px;
+  min-width: 480px;
+  max-width: 800px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
 }
 
-.move-pill-pending {
-  opacity: 0.4;
+.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-actions {
-  position: absolute;
-  right: 6px;
-  bottom: 6px;
+.moves-modal-textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.moves-modal-actions {
+  margin-top: 20px;
   display: flex;
-  gap: 0px;
+  justify-content: flex-end;
+  gap: 12px;
 }
 
-.queue-action {
-  border: none;
-  background: transparent;
-  padding: 6px 6px;
-  color: #fff;
-  font-size: 0.8rem;
-  cursor: pointer;
+.moves-modal-button {
+  font-size: 0.85rem;
 }
 
-.moves-history::after {
-  content: none;
-}
-
-.queue-action:focus {
+.moves-modal-button:focus {
   outline: none;
   box-shadow: none;
 }

src/style.css

@@ -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);