Refactor: Implement SmartCube renderer, improve UI styling, and fix gaps

src/composables/useCube.js

@@ -1,42 +1,51 @@
+
 import { ref, computed } from 'vue';
-import { Cube, COLORS, FACES } from '../utils/Cube';
+import { COLORS, FACES } from '../utils/CubeModel';
+
+// Singleton worker
+const worker = new Worker(new URL('../workers/Cube.worker.js', import.meta.url), { type: 'module' });
+
+// Reactive state
+const cubies = ref([]);
+const isReady = ref(false);
+const validationResult = ref(null);
+
+worker.onmessage = (e) => {
+  const { type, payload } = e.data;
+  if (type === 'STATE_UPDATE') {
+    cubies.value = payload.cubies;
+    isReady.value = true;
+  } else if (type === 'VALIDATION_RESULT') {
+    validationResult.value = payload;
+  } else if (type === 'ERROR') {
+    console.error('Worker Error:', payload);
+  }
+};
+
+// Init worker
+worker.postMessage({ type: 'INIT' });
 
 export function useCube() {
-  const cube = ref(new Cube());
-  
-  // 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 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 triggerUpdate = () => {
-    // Force Vue to notice change
-    cube.value = Object.assign(Object.create(Object.getPrototypeOf(cube.value)), cube.value);
+    worker.postMessage({ type: 'RESET' });
   };
 
   const rotateLayer = (axis, index, direction) => {
-    cube.value.rotateLayer(axis, index, direction);
-    triggerUpdate();
+    worker.postMessage({ type: 'ROTATE_LAYER', payload: { axis, index, direction } });
   };
-  
+
+  const validate = () => {
+    worker.postMessage({ type: 'VALIDATE' });
+  };
+
   return {
-    cube,
-    cubies,
-    cubeState,
+    cubies: computed(() => cubies.value),
+    isReady: computed(() => isReady.value),
+    validationResult: computed(() => validationResult.value),
     initCube,
     rotateLayer,
+    validate,
     COLORS,
     FACES
   };