Sort Royale | Devpost

Title screen
Multiplayer bubble sort gameplay
Multiplayer selection screen
Single player bubble sort gameplay
Tutorial selection screen
Bubble sort tutorial

Inspiration

We wanted to create a project that could help make the more boring aspects of learning to code a little bit more fun, and one of the best ways to inspire people to teach themselves is competition. Our hope was that by allowing people to compete with their friends in an easy-to-understand game, it would help push them to understand the fundamentals of why a given sorting algorithm might be better than another for a certain situation, and more deeply about what you might need to think about when designing or choosing an algorithm to implement in a project.

What it does

Challenge your friends to an intense sorting battle! Choose your sorting algorithm and compete against your friend to be the victor in this 1v1 competition! Try single player mode to get the fastest time. Learn more about different sorting methods in this new educational game!

How we built it

Sort Royale is built entirely in React.js with CSS styling. We chose to create a React app with components for every page that we might want to show the user, which allowed us to dynamically teach users about sorting algorithms without having to reload the page at any time. We also registered the domain sortroyale.tech in hopes of putting our web program up on the domain, though those plans mostly fell through.

Challenges we ran into

Only one of us had prior experience with React, so building a full app together with it required a lot of patience and research. Most of us had more experience with other languages like Java or Python, so we had to become familiar with the differences between the React framework and languages we had used in the past.

When we registered our domain sortroyale.tech and tried to access it, we noticed the connection was not secure. We needed an SSL certificate. We used Cloudflare in an attempt to secure the connection, but Cloudflare takes longer than 24 hours to get back to customers, which was completely out of our control.

Accomplishments that we're proud of

We’re very proud of the finished game and managed to make the game a reality. Even though we may have hit a few snags on the way, it was a great learning experience for all of us, as we completed a functioning game that teaches players about sorting algorithms. We’re really proud of implementing a library of tutorials of different sorting methods, which educates players about each one.

What we learned

We had some hackathon newbies and some hackathon veterans on our team. We learned that even when we had varying skill levels with different technologies, we could have different team members work on what they were best at, even if that meant different areas of our website ended up more fleshed out than others.

We also learned that while we want our website to look as great as possible, functionality is ultimately most important. We ended up with tutorials for more sorting algorithms than we had time to code into the actual game, and some pages on the site were custom-styled while other pages ended up relying on styling that applied to the whole site, even if just another 30 minutes of writing and debugging CSS would help the page greatly. As it goes with hackathons, the time limit humbled us yet drove us to work as hard as we could in the time we had.

What's next for Sort Royale

A major target that we would like to add to Sort Royale is to add as many sorting methods as possible to give people a wide variety to choose from. We ran out of time implementing the ones that we wanted to have, but React’s modular design should make it easier to adapt the components we have and add all sorts of new algorithms.

There are also many quality of life features that we think would be a great addition to our project. Adding a stopwatch that tells how fast you completed the sorting would make the single player gamemode much more entertaining since users will be able to see how fast they were able to fully sort the array and compete with their best times. This is also why it would be interesting to implement a leaderboard system for people to compete asynchronously with themselves and also potentially with friends online.

Built With

cloudflare
css3
domain.com
github
html5
javascript
react.js

Submitted to

HackNC 2022
- Winner Best Game Hack

Created by

I did all the CSS styling and some HTML components; for the pages I had time to work on, I made sure they were responsive at different browser sizes. I came up with and helped direct the idea of the project. I also used Cloudflare for the first time to try to secure the connection to the domain name we registered, though that was never resolved in time.

Gillian Zech
New graduate from UNC Chapel Hill working on projects in data analysis, game development, and machine learning.
I developed pages in React including the selection sort and merge sort tutorials. I helped implement the bubble sorting game and added a stopwatch to it. I began work on a selection sort implementation but ran out of time

Jonathan Jacob
I scripted the insertion, merge, and quick sort tutorials, as well as the tips and tricks page and the advanced duplication tutorial. I also implemented all of these scripts into the tutorial page and made them interactive! I've learned a lot about sorting algorithms from writing these tutorials, and learned how to use React to make the tutorials interactive.

Bree Cobb
I mainly worked on the tutorials and helped design the Title for the main screen. This was my first time using React.js and I'm still a beginner at programming, but I learned a lot!

Connor Whitlow
I built the multiplayer game and some of the pieces of the single player game. I was the only one who had used react before, so I also helped make sure everyone knew how to use the framework.

Simi Singh