b058997889
Move frontend to packages/client/, server to packages/server/.
Root package.json uses npm workspaces to orchestrate both.
Structure:
reaktor/
packages/client/ (React + Vite + Tone.js frontend)
packages/server/ (static file server, future API)
dist/ (built output, shared)
docker-compose.yml (app + PostgreSQL for future backend)
- npm run dev → runs Vite dev server from client workspace
- npm run build → builds client, outputs to root dist/
- npm run start → runs server.js serving dist/
- Dockerfile updated for multi-stage monorepo build
- docker-compose.yml added with PostgreSQL service (ready for Phase 1)
- All imports and paths preserved, zero functionality change
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
113 lines
3.8 KiB
JavaScript
113 lines
3.8 KiB
JavaScript
import React, { useRef, useEffect, useState } from 'react';
|
||
import { getAnalyserData } from '../engine/audioEngine.js';
|
||
|
||
// Zoom levels: how many samples to display (from a 2048-sample buffer)
|
||
// Fewer samples = zoomed in (more detail), more samples = zoomed out (more time visible)
|
||
const ZOOM_LEVELS = [64, 128, 256, 512, 1024, 2048];
|
||
const DEFAULT_ZOOM = 2; // index → 256 samples
|
||
|
||
export default function ScopeDisplay({ moduleId }) {
|
||
const canvasRef = useRef(null);
|
||
const rafRef = useRef(null);
|
||
const [zoomIdx, setZoomIdx] = useState(DEFAULT_ZOOM);
|
||
const zoomRef = useRef(ZOOM_LEVELS[DEFAULT_ZOOM]);
|
||
|
||
// Keep ref in sync so the draw loop picks it up without re-creating the effect
|
||
useEffect(() => { zoomRef.current = ZOOM_LEVELS[zoomIdx]; }, [zoomIdx]);
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
const w = canvas.width = 160;
|
||
const h = canvas.height = 60;
|
||
|
||
let frameCount = 0;
|
||
const draw = () => {
|
||
frameCount++;
|
||
rafRef.current = requestAnimationFrame(draw);
|
||
// Throttle to ~30fps to reduce main thread pressure during playback
|
||
if (frameCount % 2 !== 0) return;
|
||
|
||
ctx.fillStyle = '#050510';
|
||
ctx.fillRect(0, 0, w, h);
|
||
|
||
// Grid lines
|
||
ctx.strokeStyle = '#151530';
|
||
ctx.lineWidth = 0.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2);
|
||
ctx.moveTo(0, h / 4); ctx.lineTo(w, h / 4);
|
||
ctx.moveTo(0, h * 3 / 4); ctx.lineTo(w, h * 3 / 4);
|
||
for (let x = w / 4; x < w; x += w / 4) {
|
||
ctx.moveTo(x, 0); ctx.lineTo(x, h);
|
||
}
|
||
ctx.stroke();
|
||
|
||
const data = getAnalyserData(moduleId);
|
||
if (data && data.length > 0) {
|
||
const samplesToShow = zoomRef.current;
|
||
// Center the window in the buffer
|
||
const offset = Math.max(0, Math.floor((data.length - samplesToShow) / 2));
|
||
const end = Math.min(data.length, offset + samplesToShow);
|
||
|
||
ctx.strokeStyle = '#00e5ff';
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
const count = end - offset;
|
||
const step = w / count;
|
||
for (let i = 0; i < count; i++) {
|
||
const y = h / 2 + data[offset + i] * h / 2 * -1;
|
||
if (i === 0) ctx.moveTo(0, y);
|
||
else ctx.lineTo(i * step, y);
|
||
}
|
||
ctx.stroke();
|
||
}
|
||
|
||
};
|
||
draw();
|
||
|
||
return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
|
||
}, [moduleId]);
|
||
|
||
const canZoomIn = zoomIdx > 0;
|
||
const canZoomOut = zoomIdx < ZOOM_LEVELS.length - 1;
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<canvas ref={canvasRef} className="scope-canvas" />
|
||
<div style={{
|
||
position: 'absolute', bottom: 2, right: 2,
|
||
display: 'flex', gap: 2,
|
||
}}>
|
||
<button
|
||
onClick={() => canZoomOut && setZoomIdx(i => i + 1)}
|
||
disabled={!canZoomOut}
|
||
title="Zoom out (más tiempo)"
|
||
style={{
|
||
width: 18, height: 18, padding: 0,
|
||
background: canZoomOut ? '#1a1a3a' : '#0a0a15',
|
||
border: '1px solid #333', borderRadius: 3,
|
||
color: canZoomOut ? '#00e5ff' : '#333',
|
||
cursor: canZoomOut ? 'pointer' : 'default',
|
||
fontSize: 12, lineHeight: '16px', fontWeight: 'bold',
|
||
}}
|
||
>−</button>
|
||
<button
|
||
onClick={() => canZoomIn && setZoomIdx(i => i - 1)}
|
||
disabled={!canZoomIn}
|
||
title="Zoom in (más detalle)"
|
||
style={{
|
||
width: 18, height: 18, padding: 0,
|
||
background: canZoomIn ? '#1a1a3a' : '#0a0a15',
|
||
border: '1px solid #333', borderRadius: 3,
|
||
color: canZoomIn ? '#00e5ff' : '#333',
|
||
cursor: canZoomIn ? 'pointer' : 'default',
|
||
fontSize: 12, lineHeight: '16px', fontWeight: 'bold',
|
||
}}
|
||
>+</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|