Splitting Suspects: A Recursive Bank Heist Mystery

Inspiration

What inspired me to make this project was finding an issue very common in Computer Science, and that was recursion. Turning the recursion lesson into a fun interactive game that wasn't too heavy on the science, but rather on the idea.

What it does

It is an web application game that allows the user to learn about recursion in a fun, gamified manner.

How we built it

We are only using react for the front end, and are utilizing a drag and drop library to handle our drag and drop operations in the main game. We utilize bootstrap for components + styling and also utilize the context API to allow for a global state within the application. Along with that, we implemented sound effects, and have in place for a theme song to be playing once the user enters the application, but that library was not functioning correctly so we decided to shelf it.

Challenges we ran into

Completing the drag and drop functionality completely, the game unfortunately is unfinished due to issues involving drag and drop and difficult bugs to figure out the root cause of. This was caused primarily because we were generating Droppable components dynamically, which causes some issues when it comes to the effects of mounting and remounting Droppable components mid drop animation.

Accomplishments that we're proud of

Putting together an application with a clear idea, and a almost-complete game in a days worth of work.

What we learned

How to utilize the react-beautiful-dnd library for images and, also how to add sound effects to the actions the user takes within the application.

What's next for Splitting Suspects: A Recursive Bank Heist Mystery

What's next is adding the final functionality of the recursion lesson, which is splitting the suspect list upon confirmation of the guess of who is guilty among the list. This allows the user to grasp the idea of splitting a bigger problem into sub-problems to solve