<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>ジグソーパズル（初期は正解表示・スタートでシャッフル）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
  <style>
    :root { color-scheme: light dark; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
      background:#f5f5f5;
      overscroll-behavior-y: none;
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      padding:12px calc(12px + env(safe-area-inset-right)) 12px calc(12px + env(safe-area-inset-left));
      background:#fff;
      box-shadow:0 1px 3px rgba(0,0,0,.1);
    }
    label { display:inline-flex; align-items:center; gap:8px; font-size:16px; }
    select { font-size:16px; padding:10px 12px; border-radius:10px; border:1px solid #ccc; }
    button { font-size:16px; padding:10px 14px; border-radius:10px; border:1px solid #ccc; background:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    #status { margin-left:auto; font-weight:600; }
    .scores { display:flex; gap:16px; align-items:center; font-size:14px; color:#555; }

    #board {
      display:block;
      width: min(100vw, 960px);
      max-height: calc(100vh - var(--toolbar-height, 72px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
      aspect-ratio: 16 / 9;
      height: auto;
      margin: 16px auto;
      background:#ddd;
      border-radius:12px;
      box-shadow:0 6px 16px rgba(0,0,0,.15);
      touch-action:none;
    }

    @media (orientation: landscape) {
      .toolbar { gap:8px; }
      label, select, button { font-size:15px; }
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <label>画像:
      <select id="imageSelect">
        <option value="かんたん.jpeg" selected>かんたん.jpeg（行3×列4）</option>
        <option value="ふつう.jpeg">ふつう.jpeg（行5×列7）</option>
      </select>
    </label>
    <button id="startBtn">スタート</button>
    <button id="resetBtn">リセット</button>
    <span id="status"></span>
    <div class="scores">
      <span id="currentTime">タイム: 0.00s</span>
      <span id="bestTime">ベスト: -</span>
    </div>
  </div>

  <canvas id="board" width="960" height="540"></canvas>

  <script>
    const canvas = document.getElementById('board');
    const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
    const imageSelect = document.getElementById('imageSelect');
    const startBtn = document.getElementById('startBtn');
    const resetBtn = document.getElementById('resetBtn');
    const statusEl = document.getElementById('status');
    const currentTimeEl = document.getElementById('currentTime');
    const bestTimeEl = document.getElementById('bestTime');

    const SNAP_PIXELS = 18;
    const EPSILON = 0.5;
    const SAFE_MARGIN = 12;

    const GRID_LINE_COLOR = 'rgba(0,0,0,0.25)';
    const GRID_OUTLINE_COLOR = 'rgba(0,0,0,0.35)';
    const GRID_CORRECT_HINT_COLOR = 'rgba(255, 0, 0, 0.12)';
    const GRID_LINE_WIDTH = 1;

    const GRID_BY_IMAGE = {
      'かんたん.jpeg': { rows: 3, cols: 4 },
      'ふつう.jpeg': { rows: 5, cols: 7 }
    };

    let img = new Image();
    let pieces = [];
    let rows = GRID_BY_IMAGE[imageSelect.value].rows;
    let cols = GRID_BY_IMAGE[imageSelect.value].cols;
    let dragging = null;
    let solved = false;
    let loading = false;

    let startTime = 0;
    let timerId = null;

    function startTimer() {
      stopTimer();
      startTime = performance.now();
      timerId = setInterval(updateCurrentTime, 100);
      updateCurrentTime();
    }

    function stopTimer() {
      if (timerId) {
        clearInterval(timerId);
        timerId = null;
      }
    }

    function getElapsedSeconds() {
      if (!startTime) return 0;
      return (performance.now() - startTime) / 1000;
    }

    function formatSeconds(sec) {
      return sec.toFixed(2) + 's';
    }

    function updateCurrentTime() {
      if (!startTime || solved) return;
      const sec = getElapsedSeconds();
      currentTimeEl.textContent = 'タイム: ' + formatSeconds(sec);
    }

    function updateBestTimeDisplay() {
      const key = bestTimeKey(imageSelect.value, rows, cols);
      const best = localStorage.getItem(key);
      bestTimeEl.textContent = best ? ('ベスト: ' + formatSeconds(Number(best))) : 'ベスト: -';
    }

    function bestTimeKey(imageName, r, c) {
      return `puzzle_best_${encodeURIComponent(imageName)}_${r}x${c}`;
    }

    function maybeUpdateBestTime(finalSeconds) {
      const key = bestTimeKey(imageSelect.value, rows, cols);
      const prev = localStorage.getItem(key);
      if (!prev || finalSeconds < Number(prev)) {
        localStorage.setItem(key, String(finalSeconds));
      }
      updateBestTimeDisplay();
    }

    function resizeCanvasToDisplaySize(c) {
      const ratio = window.devicePixelRatio || 1;
      const cssWidth = c.clientWidth || 960;
      const cssHeight = c.clientHeight || 540;
      const targetW = Math.floor(cssWidth * ratio);
      const targetH = Math.floor(cssHeight * ratio);
      if (c.width !== targetW || c.height !== targetH) {
        c.width = targetW;
        c.height = targetH;
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      }
    }

    function fitImageToCanvas(image, canvas) {
      const cw = canvas.clientWidth || 960;
      const ch = canvas.clientHeight || 540;
      const scale = Math.min(cw / image.width, ch / image.height);
      const w = image.width * scale;
      const h = image.height * scale;
      const x = (cw - w) / 2;
      const y = (ch - h) / 2;
      return { x, y, w, h, scale };
    }

    function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }

    function safeClientSize() {
      const w = canvas.clientWidth || 960;
      const h = canvas.clientHeight || 540;
      return { w, h };
    }

    function createPieces() {
      resizeCanvasToDisplaySize(canvas);
      pieces = [];
      const layout = fitImageToCanvas(img, canvas);
      const tileW = layout.w / cols;
      const tileH = layout.h / rows;

      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const correctX = layout.x + c * tileW;
          const correctY = layout.y + r * tileH;

          pieces.push({
            r, c,
            x: correctX, y: correctY,
            w: tileW, h: tileH,
            correctX, correctY,
            z: r * cols + c + 1,
            locked: false
          });
        }
      }
      solved = true;
      updateStatusSolvedMessage();
      draw();
    }

    function shufflePieces() {
      if (!img || !img.complete) return;
      const layout = fitImageToCanvas(img, canvas);
      const tileW = layout.w / cols;
      const tileH = layout.h / rows;
      const { w: cw, h: ch } = safeClientSize();

      for (const p of pieces) {
        const rx = SAFE_MARGIN + Math.random() * Math.max(1, (cw - tileW - SAFE_MARGIN * 2));
        const ry = SAFE_MARGIN + Math.random() * Math.max(1, (ch - tileH - SAFE_MARGIN * 2));
        p.x = clamp(rx, 0, cw - tileW);
        p.y = clamp(ry, 0, ch - tileH);
        p.w = tileW;
        p.h = tileH;
      }
      solved = false;
      draw();
      updateStatus();
      startTimer();
    }

    function resetPiecesToSolved() {
      if (!img || !img.complete) return;
      const layout = fitImageToCanvas(img, canvas);
      const tileW = layout.w / cols;
      const tileH = layout.h / rows;
      pieces.forEach(p => {
        p.w = tileW; p.h = tileH;
        p.x = layout.x + p.c * tileW;
        p.y = layout.y + p.r * tileH;
        p.correctX = p.x;
        p.correctY = p.y;
      });
      solved = true;
      draw();
      updateStatusSolvedMessage();
      stopTimer();
      startTime = 0;
      currentTimeEl.textContent = 'タイム: 0.00s';
    }

    function updateStatusSolvedMessage() {
      statusEl.textContent = '完成！おめでとう🎉（スタートで開始できます）';
    }

    function updateStatus() {
      const correctCount = pieces.filter(isPieceCorrect).length;
      statusEl.textContent = `正解ピース: ${correctCount}/${pieces.length}`;
    }

    function pointInPiece(x, y, p) {
      return x >= p.x && x <= p.x + p.w && y >= p.y && y <= p.y + p.h;
    }

    function pickPiece(x, y) {
      const sorted = [...pieces].sort((a, b) => b.z - a.z);
      for (const p of sorted) {
        if (pointInPiece(x, y, p)) return p;
      }
      return null;
    }

    function bringToFront(p) {
      const maxZ = Math.max(0, ...pieces.map(pc => pc.z));
      p.z = maxZ + 1;
    }

    function getCanvasPoint(ev) {
      const rect = canvas.getBoundingClientRect();
      const x = (ev.clientX ?? ev.pageX) - rect.left;
      const y = (ev.clientY ?? ev.pageY) - rect.top;
      return { x, y };
    }

    function onPointerDown(ev) {
      if (ev.isPrimary === false) return;
      const { x, y } = getCanvasPoint(ev);
      const p = pickPiece(x, y);
      if (!p) return;
      dragging = { piece: p, offsetX: x - p.x, offsetY: y - p.y };
      bringToFront(p);
      canvas.setPointerCapture?.(ev.pointerId);
      ev.preventDefault();
    }

    function onPointerMove(ev) {
      if (!dragging) return;
      const { x, y } = getCanvasPoint(ev);
      const p = dragging.piece;
      p.x = x - dragging.offsetX;
      p.y = y - dragging.offsetY;

      const dx = Math.abs(p.x - p.correctX);
      const dy = Math.abs(p.y - p.correctY);
      if (dx < SNAP_PIXELS && dy < SNAP_PIXELS) {
        p.x = p.correctX;
        p.y = p.correctY;
      }

      draw();
      ev.preventDefault();
    }

    function onPointerUp(ev) {
      if (dragging) {
        dragging = null;
        checkSolved();
        draw();
      }
      canvas.releasePointerCapture?.(ev.pointerId);
      ev.preventDefault();
    }

    function isPieceCorrect(p) {
      return Math.abs(p.x - p.correctX) < EPSILON && Math.abs(p.y - p.correctY) < EPSILON;
    }

    function checkSolved() {
      const allCorrect = pieces.every(isPieceCorrect);
      const wasSolved = solved;
      solved = allCorrect;
      if (solved) {
        stopTimer();
        const sec = getElapsedSeconds();
        if (sec > 0) {
          maybeUpdateBestTime(sec);
          currentTimeEl.textContent = 'タイム: ' + formatSeconds(sec);
          statusEl.textContent = `完成！おめでとう🎉（${formatSeconds(sec)}、完成後も移動できます）`;
        } else {
          updateStatusSolvedMessage();
        }
      } else if (wasSolved && !solved) {
        updateStatus();
      }
    }

    function drawGrid(layout) {
      const { x, y, w, h } = layout;
      // 背景の正解ヒント（薄い赤）
      ctx.fillStyle = GRID_CORRECT_HINT_COLOR;
      ctx.fillRect(x, y, w, h);

      // 枠
      ctx.strokeStyle = GRID_OUTLINE_COLOR;
      ctx.lineWidth = GRID_LINE_WIDTH;
      ctx.strokeRect(x, y, w, h);

      // グリッド線
      ctx.strokeStyle = GRID_LINE_COLOR;
      ctx.lineWidth = GRID_LINE_WIDTH;
      ctx.beginPath();
      const tileW = w / cols;
      const tileH = h / rows;
      for (let c = 1; c < cols; c++) {
        const gx = x + c * tileW;
        ctx.moveTo(gx, y);
        ctx.lineTo(gx, y + h);
      }
      for (let r = 1; r < rows; r++) {
        const gy = y + r * tileH;
        ctx.moveTo(x, gy);
        ctx.lineTo(x + w, gy);
      }
      ctx.stroke();
    }

    function draw() {
      resizeCanvasToDisplaySize(canvas);
      const { w: cw, h: ch } = safeClientSize();
      ctx.clearRect(0, 0, cw, ch);

      if (!img || !img.complete) return;

      const layout = fitImageToCanvas(img, canvas);

      // グリッド（正解位置のヒント）
      drawGrid(layout);

      // ピース描画（z順で）
      const sorted = [...pieces].sort((a, b) => a.z - b.z);
      for (const p of sorted) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(p.x, p.y, p.w, p.h);
        ctx.clip();
        // 画像の該当領域をキャンバスのその位置に描画
        const sx = (p.c * (img.width / cols));
        const sy = (p.r * (img.height / rows));
        const sw = (img.width / cols);
        const sh = (img.height / rows);

        // 画像をキャンバス上レイアウトに合わせてスケール描画
        ctx.drawImage(
          img,
          sx, sy, sw, sh,
          p.x, p.y, p.w, p.h
        );

        // ピースの枠
        ctx.strokeStyle = 'rgba(0,0,0,0.3)';
        ctx.lineWidth = 1;
        ctx.strokeRect(p.x, p.y, p.w, p.h);

        // 正解に近いときのスナップガイド
        const dx = Math.abs(p.x - p.correctX);
        const dy = Math.abs(p.y - p.correctY);
        if (!isPieceCorrect(p) && dx < SNAP_PIXELS && dy < SNAP_PIXELS) {
          ctx.setLineDash([4, 3]);
          ctx.strokeStyle = 'rgba(0,128,255,0.6)';
          ctx.strokeRect(p.correctX, p.correctY, p.w, p.h);
          ctx.setLineDash([]);
        }

        ctx.restore();
      }
    }

    function updateToolbarHeightVar() {
      const tb = document.querySelector('.toolbar');
      if (!tb) return;
      const h = Math.ceil(tb.getBoundingClientRect().height);
      document.documentElement.style.setProperty('--toolbar-height', h + 'px');
    }

    function handleResize() {
      updateToolbarHeightVar();
      resizeCanvasToDisplaySize(canvas);
      if (img && img.complete && pieces.length) {
        const layout = fitImageToCanvas(img, canvas);
        const tileW = layout.w / cols;
        const tileH = layout.h / rows;

        for (const p of pieces) {
          const targetX = layout.x + p.c * tileW;
          const targetY = layout.y + p.r * tileH;

          if (Math.abs(p.x - p.correctX) < EPSILON && Math.abs(p.y - p.correctY) < EPSILON) {
            p.x = targetX; p.y = targetY;
          } else {
            // 相対位置を概ね保つ（旧レイアウト推定）
            const oldLayoutX = p.correctX - p.c * p.w;
            const oldLayoutY = p.correctY - p.r * p.h;
            const oldLayoutW = p.w * cols;
            const oldLayoutH = p.h * rows;
            const rx = (p.x - oldLayoutX) / Math.max(1, oldLayoutW);
            const ry = (p.y - oldLayoutY) / Math.max(1, oldLayoutH);
            p.x = layout.x + rx * layout.w;
            p.y = layout.y + ry * layout.h;
            // 画面内に収める
            const { w: cw, h: ch } = safeClientSize();
            p.x = clamp(p.x, 0, cw - tileW);
            p.y = clamp(p.y, 0, ch - tileH);
          }
          p.w = tileW; p.h = tileH;
          p.correctX = targetX; p.correctY = targetY;
        }
        draw();
      }
    }

    function loadImageAndInit(src) {
      loading = true;
      stopTimer();
      startTime = 0;
      currentTimeEl.textContent = 'タイム: 0.00s';
      statusEl.textContent = '読み込み中...';
      img = new Image();
      img.decoding = 'async';
      img.onload = () => {
        loading = false;
        handleResize();
        createPieces();
        updateBestTimeDisplay();
      };
      img.onerror = () => {
        loading = false;
        statusEl.textContent = '画像の読み込みに失敗しました';
      };
      img.src = src;
    }

    imageSelect.addEventListener('change', () => {
      rows = GRID_BY_IMAGE[imageSelect.value].rows;
      cols = GRID_BY_IMAGE[imageSelect.value].cols;
      loadImageAndInit(imageSelect.value);
    });

    startBtn.addEventListener('click', () => {
      if (!img || !img.complete) return;
      handleResize();
      shufflePieces();
    });

    resetBtn.addEventListener('click', () => {
      if (!img || !img.complete) return;
      handleResize();
      resetPiecesToSolved();
    });

    // Pointer events with passive: false for iOS Safari
    canvas.addEventListener('pointerdown', onPointerDown, { passive: false });
    canvas.addEventListener('pointermove', onPointerMove, { passive: false });
    canvas.addEventListener('pointerup', onPointerUp, { passive: false });
    canvas.addEventListener('pointercancel', onPointerUp, { passive: false });

    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', () => {
      setTimeout(handleResize, 150);
    });

    document.addEventListener('DOMContentLoaded', () => {
      updateToolbarHeightVar();
      handleResize();
      // 初期画像を読み込む
      loadImageAndInit(imageSelect.value);
    });
  </script>
</body>
</html>