diff --git a/css/style.css b/css/style.css index 88aeed7..d1e0087 100644 --- a/css/style.css +++ b/css/style.css @@ -78,7 +78,7 @@ body { .gate-btn.output-btn { border-color: #ff8833; } .gate-btn.output-btn:hover { border-color: #ffaa55; } -.separator { width: 1px; height: 32px; background: #2a2a3a; margin: 0 6px; } +.separator { width: 1px; height: 24px; background: #2a2a3a; margin: 0 4px; } .create-component-btn { padding: 4px 10px; @@ -111,56 +111,107 @@ body { .action-btn.sim-btn:hover { background: #ff44aa22; } .action-btn.sim-btn.active { background: #ff44aa33; border-color: #ff66cc; color: #ff66cc; } -/* ==================== Toolbar Sections ==================== */ -.toolbar-section { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - padding: 4px 0; +/* ==================== Toolbar Dropdowns ==================== */ +.toolbar-dropdown { + position: relative; } -.section-label { - font-size: 8px; - color: #555; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - padding: 0 2px; - line-height: 1; -} - -.section-buttons { - display: flex; - gap: 3px; - align-items: center; - flex-wrap: nowrap; -} - -.toolbar-section .gate-btn { - padding: 4px 10px; - font-size: 11px; -} - -.toolbar-section #saved-components { - display: flex; - gap: 3px; - align-items: center; -} - -.toolbar-section .component-btn { - padding: 4px 10px; - font-size: 11px; +.dropdown-toggle { + padding: 6px 14px; background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 6px; + color: #ccc; + cursor: pointer; + font-size: 12px; + font-weight: 600; + transition: all 0.15s; + user-select: none; + display: flex; + align-items: center; + gap: 6px; +} + +.dropdown-toggle:hover { + background: #252540; + border-color: #00e599; + color: #fff; +} + +.toolbar-dropdown.open .dropdown-toggle { + background: #252540; + border-color: #00e599; + color: #00e599; +} + +.dropdown-arrow { + font-size: 10px; + opacity: 0.6; + transition: transform 0.15s; +} + +.toolbar-dropdown.open .dropdown-arrow { + transform: rotate(180deg); + opacity: 1; +} + +.dropdown-menu { + display: none; + position: absolute; + top: calc(100% + 6px); + left: 0; + min-width: 140px; + background: #14141e; + border: 1px solid #2a2a3a; + border-radius: 8px; + padding: 4px; + z-index: 150; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + flex-direction: column; + gap: 2px; +} + +.toolbar-dropdown.open .dropdown-menu { + display: flex; +} + +.dropdown-menu .gate-btn { + width: 100%; + text-align: left; + padding: 7px 12px; + border-radius: 5px; + font-size: 12px; +} + +.dropdown-menu .create-component-btn { + width: 100%; + text-align: left; + padding: 7px 12px; + border-radius: 5px; + font-size: 12px; +} + +.dropdown-menu #saved-components { + display: flex; + flex-direction: column; + gap: 2px; +} + +.dropdown-menu .component-btn { + width: 100%; + text-align: left; + padding: 7px 12px; + background: #1a1a2e; + border: 1px solid #2a2a3a; + border-radius: 5px; color: #9900ff; cursor: pointer; + font-size: 12px; font-weight: 600; transition: all 0.15s; } -.toolbar-section .component-btn:hover { +.dropdown-menu .component-btn:hover { border-color: #9900ff; color: #cc66ff; background: #252540; diff --git a/index.html b/index.html index 8a8ceab..178b10a 100644 --- a/index.html +++ b/index.html @@ -10,22 +10,20 @@
- -
-
I/O
-
+ +
+ +
-
- - -
-
Gates
-
+ +
+ +
@@ -35,19 +33,15 @@
-
- - -
-
Components
-
+ +
+ +
-
-
diff --git a/js/components.js b/js/components.js index b6863d5..685fdc9 100644 --- a/js/components.js +++ b/js/components.js @@ -286,6 +286,8 @@ export function updateComponentButtons() { btn.addEventListener('click', (e) => { e.stopPropagation(); state.placingGate = `COMPONENT:${comp.id}`; + // Close dropdown + document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open')); }); container.appendChild(btn); }); diff --git a/js/events.js b/js/events.js index a7e3a8f..a4ca266 100644 --- a/js/events.js +++ b/js/events.js @@ -215,9 +215,32 @@ export function initEvents() { keysDown.delete(e.key); }); - // ==================== TOOLBAR ==================== - document.querySelectorAll('.gate-btn').forEach(btn => { - btn.addEventListener('click', () => { + // ==================== TOOLBAR DROPDOWNS ==================== + function closeAllDropdowns() { + document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open')); + } + + document.querySelectorAll('.dropdown-toggle').forEach(toggle => { + toggle.addEventListener('click', (e) => { + e.stopPropagation(); + const dropdown = toggle.parentElement; + const wasOpen = dropdown.classList.contains('open'); + closeAllDropdowns(); + if (!wasOpen) dropdown.classList.add('open'); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener('click', (e) => { + if (!e.target.closest('.toolbar-dropdown')) { + closeAllDropdowns(); + } + }); + + // Gate buttons inside dropdowns + document.querySelectorAll('.dropdown-menu .gate-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); const gateName = btn.dataset.gate; // In puzzle mode, check if gate is allowed if (puzzleMode && currentLevel) { @@ -228,6 +251,7 @@ export function initEvents() { } } state.placingGate = gateName; + closeAllDropdowns(); }); }); @@ -332,7 +356,9 @@ export function initEvents() { document.addEventListener('mouseup', () => { state.resizingWave = false; }); // ==================== COMPONENT EDITOR ==================== - document.getElementById('create-component-btn').addEventListener('click', () => { + document.getElementById('create-component-btn').addEventListener('click', (e) => { + e.stopPropagation(); + closeAllDropdowns(); enterComponentEditor(); });