Dominate.codes

Welcome to dominate.codes - The fastest way to improve your computer science knowledge.
Create and Invite your Friends - Play with anyone in the world!
In Game - Dominate the board by answering questions!
In Game - Claim territory before the time is up!
Question Time - How's your Comp Sci knowledge?
Game End - Did you win?

The fastest way to improve your computer science knowledge. Dominate your next coding interview.

⚡️ Quick Links:

🔨 Made By:

In this hackathon we wrote exactly 3300 lines of code. We’re hoping this might be our new lucky number.

🤩 What it does

dominate.codes is an online multiplayer game that challenges you to solve computer science questions both against time and other players in real time. After choosing to sign as a guest or using a third party account, users can elect to create a room or join an existing room using a short code. Questions pop up on the map in random places with different shapes and answering questions correctly colours the map in your colour. The first player to dominate the map wins!

💡 Inspiration

We were inspired by the classic old Atari Video Games, Lego, and Pub Quizzes.

🚀 How we built it

The application was built with Gatsby, Firebase, TailwindCSS, ExpressJS, NodeJS, ReactJS, Socket.io,

The work was distributed differently across the weekend:

Friday Together: As the underlying core game logic was so crucial to subsequent functions, we decided to tackle this together. During this stage we implemented:

User Flow - onboarding, game setup,
Game Flow - difficulty, playability, interactions
Socket Server Setup
Firebase Setup
Lobby
MVP of the game

Saturday Sam: Generative Map Design, Game End, Leaderboard API Yannis: Question Logic, Question Bank, Map Interactions, Re-rendering Nightmare bug squash Together: Game Loop, UX improvements, Bug Squashing, Branding and Design

Sunday Sam: Animation, SEO, Server Bug Squash & Error Handling Yannis: User Testing, Sound Design, Leaderboard Page, Leaderboard Integration, Together: UX overhaul, Got the word out about the app and got people playing!

🧐 Challenges we ran into

Re-rendering Nightmare Yannis: “We ran into an issue where the main game loop caused the page to re-render much more frequently than it needed to. This meant that when we added a “Fill the Blank” question, you couldn’t even type in an answer without the question re-rendering and clearing what you wrote in the field. :( We learned the hard way that limiting re-renders in React for specific components can be quite tricky, after a few hours of debugging and experimentation in the early hours of the morning. That being said, I don’t think I’ve ever understood rendering with React and when it happens better than now - the fix was three lines long.”

Question-shape logic Yannis: “The question shape logic became quite tricky late at night, especially around edge cases to make sure that the shape previews would appear as expected. It was a great puzzle-solving exercise though!”

Shape generation

Map Generation from images Sam: “We decided early on that we wanted to create a way to add new maps easily. We’re too lazy to hand draw the maps so instead thought we would try and create them from images. Distinguishing the shapes to draw within coloured images would be very difficult, so instead we used silhouettes. First we read in the image and lower the resolution. We then iterate through the individual pixels to create the map - black pixels would become playable areas, and white pixels would be omitted from the map. We keep a list of all of these maps on the server so that users can choose one when their game starts. You can see the function here.”

Map Generation

💪 Accomplishments that we're proud of

Getting our MVP deployed and playing the game we built with our friends all over the world was an awesome experience.

🤯 What we learned

Yannis: “I never used Sockets and socket.io before this weekend. It was really exciting to see interactions with other players in the game room happening in real time with friends from around the world. I also got more into the habit of using conventional commits, which made it easy to branch off and work on separate tasks during the hackathon and to know exactly what code was where when we were frantically merging things together on Sunday.”

Sam: “Image manipulation and reading in individual pixels was something I never thought I would do, there was lots of trial and error there, but whenever we got closer to the map we wanted there were a lot of smiles!”

✋ Limitations

Our current demo only supports 12 players, after which point the rainbow runs out of colours. Patterns or more careful colour selection would make it possible to support more players. The socket server is ready to support thousands of players at a time, but the colours in the rainbow aren’t just yet.

➡️ What's next for Dominate.codes

Extensions we would like to implement:

*Achievements * - to highlight what the players in dominate.codes accomplished because celebrating achievements is an important part of gamification and making learning fun.

User Profiles - to show off player achievements, point scores, and how many of the questions they completed on specific topics. This page could potentially be a stamp to potential employers once the question base is more developed and there are many more players on the site! Game History - Players can see their performance in previous games, questions they got right and wrong and learn from their mistakes.

Question Categories - There is no reason why dominate.codes should only have questions on coding. By adding support for different question and quiz categories it would provide a way for teachers and groups around the world to test their skills and practice answering questions on different subjects in a more fun way than traditional multiple choice questions.

Larger Question Bank - A larger set of questions is crucial to test the breadth of skills of players in whatever subject they choose. The 40 questions we implemented were only the start :) Shuffling Question Answers - A small extension that we did not have time to implement was shuffling on the question answer orders. While questions would not resurface as quickly with a larger question bank, re-ordering the answers in the questions would mean players would have to think more about how they answered each question, even if they saw it before.

Question crowd sourcing support - adding support for crowdsourcing questions would be a very effective way of getting enough questions for the platform to scale as there are more users on the site and to take advantage of the experience and expertise of the community to contribute questions on different subject types!

Question Streaks - Adding question streaks would encourage users to think more carefully about how they each question to reap the benefits of a streak. This would test and train players to practice making decisions both with high speed and high accuracy.

❤️ We hope you like this hack submission. We had great fun making it and we hope you have great fun playing it.