0.4.1

package-lock.json

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

src/components/renderers/SmartCube.vue

@@ -1,17 +1,20 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+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'
 
 const { cubies, initCube, rotateLayer, turn, FACES } = useCube()
 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 +32,7 @@ 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)
 
 // --- Constants & Helpers ---
 
@@ -229,10 +233,9 @@ 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)
@@ -264,6 +267,156 @@ const finishMove = (steps, directionOverride = null) => {
   }
 }
 
+const movesHistory = ref([])
+const movesHistoryEl = ref(null)
+const samplePillEl = ref(null)
+const movesPerRow = ref(0)
+const isAddModalOpen = ref(false)
+const addMovesText = ref('')
+
+const displayMoves = computed(() => {
+  const list = movesHistory.value.slice()
+
+  moveQueue.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 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 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 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 resetQueue = () => {
+  moveQueue.length = 0
+  movesHistory.value = []
+  currentMoveId.value = null
+  nextTick(recalcMovesLayout)
+}
+
+const openAddModal = () => {
+  addMovesText.value = ''
+  isAddModalOpen.value = true
+}
+
+const closeAddModal = () => {
+  isAddModalOpen.value = false
+}
+
+const handleAddMoves = () => {
+  const text = addMovesText.value || ''
+  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))
+  addMovesText.value = ''
+  isAddModalOpen.value = false
+}
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isAddModalOpen.value) {
+    e.preventDefault()
+    closeAddModal()
+  }
+}
+
 const getCubieStyle = (c) => {
   // Base Position
   const x = c.x * (SCALE + GAP)
@@ -307,6 +460,38 @@ const getCubieStyle = (c) => {
 
 const getProjectionStyle = () => ({})
 
+const moveQueue = []
+
+const dequeueMove = () => {
+  while (moveQueue.length) {
+    const next = moveQueue.shift()
+    const stepsMod = ((next.steps % 4) + 4) % 4
+    if (stepsMod === 0) continue
+
+    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)
+}
+
 const animateProgrammaticMove = (base, modifier) => {
   if (isAnimating.value || activeLayer.value) return
 
@@ -343,11 +528,11 @@ const animateProgrammaticMove = (base, modifier) => {
   const logicalSteps = direction * count
   let visualSteps = logicalSteps
   if (axis === 'z') visualSteps = -visualSteps
-  if (base === 'U') visualSteps = -visualSteps
+  if (base === 'U' || base === 'D') visualSteps = -visualSteps
   const target = visualSteps * 90
   const start = 0
   const startTime = performance.now()
-  const duration = 200 * count
+  const duration = LAYER_ANIMATION_DURATION * count
 
   const animate = (time) => {
     const p = Math.min((time - startTime) / duration, 1)
@@ -367,41 +552,103 @@ const animateProgrammaticMove = (base, modifier) => {
   requestAnimationFrame(animate)
 }
 
-const applyMove = (move) => {
+const MOVE_MAP = {
-  let base = move
+  'U':       { base: 'U', modifier: '' },
-  let modifier = ''
+  'U-prime': { base: 'U', modifier: "'" },
+  'U2':      { base: 'U', modifier: '2' },
 
-  if (move.endsWith('2')) {
+  'D':       { base: 'D', modifier: "'" },
-    modifier = '2'
+  'D-prime': { base: 'D', modifier: '' },
-    base = move[0]
+  'D2':      { base: 'D', modifier: '2' },
-  } else if (move.endsWith('-prime')) {
+
-    modifier = "'"
+  'L':       { base: 'B', modifier: "'" },
-    base = move[0]
+  '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 applyMove = (move) => {
+  const mapping = MOVE_MAP[move]
+  if (!mapping) return
+
+  let delta = 0
+  if (mapping.modifier === "'") delta = 1          // logical +1
+  else if (mapping.modifier === '') delta = -1     // logical -1
+  else if (mapping.modifier === '2') delta = -2    // logical -2
+
+  const displayBase = move[0]
+
+  const last = moveQueue[moveQueue.length - 1]
+  if (last && last.base === mapping.base && last.displayBase === displayBase) {
+    last.steps += delta
+  } else {
+    moveQueue.push({ base: mapping.base, displayBase, steps: delta })
   }
 
-  animateProgrammaticMove(base, modifier)
+  processNextMove()
+}
+
+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
   currentLayerRotation.value = 0
   isAnimating.value = false
   selectedCubie.value = null
   selectedFace.value = null
+  processNextMove()
 })
 
 onMounted(() => {
   initCube()
   window.addEventListener('mousemove', onMouseMove)
   window.addEventListener('mouseup', onMouseUp)
+  window.addEventListener('resize', recalcMovesLayout)
+  window.addEventListener('keydown', handleKeydown)
+  nextTick(recalcMovesLayout)
 })
 
 onUnmounted(() => {
   window.removeEventListener('mousemove', onMouseMove)
   window.removeEventListener('mouseup', onMouseUp)
-  // Clean up any potential animation frames? rafId is local to snapRotation, but harmless.
+  window.removeEventListener('resize', recalcMovesLayout)
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+watch(displayMoves, () => {
+  nextTick(recalcMovesLayout)
 })
 
 </script>
@@ -427,21 +674,104 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <div class="controls">
+    <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('U-prime')">U'</button>
+        <button class="btn-neon move-btn" @click="applyMove('D')">D</button>
-        <button class="btn-neon move-btn" @click="applyMove('U2')">U2</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('L')">L</button>
+        <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>
+
+    <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">
+        <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
+          v-if="displayMoves.length"
+          class="queue-action"
+          @click="copyQueueToClipboard"
+        >
+          copy
+        </button>
+        <button
+          v-if="displayMoves.length"
+          class="queue-action"
+          @click="resetQueue"
+        >
+          reset
+        </button>
+      </div>
+    </div>
+    <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">
+            add moves
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -483,13 +813,20 @@ onUnmounted(() => {
 .controls {
   position: absolute;
   top: 96px;
-  right: 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 50;
 }
 
+.controls-left {
+  left: 24px;
+}
+
+.controls-right {
+  right: 24px;
+}
+
 .controls-row {
   display: flex;
   gap: 8px;
@@ -503,6 +840,142 @@ onUnmounted(() => {
   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 {
+  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;
+}
+
+.moves-history::after {
+  content: none;
+}
+
+.queue-action:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.moves-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.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);
+}
+
+.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 */
 .projections {
   position: absolute;

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