chore: bump version to 0.2.0

package.json

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

src/components/renderers/SmartCube.vue

@@ -343,7 +343,7 @@ 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()
@@ -367,19 +367,36 @@ const animateProgrammaticMove = (base, modifier) => {
   requestAnimationFrame(animate)
 }
 
+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 applyMove = (move) => {
-  let base = move
+  const mapping = MOVE_MAP[move]
-  let modifier = ''
+  if (!mapping) return
-
+  animateProgrammaticMove(mapping.base, mapping.modifier)
-  if (move.endsWith('2')) {
-    modifier = '2'
-    base = move[0]
-  } else if (move.endsWith('-prime')) {
-    modifier = "'"
-    base = move[0]
-  }
-
-  animateProgrammaticMove(base, modifier)
 }
 
 watch(cubies, () => {
@@ -427,21 +444,39 @@ 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>
   </div>
@@ -483,13 +518,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;