KUŹNIA KOSZULEK

Cel

Pozwolić zaprojektować koszulkę full-print tak, żeby projekt spełniał wymagania drukarni (rozdzielczość, spady, marginesy bezpieczne), nawet jeśli użytkownik nie zna się na poligrafii.

Rozwiązanie

Kreator w stylu terminala z czterema strefami druku (przód, tył, dwa rękawy). Wzory pochodzą z 9 generatorów proceduralnych: ten sam seed daje te same piksele. Upload grafik jest walidowany, kreator liczy efektywne DPI i pokrycie strefy, a wynikiem jest specyfikacja projektu w milimetrach.

Architektura

1. Design Spec: JSON z wymiarami stref, warstwami, pozycjami i parametrami generatorów w milimetrach; canvas służy tylko do podglądu.
2. Silnik proceduralny generuje rastry RGBA niezależnie od rozdzielczości ekranu.
3. Web Worker renderuje podgląd w osobnym wątku i przerywa nieaktualne zadania.
4. Moduł geometrii liczy efektywne DPI, pokrycie strefy (przycinanie wielokątów Sutherlanda-Hodgmana) i sprawdza spady.
5. Szkic zapisuje się automatycznie w IndexedDB.

Decyzje techniczne

Specyfikacja zamiast eksportu z canvasu

Przeglądarki różnią się antyaliasingiem i profilami kolorów. Źródłem prawdy jest spec w jednostkach fizycznych, który renderer produkcyjny odtworzy tak samo.

Własna trygonometria

Specyfikacja ECMAScript nie gwarantuje bitowo identycznych Math.sin i Math.cos między silnikami JS. Generatory używają wielomianu Taylora, żeby seed dawał wszędzie ten sam wzór.

Bez react-konva i Zustand

Zwykłe elementy DOM, zdarzenia wskaźnika i czysty reducer zamiast dwóch zależności i problemów z renderowaniem po stronie serwera.

Problemy i rozwiązania

Turbopack nie kompilował Web Workera

Plik workera był kopiowany jako TypeScript bez kompilacji. Worker buduje teraz esbuild w kroku prebuild i predev.

149,99999999999997 DPI blokowało poprawny projekt

Błąd zaokrąglenia przy progu 150 DPI. Porównanie progu ma tolerancję 1e-6.

Upload wisiał w testach E2E

W niezabezpieczonym kontekście HTTP w sieci LAN przeglądarka nie udostępnia crypto.subtle. Doszedł fallback SHA-256 w czystym JavaScripcie.