From 4335938956a3ab773d9b2786bb26ab54bdb8eda2 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Sun, 15 Feb 2026 22:31:50 +0100
Subject: [PATCH] Hotfix: Use local mod function instead of external dependency
 to fix rendering issue

---
 src/components/Main.vue | 12 ++++++++++--
 src/utils/Cube.js       |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index d06838a..801afb4 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -5,10 +5,18 @@ import { useCube } from '../composables/useCube'
 const { cubeState, initCube, rotateLayer, COLOR_MAP } = useCube()
 
 const getFaceColors = (faceName) => {
-  if (!cubeState.value || !cubeState.value[faceName]) return Array(9).fill('gray');
+  if (!cubeState.value || !cubeState.value[faceName]) {
+    // Return placeholder colors if state is not ready
+    return Array(9).fill('#333');
+  }
   // cubeState.value[faceName] is a 3x3 matrix.
   // We need to flatten it.
-  return cubeState.value[faceName].flat().map(c => COLOR_MAP[c]);
+  try {
+    return cubeState.value[faceName].flat().map(c => COLOR_MAP[c] || 'gray');
+  } catch (e) {
+    console.error('Error mapping face colors', e);
+    return Array(9).fill('red'); // Error state
+  }
 };
 
 // ...ref(25)
diff --git a/src/utils/Cube.js b/src/utils/Cube.js
index ebd42cf..82bbbc0 100644
--- a/src/utils/Cube.js
+++ b/src/utils/Cube.js
@@ -1,4 +1,4 @@
-import { mod } from '@gkucmierz/utils';
+const mod = (n, m) => ((n % m) + m) % m;
 
 // Enum for colors/faces
 export const COLORS = {