logic-gates/js/renderer.js

// Canvas rendering — gates, connections, grid
import { GATE_W, GATE_H, PORT_R, GATE_COLORS } from './constants.js';
import { state } from './state.js';
import { getInputPorts, getOutputPorts } from './gates.js';
import { getGateLabel, drawWaveLabels, drawWaveforms } from './waveform.js';

let canvas, ctx;

export function initRenderer() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    resize();
    window.addEventListener('resize', resize);
    requestAnimationFrame(draw);
}

export function resize() {
    const sidebarOpen = document.body.classList.contains('puzzle-sidebar-open');
    const sidebarW = sidebarOpen ? 340 : 0;
    canvas.width = window.innerWidth - sidebarW;
    const waveH = state.waveformVisible ? state.waveformHeight : 0;
    canvas.height = window.innerHeight - 48 - waveH;
}

// Convert screen coords to world coords (accounting for pan/zoom)
export function screenToWorld(sx, sy) {
    return {
        x: (sx - state.camX) / state.zoom,
        y: (sy - state.camY) / state.zoom
    };
}

function drawGate(gate) {
    const color = GATE_COLORS[gate.type];
    const isHovered = state.hoveredGate === gate;
    const isActive = gate.value === 1;

    if (isActive) {
        ctx.shadowColor = color;
        ctx.shadowBlur = 20 * state.zoom;
    }

    ctx.fillStyle = isActive ? color + '22' : '#14141e';
    ctx.strokeStyle = isHovered ? '#fff' : color;
    ctx.lineWidth = (isHovered ? 2.5 : 1.5);

    ctx.beginPath();
    ctx.roundRect(gate.x, gate.y, GATE_W, GATE_H, 8);
    ctx.fill();
    ctx.stroke();
    ctx.shadowBlur = 0;

    // Label
    ctx.fillStyle = isActive ? '#fff' : color;
    ctx.font = `bold 14px "Segoe UI", system-ui, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const isIOType = gate.type === 'INPUT' || gate.type === 'OUTPUT' || gate.type === 'CLOCK';
    ctx.fillText(
        gate.type === 'CLOCK' ? '⏱ CLK' : gate.type,
        gate.x + GATE_W / 2,
        gate.y + GATE_H / 2 - (isIOType ? 8 : 0)
    );

    // Small ID label
    ctx.font = '9px monospace';
    ctx.fillStyle = '#444';
    ctx.fillText(getGateLabel(gate), gate.x + GATE_W / 2, gate.y + GATE_H - 6);

    // Value for INPUT/OUTPUT/CLOCK
    if (isIOType) {
        ctx.font = 'bold 16px monospace';
        ctx.fillStyle = gate.value ? '#00ff88' : '#ff4444';
        ctx.fillText(gate.value ? '1' : '0', gate.x + GATE_W / 2, gate.y + GATE_H / 2 + 10);
    }

    // Input ports
    getInputPorts(gate).forEach(p => {
        const isPortHovered = state.hoveredPort &&
            state.hoveredPort.gate === gate &&
            state.hoveredPort.index === p.index &&
            state.hoveredPort.type === 'input';
        const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
        const portActive = conn ? state.gates.find(g => g.id === conn.from)?.value : 0;

        ctx.beginPath();
        ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
        ctx.fillStyle = isPortHovered ? '#fff' : (portActive ? '#00ff88' : '#1a1a2e');
        ctx.fill();
        ctx.strokeStyle = isPortHovered ? '#fff' : '#555';
        ctx.lineWidth = 1.5;
        ctx.stroke();
    });

    // Output ports
    getOutputPorts(gate).forEach(p => {
        const isPortHovered = state.hoveredPort &&
            state.hoveredPort.gate === gate &&
            state.hoveredPort.index === p.index &&
            state.hoveredPort.type === 'output';

        ctx.beginPath();
        ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
        ctx.fillStyle = isPortHovered ? '#fff' : (gate.value ? '#00ff88' : '#1a1a2e');
        ctx.fill();
        ctx.strokeStyle = isPortHovered ? '#fff' : '#555';
        ctx.lineWidth = 1.5;
        ctx.stroke();
    });
}

function drawConnection(conn) {
    const fromGate = state.gates.find(g => g.id === conn.from);
    const toGate = state.gates.find(g => g.id === conn.to);
    if (!fromGate || !toGate) return;

    const fromPort = getOutputPorts(fromGate)[conn.fromPort];
    const toPort = getInputPorts(toGate)[conn.toPort];
    if (!fromPort || !toPort) return;

    const active = fromGate.value === 1;
    const midX = (fromPort.x + toPort.x) / 2;

    ctx.beginPath();
    ctx.moveTo(fromPort.x, fromPort.y);
    ctx.bezierCurveTo(midX, fromPort.y, midX, toPort.y, toPort.x, toPort.y);
    ctx.strokeStyle = active ? '#00ff88' : '#333';
    ctx.lineWidth = active ? 2.5 : 1.5;
    ctx.stroke();

    if (active) {
        ctx.strokeStyle = '#00ff8844';
        ctx.lineWidth = 6;
        ctx.stroke();
    }
}

function drawGrid() {
    const gridSize = 40;
    ctx.strokeStyle = '#111118';
    ctx.lineWidth = 1;

    // Calculate visible grid range in world coords
    const topLeft = screenToWorld(0, 0);
    const bottomRight = screenToWorld(canvas.width, canvas.height);

    const startX = Math.floor(topLeft.x / gridSize) * gridSize;
    const startY = Math.floor(topLeft.y / gridSize) * gridSize;

    for (let x = startX; x < bottomRight.x; x += gridSize) {
        ctx.beginPath(); ctx.moveTo(x, topLeft.y); ctx.lineTo(x, bottomRight.y); ctx.stroke();
    }
    for (let y = startY; y < bottomRight.y; y += gridSize) {
        ctx.beginPath(); ctx.moveTo(topLeft.x, y); ctx.lineTo(bottomRight.x, y); ctx.stroke();
    }
}

function drawConnectingWire() {
    if (!state.connecting) return;
    const gate = state.connecting.gate;
    const port = state.connecting.portType === 'output'
        ? getOutputPorts(gate)[state.connecting.portIndex]
        : getInputPorts(gate)[state.connecting.portIndex];
    if (!port) return;

    // Convert mouse to world coords for the wire endpoint
    const world = screenToWorld(state.mouseX, state.mouseY);
    const midX = (port.x + world.x) / 2;
    ctx.beginPath();
    ctx.moveTo(port.x, port.y);
    ctx.bezierCurveTo(midX, port.y, midX, world.y, world.x, world.y);
    ctx.strokeStyle = '#00e59988';
    ctx.lineWidth = 2;
    ctx.setLineDash([6, 4]);
    ctx.stroke();
    ctx.setLineDash([]);
}

function drawPlacingGhost() {
    if (!state.placingGate) return;
    ctx.globalAlpha = 0.5;
    const world = screenToWorld(state.mouseX, state.mouseY);
    const ghost = {
        x: world.x - GATE_W / 2,
        y: world.y - GATE_H / 2,
        type: state.placingGate,
        value: 0,
        id: -1
    };
    drawGate(ghost);
    ctx.globalAlpha = 1;
}

function drawZoomIndicator() {
    const pct = Math.round(state.zoom * 100);
    ctx.save();
    ctx.resetTransform();
    ctx.fillStyle = '#333';
    ctx.font = '11px monospace';
    ctx.textAlign = 'right';
    ctx.fillText(`${pct}%`, canvas.width - 10, canvas.height - 10);
    ctx.restore();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Apply camera transform
    ctx.save();
    ctx.translate(state.camX, state.camY);
    ctx.scale(state.zoom, state.zoom);

    drawGrid();
    state.connections.forEach(drawConnection);
    state.gates.forEach(drawGate);
    drawConnectingWire();
    drawPlacingGhost();

    ctx.restore();

    // HUD (drawn without transform)
    drawZoomIndicator();

    if (state.waveformVisible) {
        drawWaveLabels();
        drawWaveforms();
    }

    requestAnimationFrame(draw);
}