fix: invert rotation logic and add debug tools

src/composables/useCube.js

@@ -1,70 +1,43 @@
 import { ref, computed } from 'vue';
 import { Cube, COLORS, FACES } from '../utils/Cube';
 
-// Map natural numbers (0-5) to CSS colors
-const COLOR_MAP = {
-  [COLORS.WHITE]: 'white',
-  [COLORS.YELLOW]: 'yellow',
-  [COLORS.ORANGE]: 'orange',
-  [COLORS.RED]: 'red',
-  [COLORS.GREEN]: 'green',
-  [COLORS.BLUE]: 'blue'
-};
-
 export function useCube() {
   const cube = ref(new Cube());
   
-  // Expose state for rendering (flattened for Vue template simplicity or kept as matrix)
-  // Let's expose matrix but maybe helper to flatten if needed?
-  // The Cube class uses 3x3 matrices.
-  // The Vue template currently iterates `cubeState.top` (array of 9).
-  // We should adapt `cubeState` to match what the template expects OR update template.
-  // The user asked to "Dostosować src/components/Main.vue do renderowania nowego modelu danych".
-  // So we can expose the 3x3 matrices directly.
+  // Make cubies reactive so Vue tracks changes
+  // We can just expose the cube instance, but better to expose reactive properties
+  // Since `cube` is a ref, `cube.value.cubies` is not deeply reactive by default unless `cube.value` is reactive.
+  // But `ref` wraps the object. If we mutate properties of the object, it might not trigger.
+  // Let's rely on triggering updates manually or creating a new instance on reset.
+  // For rotation, we will force update.
   
-  const cubeState = computed(() => cube.value.state);
+  const cubies = computed(() => cube.value.cubies);
+
+  // Compute the 6-face state matrix for display/debug
+  const cubeState = computed(() => cube.value.getState());
 
   const initCube = () => {
     cube.value.reset();
+    triggerUpdate();
   };
 
-  const rotateLayer = (layer, direction) => {
-    // layer is string 'top', 'front' etc.
-    // Map string to FACES constant if needed, but FACES values are 'up', 'down', etc.
-    // The previous implementation used 'top', 'bottom', 'left', 'right', 'front', 'back'.
-    // Cube.js uses 'up', 'down', 'left', 'right', 'front', 'back'.
-    
-    // Map legacy layer names to new Face names
-    const layerMap = {
-      'top': FACES.UP,
-      'bottom': FACES.DOWN,
-      'left': FACES.LEFT,
-      'right': FACES.RIGHT,
-      'front': FACES.FRONT,
-      'back': FACES.BACK
-    };
-    
-    const face = layerMap[layer];
-    if (face) {
-      cube.value.rotate(face, direction);
-      // Trigger reactivity since Cube is a class and state is internal object
-      // We made `cube` a ref, but mutating its internal state might not trigger update
-      // unless we replace the state or use reactive().
-      // `cube.value.rotate` mutates `this.state`.
-      // We should probably make `cube.value.state` reactive or trigger update.
-      cube.value = Object.assign(Object.create(Object.getPrototypeOf(cube.value)), cube.value);
-    }
+  const triggerUpdate = () => {
+    // Force Vue to notice change
+    cube.value = Object.assign(Object.create(Object.getPrototypeOf(cube.value)), cube.value);
+  };
+
+  const rotateLayer = (axis, index, direction) => {
+    cube.value.rotateLayer(axis, index, direction);
+    triggerUpdate();
   };
   
-  // Helper to get flattened array for a face (if template wants it)
-  // But better to update template to use 2D loop or flatten here.
-  // Let's provide a helper or just let template handle it.
-  
   return {
+    cube,
+    cubies,
     cubeState,
     initCube,
     rotateLayer,
-    COLOR_MAP,
+    COLORS,
     FACES
   };
 }