Sometimes the smaller projects are the most enjoyable because they begin with a very specific problem and do not need to become anything larger.
I wanted a browser-based retro gaming knockout tournament that could sit beside an arcade machine or gaming setup. A group of players should be able to choose a game, enter their names, randomise the draw and start playing within a minute. No accounts, no database and no online league-management system.
The result is Retro Knockout: a self-contained tournament controller designed for local multiplayer sessions. The current version supports between four and 32 players, calculates the required bracket and byes automatically, and gives each supported game its own visual identity.
The thinking behind the project
There are already plenty of tournament websites, but most are aimed at organised leagues, esports events or competitions shared across the internet. They often begin with registration, accounts, teams and administration screens. Those features make sense for their audience, but they add friction to a group of people already standing around the same machine.
My priority was immediacy. The interface needed to make sense without instructions: choose the cabinet or game, enter the players and fight. The software is there to organise the evening rather than become the evening.
Giving every game its own identity
The current selection includes Mortal Kombat II, Street Fighter II Turbo, Killer Instinct and a Gran Turismo 7 Circuit Experience round. I did not want these to feel like four labels placed on top of the same generic form. Selecting a game changes the artwork, accent colours, logo and tournament heading.
That decision is mostly about atmosphere. If this is running on a screen next to an arcade cabinet, presentation is part of the fun. The tournament should feel connected to the game being played rather than like a spreadsheet used to record the results.
Working out the bracket
A straight knockout tournament always needs one fewer played match than the number of entrants. Eight players require seven matches; nine players require eight. The awkward part is displaying those players inside a conventional bracket, because bracket sizes progress in powers of two: 4, 8, 16 and 32.
- Played matches: players minus one
- Bracket size: the next power of two large enough to contain every player
- Byes: bracket size minus the number of players
With nine entrants, for example, the page builds a 16-place bracket. Seven positions become byes, leaving the eight real matches needed to produce one winner. I chose to show those numbers before the tournament starts because it makes the result predictable. The user can see exactly what the selected player count means before committing to the draw.
Randomising the opening draw
The player list is deliberately separate from the bracket. Names can be entered in any order and the Randomise Draw button reshuffles them before the tournament is generated. That removes the temptation to arrange favourable opening matches and makes repeat tournaments feel different without asking somebody to construct every pairing manually.
When Start Tournament is pressed, the shuffled list is placed into the calculated bracket. Empty positions are treated as byes and the affected players move forward automatically. The organiser only needs to make decisions for matches that are actually played.
Moving winners through the rounds
Each match has two participant positions and one winner. Selecting a winner writes that player into the appropriate position in the next round. The same rule is reused from the opening round through the quarter-finals, semi-finals and final, so the bracket can scale without needing completely different logic for each tournament size.
I also included Undo Result. In a room full of people it is very easy to tap the wrong name, particularly on a touchscreen. Restarting the entire tournament because of one mistaken result would be ridiculous, so the most recent decision can be reversed and entered again.
Why everything runs locally
I made an early decision not to build a server-side tournament platform. There is no user account, SQL database or shared global tournament. Every browser session runs its own competition.
That is a limitation if the aim is to manage an international esports league, but it is an advantage here. Two groups can open the site at the same time without affecting one another, there is no personal information to manage centrally, and the project remains extremely easy to host. The HTML, CSS, JavaScript and artwork can be served by any ordinary web server.
It is the same preference for focused, self-hosted tools that led to my sim-racing leaderboard: build the interface around the exact way it will be used, then keep the infrastructure proportionate to the problem.
Designing for a large screen and a phone
The ideal home for Retro Knockout is a larger display beside a cabinet, console or racing setup. That gives the bracket room to read like a tournament board. Phones still matter, though, because somebody will inevitably use one to enter players or update results.
A bracket becomes wider every time another round is added. Compressing a 16- or 32-player tournament into the width of a phone would make the names and controls unusable, so the mobile layout allows the bracket to scroll horizontally. The content keeps a readable size and the user moves across the rounds instead of looking at a miniature version of the desktop page.
What I learned from the build
- Keep the setup visible. Showing the player count, match count, bracket size and byes together makes the tournament format easy to understand.
- Automate the boring parts. Randomising entries and advancing byes saves time without taking control away from the players.
- Design mistakes into the workflow. Undo is a small feature, but it prevents a single wrong click from spoiling the bracket.
- Do not force desktop layouts onto phones. Horizontal scrolling is more useful than an unreadably compressed bracket.
- Theme is part of the experience. A local arcade tool can afford to be more playful than a generic administration page.
Try Retro Knockout
You can open the live Retro Gaming Knockout Tournament, choose a game and create a draw directly in your browser.
The project will probably continue to gain games and visual themes, but the core idea will stay deliberately simple: enter the players, generate the bracket and get back to the actual competition.