Všechny projekty

Vlastní produkt · 2020 Projekt 19 z 20

PlayFairPlay

Turnajový web z roku 2020: přihlášky, pavouk, zápasy a liga v čistém PHP.

Úvodní stránka PlayFairPlay s oranžovou lištou Turnaje, Zprávy, Recenze, Hry, seznamem novinek a sloupcem posledních turnajů s obsazeností

Ve zkratce

Role
Návrh a vývoj
Období
2020
Stav
Archiv
Technologie
8 technologií

Web pro pořádání herních turnajů z roku 2020, zaměřený hlavně na Legends of Runeterra. Je napsaný v čistém PHP s mysqli, bez frameworku a bez šablon – každá stránka si sama skládá SQL dotazy i HTML. Je na něm vidět, kde jsem začínal, a proto ho tu nechávám i s tím, co bych dnes udělal jinak.

Co web umí

  • Turnaje. Přehled s obsazeností, detail s výhrami, startem a check-inem a přihlášení do turnaje jedním kliknutím. Administrátor zakládá turnaj formulářem (hra, systém, počet hráčů, správce) a web mu vygeneruje vlastní stránku.
  • Pavouk a zápasy. Dvojice prvního kola se losují náhodně z hráčů, kteří prošli check-inem, vítězové postupují do dalšího kola. Výsledek po každé hře hlásí oba hráči: skóre se připíše, až když se jejich hlášení shodují, a po dvou výhrách se zápas uzavře. Stránka zápasu obnovuje skóre každou sekundu.
  • Liga. Body za umístění v turnajích (128 za vítězství, 64 za druhé místo a tak dál), celková tabulka a postupující.
  • Novinky a recenze. Editor SCEditor s obrázky, náhledy, koncepty a počítadlem zobrazení. Recenze píšou administrátoři přímo v uživatelském panelu.
  • Uživatelé. Registrace a přihlášení s hesly přes password_hash, profil s herními účty (Riot, Blizzard, Steam, MTG, Discord a další) a volbou skrýt jméno nebo e-mail, soukromé zprávy s počtem nepřečtených.
  • Role a administrace. Hlavní administrátor a ke každé hře role správce, která vzniká spolu s hrou. Administrace na šabloně AdminLTE: statistiky, turnaje, hry, novinky a správa uživatelů. Web počítá i unikátní návštěvy.

Co bych dnes udělal jinak

SQL dotazy se skládají z řetězců a výstup se vypisuje bez escapování, takže web je náchylný na SQL injection a XSS. Administrace nemá ochranu proti CSRF, nahrávání obrázků nekontroluje typ souboru a stránky turnajů vznikají kopírováním PHP souboru. Dnes bych sáhl po frameworku, parametrizovaných dotazech a šablonách, které escapují samy.

Ukázka

Původní databáze se nedochovala. Schéma jsem zrekonstruoval z dotazů v kódu a web zprovoznil v Dockeru na PHP 8.3 a MariaDB. Kód zůstal původní až na pár drobných úprav kvůli novému PHP. Snímky jsou z této lokální ukázky s vymyšlenými daty.

Postaveno na

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

Klávesové zkratky.

Klávesové zkratky webu. Při psaní do formuláře nereagují.

Web

?
Tahle nápověda
g
Mřížka 12 sloupců, komponenty a měření stránky
d
Vzhled: podle systému, světlý, tmavý, Linkin Park
Ctrl P
Vytisknout CV místo webu
Esc
Zavřít dialog nebo mřížku

Modrou tečku za jménem v úvodu jde chytit a hodit.

Linkin Park

l setlist lp
Setlist, skladby po albech
papercut
Přes stránku se roztrhne papír
numb
Web na pár vteřin otupí
faint
Stránka omdlí a zase se probere
meteora
Meteorický roj a přímý zásah do tečky za jménem
fromzero emily
Web zhasne do nuly a znovu se zrodí, s díky pro Emily Armstrong
concert koncert
Koncert: web projede barvy všech alb
castleofglass
Stránka zesklovatí, praskne a sklo se sesype
iridescent
Nadpisy a tečky se na chvíli přelijí duhou
breakingthehabit
Co je vidět, se rozsype a zase složí
intheend
Závěrečné titulky jako v kině
victim morethevictim
Web se rozpadne v glitchi a zůstane rozladěný (do obnovení, dalšího slova nebo Esc)
finalmasquerade
Škraboška přes celý web, kamera proletí okem
lost
Odchod na stránku 404

Slova napište kdekoli mimo formulář, velikost písmen ani mezery nevadí. S omezeným pohybem přijde jen krátké oznámení.

Na telefonu otevře setlist pět ťuknutí na modrou tečku za jménem.