minesweeper/web/MinesweeperPanel.tsx

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Bomb, Loader2, Play, RefreshCw } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import type { RfbError } from './rfb';
import { RfbClient } from './rfb';

type SessionStatus = {
  installed: boolean;
  running: boolean;
};

// The whole framebuffer is the picture, and the sidecar keeps the game centred in it. So there is no
// crop here, no board geometry to fetch, and nothing that has to be re-read when the difficulty changes
// — the canvas is whatever size the server said at handshake and stays that size for the session.
//
// It used to crop to the window's rectangle at the origin, which needed the geometry polled every four
// seconds and was wrong twice over: the panel resized under the player mid-game, and wine puts the
// window at 3,29 rather than 0,0, so a crop from the origin showed a black strip on top and cut a row
// of cells off the bottom. That was the "expert gets cut off at the bottom" report.
//
// Only a placeholder until `onReady`, which sizes the canvas from the real framebuffer. Drift with the
// sidecar's stage costs one frame of the wrong aspect ratio and nothing else.
const PLACEHOLDER = { width: 560, height: 400 };

const BUTTON_MASK: Record<number, number> = { 0: 1, 1: 2, 2: 4 };

// Plugin panels have no localisation mechanism yet — `officerdev`'s `useTranslation`/`panelCatalogs`
// (merged by `I18nBridge`) is platform-internal and not exported from the barrel, and
// `scripts/i18n/scan-hardcoded.ts` explicitly does not scan `plugins/`. So these stay plain English
// sentences rather than catalog keys, same as every other plugin's user-facing strings.
const describeRfbError = (error: RfbError): string => {
  switch (error.code) {
    case 'connectionFailed':
      return 'The connection to the Minesweeper session failed.';
    case 'refused':
      return 'The VNC server refused the connection.';
    case 'authUnsupported':
      return 'The VNC server wants authentication, which this client does not implement.';
    case 'handshakeRejected':
      return 'The VNC server rejected the handshake.';
    case 'unknownMessage':
      return `The VNC server sent an unknown message type (${error.type}).`;
    case 'unknownEncoding':
      return `The VNC server used encoding ${error.encoding}, which this client did not ask for.`;
  }
};

export const MinesweeperPanel = () => {
  // useClient() rebuilds its verbs on EVERY render, so putting one in a dependency list gives that
  // list a new identity every render. Held in a ref instead — the same fix the Jellyfin player needed
  // after its playback reports silently stopped for days. Getting this wrong here meant `refresh` was
  // unstable, its mount effect re-ran every render, and each run set state and caused another render:
  // an endless fetch loop that starved the socket and left the panel saying "connecting…" forever.
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const rfbRef = useRef<RfbClient | null>(null);
  const buttonsRef = useRef(0);

  const boxRef = useRef<HTMLDivElement | null>(null);

  const [frame, setFrame] = useState<{ width: number; height: number } | null>(null);
  const [box, setBox] = useState<{ width: number; height: number; dpr: number } | null>(null);
  const [status, setStatus] = useState<SessionStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [connected, setConnected] = useState(false);
  const [busy, setBusy] = useState(false);

  // Measured rather than assumed, because the scale below has to be exact and a panel is resizable.
  // Re-attached when the session starts: until then this branch of the tree is not rendered and the ref
  // is null, so a mount-only observer would watch nothing for the rest of the session.
  useEffect(() => {
    const node = boxRef.current;
    if (!node) return;
    const observer = new ResizeObserver(([entry]) => {
      const rect = entry?.contentRect;
      if (rect) setBox({ width: rect.width, height: rect.height, dpr: window.devicePixelRatio || 1 });
    });
    observer.observe(node);
    return () => observer.disconnect();
  }, [status?.running]);

  /**
   * How big to draw the stage — and the answer is always a WHOLE number of screen pixels per source
   * pixel, or a whole number of source pixels per screen pixel.
   *
   * This is a 16px-per-cell bitmap from 1995. At a fractional scale some cells get three screen pixels
   * and their neighbours get two, so the grid goes uneven and the digits wobble: sharp everywhere and
   * wrong overall, which is what "not quite right" looks like on pixel art. `image-rendering: pixelated`
   * does not save you — it removes the blur, not the unevenness.
   *
   * Computed in DEVICE pixels, so a 2x display gets 2x the detail rather than the same picture twice as
   * large. And it is allowed to scale UP past the framebuffer's own size, which is the part that was
   * missing: on a 1x display the canvas sat at 800 CSS px in a panel twice that wide, using a quarter of
   * the pixels available to it.
   */
  const stage = useMemo(() => {
    if (!frame || !box || box.width <= 0 || box.height <= 0) return null;
    const fit = Math.min((box.width * box.dpr) / frame.width, (box.height * box.dpr) / frame.height);
    // Below 1 there is nothing to floor to, so take a unit fraction: the rows that survive are then
    // evenly spaced instead of dropped in clumps.
    const scale = fit >= 1 ? Math.floor(fit) : 1 / Math.ceil(1 / fit);
    return { width: (frame.width * scale) / box.dpr, height: (frame.height * scale) / box.dpr };
  }, [frame, box]);

  const refresh = useCallback(async () => {
    try {
      setStatus(await clientRef.current.get<SessionStatus>('/minesweeper/status'));
    } catch {
      setError('Could not reach the server.');
    }
  }, []);

  useEffect(() => {
    void refresh();
  }, [refresh]);

  const start = async () => {
    setBusy(true);
    setError(null);
    try {
      setStatus(await clientRef.current.post<SessionStatus>('/minesweeper/start', {}));
    } catch {
      setError('The session would not start. Is wine-minesweeper installed on the server?');
    } finally {
      setBusy(false);
    }
  };

  useEffect(() => {
    if (!status?.running) return;

    const scheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
    // 'BEARER_TOKEN' is the key the rest of the app uses (Terminal.tsx, useAudioRecording). Reading
    // 'token' here sent an empty string, and upgradeWs answered 401 before any RFB byte was exchanged.
    const token = localStorage.getItem('BEARER_TOKEN') ?? sessionStorage.getItem('BEARER_TOKEN') ?? '';
    // Plugin relay, not a platform websocket provider: `/api/plugin-ws/minesweeper` rather than the old
    // `/api/minesweeper/ws`. Same byte relay onto x11vnc, mounted by the plugin instead of the shell.
    const url = `${scheme}://${window.location.host}/api/plugin-ws/minesweeper?token=${encodeURIComponent(token)}`;

    const rfb = new RfbClient(url, {
      // No offscreen buffer: with the crop gone the visible canvas IS the framebuffer, so a second
      // canvas would only add a full blit per frame to arrive at the same pixels.
      onReady: (width, height) => {
        const canvas = canvasRef.current;
        if (canvas) {
          canvas.width = width;
          canvas.height = height;
        }
        setFrame({ width, height });
        setConnected(true);
        setError(null);
      },
      onFrame: (image, x, y) => {
        canvasRef.current?.getContext('2d')?.putImageData(image, x, y);
      },
      onCopyRect: (from, to) => {
        // Same canvas as source and destination, which is what CopyRect is: the 2D context takes a
        // snapshot of the bitmap first, so an overlapping copy is well defined rather than smeared.
        const canvas = canvasRef.current;
        const context = canvas?.getContext('2d');
        if (!canvas || !context) return;
        context.drawImage(canvas, from.x, from.y, to.w, to.h, to.x, to.y, to.w, to.h);
      },
      onResize: (width, height) => {
        const canvas = canvasRef.current;
        if (canvas) {
          canvas.width = width;
          canvas.height = height;
        }
        setFrame({ width, height });
        rfb.requestUpdate(false);
      },
      onError: (rfbError) => setError(describeRfbError(rfbError)),
      onClose: () => setConnected(false),
    });

    rfbRef.current = rfb;
    return () => {
      rfb.close();
      rfbRef.current = null;
      setConnected(false);
    };
  }, [status?.running]);

  const toFramebuffer = (ev: React.MouseEvent<HTMLCanvasElement>) => {
    const rect = ev.currentTarget.getBoundingClientRect();
    const scaleX = ev.currentTarget.width / rect.width;
    const scaleY = ev.currentTarget.height / rect.height;
    return { x: (ev.clientX - rect.left) * scaleX, y: (ev.clientY - rect.top) * scaleY };
  };

  const onPointer = (ev: React.MouseEvent<HTMLCanvasElement>, kind: 'down' | 'up' | 'move') => {
    const rfb = rfbRef.current;
    if (!rfb) return;
    ev.preventDefault();

    if (kind !== 'move') {
      const bit = BUTTON_MASK[ev.button] ?? 0;
      buttonsRef.current = kind === 'down' ? buttonsRef.current | bit : buttonsRef.current & ~bit;
    }
    const { x, y } = toFramebuffer(ev);
    rfb.pointer(x, y, buttonsRef.current);
  };

  if (status && !status.installed) {
    return (
      <Centred>
        <Bomb className="size-8 text-muted-foreground" />
        <p className="text-sm text-muted-foreground">Minesweeper is not installed on this server.</p>
        {/* The package name sits at the end so the sentence is one key rather than two around an
            inline element — see docs/localization.md on the fragmentation that produces. */}
        <p className="max-w-sm text-center text-xs text-muted-foreground">
          It needs wine, a 32-bit prefix, and this package beside the platform: <code>wine-minesweeper</code>
        </p>
      </Centred>
    );
  }

  if (status && !status.running) {
    return (
      <Centred>
        <Bomb className="size-8 text-muted-foreground" />
        <p className="text-sm text-muted-foreground">The Minesweeper session is not running.</p>
        {error ? <p className="text-xs text-destructive">{error}</p> : null}
        <button
          type="button"
          onClick={start}
          disabled={busy}
          className="flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground disabled:opacity-60"
        >
          {busy ? <Loader2 className="size-4 animate-spin" /> : <Play className="size-4" />}
          {busy ? 'Starting' : 'Start it'}
        </button>
      </Centred>
    );
  }

  return (
    <div className="flex size-full flex-col items-center justify-center gap-3 bg-muted/30 p-4">
      {/* min-h-0 on the row, so the canvas gives way to the status line rather than overflowing it. */}
      <div ref={boxRef} className="flex min-h-0 w-full flex-1 items-center justify-center">
        <canvas
          ref={canvasRef}
          width={PLACEHOLDER.width}
          height={PLACEHOLDER.height}
          onMouseDown={(ev) => onPointer(ev, 'down')}
          onMouseUp={(ev) => onPointer(ev, 'up')}
          onMouseMove={(ev) => onPointer(ev, 'move')}
          onContextMenu={(ev) => ev.preventDefault()}
          // Nearest-neighbour: smoothing a 1995 bitmap looks like a photograph of a screen rather than
          // the screen. It is half of what keeps this sharp; `stage` above is the other half.
          //
          // The max-* pair is only the fallback for the frame before `stage` is known — once it is, the
          // explicit size governs and cannot exceed the box, so capping one axis would only squash the
          // other.
          className={`rounded-sm shadow-lg [image-rendering:pixelated] ${stage ? '' : 'max-h-full max-w-full'}`}
          style={{ ...(stage ?? {}), cursor: connected ? 'default' : 'progress' }}
        />
      </div>
      <div className="flex items-center gap-3 text-xs text-muted-foreground">
        <span>{connected ? 'connected' : 'connecting…'}</span>
        <button type="button" onClick={() => void refresh()} className="flex items-center gap-1 hover:text-foreground">
          <RefreshCw className="size-3" /> refresh
        </button>
      </div>
      {error ? <p className="text-xs text-destructive">{error}</p> : null}
    </div>
  );
};

const Centred = ({ children }: { children: React.ReactNode }) => (
  <div className="flex size-full flex-col items-center justify-center gap-3 p-6">{children}</div>
);