Dokumentacja Architektury SOLID + Vue 3

Ten projekt został przepisany zgodnie z zasadami SOLID i najlepszymi praktykami Vue 3.

Implementacja Zasad SOLID

Każdy komponent i plik ma jedną, ściśle określoną rolę:

components/Cell.vue: Odpowiada TYLKO za wyświetlanie pojedynczej komórki i emitowanie zdarzeń kliknięcia. Nie wie nic o logice gry.
components/Hints.vue: Odpowiada TYLKO za wyświetlanie liczb (podpowiedzi).
composables/useNonogram.js: Zawiera logikę interakcji (kliknięcia, efekty).
stores/puzzle.js: Zarządza stanem aplikacji (grid, level, timer).

System jest otwarty na rozszerzenia, ale zamknięty na modyfikacje:

Nowe poziomy: Można dodać nowe zagadki w stores/puzzle.js (obiekt PUZZLES) bez zmieniania logiki renderowania siatki czy sprawdzania wygranej.
Theme/Styl: Style są oparte na zmiennych CSS (main.css), co pozwala na łatwą zmianę motywu bez ingerencji w komponenty.

W kontekście Vue, komponenty są wymienne i przewidywalne:

Komponenty Cell i Hints przyjmują proste propsy (state, hints) i nie polegają na "magicznych" globalnych stanach wewnątrz swojej struktury renderowania (poza wstrzykiwanym storem w kontenerach wyższego rzędu).

Komponenty otrzymują tylko te dane, których potrzebują:

Cell.vue otrzymuje tylko state, r, c. Nie dostaje całego obiektu puzzle ani store.
Hints.vue otrzymuje tylko tablicę liczb, a nie całą logikę gry.

Wysokopoziomowe moduły nie zależą od niskopoziomowych szczegółów:

Pinia Store: Logika gry jest wstrzykiwana przez usePuzzleStore. Komponenty UI (Controls, GameBoard) zależą od abstrakcji store'a, a nie od konkretnej implementacji logiki wewnątrz komponentu.
Composables: Logika (useHints, useTimer) jest wydzielona do reużywalnych funkcji, co uniezależnia ją od cyklu życia konkretnego komponentu Vue.