All projects

Own product · 2020 Project 19 of 20

PlayFairPlay

A tournament website from 2020: sign-ups, brackets, matches and a league in plain PHP.

The PlayFairPlay home page with an orange bar reading Turnaje, Zprávy, Recenze, Hry, a list of news and a column of the latest tournaments with how many places are taken

At a glance

Role
Design and development
Period
2020
Status
Archived
Technologies
8 technologies

A website for running gaming tournaments from 2020, focused mainly on Legends of Runeterra. It is written in plain PHP with mysqli, with no framework and no templates – every page builds its own SQL queries and HTML. It shows where I started, which is why I keep it here, together with what I would do differently today.

What the site does

  • Tournaments. An overview with how many places are taken, a detail page with prizes, start and check-in times, and one-click registration. An administrator creates a tournament with a form (game, format, number of players, organiser) and the site generates its own page.
  • Brackets and matches. First-round pairs are drawn at random from the players who checked in, and winners move on to the next round. Both players report the result after every game: the score only counts once their reports match, and two wins close the match. The match page refreshes the score every second.
  • League. Points for tournament placings (128 for a win, 64 for second place and so on), an overall table and the players who qualify.
  • News and reviews. The SCEditor editor with images, thumbnails, drafts and a view counter. Administrators write reviews right in the user panel.
  • Users. Sign-up and sign-in with passwords stored through password_hash, a profile with gaming accounts (Riot, Blizzard, Steam, MTG, Discord and more) and an option to hide the name or email, and private messages with an unread count.
  • Roles and administration. A head administrator plus an organiser role for every game, created together with the game. An administration on the AdminLTE template: statistics, tournaments, games, news and user management. The site also counts unique visits.

What I would do differently today

SQL queries are built from strings and output is printed without escaping, so the site is open to SQL injection and XSS. The administration has no CSRF protection, image uploads do not check the file type, and tournament pages are created by copying a PHP file. Today I would reach for a framework, parameterised queries and templates that escape on their own.

The demo

The original database has not survived. I reconstructed the schema from the queries in the code and got the site running in Docker on PHP 8.3 and MariaDB. The code is the original apart from a few small changes for the newer PHP. The screenshots come from this local demo with made-up data.

Built with

  • PHP
  • mysqli
  • MySQL
  • JavaScript
  • jQuery
  • Bootstrap 4
  • AdminLTE
  • SCEditor

Keyboard shortcuts.

Keyboard shortcuts for this site. They stay quiet while you type into a form.

This site

?
This help
g
12-column grid, components and page metrics
d
Appearance: system, light, dark, Linkin Park
Ctrl P
Print the CV instead of the website
Esc
Close the dialog or the grid

The blue dot after the name can be grabbed and thrown.

Linkin Park

l setlist lp
The setlist, songs by album
papercut
The page tears like paper
numb
The site goes numb for a few seconds
faint
The page faints and comes round
meteora
A meteor shower and a direct hit on the dot after the name
fromzero emily
The site fades down to zero and is reborn, with thanks to Emily Armstrong
concert koncert
Concert: the site runs through the colours of every album
castleofglass
The page turns to glass, cracks and shatters
iridescent
Headings and dots shimmer in rainbow colours
breakingthehabit
Whatever is on screen falls apart and snaps back
intheend
End credits, like at the cinema
victim morethevictim
The site breaks up in a glitch and stays distorted (until a reload, another word or Esc)
finalmasquerade
A masquerade mask over the whole site, the camera flies through an eye
lost
Off to the 404 page

Type the words anywhere outside the form; case and spaces do not matter. With reduced motion you get a short note instead.

On a phone, five taps on the blue dot after the name open the setlist.