JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move game buttons into toolbar-right to prevent overlap

Browse Source 
Save Gadget and Back to World buttons were overlapping Export/Import.
Now they are dynamically inserted into .toolbar-right when entering
workshop mode, sitting inline with the other toolbar buttons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 17:40:09 +01:00
parent 816a02aeb9
commit e7b18afd1a
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -7,9 +7,9 @@
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Back to world button (shown in workshop mode) -->
<button id="back-to-world-btn" style="display:none; position:fixed; top:12px; right:12px; z-index:200; padding:6px 14px; background:#00e599; border:none; border-radius:6px; color:#000; font-weight:700; cursor:pointer; font-size:12px;">◀ Back to World</button>
<button id="save-gadget-btn" style="display:none; position:fixed; top:12px; right:170px; z-index:200; padding:6px 14px; background:#ff44aa; border:none; border-radius:6px; color:#fff; font-weight:700; cursor:pointer; font-size:12px;">🎒 Save as Gadget</button>
<!-- Game buttons (hidden, placed outside toolbar — injected into toolbar-right by gameMode.js) -->
<button id="save-gadget-btn" class="action-btn" style="display:none; background:#ff44aa; color:#fff; border:none; border-radius:4px; font-weight:700; cursor:pointer; font-size:11px; padding:6px 12px;">🎒 Save Gadget</button>
<button id="back-to-world-btn" class="action-btn" style="display:none; background:#00e599; color:#000; border:none; border-radius:4px; font-weight:700; cursor:pointer; font-size:11px; padding:6px 12px;">◀ World</button>
<div id="toolbar">
<span class="logo">⚡ Logic Lab</span>

24
js/world/gameMode.js
View File

@@ -300,9 +300,11 @@ function showWorldUI() {
canvas.style.cursor = 'default';
}
// Show back-to-world button (hidden since we're IN world)
// Hide game buttons (we're IN world, not workshop)
const backBtn = document.getElementById('back-to-world-btn');
if (backBtn) backBtn.style.display = 'none';
const saveBtn = document.getElementById('save-gadget-btn');
if (saveBtn) saveBtn.style.display = 'none';
}
function hideWorldUI() {
@@ -319,19 +321,27 @@ function showWorkshopUI() {
canvas.style.cursor = 'default';
}
// Show back-to-world button and save-gadget button
const backBtn = document.getElementById('back-to-world-btn');
if (backBtn) backBtn.style.display = 'flex';
// Move game buttons into toolbar-right so they sit inline with Export/Import
const toolbarRight = document.querySelector('.toolbar-right');
const saveBtn = document.getElementById('save-gadget-btn');
if (saveBtn) saveBtn.style.display = 'flex';
const backBtn = document.getElementById('back-to-world-btn');
if (toolbarRight && saveBtn) {
toolbarRight.insertBefore(saveBtn, toolbarRight.firstChild);
saveBtn.style.display = 'inline-block';
}
if (toolbarRight && backBtn) {
toolbarRight.insertBefore(backBtn, toolbarRight.firstChild);
backBtn.style.display = 'inline-block';
}
}
function hideWorkshopUI() {
const toolbar = document.getElementById('toolbar');
if (toolbar) toolbar.style.display = 'none';
// Hide game buttons and move them back out of toolbar
const backBtn = document.getElementById('back-to-world-btn');
if (backBtn) backBtn.style.display = 'none';
if (backBtn) { backBtn.style.display = 'none'; document.body.insertBefore(backBtn, document.body.firstChild); }
const saveBtn = document.getElementById('save-gadget-btn');
if (saveBtn) saveBtn.style.display = 'none';
if (saveBtn) { saveBtn.style.display = 'none'; document.body.insertBefore(saveBtn, document.body.firstChild); }
}