Sometimes the smaller projects are the most fun.
I wanted a simple browser-based tournament page for retro fighting games: enter a group of players, choose a game, randomise the opening matches and then work through a knockout bracket until one player is left standing.
No accounts, no database and no complicated backend. Just open the page and start a tournament.
The idea
The page is designed around local multiplayer sessions where a group of people are gathered around the same console, arcade machine or emulator.
The basic flow is:
- Choose a game.
- Enter the number of players.
- Add the player names.
- Randomise the opening matches.
- Play each game.
- Select the winner.
- Automatically move them into the next round.
- Continue until the tournament champion is decided.
The page also works out how many matches are required to complete the tournament based on the number of players entered.
For a standard knockout competition, that is simply:
Number of matches = Number of players – 1
So eight players requires seven matches to produce one winner.
Retro game selection
The first version focuses on games that work particularly well for quick head-to-head tournaments.
The starting lineup includes:
- Mortal Kombat II
- Street Fighter II Turbo
- Killer Instinct
- Tekken 3
Each game has its own visual theme and artwork rather than the interface simply changing the title.
Selecting Mortal Kombat II, for example, changes the page to use Mortal Kombat artwork and branding while the other games have their own graphics.
It makes the tournament feel a little more like selecting a cabinet in an arcade rather than filling in a generic tournament form.
Generating the first round
Once the player names have been entered, the page randomly assigns them to the first set of matches.
That removes the temptation to deliberately arrange the bracket and makes it easy to start another tournament without manually creating every pairing.
Players can then play the real match on the selected game and mark the winner on the tournament page.
That player is automatically moved forward into the next available position in the bracket.
The process repeats until the final produces the overall winner.
Everything runs locally in the browser
One decision I made early on was not to build a server-side tournament system.
The page does not need user accounts or a central database.
Tournament information is stored locally in the browser.
That means if I start a tournament in the UK and somebody opens the same page in America, they are not joining my tournament.
They are creating a completely separate one.
For this project that is exactly what I wanted.
It keeps the page extremely simple to host and means multiple people can use it at the same time without affecting each other.
There is also nothing particularly interesting being stored remotely.
It is essentially a self-contained web application.
Hosting
Because everything happens client-side, the page can be hosted like any other static website.
There is no PHP application, SQL database or API required behind it.
The HTML, CSS, JavaScript and game artwork can simply be placed on a web server and served through Nginx, Apache or another standard web server.
For something like this, that simplicity is a big advantage.
Mobile support
Although the main use case is likely to be a larger screen next to an arcade machine or gaming setup, the interface also needs to remain usable on phones and tablets.
The tournament bracket naturally becomes wider as more rounds are added, so on smaller screens the bracket can scroll horizontally rather than trying to squeeze every round into an unreadable layout.
Desktop users still get the full tournament-board view.
Why build it?
There are already plenty of tournament bracket websites online, but most of them are designed around leagues, esports events or shared online competitions.
That is more than I needed.
I wanted something that could sit alongside an arcade machine, load instantly and be understood by anybody within a few seconds.
Pick a game.
Enter some names.
Fight.
Winner moves on.
Sometimes that is all the software needs to do.
Try it
The Retro Gaming Knockout Tournament page is available here:
I will probably keep adding games and artwork over time, but the basic tournament system is already doing exactly what I wanted from it.