feat: add Worlds 2-3, patch persistence, and zoom controls

- World 2 (Filtros): 8 levels teaching filters, resonance, LFO modulation, acid bass
- World 3 (Envelopes): 8 levels teaching VCA, ADSR, pluck, tremolo, full synth lead
- Star-based world unlock system (12 stars for W2, 24 for W3)
- Level patch persistence: auto-saves player patches, restores on revisit
- Google Maps-style zoom controls (+/−/reset) in both puzzle and sandbox views
- Multi-world navigation in GameApp and WorldMap
- Target audio now supports filter chain for World 2 levels

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-21 02:28:36 +01:00
parent 00c4ec8e00
commit 41d993183f
9 changed files with 1292 additions and 95 deletions

View File

@@ -566,3 +566,67 @@ html, body, #root {
.gm-check-star { color: var(--yellow); }
.gm-complete-actions { display: flex; gap: 8px; justify-content: center; }
/* World stars counter */
.gm-world-stars {
display: flex; align-items: center; gap: 4px;
font-size: 14px; color: var(--text2);
background: var(--surface); border-radius: 12px; padding: 4px 10px;
}
.gm-world-stars .star.filled { color: var(--yellow); }
/* ===== Zoom Controls (Google Maps style) ===== */
.zoom-controls {
position: absolute;
top: 12px;
right: 12px;
z-index: 50;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.zoom-btn {
width: 36px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text);
border: none;
cursor: pointer;
font-size: 18px;
font-weight: 600;
transition: background 0.15s;
}
.zoom-btn:hover {
background: var(--surface2);
}
.zoom-btn:active {
background: var(--border);
}
.zoom-btn.zoom-label {
font-size: 10px;
font-weight: 500;
color: var(--text2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
height: 26px;
width: 36px;
}
/* Zoom positioning inside puzzle canvas */
.gm-puzzle-canvas-wrap .zoom-controls {
top: 12px;
right: 12px;
}
/* Position zoom inside sandbox main-area (offset for palette sidebar) */
.main-area .zoom-controls {
top: 12px;
right: 220px;
}