Crime Scene Logic Project Report
1. The Concept
Crime Scene Logic is a lightweight, mobile-first web detective puzzle game designed for quick daily mystery solving. The player investigates a short crime case, studies clues, reviews suspect statements, proves a contradiction on a logic board, and then makes a final accusation.
I chose this concept because it is more challenging than a simple static website but still realistic for a short sprint. It tests UI design, state management, game flow, responsive mobile layout, and puzzle logic all at once. The goal was not only to make a playable game, but to make it feel like a premium mobile detective game with a corkboard, paper cards, red strings, suspects, clues, and cinematic lighting.
2. The Stack
The Stack: HTML5, Vanilla CSS, and Vanilla JavaScript.
The AI Assist: ChatGPT helped with the early planning, target user discussion, and game direction. OpenAI Codex was then used for the development phase, turning the idea into a playable browser game, improving the visual design, fixing reload/state problems, and polishing the mobile UI.
The project intentionally avoids frameworks so it can run as a simple static web game. All screens, game state, case data, clue logic, modals, navigation, and local save behavior are handled directly in JavaScript.
3. The 1 Day Sprint:
Morning (Hours 1-3): We started by defining the product: a short detective puzzle game for mobile-first browser play. The first planning step focused on the target user, case length, tone, and platform. We decided the game should be serious but stylized, playable in 3-5 minutes per case, and designed around a 9:16 phone screen. We also planned for English first, with future Khmer support through a JavaScript language object.
Afternoon (Hours 4-6): The coding phase focused on building the complete game loop. Codex created the main structure: home screen, case briefing, investigation board, clue modal, suspect modal, notes, logic board, accusation screen, and result screens. After the first version worked, most of the sprint became visual and UX improvement. We upgraded the corkboard, clue cards, suspect cards, evidence strings, lighting, shadows, paper textures, buttons, and modals to move the game closer to the provided reference images.
The Finish Line (Hour 7-8): The last phase was debugging and production polish. A major issue appeared where the app felt like it was reloading twice or refreshing after load. We fixed the startup state logic, stabilized data-screen, protected the first-play intro flow, and verified that screen state stayed stable after navigation. We also fixed the victim image so it used a human portrait instead of a placeholder-like silhouette, added a first-play intro, added detective levels, added Achievements/Detective/Shop screens, and polished the three bottom navbar icons.
4. The Roadblocks
Roadblocks: The biggest roadblock was visual quality. The first playable version had the right features, but it did not yet feel like a premium mobile game. The reference images had much stronger density, lighting, icon quality, paper layering, and button depth, so multiple improvement passes were needed.
Another roadblock was state stability. The app sometimes felt like it refreshed or rendered twice after reload. This was caused by saved state, screen rendering, and startup normalization interacting in a confusing way. Fixing it required making the startup flow more predictable and avoiding unnecessary render churn.
Localization was also a problem. Khmer text existed in the source data, but some strings became corrupted mojibake. To avoid showing broken text in the live game, Khmer was disabled in the UI until the translation data can be cleaned properly. The code still keeps the language-object structure so bilingual support can be added later without rewriting the HTML.
5. Key Takeaways
What was the part that worked the best? The core game structure worked well. Once the case data, clue system, suspect statements, logic board, and accusation flow were connected, the game became genuinely playable. The simple HTML/CSS/JavaScript stack was also a good choice because it made the project easy to run, inspect, and iterate quickly.
What was the part that worked the worst? Premium UI polish took much longer than expected. A playable game is not the same as a game that feels commercial. Small details like icon size, nav spacing, paper shadows, card proportions, victim portrait quality, and smooth touch feedback made a big difference.
My final thought: If I had one more day, I would focus on content depth and art consistency. I would create unique victim portraits for every case, replace the remaining simple cases with stronger mysteries, fully clean the Khmer translation data, and add real progression rewards to the Achievements and Shop screens. If I could redo the project, I would define the visual system earlier before coding every screen, because retrofitting premium UI polish after the game already works takes much more time.