See GitHub Repository
See Live Preview

This project is the final project for the online HarvardX computer science course CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. Taught by David J. Malan, CS50x teaches students how to think algorithmically and solve problems efficiently.

The first version of my project was attempted with LÖVE, a game engine framework on Lua, as this framework is recommended on the CS50 suggestions for projects.

I enjoyed learning about coding with a game engine, using the frame refresh to draw and redraw based on updates. I got as far as creating a sprite, and when it goes into a building, the screen will redraw based on the location. In the police station, the first step is to look through the crime scene reports, and so I created inputs so the user can type the day, month, year, and location, and those filters will apply to the SQL query. I connected the SQLite database, constructed a query from the input values, and could print the output in the console.

Ultimately, I found myself wanting HTML elements. Building the inputs from scratch was very challenging, and then trying to decide how I was going to display the output in a scrollable table was overwhelming, since I know I could use HTML to display this so easily in a browser. So I reconsidered my options, and decided to use Flask instead. This would mean rethinking how the user navigates the map, relying on point and click rather than a sprite.

Rather than continuing to use the SQLite database, I decided to move everything into an PostgreSQL database hosted on Supabase. Since this was a simple, one-time operation, I used a Jupyter Notebook to run the migration. I also used this opportunity to reformat some of the data (namely dates) to make my queries simpler. One unexpected roadblock was the use of ’ rather than ' in data added to the database by the CS50 team, which broke some of my code. This was addressed by making sure all apostrophes were consistent in the new Supabase database.

I decided against an authentication strategy, and instead store all game progress in the browser's local storage. It is a very simple design in terms of style, using font and basic CSS to create something of an old-school 8-bit look.

The user is given a clue when they visit the landing page, which they can always see again by clicking the "clues" button at the bottom to open a model. As they explore the map and make queries via the input forms, they can save what they deem to be useful clues to this menu. When they think they know the details of the crime, they can make a guess!