Portfolio — jak funguje tahle stránka

Portfolio, které školní projekty nejen popisuje, ale nechá je i spustit. Většina studentských portfolií končí u odstavce a odkazu na repozitář; tady je záměr jiný - u projektů, kde to dává smysl, si čtenář může sám zadat vstup a nechat běžet ten samý program, který vznikl do školy.

Začalo to jedním souborem index.html a jedním style.css. Ta verze pořád existuje a slouží jako předloha vzhledu, ale statická stránka neumí přijmout zadání a spustit na něj výpočet. Proto vznikla tahle - jako aplikace, která si umí povídat s programy v C++.

Tři vrstvy, každá s jedinou zodpovědností. Podstatné je, co nedělají: web nic nepočítá a server nic nesimuluje.

• Web — vykresluje stránky, sbírá vstupy od uživatele a zobrazuje výsledky. Žádnou logiku projektů neobsahuje.
• API server — tenký průchoďák. Vezme zadání jako JSON, spustí přeloženou C++ binárku, předá jí zadání na standardní vstup a její výstup pošle beze změny zpátky. Neumí ani validovat - pravidla si hlídá sám C++ program.
• Programy v C++ — původní školní projekty. Zůstaly, jaké byly; přibyla jim možnost brát zadání jako JSON místo napevno v kódu. Simulátor automatů navíc dostal úspornější prohledávání (víc v bloku níž); přijaté slovo ale projde stejným výpočtem.

Důvod tohoto dělení je jednoduchý: kdyby web simulaci počítal sám, musel by ji celou znovu implementovat v JavaScriptu - a od té chvíle by na stránce běželo něco jiného než to, co bylo odevzdané. Takhle čtenář spouští doopravdy ten původní program.

Obě dema jdou stejnou cestou: zadání putuje na server, ten spustí C++ program a vrátí jeho výsledek. Každé k tomu ale mělo jiný důvod:

• IMS musí na server. Simulace stojí na knihovně SIMLIB, kterou je potřeba mít nainstalovanou a přeloženou. To v prohlížeči nejde.
• HZA by mohlo běžet i v prohlížeči. Simulátor automatů žádnou knihovnu nepotřebuje a šel by přeložit do WebAssembly. Přesto jde stejnou cestou jako IMS - o jednu technologii míň a všechny programy běží na jednom místě.

Cenou za to je, že výpočet HZA zatěžuje server. Prohledávání do šířky z bakalářské práce si pamatuje každou navštívenou konfiguraci a u náročnějších slov si vzalo i gigabajty paměti. Web proto používá prohledávání do hloubky s postupným prohlubováním, které vystačí s desítkami megabajtů, a výpočet omezuje časem - nejvýš minutou. Když slovo přijme, najde tentýž výpočet jako původní verze.

Fialové pozadí, tyrkysové lišty a bílé bloky se zaoblenými rohy pocházejí z původní statické stránky - ručně psaného HTML a CSS, které vzniklo v kurzu ITW (Tvorba webových stránek). Žádná šablona, žádný generátor.

Tahle stránka na ten vzhled navazuje, nenahrazuje ho. Statická verze zůstala jako závazná předloha: tmavý režim proto přepíná záměrně jen dvě věci - výplň bloků z bílé na černou a text z černé na bílou. Zbytek palety zůstává, jaký byl. Kdyby se přebarvovalo všechno, vznikl by druhý vzhled, který by se s tím prvním rozešel.