Description

Sherlock Consultants is a board game about solving crimes based on the stories and interactions with characters. Me and my friends love this game but it’s extremly text heavy. The way you play it is with a simple pen and paper, taking notes on everything. Casefiles transfrorms the crime investigation into a fully interactive, real-time visual collaboration board in an attempt to make it a bit more intuitive and clear.

The goal: Make investigating more visual and easier to navigate complex information.

Project Breakdown

• Real-time collaboration: Multiple players can work together on the same case, seeing updates in real-time as they update the board.
• Character and location tracking: Players can add characters and locations to the board, with details and connections between them.
• Note Taking: Players can add notes to everything.
• Visual connections: Players can draw connections between characters, locations and notes to visualize relationships.

The Game

As I mentioned the game is played by picking a case and going though the story. The story will mention a lot of characters and locations, we need to track both in a big lookup table where we will have a supporting dialogue or a description of a location. We then make notes on the most important information and try to figure out the clues of who we should talk to next or what location to visit to get more insight.

When we feel like we have enough information, we can try to solve the case by answering a set of questions about the crime. The more correct answers we have, the better our score. The questions are hidden until we decide to solve the case, so we need to be careful about when to make our move.

Quick Showcase

Realtime Updates with WebSockets

Probably the best part of the project is the fact that all the items are updated instantly for everyone viewing the case. This means that people don’t need write their own notes as you usually do, but instead share all thoughts and information together.

To share the updates in real-time I do few things. First I open a WebSocket connection on the server for each case. Then I have a separate class called SocketManager as it’s own module keeping a map of all connections per case ID. Whenever a user opens up the case on the FE, it calls the open event on the socket endpoint and gets appended to the list of connections for that specific case.

To update the board, the server exposes classic api endpoints for CRUD operations, but at the very end of each endpoint we import the socket manager to broadcast what kind of operation has happened and supply the new content to FE so it updates the board accordingly.

FE uses react query to manage state and normally we invalidate all the endpoints after each update, but with the SocketManager what we actually do is just update the cache of react query with the provided payload from the onMessage event, so we don’t need to make another request to the server. This might not be the best approach but it works well for this use case.

Character and Location Tracking

Another valuable feature is the ability to visualize characters. The original game only gives you a name of the person and maybe a descriptions of what they look like. With casefiles we can add a picture of the character and have a visual representation of them on the board. This makes it easier to remember who is who and also makes the game more immersive.

The location tracking is also pretty useful, but there is no distinctive image for each new location they all look the same.

Note Taking

Lastly, pretty much every element on the board can have a content attached to it. We can track notes for characters, locations and post-it notes. With this combination the board can take whatever shape you need it to be.

Visual Connections

The last feature I want to mention is the ability to draw connections between characters, locations and notes This is pretty useful to see the relationships between different elements.

If you move an element all the connections will move with it, so you can easily rearrange the board as you gather more information and see new connections between characters and locations.