[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b65f5e3acc819191d2158206be5279","versionInt","title","Tetra Flux（重力回転テトリス風）","type","code/react","content","// TetraFlux – 新型テトリス風ブラウザゲーム（重力回転＋リワインド） v1.1\n// 修正: RNGの扱いを是正（makeBagに関数を渡す）。バッグ/ネクスト消費ロジックを安定化。\n// 追加: 簡易セルフテスト（UIに結果表示）。\n\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// ===== 基本設定 =====\nconst W = 10; // 横\nconst H = 20; // 縦\nconst BASE_TICK = 650; // 自動落下基準(ms)\nconst ENABLE_TESTS = true; // 簡易テストの可視化\n\nconst GRAVITYS = [\"down\", \"left\", \"up\", \"right\"] as const;\ntype Gravity = typeof GRAVITYS[number];\n\n// ピース定義\nconst PIECES = {\n I: { color: \"#00e5ff\", cells: [ [-1,0],[0,0],[1,0],[2,0] ] },\n O: { color: \"#ffd400\", cells: [ [0,0],[1,0],[0,1],[1,1] ] },\n T: { color: \"#be00ff\", cells: [ [-1,0],[0,0],[1,0],[0,1] ] },\n S: { color: \"#00d46a\", cells: [ [0,0],[1,0],[-1,1],[0,1] ] },\n Z: { color: \"#ff3d57\", cells: [ [-1,0],[0,0],[0,1],[1,1] ] },\n J: { color: \"#0066ff\", cells: [ [-1,0],[0,0],[1,0],[-1,1] ] },\n L: { color: \"#ff8a00\", cells: [ [-1,0],[0,0],[1,0],[1,1] ] },\n} as const;\n\ntype PieceType = keyof typeof PIECES;\n\ntype Cell = { color: string } | null;\n\ntype Piece = {\n type: PieceType;\n cells: [number, number][]; // 現在の回転後オフセット\n pos: { x: number; y: number };\n color: string;\n};\n\n// ===== 乱数とバッグ =====\nfunction mulberry32(seed: number): () => number {\n return function () {\n let t = (seed += 0x6d2b79f5);\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n// 7バッグ生成：rng(0..1)を返す「関数」を必ず渡すこと\nfunction makeBag(rng: () => number): PieceType[] {\n const types: PieceType[] = [\"I\", \"O\", \"T\", \"S\", \"Z\", \"J\", \"L\"];\n for (let i = types.length - 1; i > 0; i--) {\n const j = Math.floor(rng() * (i + 1));\n [types[i], types[j]] = [types[j], types[i]];\n }\n return types;\n}\n\n// ===== 幾何ユーティリティ =====\nfunction rotateCW(cells: [number, number][]): [number, number][] {\n return cells.map(([x, y]) => [y, -x]) as [number, number][];\n}\nfunction rotateCCW(cells: [number, number][]): [number, number][] {\n return cells.map(([x, y]) => [-y, x]) as [number, number][];\n}\nfunction gvec(g: Gravity) {\n if (g === \"down\") return { dx: 0, dy: 1 };\n if (g === \"up\") return { dx: 0, dy: -1 };\n if (g === \"left\") return { dx: -1, dy: 0 };\n return { dx: 1, dy: 0 };\n}\nfunction emptyBoard(): Cell[][] {\n return Array.from({ length: H }, () => Array.from({ length: W }, () => null));\n}\nfunction spawnPos(cells: [number, number][], gravity: Gravity) {\n const xs = cells.map((c) => c[0]);\n const ys = cells.map((c) => c[1]);\n const minX = Math.min(...xs); const maxX = Math.max(...xs);\n const minY = Math.min(...ys); const maxY = Math.max(...ys);\n if (gravity === \"down\") return { x: Math.floor(W / 2), y: -minY };\n if (gravity === \"up\") return { x: Math.floor(W / 2), y: H - 1 - maxY };\n if (gravity === \"left\") return { x: W - 1 - maxX, y: Math.floor(H / 2) };\n return { x: -minX, y: Math.floor(H / 2) }; // right\n}\nfunction collides(board: Cell[][], piece: Piece): boolean {\n for (const [ox, oy] of piece.cells) {\n const x = piece.pos.x + ox;\n const y = piece.pos.y + oy;\n if (x < 0 || x >= W || y < 0 || y >= H) return true;\n if (board[y][x]) return true;\n }\n return false;\n}\nfunction merge(board: Cell[][], piece: Piece) {\n const nb = board.map((row) => row.slice());\n for (const [ox, oy] of piece.cells) {\n const x = piece.pos.x + ox; const y = piece.pos.y + oy;\n if (y >= 0 && y < H && x >= 0 && x < W) nb[y][x] = { color: piece.color };\n }\n return nb;\n}\nfunction clearAndCompress(board: Cell[][], gravity: Gravity) {\n let cleared = 0;\n if (gravity === \"down\") {\n const keep: Cell[][] = [];\n for (let y = H - 1; y >= 0; y--) {\n if (board[y].every((c) => c)) { cleared++; } else { keep.push(board[y]); }\n }\n while (keep.length < H) keep.push(Array.from({ length: W }, () => null));\n return { board: keep.reverse(), cleared };\n }\n if (gravity === \"up\") {\n const keep: Cell[][] = [];\n for (let y = 0; y < H; y++) {\n if (board[y].every((c) => c)) { cleared++; } else { keep.push(board[y]); }\n }\n while (keep.length < H) keep.unshift(Array.from({ length: W }, () => null));\n return { board: keep, cleared };\n }\n if (gravity === \"left\") {\n const fullXs: number[] = [];\n for (let x = 0; x < W; x++) { let ok = true; for (let y = 0; y < H; y++) if (!board[y][x]) { ok = false; break; } if (ok) fullXs.push(x); }\n cleared = fullXs.length; const nb = emptyBoard(); let writeX = 0;\n for (let x = 0; x < W; x++) { if (fullXs.includes(x)) continue; for (let y = 0; y < H; y++) nb[y][writeX] = board[y][x]; writeX++; }\n return { board: nb, cleared };\n }\n const fullXs: number[] = [];\n for (let x = 0; x < W; x++) { let ok = true; for (let y = 0; y < H; y++) if (!board[y][x]) { ok = false; break; } if (ok) fullXs.push(x); }\n cleared = fullXs.length; const nb = emptyBoard(); let writeX = W - 1;\n for (let x = W - 1; x >= 0; x--) { if (fullXs.includes(x)) continue; for (let y = 0; y < H; y++) nb[y][writeX] = board[y][x]; writeX--; }\n return { board: nb, cleared };\n}\nfunction settleBoard(board: Cell[][], gravity: Gravity) {\n const nb = board.map((row) => row.slice());\n let moved = true;\n while (moved) {\n moved = false;\n if (gravity === \"down\") {\n for (let y = H - 2; y >= 0; y--) { for (let x = 0; x < W; x++) if (nb[y][x] && !nb[y + 1][x]) { nb[y + 1][x] = nb[y][x]; nb[y][x] = null; moved = true; } }\n } else if (gravity === \"up\") {\n for (let y = 1; y < H; y++) { for (let x = 0; x < W; x++) if (nb[y][x] && !nb[y - 1][x]) { nb[y - 1][x] = nb[y][x]; nb[y][x] = null; moved = true; } }\n } else if (gravity === \"left\") {\n for (let x = 1; x < W; x++) { for (let y = 0; y < H; y++) if (nb[y][x] && !nb[y][x - 1]) { nb[y][x - 1] = nb[y][x]; nb[y][x] = null; moved = true; } }\n } else {\n for (let x = W - 2; x >= 0; x--) { for (let y = 0; y < H; y++) if (nb[y][x] && !nb[y][x + 1]) { nb[y][x + 1] = nb[y][x]; nb[y][x] = null; moved = true; } }\n }\n }\n return nb;\n}\nfunction ghostPos(board: Cell[][], piece: Piece, gravity: Gravity) {\n const { dx, dy } = gvec(gravity);\n let p = { ...piece, pos: { ...piece.pos } } as Piece;\n while (true) {\n const np = { ...p, pos: { x: p.pos.x + dx, y: p.pos.y + dy } } as Piece;\n if (collides(board, np)) break; p = np;\n }\n return p.pos;\n}\nfunction scoreFor(lines: number, level: number, combo: number) {\n if (lines === 0) return 0;\n const base = [0, 100, 300, 500, 800][lines] || lines * 300;\n return Math.floor(base * (1 + (level - 1) * 0.2) * (1 + combo * 0.3));\n}\n\n// ===== 本体 =====\nexport default function TetraFlux() {\n // シード固定のRNG（関数型）\n const rngRef = useRef<() => number>(mulberry32(0xC0FFEE));\n // 初期キューは一括生成して整合性を確保\n const initialQueueRef = useRef(makeBag(rngRef.current));\n\n // bagは「nextで表示していない残りキュー」。nextTypeは先頭を表示\n const [bag, setBag] = useState(() => initialQueueRef.current.slice(1));\n const [nextType, setNextType] = useState(() => initialQueueRef.current[0]);\n\n // ゲーム状態\n const [board, setBoard] = useState(() => emptyBoard());\n const [gravity, setGravity] = useState(\"down\");\n const [current, setCurrent] = useState(null);\n const [holded, setHolded] = useState(null);\n const [canHold, setCanHold] = useState(true);\n\n const [score, setScore] = useState(0);\n const [lines, setLines] = useState(0);\n const level = 1 + Math.floor(lines / 10);\n const [energy, setEnergy] = useState(1);\n const [rewinds, setRewinds] = useState(3);\n const [combo, setCombo] = useState(0);\n const [paused, setPaused] = useState(false);\n const [gameOver, setGameOver] = useState(false);\n\n // テスト結果表示用\n const [testResults, setTestResults] = useState<{name:string; pass:boolean; note?:string}[] | null>(null);\n\n // 履歴（リワインド用）\n type Snapshot = {\n board: Cell[][]; gravity: Gravity; current: Piece | null; nextType: PieceType; holded: PieceType | null; canHold: boolean; score: number; lines: number; energy: number; rewinds: number; combo: number; paused: boolean; gameOver: boolean; bag: PieceType[];\n };\n const historyRef = useRef([]);\n\n const pushHistory = () => {\n const snap: Snapshot = {\n board: board.map((r) => r.slice()), gravity, current: current ? { ...current, cells: current.cells.map((c) => [c[0], c[1]]) as [number, number][] } : null,\n nextType, holded, canHold, score, lines, energy, rewinds, combo, paused, gameOver, bag: bag.slice()\n };\n historyRef.current.push(snap);\n if (historyRef.current.length > 60) historyRef.current.shift();\n };\n const popHistory = () => {\n const snap = historyRef.current.pop();\n if (!snap) return;\n setBoard(snap.board); setGravity(snap.gravity); setCurrent(snap.current);\n setNextType(snap.nextType); setHolded(snap.holded); setCanHold(snap.canHold);\n setScore(snap.score); setLines(snap.lines); setEnergy(snap.energy);\n setRewinds(rewinds); // リワインド回数自体は消費扱い\n setCombo(snap.combo); setPaused(snap.paused); setGameOver(snap.gameOver);\n setBag(snap.bag);\n };\n\n // 次ピースを取り出して次のネクストも用意（バッグも更新）\n const drawNext = (g: Gravity): { piece: Piece; nextBag: PieceType[]; nextType: PieceType } => {\n let b = bag.slice();\n let t = nextType as PieceType | undefined;\n\n if (t === undefined) {\n // ネクスト未設定時はバッグから補充\n if (b.length === 0) b = makeBag(rngRef.current);\n t = b.shift()!;\n } else {\n // すでにネクストがある場合は、それを消費する（先頭想定）\n if (b.length > 0 && b[0] === t) {\n b.shift();\n } else {\n // 念のため安全策：先頭でない場合は最初に見つかったtを除去\n const idx = b.indexOf(t);\n if (idx >= 0) b.splice(idx, 1);\n }\n }\n\n // 次のネクストを用意\n if (b.length === 0) b = makeBag(rngRef.current);\n const nxt = b.shift()!;\n\n const base = PIECES[t as PieceType];\n const pos = spawnPos(base.cells as [number, number][], g);\n const p: Piece = { type: t as PieceType, cells: base.cells as [number, number][], pos, color: base.color };\n return { piece: p, nextBag: b, nextType: nxt };\n };\n\n const spawn = (g: Gravity) => {\n const { piece, nextBag, nextType: nt } = drawNext(g);\n if (collides(board, piece)) { setGameOver(true); setPaused(true); return; }\n setCurrent(piece); setBag(nextBag); setNextType(nt); setCanHold(true);\n };\n\n // 初期スポーン\n useEffect(() => { spawn(gravity); /* eslint-disable-next-line */ }, []);\n\n // 自動落下\n useEffect(() => {\n if (paused || gameOver) return;\n const spd = Math.max(130, BASE_TICK - (level - 1) * 45);\n const id = setInterval(() => { tick(); }, spd);\n return () => clearInterval(id);\n }, [paused, gameOver, level, board, current, gravity]);\n\n const tick = () => {\n if (!current) return;\n pushHistory();\n const { dx, dy } = gvec(gravity);\n const np: Piece = { ...current, pos: { x: current.pos.x + dx, y: current.pos.y + dy } };\n if (!collides(board, np)) { setCurrent(np); return; }\n\n // ロック→消去\n const merged = merge(board, current); let totalCleared = 0; let comboCount = 0; let nb = merged;\n while (true) {\n const { board: cb, cleared } = clearAndCompress(nb, gravity);\n if (cleared === 0) break; totalCleared += cleared; comboCount++; nb = cb;\n }\n if (totalCleared > 0) {\n setScore((s) => s + scoreFor(totalCleared, level, combo + comboCount - 1));\n setLines((l) => l + totalCleared); setEnergy((e) => Math.min(6, e + totalCleared)); setCombo((c) => c + comboCount);\n } else { setCombo(0); }\n setBoard(nb); spawn(gravity);\n };\n\n // 入力\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (gameOver && e.key.toLowerCase() !== \"r\") return;\n if ([\"ArrowLeft\",\"ArrowRight\",\"ArrowDown\",\"ArrowUp\",\" \",\"Shift\",\"q\",\"e\",\"z\",\"c\",\"p\",\"r\"].includes(e.key)) e.preventDefault();\n if (e.key === \"p\" || e.key === \"P\") { setPaused((p) => !p); return; }\n if (paused && e.key.toLowerCase() !== \"r\") return;\n if (!current && e.key.toLowerCase() !== \"r\") return;\n\n const tryMove = (dx: number, dy: number) => {\n pushHistory(); const np: Piece = { ...current!, pos: { x: current!.pos.x + dx, y: current!.pos.y + dy } }; if (!collides(board, np)) setCurrent(np);\n };\n const rotate = (dir: 1 | -1) => {\n pushHistory(); const rc = dir === 1 ? rotateCW(current!.cells as [number, number][]) : rotateCCW(current!.cells as [number, number][]);\n const base: Piece = { ...current!, cells: rc };\n const kicks = [ [0,0],[1,0],[-1,0],[0,1],[0,-1],[2,0],[-2,0] ];\n for (const [kx, ky] of kicks) { const cand: Piece = { ...base, pos: { x: current!.pos.x + kx, y: current!.pos.y + ky } }; if (!collides(board, cand)) { setCurrent(cand); return; } }\n };\n const hardDrop = () => {\n pushHistory(); const { dx, dy } = gvec(gravity); let p = { ...current! } as Piece; let steps = 0;\n while (true) { const np: Piece = { ...p, pos: { x: p.pos.x + dx, y: p.pos.y + dy } }; if (collides(board, np)) break; p = np; steps++; }\n setScore((s) => s + Math.max(0, steps * 2)); setCurrent(p); setTimeout(() => tick(), 0);\n };\n const softDrop = () => { const { dx, dy } = gvec(gravity); tryMove(dx, dy); setScore((s) => s + 1); };\n const changeGravity = (dir: 1 | -1) => {\n if (energy <= 0) return; pushHistory(); setEnergy((e) => e - 1); setCombo(0);\n setGravity((g) => {\n const i = GRAVITYS.indexOf(g); const ng = GRAVITYS[(i + (dir === 1 ? 1 : 3)) % 4];\n setBoard((bd) => {\n let nb = settleBoard(bd, ng); let total = 0, c = 0;\n while (true) { const { board: cb, cleared } = clearAndCompress(nb, ng); if (cleared === 0) break; total += cleared; c++; nb = cb; nb = settleBoard(nb, ng); }\n if (total > 0) { setScore((s) => s + scoreFor(total, level, 0) + c * 20); setLines((l) => l + total); setEnergy((e) => Math.min(6, e + total)); }\n return nb;\n });\n setCurrent((pc) => {\n if (!pc) return pc; const cand: Piece = { ...pc };\n if (!collides(board, cand)) return cand;\n const shifts = [ [0,0],[1,0],[-1,0],[0,1],[0,-1],[2,0],[-2,0] ];\n for (const [sx, sy] of shifts) { const a = { ...cand, pos: { x: cand.pos.x + sx, y: cand.pos.y + sy } } as Piece; if (!collides(board, a)) return a; }\n return null; // どうしても無理ならリスポーン\n });\n return ng;\n });\n };\n const doHold = () => {\n if (!canHold || !current) return; pushHistory(); setCanHold(false);\n if (!holded) { setHolded(current.type); spawn(gravity); }\n else { const held = holded; setHolded(current.type); const base = PIECES[held]; const p: Piece = { type: held, cells: base.cells as [number, number][], pos: spawnPos(base.cells as [number, number][], gravity), color: base.color };\n if (collides(board, p)) { setGameOver(true); setPaused(true); return; } setCurrent(p); }\n };\n const rewind = () => { if (rewinds <= 0) return; setRewinds((r) => r - 1); popHistory(); };\n\n switch (e.key) {\n case \"ArrowLeft\": tryMove(-1, 0); break;\n case \"ArrowRight\": tryMove(1, 0); break;\n case \"ArrowDown\": softDrop(); break;\n case \"ArrowUp\": rotate(1); break;\n case \" \": hardDrop(); break;\n case \"q\": case \"Q\": changeGravity(-1); break;\n case \"e\": case \"E\": changeGravity(1); break;\n case \"c\": case \"C\": doHold(); break;\n case \"z\": case \"Z\": rewind(); break;\n case \"r\": case \"R\": restart(); break;\n }\n };\n window.addEventListener(\"keydown\", onKey, { passive: false });\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [board, current, gravity, paused, gameOver, energy, rewinds, holded, canHold, level]);\n\n const restart = () => {\n setBoard(emptyBoard()); setGravity(\"down\"); setCurrent(null);\n // 一度のmakeBagで整合性を確保\n const newQ = makeBag(rngRef.current);\n setNextType(newQ[0]); setBag(newQ.slice(1));\n setScore(0); setLines(0); setEnergy(1); setRewinds(3); setCombo(0);\n setPaused(false); setGameOver(false); setHolded(null); setCanHold(true);\n setTimeout(() => spawn(\"down\"), 0);\n historyRef.current = [];\n };\n\n // ===== セルフテスト =====\n useEffect(() => {\n if (!ENABLE_TESTS) return;\n const results: {name:string; pass:boolean; note?:string}[] = [];\n\n // Test 1: RNGは「関数」であること\n const t1 = typeof rngRef.current === \"function\";\n results.push({ name: \"RNG is function\", pass: t1, note: t1 ? undefined : \"rngRef.current が関数ではありません\" });\n\n // Test 2: makeBagで7種ユニーク\n const bagTest = makeBag(rngRef.current);\n const set2 = new Set(bagTest);\n const allKeys = Object.keys(PIECES);\n const t2 = bagTest.length === 7 && set2.size === 7 && [...set2].every((k) => allKeys.includes(k as any));\n results.push({ name: \"makeBag returns 7 unique\", pass: t2, note: t2 ? undefined : `got ${bagTest}` });\n\n // Test 3: drawNext 消費ロジック（先頭を消費→次をnextType）\n // ローカルに独立検証（mulberry32(1)の順序を利用）\n const localRng = mulberry32(1);\n const q = makeBag(localRng);\n let b = q.slice(1); // 画面上のbag（先頭はnextとして表示済み）\n let n = q[0]; // nextType\n // 1回ドロー\n const consumeOnce = (bagIn: PieceType[], nextIn: PieceType) => {\n let bb = bagIn.slice(); let tt: PieceType | undefined = nextIn;\n if (bb.length > 0 && bb[0] === tt) bb.shift(); else { const idx = bb.indexOf(tt); if (idx >= 0) bb.splice(idx,1); }\n if (bb.length === 0) bb = makeBag(localRng);\n const nxt = bb.shift()!; // 次のネクスト\n return { nextBag: bb, nextType: nxt };\n };\n const r1 = consumeOnce(b, n);\n const expectNextType = q[1];\n const expectBagHead = q[2];\n const t3 = r1.nextType === expectNextType && r1.nextBag[0] === expectBagHead;\n results.push({ name: \"drawNext queue consumption\", pass: t3, note: t3 ? undefined : `expected next=${expectNextType}, bagHead=${expectBagHead} but got next=${r1.nextType}, bagHead=${r1.nextBag[0]}` });\n\n setTestResults(results);\n }, []);\n\n // ===== レンダリング =====\n const renderCells = useMemo(() => {\n const cells: (Cell | { color: string; ghost?: boolean })[][] = board.map((r) => r.slice());\n if (current) {\n const gp = ghostPos(board, current, gravity);\n for (const [ox, oy] of current.cells) {\n const gx = gp.x + ox, gy = gp.y + oy;\n if (gy >= 0 && gy < H && gx >= 0 && gx < W && !cells[gy][gx]) cells[gy][gx] = { color: current.color, ghost: true } as any;\n }\n for (const [ox, oy] of current.cells) {\n const x = current.pos.x + ox, y = current.pos.y + oy;\n if (y >= 0 && y < H && x >= 0 && x < W) cells[y][x] = { color: current.color } as any;\n }\n }\n return cells;\n }, [board, current, gravity]);\n\n const nextPreview = useMemo(() => PIECES[nextType], [nextType]);\n\n return (\n

\n {/* ボード */}\n

TetraFlux // 重力回転

Level {level}

\n\n

\n {renderCells.flat().map((cell, i) => (\n

\n {cell && (\n

\n )}\n

\n ))}\n

\n\n {(paused || gameOver) && (\n

{gameOver ? \"GAME OVER\" : \"PAUSED\"}

R: リスタート / P: 再開

\n )}\n

\n\n

\n 操作：←→ 移動／ ↓ ソフトドロップ／ ↑ 回転／ Space ハードドロップ／ Q/E 重力回転 ／ C ホールド／ Z リワインド／ P 一時停止／ R リスタート\n

\n\n {/* サイドパネル */}\n

\n \n \n \n

\n\n

\n \n

\n {Array.from({ length: 6 }).map((_, i) => (\n

\n ))}\n

重力回転で1消費。ライン消去で回復。

\n \n \n

\n {Array.from({ length: 5 }).map((_, i) => (\n

\n ))}\n

直前の状態に巻き戻し（上限あり）。

\n \n

\n\n \n \n \n\n \n {holded ? (\n \n ) : (\n

未使用

\n )}\n \n\n

\n \n \n

\n\n \n

重力回転：Q/Eで盤面の重力方向を90°回転。固定ブロックも新重力で“再落下”。
列消去：左右重力のときは「列」が揃うと消える（上下重力は行）。
リワインド：Zで1手戻る（回数制限）。

\n \n\n {ENABLE_TESTS && testResults && (\n \n

\n {r.pass ? \"✔\" : \"✖\"} {r.name}{r.note ? ` – ${r.note}` : \"\"}\n

\n \n )}\n

\n );\n}\n\nfunction Stat({ label, value }: { label: string; value: number }) {\n return (\n

{label}

{value}

\n );\n}\nfunction Panel({ title, children }: { title: string; children: React.ReactNode }) {\n return (\n

{title}

\n {children}\n

\n );\n}\nfunction MiniPreview({ type, color, cells }: { type: string; color: string; cells: [number,number][] }) {\n const size = 4; // プレビュー最小サイズ\n const minX = Math.min(...cells.map((c) => c[0]));\n const minY = Math.min(...cells.map((c) => c[1]));\n const norm = cells.map(([x,y]) => [x - minX, y - minY]);\n const maxX = Math.max(...norm.map((c)=>c[0]));\n const maxY = Math.max(...norm.map((c)=>c[1]));\n const gridW = Math.max(maxX+1, size);\n const gridH = Math.max(maxY+1, size);\n const dots = new Set(norm.map(([x,y]) => `${x},${y}`));\n return (\n

\n {Array.from({ length: gridW * gridH }).map((_, i) => {\n const x = i % gridW; const y = Math.floor(i / gridW);\n const filled = dots.has(`${x},${y}`);\n return (\n

\n {filled &&

}\n

\n );\n })}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17168911706761489279","traceTime",1776932680517]