Add photo capture feature to 3D room canvas

[Copilot]

close #86
Enables users to capture screenshots of the React Three Fiber 3D scene by clicking a camera button.

Changes

• Canvas ref: Added canvasRef to access the underlying HTML canvas element for capture
• Capture handler: Implemented handleTakePhoto using toDataURL('image/png') to convert scene to Base64 and trigger download as screenshot.png
• UI button: Added Camera icon (lucide-react) button in top-right corner with responsive sizing (size-12 md:size-14 lg:size-16)
• Visibility logic: Button hidden during focus mode and placement modes to avoid UI clutter

Implementation

const canvasRef = useRef<HTMLCanvasElement>(null);

const handleTakePhoto = useCallback(() => {
  if (!canvasRef.current) return;
  
  const dataURL = canvasRef.current.toDataURL("image/png");
  const link = document.createElement("a");
  link.href = dataURL;
  link.download = "screenshot.png";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}, []);

Button positioning uses grid layout (justify-self-end self-start) with conditional rendering alongside existing inventory button.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• sparrow.cloudflare.com
  • Triggering command: /usr/local/bin/node /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/advent-sphere/advent-sphere/node_modules/.bun/wrangler@4.54.0/node_modules/wrangler/wrangler-dist/cli.js dev (dns block)
• workers.cloudflare.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/advent-sphere/advent-sphere/frontend/node_modules/.bin/vite --port 3000 (dns block)
  • Triggering command: /usr/local/bin/node /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/advent-sphere/advent-sphere/node_modules/.bun/wrangler@4.54.0/node_modules/wrangler/wrangler-dist/cli.js dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Enhance the file frontend/src/routes/$roomId/index.lazy.tsx by introducing a photo capture feature within the Canvas. The goal is to allow users to take a screenshot of the 3D scene rendered with React Three Fiber. Use lucide-react icons to ensure design consistency. Key requirements:\n\n1. Canvas Modification:\n - Add a photo capture button that utilizes React Three Fiber's Canvas API.\n - Implement a ref on the Canvas element to access the DOM object for capturing the screenshot.\n\n2. Photo Capture Logic:\n - Use toDataURL to convert the Canvas scene into a Base64 image.\n - Prompt users to download the generated image (screenshot.png).\n\n3. Lucide Icon Integration:\n - Instead of emoji icons, use the Camera icon from "lucide-react". Ensure the button design aligns with the existing UI.\n\n4. Button Styling:\n - The button should be placed at an appropriate location, such as the top-right corner, without obstructing other UI elements.\n - Ensure good visibility and usability across different screen sizes.\n\nThis new functionality enriches user interaction by providing a seamlessly integrated ability to save current snapshots of the 3D scene.

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Summary by CodeRabbit

リリースノート

• 新機能
  • 3Dキャンバスのスクリーンショットを撮影し、PNG形式でダウンロードできる機能を追加しました。
  • インターフェースにカメラボタンを追加し、フォーカスおよび配置モード以外の操作時にアクセス可能にしました。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

フロントエンドの単一ファイルに写真撮影機能が追加されたネ〜✨ キャンバスをPNG形式でダウンロードするhandleTakePhoto関数、キャンバス参照の導入、UIにカメラボタンの追加が行われているヨ〜🎵

Changes

Cohort / File(s)	変更の概要
写真撮影機能の実装 frontend/src/routes/$roomId/index.lazy.tsx	handleTakePhoto関数を新規追加。キャンバス参照（canvasRef）を導入してWebGLコンテキストに設定。カメラアイコン付きのボタンをUIに追加（フォーカス・配置モード以外で表示）。lucide-reactからCameraとXアイコンをインポート。キャンバスの描画バッファ保持とPNGデータURL変換、ダウンロード機能を実装。エラーハンドリング付きネ〜(´ω｀)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10分

おじさん詳しいヨ〜🌟 ここは比較的シンプルな追加だから、注視すべき点としては：

• handleTakePhotoのキャンバス参照取得ロジックがちゃんと機能するかネ（preserveDrawingBufferの設定確認）
• エラーハンドリングが適切か（alertとconsole.logの使い方）
• UIボタンの表示・非表示ロジックが他のモード判定と競合していないか確認するダヨ〜✨

一緒に確認しましょう〜(^_^)v

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/add-photo-capture-feature

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cce1b90 and 65b9b77.

📒 Files selected for processing (1)

• frontend/src/routes/$roomId/index.lazy.tsx (5 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[takusandayooo]

@coderabbitai summary

[coderabbitai]

✅ Actions performed

Summary regeneration triggered.

[github-actions]

🚀 Deploy Preview Ready!

Application	Status	URL	Version ID
🎨 frontend	✅ Ready	Open Preview	1447f95e

---

🔨 Latest Commit: 32b7f62
📅 Deployed at: 2025/12/21 12:52:57 (JST)