Kontynuacja wpisu na mikroblogu ().
TIC-TAC-TOE lub kółko i krzyżyk z komputerem...
Mamy już tysiące takich implementacji a ja postanowiłem zrobić jeszcze jedną. Za cel jednak przyjąłem, że gra ma działać w przeglądarce wykorzystując wyłącznie HTML i CSS wykluczając jednak JavaScript. Ręczne napisanie takiego HTML oczywiście graniczy z cudem więc konieczne było napisanie kilku narzędzi pomocniczych, które po odpowiednim przemieleniu danych wejściowych "wyplują" mi odpowiedni HTML i CSS.
Efektem powyższego jest strona: https://tic-tac-toe.xksi.pl/
Jak to powstało:
Proces tworzenia składał się z kilku następujących po sobie etapów i postanowiłem go pokazać bo być może nie każdy wie jak powstają takie "dziwolągi".
- Przygotowanie "map gry". W tym celu napisałem typowe narzędzie pomocnicze. Powstało w PHP ale kod i jego logika były tak paskudne, sypały noticami i innymi syfami więc go nie pokażę :-) Typowa jednorazówka, której celem było wygenerowanie plików map... Jak się okazało na mikroblogu miewam w nich błędy i chyba będę musiał to zrobić jak należy.
- Przygotowaniem generatora kodu także walidującego to co wypluł poprzedni skrypt. Ten skrypt też jest brzydki ale nie musi być ładny bo nie to jest celem.
- Tworzenie i poprawianie CSS.
- Poprawki pod kątem zgodności ze standardami oraz testy.
Wyniki testów zgodności:
-
Lighthouse: https://pagespeed.web.dev/report?url=https%3A%2F%2Ftic-tac-toe.xksi.pl%2F (mimo ponad 10 000 elementów w DOM)
-
Poprawność składni: HTML: https://validator.w3.org/nu/?doc=https%3A%2F%2Ftic-tac-toe.xksi.pl%2F
-
Poprawność CSS: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftic-tac-toe.xksi.pl%2F
...a mimo to na "srajPhonie" animacje się krzaczą!
Dla zainteresowanych kod udostępniam na GIT (nie jest to wzór do naśladowania ale można zobaczyć o co chodzi):
https://bitbucket.org/xksi/tic-tac-toe-html-css/