RITguessr

Inspiration

My friends and I enjoy playing the iconic Geoguessr from time to time, so it only made sense to recreate it for RIT's campus! There are so many beautiful, niche, or just really cool places on campus that most students don't know about, and we'd love to inspire students to explore around campus more to check out some of these locations, and even find their own gems.

What it does

The game shows you a random picture taken across RIT's campus, from academic side to dorm side. Then, you have 25 seconds to click on a map shown on the screen to mark where you think the picture was taken. The picture starts very zoomed in, and slowly zooms out as the timer goes down. Players are awarded points based on both how accurate their guess was (i.e. how close their guess was to the actual location the picture was taken), the difficulty rating of the image, and also how quickly they made their guess, so time is of the essence! Players play in rounds of 5, and at the end are able to submit their total score to a leaderboard with their initials.

How we built it

Our tech stack consists of a PostgreSQL database with a Flask backend in Python, along with a React frontend in JavaScript, and we host the whole thing in a Google Cloud project. We use Mapbox for our interactable map, the same tool that maps.rit.edu uses!

Challenges we ran into

Coming up with a scoring system was a bit more complex than we anticipated. We wanted to have the distance between the guessed location and actual location be a scoring factor, as well as the time the player took to guess and the difficulty rating of the image. The main hurdle was that since locations are stored as latitude and longitude, the distances between guesses and actuals were very small (on the order of 10^-3). So, we had to make sure to scale distances correctly so that the scores are intelligible. We also added a score multiplier based on the player's time-to-guess, as we wanted the game to be fast-paced. Using some of our mathematical skills, we were able to achieve this goal, and our project has a scoring system we believe incentivizes the player to have fun!

Accomplishments that we're proud of

We're very proud of how seamlessly the map was integrated within the app. It looks very clean on the screen and is very responsive, made possible with Mapbox's easy-to-access API. The guessing functionality is also very smooth, making the game very satisfying to play. We're also proud of how we made it very seamless for us devs to add new pictures to the game; there is a developer-only endpoint that we can easily access to upload new pictures, name them, and rate them based on difficulty.

What we learned

As with every BrickHack, we pick up some new tools every time. This time, Mapbox was our shiny new toy. As stated earlier, maps.rit.edu also uses Mapbox for its UI, so we figured it would work well for our app as maps.rit.edu also allows the placing of markers. We also assumed it would be low cost, since if it wasn't, maps.rit.edu wouldn't be using it. We also learned how to host a full stack website on the cloud, which is very exciting! After claiming our .tech domain name, we hooked it up to our Google Cloud project where we have a VM that runs the whole stack, so it's up in perpetuity.

What's next for RITguessr

There are multiple directions we'd like to go with this project in the future. For one, a proper leaderboard with actual user accounts would be a huge plus. This way, users could track their progress and high scores, as well compete with their friends and fellow classmates. We'd also love to get tons of more photos for our app! Currently, we know that the pictures are skewed towards certain locations like Golisano, Booth, the Clark Gym and the like, which is not desirable. We'd like the distribution of pictures to be more even distributed around campus so that no one location is over-represented.