tutortool/conductor/room-editor-refactor-visualization.md

Implementation Plan: Room Editor Refactor (Unified Visualization)

Objective: Replace hardcoded seat maps with a unified, dynamic, and high-fidelity room visualization system that works across Admin and Student views.

Background: Currently, the application uses a hardcoded SeatMap.svelte for Live Views and Student Check-ins, while using a dynamic RoomCanvas.svelte for editing. This leads to data mismatches and prevents users from using custom room layouts. This plan unifies the visualization layer.

---

1. Unified Visualization Component

Task 1: Create DynamicRoomView.svelte

Files to Create/Modify:

• frontend/src/lib/components/DynamicRoomView.svelte
• (Optionally) Merge into frontend/src/lib/RoomCanvas.svelte

Changes:

• Create a read-only/interactive component that renders SVG layouts based on the LayoutElement[] data.
• High Fidelity: Implement the aesthetic details from the design handoff (rounded tables, specific seat styling, label positioning).
• Responsive Scaling: Implement an autoScale or viewBox based system so the room fills the available width on mobile and desktop without breaking coordinates.
• Interaction Modes:
  • mode="checkin": Seats are clickable for students.
  • mode="notes": Seats are clickable for tutors to open note editors.
  • mode="display": Read-only view for dashboard/monitoring.

---

2. Integration & Cleanup

Task 2: Replace SeatMap in Admin Live View

Files to Modify:

• frontend/src/routes/admin/live/[slotId]/+page.svelte

Changes:

• Replace SeatMap with DynamicRoomView.
• Connect the onSeatClick event to the note-taking and manual attendance logic.
• Ensure attendance data (who sits where) is correctly overlaid on the dynamic layout.

Task 3: Replace SeatMap in Student Check-in

Files to Modify:

• frontend/src/routes/s/[code]/+page.svelte

Changes:

• Replace SeatMap with DynamicRoomView.
• Connect seat selection to the POST /api/checkin API.
• Ensure the "current seat" (mySeatId) is visually highlighted in the dynamic view.

Task 4: Deprecate SeatMap.svelte

Files to Modify:

• Delete frontend/src/lib/components/SeatMap.svelte once integration is verified.

---

3. Verification

Automated Tests:

• frontend/tests/checkin-dynamic.spec.ts: E2E test to verify student check-in on a custom-created room layout.
• frontend/tests/admin-live-dynamic.spec.ts: E2E test to verify that tutors can see students on a custom-created room layout and click them to leave notes.

Manual Verification:

1. Create a non-standard room layout in the Admin Editor (e.g., a "U" shape).
2. Create a session and slot using this room.
3. Open the Student Check-in link on a mobile device (browser simulation).
4. Verify the "U" shape is rendered correctly and scaled to fit the screen.
5. Check in as a student and verify the seat turns green.
6. Open the Tutor Live View on a desktop and verify the same student is visible on the same seat in the "U" shape.