WIP

src/board/Board.ts

@@ -10,6 +10,7 @@ import boards from "./styles-board";
 
 const defaultConfig: BoardConfig = {
   size: 720,
+  tiles: 8,
   boardStyle: boards.avocado,
   piecesStyle: "gioco",
   showBorder: true,
@@ -77,6 +78,7 @@ class Board {
 
     this.cfg = cfg;
 
+    this.tiles = cfg.tiles;
     this.extraInfo = cfg.showExtraInfo;
     this.piecesStyle = cfg.piecesStyle;
     this.showMaterial = cfg.showMaterial;

src/board/styles-board/index.ts

@@ -13,7 +13,7 @@ import sunset from "./gradient/sunset";
 import rainbow from "./gradient/rainbow";
 import rainbowLight from "./gradient/rainbow-light";
 
-import kittens from "./pic/kittens";
+// import kittens from "./pic/kittens";
 
 export default {
   chesscom,
@@ -28,5 +28,5 @@ export default {
   sunset,
   rainbow,
   rainbowLight,
-  kittens,
+  // kittens,
 };

src/main.tsx

@@ -17,6 +17,7 @@ import App from "./ui/App";
 
 const boardConfig: BoardConfig = {
   size: 1024,
+  tiles: 8,
   boardStyle: styles.calm,
   piecesStyle: "tatiana",
   showBorder: true,
@@ -36,7 +37,7 @@ const gameConfig: GameConfig = {
 };
 
 const createDownloadLink = async (pgn: string, boardConfig: BoardConfig) => {
-  const file = await createAnimation(pgn, { ...boardConfig, size: 720 }, "GIF");
+  const file = await createAnimation(pgn, { ...boardConfig, size: 720 }, "MP4");
   const link = document.createElement("a");
   link.innerText = "DOWNLOAD";
   link.setAttribute("href", URL.createObjectURL(file));

src/test-data/pgns.ts

@@ -21,6 +21,204 @@ const pgns = [
 Qc4 31. Qxf6 Kxa3 32. Qxa6+ Kxb4 33. c3+ Kxc3 34. Qa1+ Kd2
 35. Qb2+ Kd1 36. Bf1 Rd2 37. Rd7 Rxd7 38. Bxc4 bxc4 39. Qxh8
 Rd3 40. Qa8 c3 41. Qa4+ Ke1 42. f4 f5 43. Kc1 Rd2 44. Qa7 1-0`,
+
+  `[Event "FIDE World Chess Championship 2021"]
+[Site "Chess.com"]
+[Date "2021.12.03"]
+[Round "06"]
+[White "Carlsen, Magnus"]
+[Black "Nepomniachtchi, Ian"]
+[Result "1-0"]
+[WhiteElo "2855"]
+[BlackElo "2782"]
+[TimeControl "5400+30"]
+
+{Pod koniec 5-tej partii przewidywałem, że następny pojedynek obfitować będzie w
+więcej emocji. Po \"wstępnym badaniu\" Magnus wiedział już z grubsza, czego może
+się spodziewać po 1.e4, a czego po 1. d4. Znając repertuar Nepo, nie byłem
+zdziwiony wyborem \"katalońskiej\" pozycji przez Magnusa. Z uwagi na dosyć
+spokojny przebieg debiutu i gry środkowej, Norweg nie mógł wywierać nacisku na
+przeciwnika. Następnie jednak - zgodnie z moimi przewidywaniami - partia
+zaostrzyła się i w końcu doczekaliśmy się zwycięstwa w meczu.} 1. d4 Nf6 2. Nf3
+d5 3. g3 e6 4. Bg2 Be7 5. O-O O-O 6. b3 {Ciekawa kolejność białych, chcą one
+teraz zagrać c4 i są przygotowane, by na dxc4 odbić bxc4.} 6... c5 7. dxc5 (7.
+c4 {Prowadziłoby do bardziej typowych pozycji. Rozegrałem w ten sposób już
+kilkanaście partii tempem przyspieszonym. To ciekawa opcja, jednak myślę, że w
+partii klasycznej nie powinna ona zrobić wielkiej krzywdy dobrze przygotowanemu
+zawodnikowi. Z drugiej strony nie przekonuje mnie również wybór mistrza
+świata.}) 7... Bxc5 8. c4 dxc4 9. Qc2 {Białe odbijają pionka c4 bez pogorszenia
+struktury pionkowej. Nadzieja na przewagę Magnusa tkwi w potencjalnych
+problemach z rozwojem skrzydła hetmańskiego - czarne muszą w szczególności
+zastanowić się, jak wprowadzić do gry Gc8. Uważam jednak, że to podejście zbyt
+optymistyczne - zanim białe odbiją pionka na c4, czarne dokończą swój rozwój.}
+9... Qe7 10. Nbd2 $5 {Magnus z podziwu godnym uporem próbuje poświęcić pionka w
+tym meczu. Jeśli czarne nie zdecydują się na przyjęcie ofiary, to skoczek będzie
+dużo bardziej odpowiednią figurą na polu c4 niźli hetman.} 10... Nc6 $1 {Moim
+zdaniem słuszna decyzja - czarne nie bawią się w przyjmowanie ofiary pionka, ale
+kończą rozwój zanim nacisk po długiej diagonali (h1-a8) stanie się
+nieprzyjemny.} (10... cxb3 {Co innego człowiek, co innego komputer - maszyna nie
+boi się przyjąć ofiary -} 11. Nxb3 Bd6 12. Nfd4 {Rekompensata białych jest
+zadowalająca - czarne nie są w stanie rozwinąć skrzydła hetmańskiego. Nie widzę
+dobrej opcji wprowadzenia Gc8 do gry. Silnik ocenia tę pozycję jako równą, ale
+dla człowieka gra tak pasywnej pozycji byłaby bardzo trudna i nie dziwi mnie
+decyzja Nepo, by tej ofiary pionka nie przyjmować.}) 11. Nxc4 {Czarne mogą teraz
+ustawić gońca na d7, gdzie nie walczyłby on o długą diagonalę. Nawet po tym
+ruchu nie sądzę, by białe miały jakieś realne szanse walki o przewagę. Drugą
+opcją w tej pozycji jest droga obrana przez Rosjanina -} 11... b5 $1 {Wygląda na
+ryzykowne - czarne same otwierają długą diagonalę, ale dzięki tempu zdobytemu
+podczas ataku na skoczka c4 udaje się im szybko ustawić gońca na polu b7.
+Patrząc na strukturę pionkową, białe nie mają żadnej przewagi i ich jedyna
+nadzieja związana była z dobrym ustawieniem Gg2. Teraz czarne wyprowadzą swojego
+białopolaka na pole b7 i będziemy mieli do czynienia z typową pozycją z
+symetrycznym układem pionków, w której czarne nie mają problemów.} (11... Bd7 $5)
+(11... e5 {Również zasługiwało na uwagę - białopolak pójdzie na g4 - lub czasem
+może nawet i na f5 ( o ile wcześniej czarne zdecydują się na ...e4).}) 12. Nce5
+{Teraz czarne musza uważać, by w odpowiedni sposób wprowadzić gońca na długą
+diagonalę.} (12. Nfe5 $2 {wygląda kusząco, ale czarne - dzięki małym trikom
+taktycznym - mogą przejąć inicjatywę -} 12... Nd4 $1 13. Qd1 Bb7) 12... Nb4 $1
+{Czarne odchodzą skoczkiem spod bicia i czynią to z tempem.} ({Nie wolno} 12...
+Bb7 $2 {, z uwagi na wariant} 13. Nxc6 Bxc6 14. b4 Bxf3 15. Bxf3 {i czarne tracą
+materiał.}) 13. Qb2 Bb7 14. a3 Nc6 $1 {z uwagi na to, że hetman zszedł z pola c2,
+białe nie mają już motywu związania gońców po linii 'c'. Pozycja wygląda na
+równą, ale wkrótce pojawi się szansa na lekką zmianę w pozycji.} 15. Nd3 Bb6 16.
+Bg5 Rfd8 17. Bxf6 gxf6 $5 {Oczywiście jest to dobry ruch, ale jestem nim nieco
+zaskoczony. Biorąc pod uwagę, że struktura pionkowa tak czy siak zostanie
+pogorszona, nasuwa się pytanie - po co zostawiać hetmany na szachownicy $2} ({Sam
+zagrałbym} 17... Qxf6 {i w tej pozycji wolałbym grać czarnymi.}) 18. Rac1 Nd4
+(18... e5 {to natychmiastowa podpowiedź komputera. Bardzo nieludzki ruch -
+czarne aż się proszą o \"wjazd\" na pole f5.} 19. Nh4 Nd4 20. e3 Bxg2 21. Kxg2
+Qb7+ 22. Kg1 Ne6 {i czarne - mając w planach Se6-g5 - stoją trochę lepiej. Homo
+sapiens widząc jednak ruchy typ Hb2-e2 z dalszym Sh4-f5 podświadomie boi się
+takiej pozycji czarnego króla.}) 19. Nxd4 Bxd4 20. Qa2 Bxg2 21. Kxg2 Qb7+ 22.
+Kg1 Qe4 23. Qc2 a5 24. Rfd1 Kg7 25. Rd2 {Z uwagi na problemy z pokładowym wi-fi,
+to była pierwsza pozycja z partii, którą zobaczyłem. Zakładałem, że partia zaraz
+zakończy się kolejnym mało \"krwistym\" remisem. Nie spodziewałem się, że
+pretendent zmieni nagle zmieni charakter pozycji.} 25... Rac8 $5 {Ruch ten na
+pewno nie jest słaby, ale powiedziałbym, że jest nader ryzykowny . Komputer
+pozostaje niewzruszony - dalej uważa, że pozycja jest mniej więcej równa. Po
+oddaniu hetmana za dwie wieże, pozycja bardzo się komplikuje - czarne mają słabe
+pionki skrzydła królewskiego, co białe - mając więcej figur - mogą dość szybko
+wykorzystać. Teraz - mimo, że czarne stoją dobrze - muszą szukać konkretnej
+kontrgry. Z perspektywy czasu ruch ten to decyzja, której Nepo na pewno żałuje,
+mimo że nie jest to bezpośrednia przyczyna jego porażki.} ({Czarne mogły zagrać
+spokojne} 25... f5 {tworząc miejsce dla gońca na polu f6. Pozycja ma duże
+tendencje remisowe.}) 26. Qxc8 Rxc8 27. Rxc8 Qd5 28. b4 a4 29. e3 Be5 $6 {Mimo,
+iż komputer upiera się, że pozycja jest dalej równa, uważam, że ruch ten to duży
+krok w stronę przepaści.} ({Czarne mogły zagrać} 29... Bb2 {i tu białe muszą
+zagrać dwa jedyne ruchy, by osiągnąć remis. Kontynuacja z partii daje im więcej
+czasu na konsolidację pozycji i dalszą zabawę bez ryzyka. Po 29... Gb2 powinno
+nastąpić:} 30. Rc5 $1 Qd6 31. Rxb2 Qxd3 {i teraz pozycja białych wygląda
+podejrzanie, ale po jedynym, acz niezbyt skomplikowanym} 32. Rbc2 $1 {, udaje im
+się utrzymać pozycję. Z drugiej strony Magnus był pod presją czasową i można
+było spróbować dać mu się pomylić.}) 30. h4 h5 $2 {Czarne stworzyły sobie potężną,
+długoterminową słabość na h5.} (30... Bb2 {dalej było słuszne. Ruch taki trudno
+jednak wykonać - czarne musiałyby tym samym przyznać się do tego, że 29... Ge5
+było błędem. Trudno jednak o taką decyzję, jeśli jest się przekonanym, iż
+pozycja wciąż jest dobra.}) 31. Kh2 {Komputer dalej uważa, że czarne stoją
+dobrze. Jednak patrząc na pozycję ludzkim okiem, uważam, że czarne są w
+poważnych tarapatach - nie mają kontrgry, a słabości też same nie ewaporują. W
+tym momencie znów zawiodło pokładowe wi-fi i pogodziłem się z tym, że sporo wody
+w rzece Pecos upłynie, nim dowiem się o dalszych poczynaniach obu graczy. W tym
+momencie oceniałem jednak, iż - mimo pewnych problemów z czasem - Magnus stoi
+bardzo obiecująco.} 31... Bb2 $2 {Ten ruch pojawił się na desce za późno. Jednak z
+uwagi na brak czasu, Carlsen nie znajduje wygranej $1} 32. Rc5 Qd6 33. Rd1 $2
+{wypuszcza wygraną.} (33. Rcc2 {Carlsen: \"Zupełnie nie przyszło mi to do głowy.
+Szczerze mówiąc, grając Wd1 przeoczyłem ... Hd7. Myślałem, że zdążę zagrać Wb4 i
+opanować pionki. Przeoczenie, nic więcej.\"} 33... Bxa3 34. Nf4 $1 {Białe mają
+decydujący atak - mikstura dwóch wież w połączeniu z jadem skoczka powaliłaby
+nawet syberyjskiego niedźwiedzia $1} 34... Qe7 {i teraz jedynie} 35. Rc8 $1
+{prowadzi do wygranej.}) 33... Bxa3 34. Rxb5 Qd7 35. Rc5 e5 (35... Bxb4 {Dalej
+nie rozumiem, czemu Nepo nie zdecydował się na ten ruch. Nie jestem jednak aż
+takim optymistą, jak komputer, który twierdzi, że czarne mają szanse nawet na
+wygraną.}) 36. Rc2 Qd5 $6 ({Znów} 36... Bxb4 $1 {było nader kuszące.}) 37. Rdd2
+{Białe dały radę się skonsolidować i teraz Ga3 ma pewne problemy.} 37... Qb3 38.
+Ra2 e4 $2 {W obustronnym niedoczasie obie strony przeoczyły ciekawą opcję czarnych
+-} (38... f5 {to rekomendacja maszyny, bardzo trudne do znalezienia dla
+człowieka, szczególnie z sekundami na \"budziku\".}) 39. Nc5 Qxb4 {i teraz
+Magnus mógł wykonać wygrywający ruch, jednak pamiętać należy, że to ruch
+kontrolny - spory pech mistrza świata.} 40. Nxe4 (40. Rdc2 $1 f5 41. Nxa4 Qxa4 42.
+Rc3 $18 {i z uwagi na słabości pionkowe na skrzydle królewskim, czarne powinny
+przegrać tę pozycję. Białe zaatakowałyby pionka f7 obiema wieżami i czarne
+byłyby bezbronne. Dokładne takiego typu pozycję miałem na myśli komentując ruch
+...h5.}) 40... Qb3 {czas po kontroli został dodany i pozycja czarnych nie jest
+jeszcze zła.} 41. Rac2 Bf8 42. Nc5 Qb5 43. Nd3 a3 {Pionek czarnych jest naprawdę
+irytujący - ciągle wymaga od białych atencji.} 44. Nf4 Qa5 45. Ra2 Bb4 46. Rd3
+Kh6 47. Rd1 Qa4 48. Rda1 {Magnus stara się przestawić wszystkie figury tak, by
+atakowały one pionka a3. Ciekawe tylko, jak podłączyć skoczka do zabawy $2} 48...
+Bd6 49. Kg1 Qb3 50. Ne2 Qd3 51. Nd4 Kh7 {Wygląda na to, że białe mogą teraz
+spokojnie dohasać skoczkiem na c2 i potem skonsumować pionka a3. Sprawy nie są
+jednak tak oczywiste -} 52. Kh2 (52. Nc2 Qb3 $1 {i nie wolno} 53. Nxa3 {z uwagi
+na} 53... Be5 {i białe mają poważne problemy.}) 52... Qe4 $6 {Dziwna decyzja,
+pozwala Carlsenowi na dalszą grę na wygraną. Należało dalej trzymać w zanadrzu
+możliwość zagrania Hb3.} 53. Rxa3 Qxh4+ $1 ({Oczywiste na pierwszy rzut oka} 53...
+Bxa3 $2 {prowadzi do przegranej $1} 54. Rxa3 {Białe przestawią wieżę na pole f4
+(Wa5-f5-f4), skąd bronić będzie pionka f2 i atakować pionka f6. Następnie
+przemanewrują skoczka na pole e4 i wymuszą ruch f5. Ostatnim aktem tego dramatu
+czarnych, będzie przestawienie skoczka na pole d4  i konsumpcja pionków.}) 54.
+Kg1 Qe4 55. Ra4 Be5 56. Ne2 Qc2 57. R1a2 Qb3 {Pozycja czarnych trzyma się dzięki
+świetnemu położeniu Ge5. Białe nie mogą złapać odpowiedniej koordynacji, by
+realnie myśleć o viktorii.} 58. Kg2 Qd5+ 59. f3 {komputer nie lubi tego ruchu,
+ale ja nie widzę lepszej opcji progresu w tej pozycji.} 59... Qd1 60. f4 Bc7
+{Białe musiały pójść pionkiem na f4, by wygonić gońca. Problemem jest teraz
+jednak osłabiona pozycja białego monarchy - białe nie mają czasu na atak pionka
+f7.} 61. Kf2 Bb6 $1 {Czarne biorą na celownik słabego pionka e3.} 62. Ra1 Qb3 63.
+Re4 {Białe skonsolidowały się, jak mogły. Dopiero w tym momencie odzyskałem
+dostęp do wi-fi i szczerze mówiąc, nie byłem zaskoczony ilością wypuszczonych
+szans. Biała wieża na e4 trzyma całą pozycję białych w kupie, jednak jest ona
+teraz przykuta do obrony pionka e3. Magnus to jednak Magnus - jest znany z
+umiejętności wyciskania wody z kamienia, co prezentuje również w tej partii.}
+63... Kg7 64. Re8 f5 65. Raa8 {Wieże wspięły się na szczyt swoich możliwości
+aktywizacji, Co jednak czynić dalej $2} 65... Qb4 66. Rac8 Ba5 67. Rc1 Bb6 68. Re5
+Qb3 69. Re8 Qd5 70. Rcc8 {Nacisk na szachownicy nie wzrasta, ale presja czasowa
+również jest elementem rozgrywki. Obiektywnie pozycja jest remisowa, ale czarne
+muszą wykonać jeszcze prawie 50 posunięć (zgodnie z regułą 50 ruchów bez bicia i
+ruchu pionkiem). Nepo miał tu zaledwie 5 minut na zegarze.} 70... Qh1 (70... Qb3
+{też było dobre.}) 71. Rc1 Qd5 72. Rb1 Ba7 $2 {zły ruch, wykonany z uwagi na brak
+czasu do namysłu.} (72... Bd8 {czarne powinny były próbować grać ...h4}) 73.
+Re7 $1 Bc5 74. Re5 Qd3 {czarne dostają się w pozycję, gdzie do remisu potrzebne są
+jedyne ruchy.} 75. Rb7 Qc2 76. Rb5 Ba7 77. Ra5 ({Białe mogły już zagrać} 77.
+Rxf5 {i po} 77... Qd3 78. Rxf7+ Kxf7 79. Rb7+ {i mimo, że komputer dalej
+twierdzi, że pozycja jest remisowa, to \"po ludzku\" pozycja jest wręcz
+niemożliwa do obrony.}) 77... Bb6 78. Rab5 Ba7 79. Rxf5 $1 {zagrane po
+\"usypiającym\" powtórzeniu posunięć.} 79... Qd3 80. Rxf7+ Kxf7 81. Rb7+ Kg6 82.
+Rxa7 Qd5 83. Ra6+ Kh7 84. Ra1 $1 {Podoba mi się ten ruch. Białe nie muszą się
+spieszyć, a na razie nie pozwalają na Hh1.} 84... Kg6 85. Nd4 Qb7 86. Ra2 Qh1
+87. Ra6+ Kf7 88. Nf3 {Król białych jest bezpieczny. Silnik dalej uważa, że
+pozycja jest remisowa, ale człowiek - szczególnie grając już tylko na dodawanym
+czasie - właściwie nie ma szans ustać. Nie ma tu możliwości złapania wieczniaka
+bądź trzykrotnego powtórzenia pozycji. Białe mogą krążyć przez 45-47 ruchów,
+potem spokojnie przesunąć pionka i znów krążyć... \"Sępia\" pozycja... Człowiek
+miałby problemy z utrzymaniem tej pozycji nawet dysponując dużą ilością czasu,
+grając w niedoczasie, jego szanse oscylują wokół zera.} 88... Qb1 89. Rd6 Kg7
+90. Rd5 Qa2+ 91. Rd2 Qb1 92. Re2 {przygotowuje marsz pionka e.} 92... Qb6 93.
+Rc2 Qb1 94. Nd4 Qh1 95. Rc7+ Kf6 96. Rc6+ Kf7 97. Nf3 Qb1 98. Ng5+ Kg7 99. Ne6+
+Kf7 100. Nd4 Qh1 {Co prawda białe nie zrobiły progresu, ale regresowi uległ czas
+na zegarze.} 101. Rc7+ Kf6 102. Nf3 Qb1 103. Rd7 Qb2+ 104. Rd2 Qb1 105. Ng1 $5 {W
+końcu białe się przestawiają.} 105... Qb4 106. Rd1 Qb3 107. Rd6+ Kg7 108. Rd4
+Qb2+ 109. Ne2 Qb1 110. e4 {Jest i długo wyczekiwany ruch pionkiem $1 Oczywiście
+maszyna dalej uparcie pozostaje niewzruszona. Któż jednak chciałby na żywo
+bronić takiej pozycji $2 Po kolejnych x ruchach znów nastąpi e5 lub f5 itd. itd.}
+110... Qh1 111. Rd7+ Kg8 112. Rd4 Qh2+ 113. Ke3 h4 {Czarne wymieniają swojego
+ostatniego piechura, lecz nie poprawia to ich praktycznych szans.} 114. gxh4
+Qh3+ 115. Kd2 Qxh4 116. Rd3 Kf8 117. Rf3 Qd8+ 118. Ke3 Qa5 119. Kf2 Qa7+ 120.
+Re3 Qd7 121. Ng3 {Białe skoordynowały swoje figury i powoli będą myśleć o marszu
+pionków} 121... Qd2+ 122. Kf3 Qd1+ 123. Re2 Qb3+ 124. Kg2 {Koniec szachów
+hetmanem} 124... Qb7 125. Rd2 Qb3 126. Rd5 Ke7 127. Re5+ Kf7 128. Rf5+ Ke8 129.
+e5 {Mimo, że pionki ruszyły, maszyna dalej uważa, że to remis. Człowiek takiej
+pozycji ustać jednak nie jest w stanie...} 129... Qa2+ 130. Kh3 Qe6 $2 {Dopiero
+ten ruch przegrywa. Zgodnie ze wskazaniami tablic remisowało jeszcze 130... Hb1
+lub 130... Hc2.} (130... Qb1) (130... Qc2) 131. Kh4 {Dopiero tu komputer zgadza
+się z tym, co \"ludzcy\" komentatorzy wiedzieli od dawna - Magnus wygrywa $1}
+131... Qh6+ 132. Nh5 Qh7 133. e6 $1 {Piękny ruch, obie bierki białych - wieża i
+pionek e6 są tabu (z uwagi na widły skoczkiem na polu g7).} 133... Qg6 134. Rf7
+Kd8 135. f5 Qg1 136. Ng7 {I Ian Nepomniachtchi uznał się za pokonanego - król
+może schować się na polu g8 i marsz pionka 'e' jest nie do zatrzymania. Magnus
+Carlsen wygrał tę partię w swoim stylu - mało ryzyka, wprowadzenie dysharmonii
+materialnej i potem wyciskanie cytryny, Krok po kroku, mimo, że pozycja była
+\"do ustania, ale nie dla człowieka:\". Oczywiście, Nepo mógł bronić się lepiej,
+szczególnie przed Wxf5 i potem Wxf7. Potem - mimo wskazań komputera - pozycji
+nie dało się uratować grając pod takim napięciem (zarówno czasowym, jak i
+prestiżowym). Wierzę, że od teraz mecz bardzo się zaostrzy.} 1-0`,
 ];
 
 export default pgns;

src/types.ts

@@ -50,9 +50,17 @@ export type MoveIndicator =
   | { type: "hueShift"; data: number }
   | { type: "color"; data: string };
 
+export type StyleCategory =
+  | "mono"
+  | "colorful"
+  | "gradient"
+  | "material"
+  | "pic"
+  | "custom";
+
 export type Style = {
   name: string;
-  category: "mono" | "colorful" | "gradient" | "material" | "pic" | "custom";
+  category: StyleCategory;
   background: SquareStyle;
   light: SquareStyle;
   dark: SquareStyle;
@@ -97,6 +105,7 @@ export type PiecesStyle =
 
 export type BoardConfig = {
   size: number;
+  tiles: number;
   boardStyle: Style;
   piecesStyle: PiecesStyle;
   showBorder: boolean;

src/ui/App.css

@@ -66,13 +66,6 @@ body {
   padding: 20px;
 }
 
-.setup-box {
-  /* background: rgba(135, 207, 235, 0.1); */
-  height: 100vh;
-  grid-area: setup;
-  padding: 20px;
-}
-
 @media screen and (max-width: 1024px) {
   .layout {
     grid-template-columns: 1fr;

src/ui/App.tsx

@@ -4,7 +4,6 @@ import type { DeepReadonly } from "solid-js/store";
 import { Handlers } from "../types";
 import { State } from "../state";
 
-import Controls from "./components/Controls";
 import GameTabs from "./components/GameTabs";
 import SetupTabs from "./components/SetupTabs";
 

src/ui/components/Boards.css

@@ -0,0 +1,3 @@
+.boards {
+  text-align: left;
+}

src/ui/components/Boards.tsx

@@ -0,0 +1,54 @@
+import { Component, For, createSignal } from "solid-js";
+import { Handlers, StyleCategory } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Boards.css";
+import styles from "../../board/styles-board";
+import Board from "../../board/Board";
+
+type BoardPreview = {
+  name: string;
+  category: StyleCategory;
+  img: string;
+};
+
+const prepareBoards = async () => {
+  const boards = [];
+
+  const board = new Board({
+    size: 72,
+    tiles: 2,
+    showBorder: true,
+    showExtraInfo: false,
+  });
+
+  for (const style of Object.values(styles)) {
+    await board.updateConfig({ boardStyle: style });
+    await board.frame(null, {});
+    board.render();
+    boards.push({
+      name: style.name,
+      category: style.category,
+      img: board.toImgUrl(),
+    });
+  }
+
+  return boards;
+};
+
+const Boards: Component<{ handlers: Handlers }> = (props) => {
+  const [boards, setBoards] = createSignal<BoardPreview[]>([]);
+
+  prepareBoards().then((data) => setBoards(data));
+
+  return (
+    <Scrollable class="boards">
+      <For each={boards()}>
+        {(board) => {
+          return <img src={board.img} title={board.name} />;
+        }}
+      </For>
+    </Scrollable>
+  );
+};
+
+export default Boards;

src/ui/components/Moves.css

@@ -2,11 +2,10 @@
   font-size: 1.4rem;
   font-family: "Fira Mono";
   text-align: left;
-  /* height: 85vh; */
 }
 
 .move {
-  display: inline-block;
+  /* display: inline-block; */
   padding: 3px;
 }
 
@@ -14,13 +13,13 @@
   display: inline-block;
   width: 40px;
   text-align: right;
-  margin-right: 10px;
+  margin-right: 20px;
   color: #aaa;
 }
 
 .move__ply {
   display: inline-block;
-  width: 60px;
+  width: 70px;
   color: rgb(0, 173, 136);
 }
 

src/ui/components/Pieces.css

@@ -0,0 +1,2 @@
+.pieces {
+}

src/ui/components/Pieces.tsx

@@ -0,0 +1,10 @@
+import { Component, For } from "solid-js";
+import { Handlers } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Pieces.css";
+
+const Pieces: Component<{ handlers: Handlers }> = (props) => {
+  return <Scrollable class="pieces">Pieces</Scrollable>;
+};
+
+export default Pieces;

src/ui/components/SetupTabs.css

@@ -1,6 +1,15 @@
+.setup-box {
+  /* background: rgba(135, 207, 235, 0.1); */
+  height: 100vh;
+  grid-area: setup;
+  padding: 20px;
+}
+
 .setup {
   font-size: 1.6rem;
-  /* background: #0e0e13; */
+  height: 100%;
+  display: grid;
+  grid-template-rows: 38px 1fr;
 }
 
 .setup-tabs__btn {
@@ -13,6 +22,7 @@
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   cursor: pointer;
+  height: 38px;
 }
 
 .setup-tabs__btn:hover {

src/ui/components/SetupTabs.tsx

@@ -1,48 +1,53 @@
 import { Component, createSignal, Switch, Match } from "solid-js";
 import { Handlers } from "../../types";
 import "./SetupTabs.css";
+import Share from "./Share";
+import Boards from "./Boards";
+import Pieces from "./Pieces";
 
 const SetupTabs: Component<{ handlers: Handlers }> = (props) => {
   const [tab, setTab] = createSignal("share");
 
   return (
     <div class="setup">
-      <button
+      <div class="tabs">
-        class={
+        <button
-          "setup-tabs__btn" +
+          class={
-          (tab() === "share" ? " setup-tabs__btn--active" : "")
+            "setup-tabs__btn" +
-        }
+            (tab() === "share" ? " setup-tabs__btn--active" : "")
-        onClick={() => setTab("share")}
+          }
-      >
+          onClick={() => setTab("share")}
-        <i class="las la-share"></i> SHARE
+        >
-      </button>
+          <i class="las la-share"></i> SHARE
-      <button
+        </button>
-        class={
+        <button
-          "setup-tabs__btn" +
+          class={
-          (tab() === "boards" ? " setup-tabs__btn--active" : "")
+            "setup-tabs__btn" +
-        }
+            (tab() === "boards" ? " setup-tabs__btn--active" : "")
-        onClick={() => setTab("boards")}
+          }
-      >
+          onClick={() => setTab("boards")}
-        <i class="las la-chess-board"></i> BOARDS
+        >
-      </button>
+          <i class="las la-chess-board"></i> BOARDS
-      <button
+        </button>
-        class={
+        <button
-          "setup-tabs__btn" +
+          class={
-          (tab() === "pieces" ? " setup-tabs__btn--active" : "")
+            "setup-tabs__btn" +
-        }
+            (tab() === "pieces" ? " setup-tabs__btn--active" : "")
-        onClick={() => setTab("pieces")}
+          }
-      >
+          onClick={() => setTab("pieces")}
-        <i class="las la-chess"></i> PIECES
+        >
-      </button>
+          <i class="las la-chess"></i> PIECES
+        </button>
+      </div>
       <Switch>
         <Match when={tab() === "share"}>
-          <div class="temp">SHARE</div>
+          <Share handlers={props.handlers}></Share>
         </Match>
         <Match when={tab() === "boards"}>
-          <div class="temp">BOARDS</div>
+          <Boards handlers={props.handlers}></Boards>
         </Match>
         <Match when={tab() === "pieces"}>
-          <div class="temp">PIECES</div>
+          <Pieces handlers={props.handlers}></Pieces>
         </Match>
       </Switch>
     </div>

src/ui/components/Share.tsx

@@ -0,0 +1,10 @@
+import { Component, For } from "solid-js";
+import { Handlers } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Share.css";
+
+const Share: Component<{ handlers: Handlers }> = (props) => {
+  return <Scrollable class="share">Share</Scrollable>;
+};
+
+export default Share;

src/ui/components/reusable/Scrollable.css

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
+  width: 100%;
 }
 
 .scrollable__content::-webkit-scrollbar {