diff --git a/src/App.jsx b/src/App.jsx index 7e5d3da..13cfa98 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,7 +9,7 @@ import ModulePalette from './components/ModulePalette.jsx'; import PresetModal from './components/PresetModal.jsx'; import { CHIPTUNE_PRESET } from './presets/chiptune.js'; -export default function App() { +export default function App({ onSwitchToGame }) { const [, forceUpdate] = useState(0); const containerRef = useRef(null); const portPositions = useRef({}); @@ -205,6 +205,11 @@ export default function App() {
{/* Toolbar */}
+ {onSwitchToGame && ( + + )} Reaktor
+ + {stars >= 1 && !isLastLevel && ( + + )} +
+
+
+ ); +} diff --git a/src/game/PuzzleView.jsx b/src/game/PuzzleView.jsx new file mode 100644 index 0000000..5f89ef5 --- /dev/null +++ b/src/game/PuzzleView.jsx @@ -0,0 +1,379 @@ +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { state, subscribe, addModule, emit, addConnection, removeModule, updateModulePosition, deserialize } from '../engine/state.js'; +import { startAudio, stopAudio, connectWire, rebuildGraph } from '../engine/audioEngine.js'; +import { getModuleDef } from '../engine/moduleRegistry.js'; +import ModuleNode from '../components/ModuleNode.jsx'; +import WireLayer from '../components/WireLayer.jsx'; +import { playTarget, stopTarget, isTargetPlaying } from './targetAudio.js'; +import LevelComplete from './LevelComplete.jsx'; +import { completeLevel } from './gameState.js'; + +export default function PuzzleView({ level, levelIndex, worldLevels, onBack, onNextLevel }) { + const [, forceUpdate] = useState(0); + const containerRef = useRef(null); + const portPositions = useRef({}); + const [tempWire, setTempWire] = useState(null); + const connectingRef = useRef(null); + const [showConcept, setShowConcept] = useState(true); + const [result, setResult] = useState(null); // { stars, checks } + const [targetPlaying, setTargetPlaying] = useState(false); + + // Subscribe to state changes + useEffect(() => { + const unsub = subscribe(() => forceUpdate(n => n + 1)); + return unsub; + }, []); + + // Load level on mount + useEffect(() => { + loadLevel(); + return () => { + stopAudio(); + stopTarget(); + }; + }, [level.id]); + + const loadLevel = useCallback(() => { + // Clear state and load preplaced modules + const data = { + modules: (level.preplacedModules || []).map(m => ({ + id: m.id, + type: m.type, + x: m.x, + y: m.y, + params: { ...m.params }, + })), + connections: [], + camera: { camX: 0, camY: 0, zoom: 1 }, + }; + deserialize(data); + setResult(null); + setShowConcept(true); + if (state.isRunning) stopAudio(); + }, [level]); + + // Port position reporting + const handlePortPosition = useCallback((moduleId, portName, direction, el) => { + const key = `${moduleId}-${portName}-${direction}`; + portPositions.current[key] = el; + }, []); + + // Start connecting wire + const handleStartConnect = useCallback((info) => { + connectingRef.current = info; + const containerRect = containerRef.current.getBoundingClientRect(); + setTempWire({ + portType: info.portType, + startX: info.startX - containerRect.left, + startY: info.startY - containerRect.top, + endX: info.startX - containerRect.left, + endY: info.startY - containerRect.top, + }); + }, []); + + const findPortAtPoint = (x, y) => { + for (const [dx, dy] of [[0,0],[-8,0],[8,0],[0,-8],[0,8],[-6,-6],[6,-6],[-6,6],[6,6]]) { + const hit = document.elementFromPoint(x + dx, y + dy); + if (hit && hit.classList.contains('port-dot') && hit.dataset.moduleId) { + return hit; + } + } + return null; + }; + + const handlePointerDown = useCallback((e) => { + if (e.button === 1 || (e.button === 0 && e.altKey) || e.button === 2) { + state.panning = true; + state.panStart = { x: e.clientX - state.camX, y: e.clientY - state.camY }; + e.preventDefault(); + } else if (e.button === 0 && !connectingRef.current) { + state.selectedModuleId = null; + emit(); + } + }, []); + + const handlePointerMove = useCallback((e) => { + if (state.panning && state.panStart) { + state.camX = e.clientX - state.panStart.x; + state.camY = e.clientY - state.panStart.y; + emit(); + return; + } + if (state.dragging) { + const newX = e.clientX / state.zoom - state.dragging.offsetX; + const newY = e.clientY / state.zoom - state.dragging.offsetY; + updateModulePosition(state.dragging.moduleId, newX, newY); + return; + } + if (connectingRef.current && containerRef.current) { + const containerRect = containerRef.current.getBoundingClientRect(); + setTempWire(prev => prev ? { + ...prev, + endX: e.clientX - containerRect.left, + endY: e.clientY - containerRect.top, + } : null); + } + }, []); + + const handlePointerUp = useCallback((e) => { + if (state.panning) { + state.panning = false; + state.panStart = null; + } + if (state.dragging) { + state.dragging = null; + emit(); + } + if (connectingRef.current) { + const portEl = findPortAtPoint(e.clientX, e.clientY); + if (portEl) finishConnection(portEl); + connectingRef.current = null; + setTempWire(null); + } + }, []); + + const finishConnection = (portEl) => { + const from = connectingRef.current; + if (!from) return; + const targetModuleId = parseInt(portEl.dataset.moduleId); + const targetPort = portEl.dataset.portName; + const targetDirection = portEl.dataset.portDirection; + if (!targetModuleId || !targetPort || !targetDirection) return; + if (targetModuleId === from.moduleId && targetPort === from.port) return; + + let fromMod, fromPort, toMod, toPort; + if (from.direction === 'output' && targetDirection === 'input') { + fromMod = from.moduleId; fromPort = from.port; + toMod = targetModuleId; toPort = targetPort; + } else if (from.direction === 'input' && targetDirection === 'output') { + fromMod = targetModuleId; fromPort = targetPort; + toMod = from.moduleId; toPort = from.port; + } else return; + + const connId = addConnection(fromMod, fromPort, toMod, toPort); + if (connId && state.isRunning) { + const conn = state.connections.find(c => c.id === connId); + if (conn) connectWire(conn); + } + }; + + const handleWheel = useCallback((e) => { + e.preventDefault(); + const delta = -e.deltaY * 0.001; + state.zoom = Math.max(0.3, Math.min(3, state.zoom + delta)); + emit(); + }, []); + + const handleContextMenu = useCallback((e) => e.preventDefault(), []); + + // Add module from palette + const handleAddModule = (type) => { + const x = (-state.camX + 250) / state.zoom + Math.random() * 30; + const y = (-state.camY + 150) / state.zoom + Math.random() * 30; + addModule(type, x, y); + if (state.isRunning) rebuildGraph(); + }; + + // Toggle player audio + const handleToggleAudio = async () => { + if (state.isRunning) { + stopAudio(); + } else { + await startAudio(); + } + emit(); + }; + + // Play target sound + const handlePlayTarget = async () => { + if (isTargetPlaying()) { + stopTarget(); + setTargetPlaying(false); + } else { + setTargetPlaying(true); + await playTarget(level.target); + // Auto-update when target stops + setTimeout(() => setTargetPlaying(false), (level.target.duration || 2) * 1000 + 100); + } + }; + + // Validate solution + const handleCheck = () => { + const mods = state.modules; + const conns = state.connections; + const checks = level.checks.map(check => ({ + ...check, + passed: check.test(mods, conns), + })); + + // Stars: sequential — need all previous stars to earn next + let stars = 0; + for (const check of checks) { + if (check.passed) stars = check.star; + else break; + } + + setResult({ stars, checks }); + + if (stars >= 1) { + completeLevel(level.id, stars); + } + }; + + const isLastLevel = levelIndex >= worldLevels.length - 1; + + return ( +
+ {/* Top bar */} +
+ +
+ {levelIndex + 1}/{worldLevels.length} + {level.title} +
+
+ + + +
+
+ +
+ {/* Left sidebar: concept + module palette */} +
+ {/* Concept panel */} +
+
setShowConcept(!showConcept)}> + 💡 Concepto + {showConcept ? '▼' : '▶'} +
+ {showConcept && ( +
+

{level.description}

+
+ Pista: {level.concept} +
+
+ )} +
+ + {/* Objectives */} +
+
Objetivos
+ {level.checks.map((check, i) => { + const passed = result?.checks?.[i]?.passed; + return ( +
+ {'★'.repeat(check.star)} + {check.desc} + {passed === true && ✓} + {passed === false && ✗} +
+ ); + })} +
+ + {/* Module palette for this level */} + {level.availableModules.length > 0 && ( +
+
Modulos Disponibles
+ {level.availableModules.map(type => { + const def = getModuleDef(type); + if (!def) return null; + return ( +
handleAddModule(type)} + > + {def.icon} + {def.name} + + +
+ ); + })} +
+ )} + + {/* Reset button */} + +
+ + {/* Main canvas */} +
+
+ {/* Grid */} + + + + + + + + + + {/* Wires */} + + + {/* Modules */} +
+ {state.modules.map(mod => ( + + ))} +
+
+ + {/* Canvas hints */} + {state.modules.length > 0 && state.connections.length === 0 && ( +
+ Arrastra de un puerto (circulo) a otro para conectar modulos +
+ )} +
+
+ + {/* Level complete overlay */} + {result && result.stars >= 1 && ( + + )} +
+ ); +} diff --git a/src/game/WorldMap.jsx b/src/game/WorldMap.jsx new file mode 100644 index 0000000..99186c8 --- /dev/null +++ b/src/game/WorldMap.jsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { WORLD_1 } from './levels/world1.js'; +import { getLevelProgress, isLevelUnlocked } from './gameState.js'; + +const worlds = [WORLD_1]; + +function Stars({ count, max = 3 }) { + return ( + + {Array.from({ length: max }, (_, i) => ( + ★ + ))} + + ); +} + +export default function WorldMap({ onSelectLevel, onSandbox }) { + const world = WORLD_1; + const totalStars = world.levels.reduce((s, l) => { + const p = getLevelProgress(l.id); + return s + (p?.stars || 0); + }, 0); + const maxStars = world.levels.length * 3; + + return ( +
+ {/* Header */} +
+
+ ~ +
+

SynthQuest

+

Aprende sintesis modular resolviendo puzzles

+
+
+
+
+ ★ {totalStars}/{maxStars} +
+ +
+
+ + {/* World section */} +
+
+ {world.icon} +
+

Mundo 1: {world.name}

+

{world.subtitle}

+
+
+ + {/* Level grid */} +
+ {world.levels.map((level, idx) => { + const progress = getLevelProgress(level.id); + const unlocked = isLevelUnlocked(level.id, world.levels); + const stars = progress?.stars || 0; + const isBoss = idx === world.levels.length - 1; + + return ( +
unlocked && onSelectLevel(level)} + > +
{idx + 1}
+
+

{level.title}

+

{level.subtitle}

+
+ {unlocked ? ( + + ) : ( + 🔒 + )} + {!unlocked &&
} +
+ ); + })} +
+
+ + {/* Future worlds teaser */} +
+
+ ▽ +
+

Mundo 2: Filtros

+

Proximamente... Consigue {Math.ceil(maxStars * 0.6)} estrellas para desbloquear

+
+ 🔒 +
+
+ +
+
+ ⏤╲ +
+

Mundo 3: Envelopes

+

Proximamente...

+
+ 🔒 +
+
+
+ ); +} diff --git a/src/game/gameState.js b/src/game/gameState.js new file mode 100644 index 0000000..9f2139a --- /dev/null +++ b/src/game/gameState.js @@ -0,0 +1,64 @@ +/** + * gameState.js — Game progress persistence + * Tracks completed levels, stars earned, and unlocks + */ + +const STORAGE_KEY = 'synthquest-progress'; + +const defaultProgress = { + currentWorld: 'w1', + completedLevels: {}, // { levelId: { stars: 3, bestTime: 12.5 } } + unlockedWorlds: ['w1'], + totalStars: 0, +}; + +let _progress = null; + +export function loadProgress() { + if (_progress) return _progress; + try { + const raw = localStorage.getItem(STORAGE_KEY); + _progress = raw ? { ...defaultProgress, ...JSON.parse(raw) } : { ...defaultProgress }; + } catch { + _progress = { ...defaultProgress }; + } + return _progress; +} + +export function saveProgress() { + if (!_progress) return; + _progress.totalStars = Object.values(_progress.completedLevels) + .reduce((sum, l) => sum + (l.stars || 0), 0); + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(_progress)); + } catch {} +} + +export function completeLevel(levelId, stars) { + const p = loadProgress(); + const existing = p.completedLevels[levelId]; + if (!existing || stars > existing.stars) { + p.completedLevels[levelId] = { stars, completedAt: Date.now() }; + } + saveProgress(); +} + +export function getLevelProgress(levelId) { + const p = loadProgress(); + return p.completedLevels[levelId] || null; +} + +export function isLevelUnlocked(levelId, worldLevels) { + const p = loadProgress(); + // First level is always unlocked + const idx = worldLevels.findIndex(l => l.id === levelId); + if (idx === 0) return true; + // Previous level must have at least 1 star + const prevId = worldLevels[idx - 1]?.id; + return prevId && p.completedLevels[prevId]?.stars >= 1; +} + +export function resetProgress() { + _progress = { ...defaultProgress }; + saveProgress(); +} diff --git a/src/game/levels/world1.js b/src/game/levels/world1.js new file mode 100644 index 0000000..65b6e99 --- /dev/null +++ b/src/game/levels/world1.js @@ -0,0 +1,481 @@ +/** + * World 1 — "Ondas" (Waves) + * + * Teaches: oscillators, waveforms, frequency, mixing + * 8 levels, progressive difficulty + */ + +export const WORLD_1 = { + id: 'w1', + name: 'Ondas', + subtitle: 'Los bloques fundamentales del sonido', + icon: '~', + color: '#00e5ff', + levels: [ + // ─────────────── LEVEL 1.1 ─────────────── + { + id: 'w1-1', + title: 'Tu Primer Sonido', + subtitle: 'Conecta y escucha', + description: 'Todo sonido en un sintetizador empieza con un oscilador. Un oscilador genera una onda que vibra a una frecuencia determinada. Conecta el oscilador a la salida para escuchar tu primer sonido.', + concept: 'Un oscilador genera una onda. La salida (Output) envía el sonido a tus altavoces. Conecta la salida del oscilador al input de la salida arrastrando de un puerto a otro.', + availableModules: [], // No new modules to add, just connect preplaced + preplacedModules: [ + { id: 1, type: 'oscillator', x: 100, y: 80, params: { waveform: 'sine', frequency: 440, detune: 0 }, locked: true }, + { id: 2, type: 'output', x: 500, y: 100, params: { volume: -6 }, locked: true }, + ], + target: { + // Simple sine at 440Hz + build: [ + { type: 'oscillator', params: { waveform: 'sine', frequency: 440 } }, + ], + duration: 2, + }, + checks: [ + { + star: 1, + name: 'Sonido conectado', + desc: 'Conecta el oscilador a la salida', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + if (!osc || !out) return false; + return conns.some(c => + c.from.moduleId === osc.id && c.from.port === 'out' && + c.to.moduleId === out.id + ); + }, + }, + { + star: 2, + name: 'Canal izquierdo', + desc: 'Conecta al canal izquierdo (Left)', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + if (!osc || !out) return false; + return conns.some(c => + c.from.moduleId === osc.id && c.from.port === 'out' && + c.to.moduleId === out.id && c.to.port === 'left' + ); + }, + }, + { + star: 3, + name: 'Estéreo completo', + desc: 'Conecta también al canal derecho (Right)', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + if (!osc || !out) return false; + const hasLeft = conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id && c.to.port === 'left' + ); + const hasRight = conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id && c.to.port === 'right' + ); + return hasLeft && hasRight; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.2 ─────────────── + { + id: 'w1-2', + title: 'La Nota La', + subtitle: 'Afinación: 440 Hz', + description: 'La nota La central (A4) vibra a exactamente 440 Hz. Es la referencia universal para afinar instrumentos. Coloca un oscilador, ajústalo a 440 Hz y conéctalo a la salida.', + concept: 'La frecuencia se mide en Hertz (Hz) — cuántas veces vibra la onda por segundo. 440 Hz = nota La. Usa el knob de frecuencia para ajustar.', + availableModules: ['oscillator'], + preplacedModules: [ + { id: 1, type: 'output', x: 500, y: 100, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sine', frequency: 440 } }, + ], + duration: 2, + }, + checks: [ + { + star: 1, + name: 'Oscilador conectado', + desc: 'Coloca un oscilador y conéctalo a la salida', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + if (!osc || !out) return false; + return conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id + ); + }, + }, + { + star: 2, + name: 'Frecuencia cercana', + desc: 'Ajusta la frecuencia cerca de 440 Hz (±50 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + const f = osc.params.frequency ?? 440; + return Math.abs(f - 440) <= 50; + }, + }, + { + star: 3, + name: 'Afinación perfecta', + desc: 'Ajusta la frecuencia exacta a 440 Hz (±10 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + const f = osc.params.frequency ?? 440; + return Math.abs(f - 440) <= 10; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.3 ─────────────── + { + id: 'w1-3', + title: 'Onda Cuadrada', + subtitle: 'El sonido 8-bit', + description: 'La onda cuadrada es EL sonido de los videojuegos retro. El chip de sonido del NES y el Game Boy usaban ondas cuadradas. Escucha el objetivo y replica ese timbre.', + concept: 'Cada forma de onda tiene un timbre diferente. La onda cuadrada suena brillante y "digital" porque contiene solo armónicos impares. Cambia el selector de onda (Wave) a "square".', + availableModules: ['oscillator'], + preplacedModules: [ + { id: 1, type: 'output', x: 500, y: 100, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'square', frequency: 440 } }, + ], + duration: 2, + }, + checks: [ + { + star: 1, + name: 'Sonido conectado', + desc: 'Oscilador conectado a la salida', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + return osc && out && conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id + ); + }, + }, + { + star: 2, + name: 'Onda cuadrada', + desc: 'Cambia la forma de onda a square', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + return osc && (osc.params.waveform === 'square'); + }, + }, + { + star: 3, + name: 'Match perfecto', + desc: 'Cuadrada a 440 Hz (±10 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + return osc.params.waveform === 'square' && Math.abs((osc.params.frequency ?? 440) - 440) <= 10; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.4 ─────────────── + { + id: 'w1-4', + title: 'Diente de Sierra', + subtitle: 'Rica en armónicos', + description: 'La onda diente de sierra (sawtooth) contiene TODOS los armónicos, lo que le da un sonido brillante y rico. Es la base de muchos sonidos de sintetizador clásicos, desde pads hasta leads.', + concept: 'Sawtooth = todos los armónicos. Sine = solo la fundamental. Square = armónicos impares. Triangle = armónicos impares atenuados. Cada forma de onda tiene un carácter único.', + availableModules: ['oscillator'], + preplacedModules: [ + { id: 1, type: 'output', x: 500, y: 100, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sawtooth', frequency: 440 } }, + ], + duration: 2, + }, + checks: [ + { + star: 1, + name: 'Sonido conectado', + desc: 'Oscilador conectado a la salida', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + return osc && out && conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id + ); + }, + }, + { + star: 2, + name: 'Diente de sierra', + desc: 'Cambia la onda a sawtooth', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + return osc && osc.params.waveform === 'sawtooth'; + }, + }, + { + star: 3, + name: 'Match perfecto', + desc: 'Sawtooth a 440 Hz (±10 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + return osc.params.waveform === 'sawtooth' && Math.abs((osc.params.frequency ?? 440) - 440) <= 10; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.5 ─────────────── + { + id: 'w1-5', + title: 'La Octava', + subtitle: 'Doble o mitad', + description: 'Una octava es la relación más fundamental en la música. Cuando doblas la frecuencia, subes una octava. Cuando la divides por dos, bajas una octava. Si La4 es 440 Hz, La3 es 220 Hz.', + concept: 'Octava arriba = frecuencia × 2. Octava abajo = frecuencia ÷ 2. Ejemplo: A4=440Hz, A3=220Hz, A5=880Hz. Ajusta el knob a 220 Hz para bajar una octava.', + availableModules: ['oscillator'], + preplacedModules: [ + { id: 1, type: 'output', x: 500, y: 100, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sine', frequency: 220 } }, + ], + duration: 2, + }, + checks: [ + { + star: 1, + name: 'Sonido conectado', + desc: 'Oscilador conectado a la salida', + test: (mods, conns) => { + const osc = mods.find(m => m.type === 'oscillator'); + const out = mods.find(m => m.type === 'output'); + return osc && out && conns.some(c => + c.from.moduleId === osc.id && c.to.moduleId === out.id + ); + }, + }, + { + star: 2, + name: 'Octava baja', + desc: 'Frecuencia cercana a 220 Hz (±30 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + return Math.abs((osc.params.frequency ?? 440) - 220) <= 30; + }, + }, + { + star: 3, + name: 'Afinación perfecta', + desc: 'Exactamente 220 Hz (±10 Hz)', + test: (mods) => { + const osc = mods.find(m => m.type === 'oscillator'); + if (!osc) return false; + return Math.abs((osc.params.frequency ?? 440) - 220) <= 10; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.6 ─────────────── + { + id: 'w1-6', + title: 'Dos Voces', + subtitle: 'La quinta perfecta', + description: 'Mezclar dos frecuencias crea armonía. La relación 3:2 entre dos notas es la "quinta perfecta" — el intervalo más consonante después de la octava. Mezcla 440 Hz con 660 Hz.', + concept: 'Un Mixer combina varias señales de audio en una sola. Conecta varios osciladores a las entradas del mixer, y la salida del mixer al output. 440×1.5 = 660 Hz (quinta perfecta).', + availableModules: ['oscillator', 'mixer'], + preplacedModules: [ + { id: 1, type: 'output', x: 700, y: 140, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sine', frequency: 440 } }, + { type: 'oscillator', params: { waveform: 'sine', frequency: 660 } }, + ], + duration: 2.5, + }, + checks: [ + { + star: 1, + name: 'Dos osciladores', + desc: 'Coloca 2 osciladores y un mixer, conectados a la salida', + test: (mods, conns) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + const mixer = mods.find(m => m.type === 'mixer'); + const out = mods.find(m => m.type === 'output'); + if (oscs.length < 2 || !mixer || !out) return false; + // Check mixer → output + const mixerToOut = conns.some(c => c.from.moduleId === mixer.id && c.to.moduleId === out.id); + // Check at least one osc → mixer + const oscToMixer = oscs.some(o => conns.some(c => c.from.moduleId === o.id && c.to.moduleId === mixer.id)); + return mixerToOut && oscToMixer; + }, + }, + { + star: 2, + name: 'Ambos conectados', + desc: 'Ambos osciladores al mixer, mixer a la salida', + test: (mods, conns) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + const mixer = mods.find(m => m.type === 'mixer'); + const out = mods.find(m => m.type === 'output'); + if (oscs.length < 2 || !mixer || !out) return false; + const mixerToOut = conns.some(c => c.from.moduleId === mixer.id && c.to.moduleId === out.id); + const bothToMixer = oscs.every(o => conns.some(c => c.from.moduleId === o.id && c.to.moduleId === mixer.id)); + return mixerToOut && bothToMixer; + }, + }, + { + star: 3, + name: 'Quinta perfecta', + desc: 'Frecuencias a ~440 Hz y ~660 Hz (±20 Hz)', + test: (mods, conns) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + if (oscs.length < 2) return false; + const freqs = oscs.map(o => o.params.frequency ?? 440).sort((a, b) => a - b); + return Math.abs(freqs[0] - 440) <= 20 && Math.abs(freqs[1] - 660) <= 20; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.7 ─────────────── + { + id: 'w1-7', + title: 'El Unísono Gordo', + subtitle: 'Detune = grosor', + description: 'Los sintetizadores analógicos clásicos nunca estaban perfectamente afinados, y eso les daba un sonido "gordo". Desafinar ligeramente dos osciladores crea un efecto de coro natural. Usa dos sierras con un ligero detune.', + concept: 'Detune = desafinación en "cents" (centésimas de semitono). Un detune de +7 a +12 cents crea un unísono gordo sin que suene desafinado. Usa dos osciladores sawtooth a la misma frecuencia pero con detune diferente.', + availableModules: ['oscillator', 'mixer'], + preplacedModules: [ + { id: 1, type: 'output', x: 700, y: 140, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sawtooth', frequency: 440, detune: -7 } }, + { type: 'oscillator', params: { waveform: 'sawtooth', frequency: 440, detune: 7 } }, + ], + duration: 2.5, + }, + checks: [ + { + star: 1, + name: 'Dos sierras mezcladas', + desc: 'Dos osciladores sawtooth conectados al mixer y a la salida', + test: (mods, conns) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + const mixer = mods.find(m => m.type === 'mixer'); + const out = mods.find(m => m.type === 'output'); + if (oscs.length < 2 || !mixer || !out) return false; + const bothSaw = oscs.every(o => o.params.waveform === 'sawtooth'); + const mixToOut = conns.some(c => c.from.moduleId === mixer.id && c.to.moduleId === out.id); + return bothSaw && mixToOut; + }, + }, + { + star: 2, + name: 'Con detune', + desc: 'Al menos un oscilador tiene detune distinto de 0', + test: (mods) => { + const oscs = mods.filter(m => m.type === 'oscillator' && m.params.waveform === 'sawtooth'); + if (oscs.length < 2) return false; + const detunes = oscs.map(o => o.params.detune ?? 0); + return detunes.some(d => Math.abs(d) > 2); + }, + }, + { + star: 3, + name: 'Unísono perfecto', + desc: 'Detune entre ±5 y ±15 cents (sutil pero gordo)', + test: (mods) => { + const oscs = mods.filter(m => m.type === 'oscillator' && m.params.waveform === 'sawtooth'); + if (oscs.length < 2) return false; + const detunes = oscs.map(o => Math.abs(o.params.detune ?? 0)).sort((a, b) => a - b); + // One should be near 0 or opposite, total spread should be 5-30 cents + const spread = Math.abs(detunes[detunes.length - 1] - detunes[0]); + const maxDetune = Math.max(...oscs.map(o => Math.abs(o.params.detune ?? 0))); + return maxDetune >= 5 && maxDetune <= 50; + }, + }, + ], + }, + + // ─────────────── LEVEL 1.8: BOSS ─────────────── + { + id: 'w1-8', + title: 'Acorde Mayor', + subtitle: 'BOSS: Do Mayor', + description: 'Pon todo junto. Un acorde mayor se construye con tres notas: la fundamental, la tercera mayor, y la quinta. Do Mayor = C4 (262 Hz) + E4 (330 Hz) + G4 (392 Hz). Constrúyelo.', + concept: 'C4=262Hz, E4=330Hz, G4=392Hz. Necesitas 3 osciladores, un mixer para combinarlos, y la salida. Las frecuencias no tienen que ser exactas — usa tu oído para comparar con el sonido objetivo.', + availableModules: ['oscillator', 'mixer'], + preplacedModules: [ + { id: 1, type: 'output', x: 800, y: 160, params: { volume: -6 }, locked: true }, + ], + target: { + build: [ + { type: 'oscillator', params: { waveform: 'sine', frequency: 262 } }, + { type: 'oscillator', params: { waveform: 'sine', frequency: 330 } }, + { type: 'oscillator', params: { waveform: 'sine', frequency: 392 } }, + ], + duration: 3, + }, + checks: [ + { + star: 1, + name: 'Tres voces', + desc: 'Tres osciladores conectados al mixer y a la salida', + test: (mods, conns) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + const mixer = mods.find(m => m.type === 'mixer'); + const out = mods.find(m => m.type === 'output'); + if (oscs.length < 3 || !mixer || !out) return false; + const mixToOut = conns.some(c => c.from.moduleId === mixer.id && c.to.moduleId === out.id); + const count = oscs.filter(o => conns.some(c => c.from.moduleId === o.id && c.to.moduleId === mixer.id)).length; + return mixToOut && count >= 3; + }, + }, + { + star: 2, + name: 'Acorde cercano', + desc: 'Frecuencias cerca de C4, E4, G4 (±30 Hz)', + test: (mods) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + if (oscs.length < 3) return false; + const freqs = oscs.map(o => o.params.frequency ?? 440).sort((a, b) => a - b); + const targets = [262, 330, 392]; + return targets.every((t, i) => Math.abs(freqs[i] - t) <= 30); + }, + }, + { + star: 3, + name: 'Do Mayor perfecto', + desc: 'C4=262, E4=330, G4=392 Hz (±10 Hz)', + test: (mods) => { + const oscs = mods.filter(m => m.type === 'oscillator'); + if (oscs.length < 3) return false; + const freqs = oscs.map(o => o.params.frequency ?? 440).sort((a, b) => a - b); + const targets = [262, 330, 392]; + return targets.every((t, i) => Math.abs(freqs[i] - t) <= 10); + }, + }, + ], + }, + ], +}; diff --git a/src/game/targetAudio.js b/src/game/targetAudio.js new file mode 100644 index 0000000..2c3c3a6 --- /dev/null +++ b/src/game/targetAudio.js @@ -0,0 +1,63 @@ +/** + * targetAudio.js — Plays the "target" sound for a puzzle level + * Builds a temporary Tone.js graph from the level's target config + */ +import * as Tone from 'tone'; + +let _activeNodes = []; +let _isPlaying = false; +let _stopTimeout = null; + +export function isTargetPlaying() { + return _isPlaying; +} + +export async function playTarget(target) { + if (_isPlaying) { + stopTarget(); + return; + } + + await Tone.start(); + _isPlaying = true; + + const nodes = []; + const output = new Tone.Gain(0.5).toDestination(); + nodes.push(output); + + // Build oscillators from target.build + for (const spec of target.build) { + if (spec.type === 'oscillator') { + const osc = new Tone.Oscillator({ + type: spec.params.waveform || 'sine', + frequency: spec.params.frequency || 440, + detune: spec.params.detune || 0, + }); + osc.connect(output); + osc.start(); + nodes.push(osc); + } + } + + _activeNodes = nodes; + + // Auto-stop after duration + const dur = (target.duration || 2) * 1000; + _stopTimeout = setTimeout(() => stopTarget(), dur); +} + +export function stopTarget() { + if (_stopTimeout) { + clearTimeout(_stopTimeout); + _stopTimeout = null; + } + for (const node of _activeNodes) { + try { + if (node.stop) node.stop(); + if (node.disconnect) node.disconnect(); + if (node.dispose) node.dispose(); + } catch {} + } + _activeNodes = []; + _isPlaying = false; +} diff --git a/src/index.css b/src/index.css index e45dbc6..4947795 100644 --- a/src/index.css +++ b/src/index.css @@ -246,3 +246,266 @@ html, body, #root { } .preset-item:hover { background: var(--surface2); } .preset-item .preset-date { color: var(--text2); font-size: 10px; } + +/* ====================================================== + GAME MODE — SynthQuest + ====================================================== */ + +/* ===== World Map ===== */ +.gm-worldmap { + height: 100vh; overflow-y: auto; + background: linear-gradient(180deg, #08080f 0%, #0a0a1a 50%, #08080f 100%); + padding: 0 24px 40px; +} + +.gm-header { + display: flex; align-items: center; justify-content: space-between; + padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; +} + +.gm-logo { display: flex; align-items: center; gap: 12px; } +.gm-logo-icon { + font-size: 36px; color: var(--accent); + width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; + border: 2px solid var(--accent); border-radius: 12px; background: rgba(0,229,255,0.05); +} +.gm-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 1px; } +.gm-tagline { font-size: 12px; color: var(--text2); margin-top: 2px; } + +.gm-header-right { display: flex; align-items: center; gap: 16px; } +.gm-total-stars { font-size: 16px; color: var(--yellow); font-weight: 700; } +.gm-sandbox-btn { + padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px; + background: var(--surface); color: var(--text2); cursor: pointer; + font-size: 12px; font-weight: 600; font-family: inherit; transition: all 0.15s; +} +.gm-sandbox-btn:hover { border-color: var(--accent); color: var(--text); } + +/* World sections */ +.gm-world-section { margin-bottom: 32px; } +.gm-locked-world { opacity: 0.4; } +.gm-world-header { + display: flex; align-items: center; gap: 12px; margin-bottom: 16px; +} +.gm-world-icon { font-size: 28px; } +.gm-world-name { font-size: 16px; font-weight: 700; color: var(--text); } +.gm-world-sub { font-size: 11px; color: var(--text2); margin-top: 2px; } + +/* Level grid */ +.gm-level-grid { + display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; +} + +.gm-level-card { + display: flex; align-items: center; gap: 12px; + padding: 14px 16px; border-radius: 10px; cursor: pointer; + background: var(--surface); border: 1px solid var(--border); + transition: all 0.2s; position: relative; overflow: hidden; +} +.gm-level-card.unlocked:hover { + border-color: var(--accent); transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0,229,255,0.1); +} +.gm-level-card.locked { cursor: default; opacity: 0.5; } +.gm-level-card.boss { border-color: var(--yellow); } +.gm-level-card.boss .gm-level-number { background: var(--yellow); color: #000; } +.gm-level-card.perfect { border-color: var(--green); } + +.gm-level-number { + width: 36px; height: 36px; border-radius: 50%; + background: var(--surface2); display: flex; align-items: center; justify-content: center; + font-weight: 800; font-size: 14px; color: var(--accent); flex-shrink: 0; + border: 1px solid var(--border); +} + +.gm-level-info { flex: 1; min-width: 0; } +.gm-level-title { font-size: 13px; font-weight: 600; color: var(--text); } +.gm-level-subtitle { font-size: 10px; color: var(--text2); margin-top: 2px; } + +.gm-stars { display: flex; gap: 2px; } +.gm-stars .star { font-size: 16px; } +.gm-stars .star.filled { color: var(--yellow); } +.gm-stars .star.empty { color: var(--border); } + +.gm-lock { font-size: 18px; } +.gm-lock-overlay { + position: absolute; inset: 0; background: rgba(8,8,15,0.3); + pointer-events: none; +} + +/* ===== Puzzle View ===== */ +.gm-puzzle { display: flex; flex-direction: column; height: 100vh; } + +.gm-puzzle-bar { + height: 48px; background: var(--panel); border-bottom: 1px solid var(--border); + display: flex; align-items: center; padding: 0 16px; gap: 12px; + flex-shrink: 0; z-index: 10; +} + +.gm-puzzle-title { display: flex; align-items: center; gap: 8px; } +.gm-puzzle-num { + font-size: 10px; color: var(--text2); background: var(--surface); + padding: 2px 8px; border-radius: 4px; font-weight: 600; +} +.gm-puzzle-name { font-size: 14px; font-weight: 700; color: var(--text); } +.gm-puzzle-actions { margin-left: auto; display: flex; gap: 8px; } + +/* Buttons */ +.gm-btn { + padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; + background: var(--surface); color: var(--text); cursor: pointer; + font-size: 12px; font-weight: 600; font-family: inherit; transition: all 0.15s; + white-space: nowrap; +} +.gm-btn:hover { border-color: var(--accent); } +.gm-btn.icon { padding: 6px 10px; } +.gm-btn.primary { background: var(--accent); color: #000; border-color: var(--accent); } +.gm-btn.primary:hover { background: #33ecff; } +.gm-btn.secondary { background: var(--surface2); } +.gm-btn.target { border-color: var(--yellow); color: var(--yellow); } +.gm-btn.target:hover { background: rgba(255,204,0,0.1); } +.gm-btn.check { border-color: var(--green); color: var(--green); } +.gm-btn.check:hover { background: rgba(68,255,136,0.1); } +.gm-btn.active { background: var(--accent); color: #000; border-color: var(--accent); } +.gm-btn.danger { border-color: var(--red); color: var(--red); } +.gm-btn.danger:hover { background: rgba(255,68,102,0.1); } + +/* Puzzle layout */ +.gm-puzzle-content { flex: 1; display: flex; overflow: hidden; } + +.gm-puzzle-sidebar { + width: 280px; flex-shrink: 0; background: var(--panel); + border-right: 1px solid var(--border); overflow-y: auto; + padding: 12px; display: flex; flex-direction: column; gap: 12px; +} + +.gm-puzzle-canvas-wrap { + flex: 1; position: relative; overflow: hidden; +} + +/* Concept panel */ +.gm-concept-panel { + background: var(--surface); border: 1px solid var(--border); border-radius: 8px; + overflow: hidden; +} +.gm-concept-header { + padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; + align-items: center; font-size: 12px; font-weight: 600; color: var(--yellow); +} +.gm-concept-body { padding: 0 12px 12px; } +.gm-concept-desc { font-size: 11px; color: var(--text); line-height: 1.5; margin-bottom: 8px; } +.gm-concept-tip { + font-size: 10px; color: var(--text2); line-height: 1.5; + padding: 8px; background: var(--bg); border-radius: 4px; + border-left: 3px solid var(--accent); +} + +/* Objectives */ +.gm-objectives { + background: var(--surface); border: 1px solid var(--border); border-radius: 8px; + padding: 10px 12px; +} +.gm-obj-title { + font-size: 10px; font-weight: 700; color: var(--text2); + text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; +} +.gm-obj { + display: flex; align-items: center; gap: 8px; padding: 6px 0; + border-bottom: 1px solid var(--border); font-size: 11px; +} +.gm-obj:last-child { border-bottom: none; } +.gm-obj-star { color: var(--yellow); font-size: 12px; flex-shrink: 0; width: 30px; } +.gm-obj-name { flex: 1; color: var(--text2); } +.gm-obj.passed .gm-obj-name { color: var(--green); } +.gm-obj.failed .gm-obj-name { color: var(--text2); } +.gm-obj-check { color: var(--green); font-weight: 700; } +.gm-obj-x { color: var(--red); font-weight: 700; } + +/* Module palette (game) */ +.gm-module-palette { + background: var(--surface); border: 1px solid var(--border); border-radius: 8px; + padding: 10px 12px; +} +.gm-palette-title { + font-size: 10px; font-weight: 700; color: var(--text2); + text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; +} +.gm-palette-item { + display: flex; align-items: center; gap: 8px; + padding: 8px; border-radius: 6px; cursor: pointer; + transition: all 0.15s; font-size: 12px; color: var(--text); +} +.gm-palette-item:hover { background: var(--surface2); } +.gm-palette-icon { font-size: 16px; width: 24px; text-align: center; } +.gm-palette-name { flex: 1; font-weight: 500; } +.gm-palette-add { + width: 22px; height: 22px; border-radius: 50%; + background: var(--surface2); display: flex; align-items: center; justify-content: center; + font-size: 14px; color: var(--accent); font-weight: 700; +} + +/* Canvas hint */ +.gm-canvas-hint { + position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); + padding: 8px 16px; background: rgba(0,0,0,0.7); border-radius: 8px; + font-size: 11px; color: var(--text2); pointer-events: none; + border: 1px solid var(--border); z-index: 10; +} + +/* ===== Level Complete Overlay ===== */ +.gm-complete-overlay { + position: fixed; inset: 0; background: rgba(8,8,15,0.85); + display: flex; align-items: center; justify-content: center; + z-index: 200; animation: fadeIn 0.3s; +} +@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + +.gm-complete-card { + background: var(--panel); border: 1px solid var(--border); border-radius: 16px; + padding: 32px 40px; text-align: center; min-width: 400px; + box-shadow: 0 32px 64px rgba(0,0,0,0.5); + animation: slideUp 0.4s ease-out; +} +@keyframes slideUp { + from { transform: translateY(40px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +.gm-complete-title { font-size: 20px; font-weight: 800; color: var(--green); margin-bottom: 4px; } +.gm-complete-level { font-size: 13px; color: var(--text2); margin-bottom: 20px; } + +.gm-complete-stars { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; } +.gm-big-star { + font-size: 48px; transition: all 0.4s ease-out; +} +.gm-big-star.empty { color: var(--border); transform: scale(0.8); } +.gm-big-star.earned { + color: var(--yellow); transform: scale(1); + filter: drop-shadow(0 0 12px rgba(255,204,0,0.4)); + animation: starPop 0.4s ease-out; +} +@keyframes starPop { + 0% { transform: scale(0.3); opacity: 0; } + 60% { transform: scale(1.3); } + 100% { transform: scale(1); opacity: 1; } +} + +.gm-complete-msg { font-size: 13px; color: var(--text2); margin-bottom: 20px; font-style: italic; } + +.gm-checks { + margin-bottom: 24px; text-align: left; + background: var(--surface); border-radius: 8px; padding: 12px; +} +.gm-check { + display: flex; align-items: center; gap: 8px; padding: 6px 0; + font-size: 12px; border-bottom: 1px solid var(--border); +} +.gm-check:last-child { border-bottom: none; } +.gm-check-icon { font-size: 14px; width: 20px; text-align: center; } +.gm-check.passed .gm-check-icon { color: var(--green); } +.gm-check.failed .gm-check-icon { color: var(--red); } +.gm-check-name { flex: 1; color: var(--text); } +.gm-check-star { color: var(--yellow); } + +.gm-complete-actions { display: flex; gap: 8px; justify-content: center; } diff --git a/src/main.jsx b/src/main.jsx index abfd758..fadf959 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; +import GameApp from './game/GameApp.jsx'; import './index.css'; -createRoot(document.getElementById('root')).render(); +function Root() { + const [mode, setMode] = useState('game'); // 'game' | 'sandbox' + + if (mode === 'sandbox') { + return setMode('game')} />; + } + + return setMode('sandbox')} />; +} + +createRoot(document.getElementById('root')).render();