Pro klienta · 2024 – dosud Projekt 20 z 20
hruska.army
Rozcestník twitchového kanálu, který vypadá jako stream, a pixelová stránka komunitního Cobblemon serveru.
Ověřený stav webu: Běží, odezva 34 ms,
Ve zkratce
- Role
- Návrh a vývoj
- Období
- 2024 – dosud
- Stav
- V provozu
- Technologie
- 6 technologií
Web má dvě tváře. Hlavní rozcestník je pro diváky streamu, a tak vypadá jako stream: kamera s nápisem REC, alert „nový divák“, síň slávy hlášek místo chatu a pruh s příkazy, které na streamu zaznívají. Stránka Cobblemon serveru je pro hráče, a tak je to pixelová hra s měsícem, městem na obzoru a Pokéballem, který se při posouvání otevře. Každá část má vlastní písmo a vlastní vzhled, společný je jen základ.
Co na webu je
- Živý stav kanálu. Jestli se právě streamuje, co se hraje a kolik má kanál sledujících, bere web z Twitche přes decapi.me a drží v mezipaměti 60 sekund, ať API nezahlcuje. Přehrávač Twitche se načte až po kliknutí.
- Rozcestník na minihry a nástroje streamu (boss, bingo, automaty, kolo štěstí, žebříček), otevřené formuláře a ankety a sociální sítě.
- Stav Minecraft serveru. Počet hráčů zjišťuje PHP přímo protokolem Server List Ping a výsledek drží 30 sekund, takže návštěvy webu server nezatěžují. Na stránce je IP adresa ke zkopírování a tři kroky, jak se připojit.
- Obchod a wiki ve stejném pixelovém vzhledu. Wiki se při nasazení vygeneruje do statického HTML, protože odkazy z Discordu vedou na .html.
- Průvodci a drobnosti. Kreslená Hruška a pixelový „Cobble-asistent“ radí, kam se podívat, kliknutí na hrušku spustí déšť emotů.
Technicky
PHP 8.2 bez frameworku a bez sestavování, animace v GSAP (ScrollTrigger, SplitText, ScrambleText, DrawSVG, MotionPath). Všechny animace jdou přes gsap.matchMedia a respektují omezení pohybu; bez JavaScriptu je obsah celý vidět. Nasazení skriptem se zálohou přepisovaných souborů a návratem jedním příkazem, nejdřív na staging.
Ukázky
5 snímků
Postaveno na
- PHP 8.2
- GSAP
- JavaScript
- CSS
- Server List Ping
- Twitch