From 4aea77620709bdcfb2ec748be73688654893fa81 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Sun, 22 Feb 2026 20:48:29 +0000
Subject: [PATCH] feat: cube transparency toggle

---
 src/components/NavBar.vue              | 14 ++++++++++++--
 src/components/renderers/SmartCube.vue |  3 ++-
 src/composables/useSettings.js         | 21 ++++++++++++++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c86f351..67565d6 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { Sun, Moon, Layers } from 'lucide-vue-next';
+import { Sun, Moon, Layers, Grid2x2 } from 'lucide-vue-next';
 import { ref, onMounted } from 'vue';
 import { useSettings } from '../composables/useSettings';
 
-const { showProjections, toggleProjections } = useSettings();
+const { showProjections, toggleProjections, isCubeTranslucent, toggleCubeTranslucent } = useSettings();
 const isDark = ref(true);
 
 const setTheme = (dark) => {
@@ -39,6 +39,16 @@ onMounted(() => {
         <Layers :size="20" />
       </button>
 
+      <!-- Cube Opacity Toggle -->
+      <button
+        class="btn-neon nav-btn icon-only"
+        @click="toggleCubeTranslucent"
+        :title="isCubeTranslucent ? 'Wyłącz przezroczystość kostki' : 'Włącz przezroczystość kostki'"
+        :class="{ active: isCubeTranslucent }"
+      >
+        <Grid2x2 :size="20" />
+      </button>
+
       <!-- Theme Toggle -->
       <button class="btn-neon nav-btn icon-only" @click="toggleTheme" :title="isDark ? 'Przełącz na jasny' : 'Przełącz na ciemny'">
         <Sun v-if="isDark" :size="20" />
diff --git a/src/components/renderers/SmartCube.vue b/src/components/renderers/SmartCube.vue
index 1011249..6df177b 100644
--- a/src/components/renderers/SmartCube.vue
+++ b/src/components/renderers/SmartCube.vue
@@ -5,7 +5,7 @@ import { useSettings } from '../../composables/useSettings'
 import Line3D from '../common/Line3D.vue'
 
 const { cubies, initCube, rotateLayer, turn, FACES } = useCube()
-const { showProjections } = useSettings()
+const { showProjections, isCubeTranslucent } = useSettings()
 
 // --- Visual State ---
 const rx = ref(-25) // Initial View Rotation X
@@ -472,6 +472,7 @@ onUnmounted(() => {
           <div v-for="(color, face) in c.faces" :key="face"
                class="sticker"
                :class="[face, color]"
+               :style="{ opacity: isCubeTranslucent ? 0.5 : 1 }"
                :data-id="c.id"
                :data-face="face">
           </div>
diff --git a/src/composables/useSettings.js b/src/composables/useSettings.js
index f68cbf9..80aecea 100644
--- a/src/composables/useSettings.js
+++ b/src/composables/useSettings.js
@@ -10,6 +10,16 @@ try {
 
 const showProjections = ref(initialShowProjections);
 
+let initialCubeTranslucent = false;
+try {
+  const stored = localStorage.getItem('cubeTranslucent');
+  if (stored !== null) {
+    initialCubeTranslucent = stored === 'true';
+  }
+} catch (e) {}
+
+const isCubeTranslucent = ref(initialCubeTranslucent);
+
 export function useSettings() {
   const toggleProjections = () => {
     showProjections.value = !showProjections.value;
@@ -18,8 +28,17 @@ export function useSettings() {
     } catch (e) {}
   };
 
+  const toggleCubeTranslucent = () => {
+    isCubeTranslucent.value = !isCubeTranslucent.value;
+    try {
+      localStorage.setItem('cubeTranslucent', String(isCubeTranslucent.value));
+    } catch (e) {}
+  };
+
   return {
     showProjections,
-    toggleProjections
+    toggleProjections,
+    isCubeTranslucent,
+    toggleCubeTranslucent
   };
 }