rplace/src/client/App.svelte

<script>
  import { MAX_BATCH_SIZE, REQUEST_COOLDOWN_SEC, CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/constants.js';
  import CanvasRenderer from './components/CanvasRenderer.svelte';
  import ColorPicker from './components/ColorPicker.svelte';
  import CanvasControls from './components/CanvasControls.svelte';
  import DrawToolbar from './components/DrawToolbar.svelte';
  import ImageImporter from './components/ImageImporter.svelte';
  import HelpOverlay from './components/HelpOverlay.svelte';

  let selectedColor = $state(0);
  let cursorPos = $state({ x: 0, y: 0 });
  let zoom = $state(1);

  // Viewport-aware zoom bounds. minZoom = "canvas fits in viewport" — any
  // further and the canvas would shrink past the screen, leaving empty
  // void space. Recomputed on window resize.
  let viewport = $state({
    w: typeof window !== 'undefined' ? window.innerWidth : 1920,
    h: typeof window !== 'undefined' ? window.innerHeight : 1080,
  });
  const MAX_ZOOM = 64;
  const minZoom = $derived(Math.min(viewport.w / CANVAS_WIDTH, viewport.h / CANVAS_HEIGHT));
  const clampZoom = (z) => Math.max(minZoom, Math.min(MAX_ZOOM, z));
  $effect(() => {
    if (typeof window === 'undefined') return;
    const onResize = () => { viewport = { w: window.innerWidth, h: window.innerHeight }; };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  });
  // After viewport or zoom-bound changes, pull current zoom into range.
  $effect(() => { const z = clampZoom(zoom); if (z !== zoom) zoom = z; });
  let mode = $state('paint');
  let submitting = $state(false);
  let bufferState = $state({ canUndo: false, canRedo: false, pixelCount: 0 });
  let toast = $state(null); // { kind: 'error'|'info', text: string }
  let toastTimer = null;
  let importerOpen = $state(false);
  let helpOpen = $state(false);

  // First-visit hint. Dismissed on first successful commit or explicit X.
  // Storage key is versioned so rewriting the copy re-shows the hint.
  const HINT_STORAGE_KEY = 'rplace:hint:v1';
  let hintVisible = $state(
    typeof localStorage !== 'undefined' && localStorage.getItem(HINT_STORAGE_KEY) !== '1',
  );
  function dismissHint() {
    if (!hintVisible) return;
    hintVisible = false;
    try { localStorage.setItem(HINT_STORAGE_KEY, '1'); } catch { /* storage unavailable */ }
  }

  // Pick-target handoff — ImageImporter calls requestPick() to register handlers;
  // a click on the canvas fires .pick(pos); Esc fires .cancel().
  /** @type {{pick: (pos: {x: number, y: number}) => void, cancel: () => void}|null} */
  let activePick = $state(null);

  // Submit cooldown — blocks Submit + shows countdown. Driven by successful
  // requests (forward-guess REQUEST_COOLDOWN_SEC) and 429 retryAfter responses.
  let cooldownUntil = $state(0);
  let nowTick = $state(Date.now());
  $effect(() => {
    if (cooldownUntil <= nowTick) return;
    const id = setInterval(() => { nowTick = Date.now(); }, 100);
    return () => clearInterval(id);
  });
  const cooldownMs = $derived(Math.max(0, cooldownUntil - nowTick));

  /** @type {CanvasRenderer} */
  let canvasRenderer;

  function showToast(kind, text, ttlMs = 4000) {
    toast = { kind, text };
    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(() => { toast = null; }, ttlMs);
  }

  function requestPick(handlers) {
    // Replace any in-flight pick (cancel it first so its owner resets UI).
    // handlers === null means "cancel current pick, no replacement".
    if (activePick) activePick.cancel();
    activePick = handlers ?? null;
  }

  function handleCanvasPick(pos) {
    const p = activePick;
    activePick = null;
    p?.pick(pos);
  }

  function cancelActivePick() {
    const p = activePick;
    activePick = null;
    p?.cancel();
  }

  function handleEyedrop(colorIndex) {
    selectedColor = colorIndex;
    // If the user is in dedicated eyedrop mode, snap back to paint after one pick.
    // Alt+click in other modes leaves the mode alone.
    if (mode === 'eyedrop') mode = 'paint';
  }

  // WebSocket connection with auto-reconnect + exponential backoff.
  // wsState drives the connection indicator dot in CanvasControls.
  let wsRetryDelay = 1000;
  let isReconnect = false;
  let wsState = $state('connecting'); // 'connecting' | 'open' | 'reconnecting' | 'closed'
  // Monotonic broadcast counter from the server. A gap means we missed at
  // least one frame (DO hibernation, network glitch) — refetch to resync.
  let lastSeq = null;

  function connectWebSocket() {
    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const ws = new WebSocket(`${protocol}//${location.host}/api/ws`);

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        if (data.type === 'pixels' && canvasRenderer) {
          if (data.seq != null) {
            const expected = lastSeq == null ? data.seq : ((lastSeq + 1) >>> 0);
            if (data.seq !== expected) {
              canvasRenderer.refetchCanvas();
            }
            lastSeq = data.seq;
          }
          canvasRenderer.applyUpdates(data.pixels);
        }
      } catch { /* ignore parse errors */ }
    };

    ws.onopen = () => {
      // Reset on every (re)connect — fresh canvas fetch is the new baseline.
      lastSeq = null;
      // Refetch canvas after a reconnect to recover any pixels missed while disconnected.
      if (isReconnect && canvasRenderer) {
        canvasRenderer.refetchCanvas();
      }
      wsRetryDelay = 1000;
      isReconnect = true;
      wsState = 'open';
    };
    ws.onclose = () => {
      wsState = 'reconnecting';
      setTimeout(connectWebSocket, wsRetryDelay);
      wsRetryDelay = Math.min(wsRetryDelay * 2, 30000);
    };
    ws.onerror = () => ws.close();

    return ws;
  }

  $effect(() => {
    const ws = connectWebSocket();
    return () => ws.close();
  });

  // Keyboard shortcuts
  const PAN_STEP = 40;
  function handleKeyDown(e) {
    // Don't intercept when user is typing in an input
    if (e.target?.matches?.('input, textarea, [contenteditable]')) return;

    if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
      e.preventDefault();
      canvasRenderer?.undo();
      return;
    }
    if (e.ctrlKey && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
      e.preventDefault();
      canvasRenderer?.redo();
      return;
    }
    if (e.ctrlKey || e.metaKey || e.altKey) return;

    switch (e.key) {
      case 'Escape':
        if (helpOpen) { e.preventDefault(); helpOpen = false; }
        else if (activePick) { e.preventDefault(); cancelActivePick(); }
        else canvasRenderer?.cancelStrokeIfAny?.();
        return;
      case 'q': case 'Q':
        e.preventDefault();
        zoom = clampZoom(zoom * 2);
        return;
      case 'e': case 'E':
        e.preventDefault();
        zoom = clampZoom(zoom / 2);
        return;
      case 'w': case 'W':
        e.preventDefault(); canvasRenderer?.panBy(0, PAN_STEP); return;
      case 's': case 'S':
        e.preventDefault(); canvasRenderer?.panBy(0, -PAN_STEP); return;
      case 'a': case 'A':
        e.preventDefault(); canvasRenderer?.panBy(PAN_STEP, 0); return;
      case 'd': case 'D':
        e.preventDefault(); canvasRenderer?.panBy(-PAN_STEP, 0); return;
      case 'i': case 'I':
        e.preventDefault();
        mode = mode === 'eyedrop' ? 'paint' : 'eyedrop';
        return;
      case '?': case '/':
        e.preventDefault();
        helpOpen = !helpOpen;
        return;
    }
  }

  // Submit all pending pixels to server
  async function handleSubmit() {
    const pixels = canvasRenderer?.getPendingPixels();
    if (!pixels?.length) return;
    if (pixels.length > MAX_BATCH_SIZE) {
      showToast('error', `Batch too large (${pixels.length} > ${MAX_BATCH_SIZE}). Submit fewer pixels.`);
      return;
    }

    submitting = true;
    try {
      const res = await fetch('/api/place', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pixels }),
      });

      let data = null;
      const text = await res.text();
      try { data = JSON.parse(text); } catch { /* non-JSON body */ }

      if (!res.ok) {
        if (res.status === 429) {
          const retryAfter = data?.retryAfter ?? REQUEST_COOLDOWN_SEC;
          cooldownUntil = Date.now() + retryAfter * 1000;
          nowTick = Date.now();
          showToast('error', `Rate limited — try again in ${retryAfter}s.`, 6000);
        } else if (res.status === 413) {
          showToast('error', 'Request too large. Reduce batch size.');
        } else if (res.status === 400) {
          showToast('error', `Rejected: ${data?.error || 'invalid request'}`);
        } else {
          showToast('error', `Server error (${res.status}): ${data?.error || text || 'unknown'}`);
        }
        return;
      }

      if (data?.ok) {
        canvasRenderer.commitPending();
        cooldownUntil = Date.now() + REQUEST_COOLDOWN_SEC * 1000;
        nowTick = Date.now();
        dismissHint();
        showToast('info', 'Submitted', 1500);
      } else {
        showToast('error', `Unexpected response: ${data?.error || 'no data'}`);
      }
    } catch (err) {
      showToast('error', `Network error: ${err.message || err}`, 6000);
    } finally {
      submitting = false;
    }
  }

  function handleBufferFull() {
    showToast('info', `Buffer at max (${MAX_BATCH_SIZE} pixels) — submit or undo to draw more.`, 3000);
  }
</script>

<svelte:window onkeydown={handleKeyDown} />

<main>
  <CanvasRenderer
    bind:this={canvasRenderer}
    {selectedColor}
    {zoom}
    {minZoom}
    {mode}
    pickActive={!!activePick}
    onPick={handleCanvasPick}
    onEyedrop={handleEyedrop}
    onZoomChange={(z) => zoom = clampZoom(z)}
    onCursorMove={(pos) => cursorPos = pos}
    onBufferChange={(s) => bufferState = s}
    onBufferFull={handleBufferFull}
  />
  <CanvasControls
    {zoom}
    {minZoom}
    onZoomIn={() => zoom = clampZoom(zoom * 2)}
    onZoomOut={() => zoom = clampZoom(zoom / 2)}
    onResetZoom={() => zoom = clampZoom(1)}
    onGoto={(x, y) => canvasRenderer?.gotoPoint(x, y)}
    {cursorPos}
    {wsState}
    onHelp={() => helpOpen = true}
  />
  <DrawToolbar
    {mode}
    onModeChange={(m) => mode = m}
    onSubmit={handleSubmit}
    onUndo={() => canvasRenderer?.undo()}
    onRedo={() => canvasRenderer?.redo()}
    onClear={() => canvasRenderer?.clearPending()}
    canUndo={bufferState.canUndo}
    canRedo={bufferState.canRedo}
    pixelCount={bufferState.pixelCount}
    {submitting}
    {cooldownMs}
  />
  <ColorPicker {selectedColor} onSelect={(i) => selectedColor = i} />

  {#if !importerOpen}
    <button class="import-btn" onclick={() => importerOpen = true}
      title="Upload an image and place it on the canvas">
      Import Image
    </button>
  {/if}

  <ImageImporter
    open={importerOpen}
    getCommittedColor={(x, y) => canvasRenderer?.getCommittedColor(x, y) ?? -1}
    setOverlay={(o) => canvasRenderer?.setOverlay(o)}
    onRequestPick={requestPick}
    onClose={() => importerOpen = false}
  />

  {#if activePick}
    <div class="pick-banner" role="status" aria-live="polite">
      Click on the canvas to pick a position — Esc to cancel.
    </div>
  {/if}

  {#if hintVisible && !activePick}
    <div class="hint" role="status" aria-live="polite">
      <span class="hint-text">
        Pick a color, click the canvas to paint, then <strong>Submit</strong> to send.
        Wheel/<kbd>Q</kbd><kbd>E</kbd> to zoom, drag or <kbd>WASD</kbd> to pan, <kbd>?</kbd> for help.
      </span>
      <button class="hint-close" onclick={dismissHint} aria-label="Dismiss hint">✕</button>
    </div>
  {/if}

  {#if toast}
    <div class="toast {toast.kind}" role="status" aria-live="polite">{toast.text}</div>
  {/if}

  <HelpOverlay open={helpOpen} onClose={() => helpOpen = false} />
</main>

<style>
  main {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    z-index: 30;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
    text-align: center;
  }
  .toast.error { background: #8b2222; color: #fff; border: 1px solid #a33; }
  .toast.info { background: #1d3a8a; color: #fff; border: 1px solid #3b5cb8; }

  .pick-banner {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 25;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .import-btn {
    position: fixed;
    top: 68px;
    right: 16px;
    padding: 8px 14px;
    background: rgba(37, 99, 235, 0.9);
    border: 1px solid #3b82f6;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .import-btn:hover { background: #1d4ed8; }

  .hint {
    position: fixed;
    bottom: 260px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(640px, calc(100vw - 32px));
    padding: 8px 10px 8px 14px;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid #374151;
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 0.85rem;
    z-index: 12;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
  }
  .hint-text { line-height: 1.4; }
  .hint kbd {
    display: inline-block;
    padding: 0 6px;
    margin: 0 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: #f3f4f6;
    background: #111827;
    border: 1px solid #374151;
    border-bottom-width: 2px;
    border-radius: 3px;
  }
  .hint-close {
    background: transparent;
    border: 0;
    color: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    flex-shrink: 0;
  }
  .hint-close:hover { color: #fff; }

  @media (max-width: 600px) {
    .hint { bottom: 240px; font-size: 0.8rem; }
  }
</style>