プロジェクト

Petbook

CS2 のペットのフォトブックをリンクで共有。petbook.win で公開中。

TypeScriptCloudflare WorkersR2D1Steam OpenIDPlaywright
Petbook viewer showing a CS2 HatchBookPetbook viewer showing a CS2 HatchBook

課題

CS2 はペットのフォトブックをプレイヤーのディスクにバイナリ形式で保存し、他人に見せる手段がありません。

実装したこと

ブックファイル(JPEG ページの Snappy ブロックと、ペット名と孵化時刻を持つ protobuf)を解析し、ゲームの Panorama ページロジックを移植して同一のページを描画。所有者専用のエディタは配置をゲーム自身のファイル名タグ形式で書き戻します。

アーキテクチャ

  • Cloudflare Worker (TypeScript) — upload, viewer, owner API; no server to run
  • R2 for photos and uploads, D1 (SQLite) for accounts, pages, templates and traffic counters
  • Browser-side parsing of the cloud book file and pet.bin; only pages and the pet name are sent
  • Steam OpenID sign-in with a signed cookie; strict CSP on profile pages; per-IP rate limits
  • Personal pages with templates, music, effects and per-part analytics; site-wide analytics for the owner only

技術的ハイライト

  • The 3D page turn, chapter bar, slot rules and photo crops match the game; text variants are chosen the same way the game does.
  • Drag-and-drop editor: Library panel, slot rules, zoom and pan sliders, layout strips; edits save in the game's file-name tag format.
  • Visitors are counted with a daily keyed hash; no IP address is stored. Bots and link-preview robots are ignored.

成果

  • Anyone can share a book with a link; the pages render the same on a phone.
  • Runs on the free tiers of Workers, R2 and D1.