fix: center game controls in playground mode

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
2026-01-16 05:05:29 +01:00
parent 55379c14f0
commit 547840c3fd
2 changed files with 7 additions and 1 deletions

View File

@@ -147,6 +147,7 @@ const elements = {
previewSection: document.querySelector(".preview-section"), previewSection: document.querySelector(".preview-section"),
prevBtn: document.getElementById("prev-btn"), prevBtn: document.getElementById("prev-btn"),
nextBtn: document.getElementById("next-btn"), nextBtn: document.getElementById("next-btn"),
gameControls: document.querySelector(".game-controls"),
levelIndicator: document.getElementById("level-indicator"), levelIndicator: document.getElementById("level-indicator"),
headerLevelPill: document.getElementById("header-level-pill"), headerLevelPill: document.getElementById("header-level-pill"),
@@ -708,9 +709,10 @@ function updateNavigationButtons() {
const engineState = lessonEngine.getCurrentState(); const engineState = lessonEngine.getCurrentState();
const isPlayground = engineState.lesson?.mode === "playground"; const isPlayground = engineState.lesson?.mode === "playground";
// Hide nav buttons in playground mode // Hide nav buttons and center controls in playground mode
elements.prevBtn.classList.toggle("hidden", isPlayground); elements.prevBtn.classList.toggle("hidden", isPlayground);
elements.nextBtn.classList.toggle("hidden", isPlayground); elements.nextBtn.classList.toggle("hidden", isPlayground);
elements.gameControls?.classList.toggle("centered", isPlayground);
if (!isPlayground) { if (!isPlayground) {
elements.prevBtn.disabled = !engineState.canGoPrev; elements.prevBtn.disabled = !engineState.canGoPrev;

View File

@@ -891,6 +891,10 @@ kbd {
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08);
} }
.game-controls.centered {
justify-content: center;
}
/* ================= SIDEBAR ================= */ /* ================= SIDEBAR ================= */
.sidebar-backdrop { .sidebar-backdrop {
position: fixed; position: fixed;