🎲 サイコロ8パズル / Dice Roll 8

転がして、全部1に。 サイコロのスライドパズルのタイムアタックです。

• 盤に同じサイコロと空きマスが1つ。空きマスを指で押さえて動かすと、指が入ったマスのサイコロが空きマスへ転がり、上の目が変わります(「設定」で、スワイプでサイコロを動かす操作にも変えられます)
• 全部のサイコロの上を「1」にしたらクリア。3×3(8個)と 4×4(15個)
• どんな並べ方からでも必ず全部1にできます(3×3 は全 15,116,544 状態を総当たりで確認、4×4 は群の計算で証明)
• ハード: 1を上にするだけでなく、全部を「正立」(1の三角が奥を指す向き)に揃えます。ランキングは、ふつうとは別です
• タイム順のオンラインランキング、結果の共有、実際の速さで再現したリプレイ動画(MP4)の保存、日本語 / 英語
• スマホのブラウザで、インストールなしで遊べます(ホーム画面に追加すればオフラインでも練習できます)

---

仕組み

GitHub Pages(静的サイト・PWA)  ──fetch──▶  Cloudflare Workers(ランキング API)── D1(SQLite)
  src/app   画面・描画・入力                    api/src  問題の発行・記録の検証・ランキング
  src/core  ルール・検証(両方で同じコード) ◀───┘

• ルール(転がり方・ゴール判定・記録の検証)は src/core/ にまとめ、ブラウザと Worker が同じコードを使います。
• ランキングに載るプレイは、サーバーが問題を出し、送られてきた手順をサーバーで再生して確かめてから登録します。
• 3×3 の問題は、最短手数が 24〜34 手の盤面だけを集めた「問題プール」から出します(易しすぎる・難しすぎる問題を外して、運の差を小さくする)。

新しい版への切り替え

オフラインでも起動できるように、ファイルを端末に持っています(Service Worker)。そのうえで、公開した新しい版がすぐ届くように、次のようにしています。

• 画面(HTML)は、つながっていれば毎回サーバーに確かめてから出す。開き直せば、新しい版になる(つながらないとき・2秒で返らないときは、端末に持っている画面を使う)
• 新しい版の Service Worker は、待機させずにすぐ有効にする(skipWaiting / clientsClaim)。待機のままだと、このサイトのタブをすべて閉じるまで古い版が出続ける
• 開いたままの画面は、版の番号(version.json。ビルドした時刻)を、開いた直後・前面に戻ったとき・タイトルに戻ったとき・10分ごとに確かめる。新しい版が出ていたら、自動で再読み込みする。解いている途中・リプレイ・動画の作成中は待ち、終わってから行う(src/app/update.ts)
• 「設定」に、いまの版(ビルドした日時)と「最新版を確認」のボタンがある
• npm run build は、これらがビルドに入っていることも確かめる(tools/check-bundle-size.ts)

ディレクトリ

場所	中身
src/core/	ルール・スクランブル・記録の検証・3×3 の最短手数表(ブラウザ・Worker 共通)
src/app/	画面・Canvas 描画・入力・タイマー・記録・多言語
src/video/	リプレイ動画(WebCodecs + Mediabunny / MediaRecorder)
api/	ランキング API(Cloudflare Workers + D1)
tools/	表・問題プール・アイコンの生成、可解性チェック、転送量チェック
tests/	単体・API テスト(Vitest)、E2E テスト(Playwright)
public/	アイコン、OGP 画像、練習用の問題プール(pool3.bin)

開発

Node.js 24 以上が必要です。

npm install
npm run dev          # 開発サーバー(http://localhost:5173)
npm test             # 単体テスト・API テスト
npm run typecheck    # 型チェック
npm run lint         # Lint
npm run build        # 本番ビルド(dist/)と、初回の転送量のチェック(1MB 以下)
npm run test:e2e     # E2E テスト(Windows の Edge を使う。PW_CHANNEL=chrome で Chrome に変えられる)

ランキングまで手元で試すとき(開発サーバーは、.env.development の設定で、手元の API http://localhost:8787 につなぎます。API を起動していなければ、練習として遊べます):

npm run db:migrate:local                       # ローカルの D1 にテーブルを作る(初回と、マイグレーションを足したとき)
npm run dev:api                                # Worker を http://localhost:8787 で起動(別のターミナルで)
npm run dev
E2E_API=http://localhost:8787 npx playwright test ranked   # ランキングの通しテスト

ハード(正立に揃える)

全部のサイコロを「1が上で、正立(1の三角が奥を指す向き = 2の面が奥)」に揃えるルールです。全部が同じ向きでも、横向きや下向きではクリアになりません。

• タイトル画面で「ふつう / ハード」を選びます。タイトルのサイコロの絵と合言葉は、ハードを選んでいる間だけ変わります
• 向きの見せ方: 1の目は赤い三角、2の面のある縁に青い線(三角は、いつも青い線の側を指します)。1が縁にあるときも、縁に赤い三角が出ます
• 問題は、正立に揃えられる盤面だけから一様に選びます(好きに並べた盤面は、約 27% しか揃えられません)。npm run check:solvable-hard で、出題と同じ作り方の問題が実際に解けることを確かめられます
• ランキングは、ふつうとは別です(盤の大きさ × ルールごと)。API は、HARD_MODE = "1"(api/wrangler.toml の [vars]。手元は api/.dev.vars)のときだけハードを受け付けます
• 出し分け: .env の VITE_HARD_MODE=1 で出しています。外して公開し直すと、ふつうのルールだけになります
• 見た目の案を見比べるための設定(1の図案、2の面の目印)は、開発サーバーでだけ出ます(.env.development の VITE_LOOK_LAB=1)。案を並べたページは http://localhost:5173/lab.html (?size=4 で 4×4)
• スマホで試すときは npm run dev -- --host で起動し、表示された Network の URL を同じ Wi-Fi のスマホで開きます
• E2E は、見比べ用の設定を出したビルドで走ります。E2E_LAB=0 npx playwright test で、本番と同じビルドを確かめられます(E2E_HARD=0 を付けると、ハードを出さないビルド)

表・問題プール・チェック

npm run build:table      # 3×3 の最短手数の表(tools/.cache/dist3.bin、約15MB、コミットしない)
npm run build:pools      # 問題プール: public/pool3.bin(5,000問)と api/data/pool3-server.bin(20万問、コミットしない)
npm run check:solvable   # ランダムな盤面 3×3・4×4 各1万問が、すべて全部1まで解けることを確かめる
npm run check:solvable-hard   # ハードの問題 3×3・4×4 各1万問が、すべて正立まで解けることを確かめる(約1分。初回は窓の表 48MB×3 を作る)
npm run check:tutorial   # 練習問題の解答と「1個だけ揃っていないとき」の定石が最短であることを確かめる
npm run check:hard-formulas   # ハードの定石(src/core/alignedFormulas.ts)が最短であることを確かめる(約30秒、メモリ約2GB)
npm run make:assets      # アイコンと OGP 画像を作り直す

---

公開する

1. ゲーム本体(GitHub Pages)

1. GitHub で公開リポジトリを作ります(例: dice-roll)。
2. このフォルダ(dice-roll/)の中身を、そのリポジトリのルートに置いて main に push します。

   cd dice-roll
   git init -b main
   git add .
   git commit -m "first release"
   git remote add origin https://github.com/<ユーザー名>/dice-roll.git
   git push -u origin main
   

3. リポジトリの Settings → Pages → Build and deployment → Source を GitHub Actions にします。
4. Actions タブで「Deploy to GitHub Pages」が成功すると、https://<ユーザー名>.github.io/dice-roll/ で遊べます。 SNS のリンクプレビュー(OGP)の画像とページの URL は、ビルドのときにこの公開 URL(GitHub Actions が自動で決める。手元のビルドでは .env の VITE_SITE_URL)から作ります。X は一度読んだプレビューをしばらく覚えているので、直したあとに古いプレビューが出る場合は、URL の末尾に ?v=2 などを付けて投稿すると読み直されます。

この時点では、ランキングなし(練習専用)で動きます。

2. ランキング API(Cloudflare Workers + D1、無料プラン)

クレジットカードの登録は要りません。

1. Cloudflare のアカウントを作ります。
2. ログインして、D1 データベースを作ります。

   npx wrangler login
   npx wrangler d1 create dice-roll
   

   表示された database_id を api/wrangler.toml の database_id に貼ります。
3. api/wrangler.toml の ALLOWED_ORIGINS を、Pages の URL のオリジン(例: https://<ユーザー名>.github.io)に書き換えます(手元の wrangler dev では api/.dev.vars の値が使われます)。
4. テーブルを作り、Worker を公開します。

   npm run db:migrate:remote
   npm run deploy:api        # 問題プールを作り直してからデプロイする
   

   表示された URL(例: https://dice-roll-api.<サブドメイン>.workers.dev)を控えます。
5. GitHub リポジトリの Settings → Secrets and variables → Actions → Variables に、VITE_API_BASE = 4 の URL を追加します。
6. Actions から「Deploy to GitHub Pages」を再実行すると、ランキングが有効になります。

無料枠について

• Workers: 1日10万リクエスト、D1: 1日の行の書き込み10万・読み取り500万まで(UTC 0時にリセット)。
• 1回のプレイで行の書き込みは約3回なので、1日およそ3万プレイまで受けられます。
• 上限を超えると API は 503 を返し、ゲームは「ランキングは一時停止中」と表示して練習として遊べます。

---

管理

管理者画面

サイトの URL の末尾に #admin を付けて開きます(例: https://<ユーザー名>.github.io/dice-roll/#admin)。最初に1回だけ合言葉(管理用トークン)を入れると、その端末に覚えられます。

This is the beginning of the README. Read the rest at the original. Read the full README ↗