From 8e9cc77ce6ab6eed06e124c9b128b02c87622f60 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Fri, 11 Feb 2022 00:45:22 +0100 Subject: [PATCH] WIP --- src/board/Board.ts | 2 - src/main.tsx | 3 - src/state.ts | 2 + src/test-data/pgns.ts | 213 +++----------------------------- src/types.ts | 2 + src/ui/App.css | 50 +++++++- src/ui/components/GameTabs.css | 14 +-- src/ui/components/Load.css | 28 ----- src/ui/components/SetupTabs.css | 14 +-- src/ui/components/Share.css | 42 +++++++ src/ui/components/Share.tsx | 139 ++++++++++++++++++++- 11 files changed, 249 insertions(+), 260 deletions(-) diff --git a/src/board/Board.ts b/src/board/Board.ts index 145029d..bdccca3 100644 --- a/src/board/Board.ts +++ b/src/board/Board.ts @@ -195,8 +195,6 @@ class Board { canvas.width = this.size; canvas.height = this.size + this.margin * 2; - console.log({ style: this.style }); - const { background, dark, light, border, coords } = this.style; await drawRectangle(ctx, this.width, this.height, 0, 0, border); diff --git a/src/main.tsx b/src/main.tsx index 25b9821..7b16c91 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -62,8 +62,6 @@ const main = async () => { const player = new Player(board, gameConfig); const game = new Game().loadPGN(pgn); - console.log(game.getMoves()); - setState({ moves: game.getMoves() }); const handlers = { @@ -117,7 +115,6 @@ const main = async () => { ); const $board = document.querySelector("#board"); - console.log({ $board }); $board?.appendChild(board.canvas); // const moves = new Moves($moves as HTMLElement, player).load(game.getMoves()); diff --git a/src/state.ts b/src/state.ts index ba0729b..e9e5881 100644 --- a/src/state.ts +++ b/src/state.ts @@ -20,6 +20,8 @@ const gameConfig: GameConfig = { fromPly: null, toPly: null, loop: true, + format: "GIF", + size: "M", }; export type State = { diff --git a/src/test-data/pgns.ts b/src/test-data/pgns.ts index 5002d9c..4494e41 100644 --- a/src/test-data/pgns.ts +++ b/src/test-data/pgns.ts @@ -22,203 +22,26 @@ 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"] + `[Event "Paris"] +[Site "Paris FRA"] +[Date "1858.??.??"] +[EventDate "?"] +[Round "?"] [Result "1-0"] -[WhiteElo "2855"] -[BlackElo "2782"] -[TimeControl "5400+30"] +[White "Paul Morphy"] +[Black "Duke Karl / Count Isouard"] +[ECO "C41"] +[WhiteElo "?"] +[BlackElo "?"] +[PlyCount "33"] -{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`, +1.e4 e5 2.Nf3 d6 3.d4 Bg4 {This is a weak move +already.--Fischer} 4.dxe5 Bxf3 5.Qxf3 dxe5 6.Bc4 Nf6 7.Qb3 Qe7 +8.Nc3 c6 9.Bg5 {Black is in what's like a zugzwang position +here. He can't develop the [Queen's] knight because the pawn +is hanging, the bishop is blocked because of the +Queen.--Fischer} b5 10.Nxb5 cxb5 11.Bxb5+ Nbd7 12.O-O-O Rd8 +13.Rxd7 Rxd7 14.Rd1 Qe6 15.Bxd7+ Nxd7 16.Qb8+ Nxb8 17.Rd8# 1-0`, ]; export default pgns; diff --git a/src/types.ts b/src/types.ts index b67fe4f..5e30d97 100644 --- a/src/types.ts +++ b/src/types.ts @@ -136,6 +136,8 @@ export type GameConfig = { fromPly: number | null; toPly: number | null; loop: boolean; + format: "GIF" | "MP4" | "WebM"; + size: "XS" | "S" | "M" | "L" | "XL"; }; export type MaterialCount = { diff --git a/src/ui/App.css b/src/ui/App.css index b6bace7..046ef95 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -22,6 +22,46 @@ body { font-family: Ubuntu, sans-serif; } +button { + padding: 10px; + font-family: "Ubuntu"; + font-size: 1.5rem; + background: rgb(0, 173, 136); + color: #0e0e13; + border-radius: 5px; + width: 100%; +} + +button:hover { + background: rgb(0, 207, 162); + cursor: pointer; +} + +input, +textarea { + width: 100%; + padding: 10px; + font-family: "Fira Mono"; + font-size: 1.4rem; + margin-bottom: 10px; + background: #20242a; + border: solid 1px #2d323a; + color: #acbddb; + outline: none; +} + +input:focus, +textarea:focus { + border-color: rgb(0, 87, 68); +} + +h2 { + color: #aaa; + text-align: left; + font-size: 1.8rem; + margin: 30px 0 10px 0; +} + .dark { background-color: #191d24; /* background-image: url(src/ui/img/pattern.png); */ @@ -35,12 +75,6 @@ body { } .board { - /* width: 600px; - height: 600px; - width: 800px; - height: 800px; */ - /* width: 1024px; - height: 1024px; */ box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 5px; max-width: 100%; @@ -69,6 +103,10 @@ body { @media screen and (max-width: 1024px) { .layout { grid-template-columns: 1fr; + grid-template-areas: + "board" + "moves" + "setup"; } .moves-box { diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css index fbc0130..7a62304 100644 --- a/src/ui/components/GameTabs.css +++ b/src/ui/components/GameTabs.css @@ -13,21 +13,11 @@ .game-tabs__btn { width: 48%; - background: rgb(0, 173, 136); - color: #0e0e13; - padding: 10px; - font-family: Ubuntu; - font-size: 1.5rem; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - cursor: pointer; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 38px; } -.game-tabs__btn:hover { - background: rgb(0, 207, 162); -} - .game-tabs__btn--active { width: 50%; background: #0e0e13; diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css index d2853c8..3de5fba 100644 --- a/src/ui/components/Load.css +++ b/src/ui/components/Load.css @@ -5,24 +5,6 @@ border-bottom-right-radius: 5px; } -.load__fen-input, -.load__pgn-input { - width: 100%; - padding: 10px; - font-family: "Fira Mono"; - font-size: 1.4rem; - margin-bottom: 10px; - background: #20242a; - border: solid 1px #2d323a; - color: #acbddb; - outline: none; -} - -.load__fen-input:focus, -.load__pgn-input:focus { - border-color: rgb(0, 87, 68); -} - .load__pgn-input { height: 30vh; margin-top: 20px; @@ -31,14 +13,4 @@ .load__fen-btn, .load__pgn-btn { width: 100%; - padding: 10px; - font-family: "Ubuntu"; - font-size: 1.5rem; - background: rgb(0, 173, 136); -} - -.load__fen-btn:hover, -.load__pgn-btn:hover { - background: rgb(0, 207, 162); - cursor: pointer; } diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css index f2debf5..eab6035 100644 --- a/src/ui/components/SetupTabs.css +++ b/src/ui/components/SetupTabs.css @@ -14,21 +14,11 @@ .setup-tabs__btn { width: 32%; - background: rgb(0, 173, 136); - color: #0e0e13; - padding: 10px; - font-family: Ubuntu; - font-size: 1.5rem; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - cursor: pointer; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 38px; } -.setup-tabs__btn:hover { - background: rgb(0, 207, 162); -} - .setup-tabs__btn--active { background: #0e0e13; color: #aaa; diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css index e69de29..b4430fb 100644 --- a/src/ui/components/Share.css +++ b/src/ui/components/Share.css @@ -0,0 +1,42 @@ +.share__format, +.share__size { + padding: 10px; + border-radius: 0; + margin-bottom: 10px; + opacity: 0.5; +} + +.share__format { + width: 33.33%; +} + +.share__size { + width: 20%; +} + +.share__format--first, +.share__size--first { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.share__format--last, +.share__size--last { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.share__format--active, +.share__size--active { + opacity: 1; +} + +.share__format--active:hover, +.share__size--active:hover { + background: rgb(0, 173, 136); + cursor: default; +} + +.share__btn { + margin-bottom: 10px; +} diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx index ad9cdcb..7d0dfb5 100644 --- a/src/ui/components/Share.tsx +++ b/src/ui/components/Share.tsx @@ -1,10 +1,145 @@ -import { Component, For } from "solid-js"; +import { Component } from "solid-js"; import { Handlers } from "../../types"; import Scrollable from "./reusable/Scrollable"; +import { state, setState } from "../../state"; import "./Share.css"; const Share: Component<{ handlers: Handlers }> = (props) => { - return ; + return ( + + ); }; export default Share;