CodeQuest RPG

hop 01 · por qué existe

Contexto

El proyecto empezó como una prueba de concepto abandonada a medias: una capa de trivia de opción múltiple con temática de RPG, sin persistencia, sin tipado y sin tests. Se retomó con una auditoría técnica honesta y se reconstruyó en fases incrementales, sin dejar el juego roto entre pasos.

hop 02 · el porqué, no solo el qué

Decisiones técnicas

− useEffect(() => {−   setCode(challenge.starterCode);−   setStatus('idle');−   setOutput(null);− }, [challenge.id]);

+ <ChallengeRunner key={challenge.id} challenge={challenge} />

− import ChallengeScreen from './screens/ChallengeScreen';

+ const ChallengeScreen = lazy(() => import('./screens/ChallengeScreen'));+ // ...+ <Suspense fallback={<Loading />}>+   <ChallengeScreen />+ </Suspense>

hop 03 · lo más difícil

Reto técnico

eval() o new Function() en el hilo principal comparte el mismo scope de ejecución que el resto de la app: un bucle infinito bloquea la UI de forma irrecuperable. Un Web Worker es un hilo real y aislado, sin memoria compartida ni acceso al DOM — y, el motivo decisivo, si el jugador escribe un bucle infinito, el hilo principal puede matarlo desde fuera. El propio worker no puede resolver su timeout si está colgado en un bucle síncrono, así que el reloj y el worker.terminate() viven deliberadamente en lib/codeRunner.ts (hilo principal), no dentro del worker.

const worker = new Worker(url, { type: 'module' });

// El reloj vive fuera del worker: si el código del jugador cuelga
// el hilo síncrono, el worker no puede resolver su propio timeout.
const timer = setTimeout(() => {
  worker.terminate();
  reject(new Error('timeout'));
}, LIMIT_MS);

worker.onmessage = (e) => {
  clearTimeout(timer);
  resolve(e.data);
};

hop 04 · cómo llegó hasta aquí

Fases de desarrollo

hop 05 · dónde está hoy

Resultado

hop 06 · con qué está construido

Stack