gkucmierz/rubic-cube
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-22 04:35:59 +00:00
parent 57abfd6b80
commit b5ddc21662
4168 changed files with 763782 additions and 1008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/NavBar.vue
View File

@@ -1,9 +1,6 @@
<script setup>
import { Sun, Moon } from 'lucide-vue-next';
import { ref, onMounted } from 'vue';
import { useRenderer } from '../composables/useRenderer';
const { activeRenderer, setRenderer, RENDERERS } = useRenderer();
const isDark = ref(true);
@@ -11,30 +8,6 @@ const setTheme = (dark) => {
isDark.value = dark;
const theme = dark ? 'dark' : 'light';
document.documentElement.dataset.theme = theme;
if (dark) {
document.documentElement.style.setProperty('--bg-gradient', 'linear-gradient(135deg, #2c3e50 0%, #000000 100%)');
document.documentElement.style.setProperty('--text-color', '#ffffff');
document.documentElement.style.setProperty('--text-strong', '#ffffff');
document.documentElement.style.setProperty('--text-muted', 'rgba(255, 255, 255, 0.7)');
document.documentElement.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.05)');
document.documentElement.style.setProperty('--glass-border', 'rgba(255, 255, 255, 0.1)');
document.documentElement.style.setProperty('--panel-bg', 'rgba(255, 255, 255, 0.05)');
document.documentElement.style.setProperty('--panel-border', 'rgba(255, 255, 255, 0.1)');
document.documentElement.style.setProperty('--cube-edge-color', '#333333');
document.documentElement.style.setProperty('--title-gradient', 'linear-gradient(45deg, #00f2fe, #4facfe)');
} else {
document.documentElement.style.setProperty('--bg-gradient', 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)');
document.documentElement.style.setProperty('--text-color', '#0f172a');
document.documentElement.style.setProperty('--text-strong', '#0f172a');
document.documentElement.style.setProperty('--text-muted', 'rgba(15, 23, 42, 0.6)');
document.documentElement.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.75)');
document.documentElement.style.setProperty('--glass-border', 'rgba(15, 23, 42, 0.12)');
document.documentElement.style.setProperty('--panel-bg', 'rgba(255, 255, 255, 0.7)');
document.documentElement.style.setProperty('--panel-border', 'rgba(15, 23, 42, 0.12)');
document.documentElement.style.setProperty('--cube-edge-color', '#000000');
document.documentElement.style.setProperty('--title-gradient', 'linear-gradient(45deg, #0ea5e9, #6366f1)');
}
};
const toggleTheme = () => {
@@ -53,18 +26,6 @@ onMounted(() => {
</div>
<div class="nav-container">
<div class="renderer-selector">
<button
v-for="renderer in RENDERERS"
:key="renderer"
@click="setRenderer(renderer)"
class="renderer-btn"
:class="{ active: activeRenderer === renderer }"
>
{{ renderer }}
</button>
</div>
<!-- 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" />
@@ -80,17 +41,18 @@ onMounted(() => {
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 50px;
height: 60px;
width: 100%;
box-sizing: border-box;
position: sticky;
position: absolute;
top: 0;
left: 0;
z-index: 100;
margin-bottom: 0;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
/* Glass panel styles handle background/border/shadow */
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
}
.logo-container {
@@ -100,10 +62,10 @@ onMounted(() => {
}
.logo-text {
font-size: 1.2rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
text-shadow: 0 0 20px var(--title-glow);
color: var(--text-strong);
letter-spacing: 1px;
}
.nav-container {
@@ -112,67 +74,19 @@ onMounted(() => {
align-items: center;
}
.renderer-selector {
display: flex;
gap: 5px;
background: rgba(0, 0, 0, 0.2);
padding: 3px;
border-radius: 6px;
}
.renderer-btn {
background: transparent;
border: none;
color: var(--text-muted);
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
transition: all 0.2s;
}
.renderer-btn:hover {
color: var(--text-color);
}
.renderer-btn.active {
background: var(--glass-border);
color: var(--text-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.nav-btn {
background: transparent;
border: none;
color: var(--text-color);
font-size: 1rem;
color: var(--text-strong);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
padding: 12px;
border-radius: 50%;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.btn-neon {
border: 1px solid var(--toggle-btn-border);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.desktop-only {
display: flex;
}
@media (max-width: 768px) {
.desktop-only {
display: none;
}
background: rgba(255, 255, 255, 0.2);
}
</style>