# 3D Office Graphic Prompts + Applied Implementation

## Professional development prompt used
You are a senior professional game developer, systems programmer, graphic designer, UI/UX design lead, and game-based learning architect. Improve the Mystery Summer Camp 3D Office so rising 4th-grade students can identify playable graphics instantly, explore the office with mouse or finger, and learn implicitly through narrative-driven case interaction. Use JavaScript as the primary programming language because the experience must run directly in a browser without extra installation.

## Asset prompt pattern applied
Create a clear, student-facing 3D office case marker for The Midnight Case Files. The marker must be readable at small sizes, visually distinct from story art, and clearly clickable. Use midnight blue, gold, and the subject-room accent color. Include a large room icon, the room name, a short action phrase, and a visible “TAP CASE” label. Use a polished game UI style, beveled frame, glow, and high contrast. Avoid tiny text, decorative clutter, and anything that looks like a non-interactive poster.

## Individual marker prompts
1. **Evidence Desk marker** — Large note or paper clue icon, gold/yellow accent, action phrase “Find Proof,” readable TAP CASE button.
2. **Number Bureau marker** — Large number/keypad icon, electric-blue accent, action phrase “Crack Code,” readable TAP CASE button.
3. **Fraction File marker** — Crescent moon or moon-piece icon, violet accent, action phrase “Fit Pieces,” readable TAP CASE button.
4. **Forensics Lab marker** — Microscope or lab lens icon, green accent, action phrase “Observe Clues,” readable TAP CASE button.
5. **Cold Case Archive marker** — Map or archive folder icon, amber accent, action phrase “Connect Map,” readable TAP CASE button.
6. **Code Room marker** — Computer/code icon, red-violet accent, action phrase “Order Steps,” readable TAP CASE button.

## Applied programming changes
- Replaced the static CSS-3D prototype with a JavaScript canvas-based pseudo-3D office engine.
- Added mouse drag and tablet finger-swipe exploration.
- Added wheel/keyboard camera support.
- Added six large glowing in-world case markers.
- Added clear “TAP CASE” labels so playable graphics are not confused with decorative art.
- Added a right-side Case Dock for accessibility and backup navigation.
- Kept student-facing content only on the game page; teacher/developer content remains outside the lesson flow.

## Applied UX rules
- Decorative images include captions that identify them as story art.
- Playable graphics have glow, border, hover/focus treatment, and direct action labels.
- Every clickable element is a real button or link.
- The player always has two paths: explore the office or use the accessible Case Dock.
- Learning reveal remains locked until the student solves and explains the clue.