@scrabble-solver/scrabble-solver 2.10.6 → 2.10.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/.next/BUILD_ID +1 -1
  2. package/.next/build-manifest.json +7 -13
  3. package/.next/cache/.tsbuildinfo +1 -1
  4. package/.next/cache/eslint/.cache_8dgz12 +1 -1
  5. package/.next/cache/next-server.js.nft.json +1 -1
  6. package/.next/cache/webpack/client-production/0.pack +0 -0
  7. package/.next/cache/webpack/client-production/index.pack +0 -0
  8. package/.next/cache/webpack/edge-server-production/0.pack +0 -0
  9. package/.next/cache/webpack/edge-server-production/index.pack +0 -0
  10. package/.next/cache/webpack/server-production/0.pack +0 -0
  11. package/.next/cache/webpack/server-production/index.pack +0 -0
  12. package/.next/next-server.js.nft.json +1 -1
  13. package/.next/prerender-manifest.json +1 -1
  14. package/.next/routes-manifest.json +1 -1
  15. package/.next/server/chunks/176.js +4597 -568
  16. package/.next/server/chunks/290.js +3 -1
  17. package/.next/server/middleware-build-manifest.js +1 -1
  18. package/.next/server/pages/404.html +2 -2
  19. package/.next/server/pages/404.js.nft.json +1 -1
  20. package/.next/server/pages/500.html +2 -2
  21. package/.next/server/pages/_app.js +296 -13
  22. package/.next/server/pages/_app.js.nft.json +1 -1
  23. package/.next/server/pages/_document.js.nft.json +1 -1
  24. package/.next/server/pages/api/dictionary/[locale]/[word].js +18 -16
  25. package/.next/server/pages/api/solve.js +17 -0
  26. package/.next/server/pages/index.html +1 -9
  27. package/.next/server/pages/index.js +26 -12
  28. package/.next/server/pages/index.js.nft.json +1 -1
  29. package/.next/server/pages/index.json +1 -1
  30. package/.next/server/pages-manifest.json +2 -2
  31. package/.next/static/Cs23uxWG6AxS72F2yrjHu/_buildManifest.js +1 -0
  32. package/.next/static/chunks/pages/{404-ff35a4cf7f1ec85a.js → 404-8cab6d62fe4ead73.js} +1 -1
  33. package/.next/static/chunks/pages/_app-dcbbb823dc93a031.js +28 -0
  34. package/.next/static/chunks/pages/index-df1ff01aa82d2d4d.js +1 -0
  35. package/.next/static/css/bf2e969b88c4e3dd.css +2 -0
  36. package/.next/static/css/d1cc6b79b211b7b8.css +1 -0
  37. package/.next/trace +55 -55
  38. package/package.json +10 -9
  39. package/src/components/Badge/Badge.module.scss +1 -1
  40. package/src/components/Board/components/Cell/Cell.module.scss +32 -64
  41. package/src/components/Board/components/Cell/Cell.tsx +6 -0
  42. package/src/components/Board/components/Cell/CellPure.tsx +24 -22
  43. package/src/components/Button/Button.module.scss +2 -2
  44. package/src/components/Button/Button.tsx +1 -0
  45. package/src/components/Button/Link.tsx +1 -0
  46. package/src/components/Checkbox/Checkbox.tsx +1 -4
  47. package/src/components/Dictionary/Dictionary.tsx +28 -30
  48. package/src/components/DictionaryInput/DictionaryInput.tsx +3 -0
  49. package/src/components/{SquareButton/SquareButton.module.scss → IconButton/IconButton.module.scss} +1 -1
  50. package/src/components/{SquareButton/SquareButton.tsx → IconButton/IconButton.tsx} +7 -6
  51. package/src/components/{SquareButton → IconButton}/Link.tsx +3 -2
  52. package/src/components/IconButton/index.ts +1 -0
  53. package/src/components/Key/Key.module.scss +1 -1
  54. package/src/components/Logo/Logo.svg +44 -15
  55. package/src/components/LogoSplashScreen/LogoSplashScreen.module.scss +1 -1
  56. package/src/components/Modal/Modal.module.scss +4 -2
  57. package/src/components/Modal/Modal.tsx +3 -2
  58. package/src/components/NavButtons/NavButtons.tsx +37 -9
  59. package/src/components/Rack/Rack.module.scss +4 -0
  60. package/src/components/Rack/RackTile.tsx +5 -0
  61. package/src/components/Radio/Radio.tsx +1 -4
  62. package/src/components/Results/HeaderButton.tsx +1 -0
  63. package/src/components/Results/Result.tsx +1 -0
  64. package/src/components/Results/Results.module.scss +2 -3
  65. package/src/components/Results/SolveButton.tsx +1 -0
  66. package/src/components/SeoMessage/SeoMessage.tsx +19 -0
  67. package/src/components/SeoMessage/index.ts +1 -0
  68. package/src/components/Solver/Solver.module.scss +4 -0
  69. package/src/components/Solver/Solver.tsx +26 -8
  70. package/src/components/Solver/components/EmptyState/EmptyState.module.scss +1 -3
  71. package/src/components/Solver/components/InsertButton/InsertButton.module.scss +15 -0
  72. package/src/components/Solver/components/{ApplyButton/ApplyButton.tsx → InsertButton/InsertButton.tsx} +10 -6
  73. package/src/components/Solver/components/InsertButton/index.ts +1 -0
  74. package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss +37 -7
  75. package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx +41 -17
  76. package/src/components/Solver/components/SolveButton/SolveButton.tsx +11 -1
  77. package/src/components/Solver/components/index.ts +1 -2
  78. package/src/components/Tile/Tile.module.scss +49 -11
  79. package/src/components/Tile/Tile.tsx +26 -8
  80. package/src/components/Tile/TilePure.tsx +29 -19
  81. package/src/components/Tooltip/Tooltip.module.scss +7 -7
  82. package/src/components/Tooltip/useTooltip.tsx +14 -2
  83. package/src/components/index.ts +2 -1
  84. package/src/i18n/de.json +6 -0
  85. package/src/i18n/en.json +6 -0
  86. package/src/i18n/es.json +6 -0
  87. package/src/i18n/fa.json +6 -0
  88. package/src/i18n/fr.json +6 -0
  89. package/src/i18n/pl.json +6 -0
  90. package/src/icons/ArrowDown.svg +1 -1
  91. package/src/icons/ArrowLeft.svg +1 -1
  92. package/src/icons/ArrowRight.svg +1 -1
  93. package/src/icons/ArrowUp.svg +1 -1
  94. package/src/icons/ChevronDown.svg +1 -1
  95. package/src/icons/ChevronLeft.svg +1 -1
  96. package/src/icons/ChevronRight.svg +1 -1
  97. package/src/icons/Flag.svg +2 -2
  98. package/src/icons/FlagFill.svg +4 -0
  99. package/src/icons/List.svg +1 -1
  100. package/src/icons/Square.svg +4 -0
  101. package/src/icons/SquareFill.svg +4 -0
  102. package/src/icons/index.ts +3 -0
  103. package/src/modals/MenuModal/MenuModal.tsx +9 -3
  104. package/src/modals/RemainingTilesModal/components/Character/Character.module.scss +1 -1
  105. package/src/modals/RemainingTilesModal/components/Character/Character.tsx +1 -0
  106. package/src/modals/ResultsModal/ResultsModal.module.scss +1 -1
  107. package/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx +0 -1
  108. package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx +0 -1
  109. package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss +14 -24
  110. package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx +0 -1
  111. package/src/pages/_app.tsx +9 -5
  112. package/src/pages/api/dictionary/[locale]/[word].ts +3 -1
  113. package/src/pages/index.module.scss +1 -2
  114. package/src/pages/index.tsx +6 -0
  115. package/src/parameters/index.ts +10 -0
  116. package/src/state/sagas.ts +5 -2
  117. package/src/state/slices/boardSlice.ts +5 -5
  118. package/src/state/useTranslate.ts +5 -2
  119. package/src/styles/mixins.scss +4 -2
  120. package/src/styles/variables.scss +39 -32
  121. package/src/types/index.ts +7 -1
  122. package/.next/server/chunks/579.js +0 -3917
  123. package/.next/static/chunks/490-d29992f1c264d70e.js +0 -5
  124. package/.next/static/chunks/791-93aa8b8c22e488ac.js +0 -1
  125. package/.next/static/chunks/pages/_app-fa0661b072fc6af9.js +0 -24
  126. package/.next/static/chunks/pages/index-ded620fd5df96be0.js +0 -1
  127. package/.next/static/css/4482c4a0064d3807.css +0 -1
  128. package/.next/static/css/78e42ad01f580f64.css +0 -1
  129. package/.next/static/css/a943dd97164732d4.css +0 -1
  130. package/.next/static/iL0av55MV28b0MXfhKKt2/_buildManifest.js +0 -1
  131. package/src/components/Board/components/Cell/Button.tsx +0 -31
  132. package/src/components/Solver/components/ApplyButton/ApplyButton.module.scss +0 -5
  133. package/src/components/Solver/components/ApplyButton/index.ts +0 -1
  134. package/src/components/Solver/components/MobileControls/MobileControls.tsx +0 -62
  135. package/src/components/Solver/components/MobileControls/index.ts +0 -1
  136. package/src/components/SquareButton/index.ts +0 -1
  137. /package/.next/static/{iL0av55MV28b0MXfhKKt2 → Cs23uxWG6AxS72F2yrjHu}/_ssgManifest.js +0 -0
@@ -1,62 +1,91 @@
1
1
  <svg viewBox="0 0 682 166" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
2
+ <!-- S -->
2
3
  <g transform="rotate(0, 40, 40)">
3
4
  <path fill="#efe3ae" d="M 0,0 H 80 V 80 H 0 Z" />
4
- <path aria-label="S" d="m 51.167969,47.628907 q 0,3.046875 -1.476563,5.296875 -1.476562,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492187,-0.234375 -1.6875,-0.234375 -3.257813,-0.679687 -1.546875,-0.46875 -2.953125,-1.148438 v -6.75 q 2.4375,1.078125 5.0625,1.945313 2.625,0.867187 5.203125,0.867187 1.78125,0 2.859375,-0.46875 1.101563,-0.46875 1.59375,-1.289062 0.492188,-0.820313 0.492188,-1.875 0,-1.289063 -0.867188,-2.203125 -0.867187,-0.914063 -2.390625,-1.710938 -1.5,-0.796875 -3.398437,-1.710937 -1.195313,-0.5625 -2.601563,-1.359375 -1.40625,-0.820313 -2.671875,-1.992188 -1.265625,-1.171875 -2.085937,-2.835937 -0.796875,-1.6875 -0.796875,-4.03125 0,-3.070313 1.40625,-5.25 1.40625,-2.179688 4.007812,-3.328125 2.625,-1.171875 6.1875,-1.171875 2.671875,0 5.085938,0.632812 2.4375,0.609375 5.085937,1.78125 l -2.34375,5.648438 q -2.367187,-0.960938 -4.242187,-1.476563 -1.875,-0.539062 -3.820313,-0.539062 -1.359375,0 -2.320312,0.445312 -0.960938,0.421875 -1.453125,1.21875 -0.492188,0.773438 -0.492188,1.804688 0,1.21875 0.703125,2.0625 0.726563,0.820312 2.15625,1.59375 1.453125,0.773437 3.609375,1.804687 2.625,1.242188 4.476563,2.601563 1.875,1.335937 2.882812,3.164062 1.007813,1.804688 1.007813,4.5 z" />
5
+ <path d="m 51.167969,47.628907 q 0,3.046875 -1.476563,5.296875 -1.476562,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492187,-0.234375 -1.6875,-0.234375 -3.257813,-0.679687 -1.546875,-0.46875 -2.953125,-1.148438 v -6.75 q 2.4375,1.078125 5.0625,1.945313 2.625,0.867187 5.203125,0.867187 1.78125,0 2.859375,-0.46875 1.101563,-0.46875 1.59375,-1.289062 0.492188,-0.820313 0.492188,-1.875 0,-1.289063 -0.867188,-2.203125 -0.867187,-0.914063 -2.390625,-1.710938 -1.5,-0.796875 -3.398437,-1.710937 -1.195313,-0.5625 -2.601563,-1.359375 -1.40625,-0.820313 -2.671875,-1.992188 -1.265625,-1.171875 -2.085937,-2.835937 -0.796875,-1.6875 -0.796875,-4.03125 0,-3.070313 1.40625,-5.25 1.40625,-2.179688 4.007812,-3.328125 2.625,-1.171875 6.1875,-1.171875 2.671875,0 5.085938,0.632812 2.4375,0.609375 5.085937,1.78125 l -2.34375,5.648438 q -2.367187,-0.960938 -4.242187,-1.476563 -1.875,-0.539062 -3.820313,-0.539062 -1.359375,0 -2.320312,0.445312 -0.960938,0.421875 -1.453125,1.21875 -0.492188,0.773438 -0.492188,1.804688 0,1.21875 0.703125,2.0625 0.726563,0.820312 2.15625,1.59375 1.453125,0.773437 3.609375,1.804687 2.625,1.242188 4.476563,2.601563 1.875,1.335937 2.882812,3.164062 1.007813,1.804688 1.007813,4.5 z" />
5
6
  </g>
7
+
8
+ <!-- C -->
6
9
  <g transform="rotate(0, 126, 40)">
7
10
  <path fill="#c7d8f9" d="m 86,0 h 80 V 80 H 86 Z" />
8
- <path aria-label="C" d="m 129.57422,28.433595 q -2.08594,0 -3.70313,0.820312 -1.59375,0.796875 -2.69531,2.320313 -1.07812,1.523437 -1.64062,3.679687 -0.5625,2.15625 -0.5625,4.851563 0,3.632812 0.89062,6.210937 0.91406,2.554688 2.8125,3.914063 1.89844,1.335937 4.89844,1.335937 2.08594,0 4.17187,-0.46875 2.10938,-0.46875 4.57032,-1.335937 v 6.09375 q -2.27344,0.9375 -4.47657,1.335937 -2.20312,0.421875 -4.94531,0.421875 -5.29687,0 -8.71875,-2.179687 -3.39844,-2.203125 -5.03906,-6.140625 -1.64063,-3.960938 -1.64063,-9.234375 0,-3.890625 1.05469,-7.125 1.05469,-3.234375 3.09375,-5.601563 2.03906,-2.367187 5.03906,-3.65625 3,-1.289062 6.89063,-1.289062 2.55469,0 5.10937,0.65625 2.57813,0.632812 4.92188,1.757812 l -2.34375,5.90625 q -1.92188,-0.914062 -3.86719,-1.59375 -1.94531,-0.679687 -3.82031,-0.679687 z" />
11
+ <path d="m 129.57422,28.433595 q -2.08594,0 -3.70313,0.820312 -1.59375,0.796875 -2.69531,2.320313 -1.07812,1.523437 -1.64062,3.679687 -0.5625,2.15625 -0.5625,4.851563 0,3.632812 0.89062,6.210937 0.91406,2.554688 2.8125,3.914063 1.89844,1.335937 4.89844,1.335937 2.08594,0 4.17187,-0.46875 2.10938,-0.46875 4.57032,-1.335937 v 6.09375 q -2.27344,0.9375 -4.47657,1.335937 -2.20312,0.421875 -4.94531,0.421875 -5.29687,0 -8.71875,-2.179687 -3.39844,-2.203125 -5.03906,-6.140625 -1.64063,-3.960938 -1.64063,-9.234375 0,-3.890625 1.05469,-7.125 1.05469,-3.234375 3.09375,-5.601563 2.03906,-2.367187 5.03906,-3.65625 3,-1.289062 6.89063,-1.289062 2.55469,0 5.10937,0.65625 2.57813,0.632812 4.92188,1.757812 l -2.34375,5.90625 q -1.92188,-0.914062 -3.86719,-1.59375 -1.94531,-0.679687 -3.82031,-0.679687 z" />
9
12
  </g>
13
+
14
+ <!-- R -->
10
15
  <g transform="rotate(0, 212, 40)">
11
16
  <path fill="#efe3ae" d="m 172,0 h 80 v 80 h -80 z" />
12
- <path aria-label="R" d="m 210.45312,22.867188 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.398438 1.47656,2.273437 1.47656,5.742187 0,2.34375 -0.89062,4.101563 -0.89063,1.757812 -2.34375,2.976562 -1.45313,1.21875 -3.14063,1.992188 l 10.07813,14.929687 h -8.0625 l -8.17969,-13.148437 h -3.86719 v 13.148437 h -7.26562 V 22.867188 Z m -0.51562,5.953125 h -2.20313 v 9.257813 h 2.34375 q 3.60938,0 5.15625,-1.195313 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
17
+ <path d="m 210.45312,22.867188 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.398438 1.47656,2.273437 1.47656,5.742187 0,2.34375 -0.89062,4.101563 -0.89063,1.757812 -2.34375,2.976562 -1.45313,1.21875 -3.14063,1.992188 l 10.07813,14.929687 h -8.0625 l -8.17969,-13.148437 h -3.86719 v 13.148437 h -7.26562 V 22.867188 Z m -0.51562,5.953125 h -2.20313 v 9.257813 h 2.34375 q 3.60938,0 5.15625,-1.195313 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
13
18
  </g>
19
+
20
+ <!-- A -->
14
21
  <g transform="rotate(0, 298, 40)">
15
22
  <path fill="#efe3ae" d="m 258,0 h 80 v 80 h -80 z" />
16
- <path aria-label="A" d="m 306.73047,57.203126 -2.48438,-8.15625 h -12.49218 l -2.48438,8.15625 h -7.82812 l 12.09375,-34.40625 h 8.88281 l 12.14062,34.40625 z m -4.21875,-14.25 -2.48438,-7.96875 q -0.23437,-0.796875 -0.63281,-2.039063 -0.375,-1.265625 -0.77344,-2.554687 -0.375,-1.3125 -0.60937,-2.273438 -0.23438,0.960938 -0.65625,2.390625 -0.39844,1.40625 -0.77344,2.671875 -0.375,1.265625 -0.53906,1.804688 l -2.46094,7.96875 z" />
23
+ <path d="m 306.73047,57.203126 -2.48438,-8.15625 h -12.49218 l -2.48438,8.15625 h -7.82812 l 12.09375,-34.40625 h 8.88281 l 12.14062,34.40625 z m -4.21875,-14.25 -2.48438,-7.96875 q -0.23437,-0.796875 -0.63281,-2.039063 -0.375,-1.265625 -0.77344,-2.554687 -0.375,-1.3125 -0.60937,-2.273438 -0.23438,0.960938 -0.65625,2.390625 -0.39844,1.40625 -0.77344,2.671875 -0.375,1.265625 -0.53906,1.804688 l -2.46094,7.96875 z" />
17
24
  </g>
25
+
26
+ <!-- B -->
18
27
  <g transform="rotate(0, 384, 40)">
19
28
  <path fill="#c7d8f9" d="m 344,0 h 80 v 80 h -80 z" />
20
- <path aria-label="B" d="m 372.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 372.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
29
+ <path d="m 372.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 372.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
21
30
  </g>
31
+
32
+ <!-- B -->
22
33
  <g transform="rotate(0, 470, 40)">
23
34
  <path fill="#c7d8f9" d="m 430,0 h 80 v 80 h -80 z" />
24
- <path aria-label="B" d="m 458.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 458.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
35
+ <path d="m 458.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 458.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
25
36
  </g>
37
+
38
+ <!-- L -->
26
39
  <g transform="rotate(0, 556, 40)">
27
40
  <path fill="#efe3ae" d="m 516,0 h 80 v 80 h -80 z" />
28
- <path aria-label="L" d="M 546.75391,57.132813 V 22.867188 h 7.26562 v 28.265625 h 13.89844 v 6 z" />
41
+ <path d="M 546.75391,57.132813 V 22.867188 h 7.26562 v 28.265625 h 13.89844 v 6 z" />
29
42
  </g>
43
+
44
+ <!-- E -->
30
45
  <g transform="rotate(0, 642, 40)">
31
46
  <path fill="#efe3ae" d="m 602,0 h 80 v 80 h -80 z" />
32
- <path aria-label="E" d="M 652.60547,57.132813 H 632.87109 V 22.867188 h 19.73438 v 5.953125 h -12.46875 v 7.523438 h 11.60156 v 5.953125 h -11.60156 v 8.835937 h 12.46875 z" />
47
+ <path d="M 652.60547,57.132813 H 632.87109 V 22.867188 h 19.73438 v 5.953125 h -12.46875 v 7.523438 h 11.60156 v 5.953125 h -11.60156 v 8.835937 h 12.46875 z" />
33
48
  </g>
49
+
50
+ <!-- S -->
34
51
  <g transform="rotate(0, 40, 40)">
35
52
  <path fill="#efe3ae" d="m 0,86 h 80 v 80 H 0 Z" />
36
- <path aria-label="S" d="m 51.320312,133.6289 q 0,3.04688 -1.476562,5.29688 -1.476563,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492188,-0.23438 -1.6875,-0.23437 -3.257812,-0.67968 -1.546875,-0.46875 -2.953125,-1.14844 v -6.75 q 2.4375,1.07812 5.0625,1.94531 2.625,0.86719 5.203125,0.86719 1.78125,0 2.859375,-0.46875 1.101562,-0.46875 1.59375,-1.28906 0.492187,-0.82032 0.492187,-1.875 0,-1.28907 -0.867187,-2.20313 -0.867188,-0.91406 -2.390625,-1.71094 -1.5,-0.79687 -3.398438,-1.71093 -1.195312,-0.5625 -2.601562,-1.35938 -1.40625,-0.82031 -2.671875,-1.99219 Q 31,123.83203 30.179687,122.16797 q -0.796875,-1.6875 -0.796875,-4.03125 0,-3.07032 1.40625,-5.25 1.40625,-2.17969 4.007813,-3.32813 2.625,-1.17187 6.1875,-1.17187 2.671875,0 5.085937,0.63281 2.4375,0.60937 5.085938,1.78125 l -2.34375,5.64844 q -2.367188,-0.96094 -4.242188,-1.47657 -1.875,-0.53906 -3.820312,-0.53906 -1.359375,0 -2.320313,0.44531 -0.960937,0.42188 -1.453125,1.21875 -0.492187,0.77344 -0.492187,1.80469 0,1.21875 0.703125,2.0625 0.726562,0.82031 2.15625,1.59375 1.453125,0.77344 3.609375,1.80469 2.625,1.24219 4.476562,2.60156 1.875,1.33594 2.882813,3.16406 1.007812,1.80469 1.007812,4.5 z" />
53
+ <path d="m 51.320312,133.6289 q 0,3.04688 -1.476562,5.29688 -1.476563,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492188,-0.23438 -1.6875,-0.23437 -3.257812,-0.67968 -1.546875,-0.46875 -2.953125,-1.14844 v -6.75 q 2.4375,1.07812 5.0625,1.94531 2.625,0.86719 5.203125,0.86719 1.78125,0 2.859375,-0.46875 1.101562,-0.46875 1.59375,-1.28906 0.492187,-0.82032 0.492187,-1.875 0,-1.28907 -0.867187,-2.20313 -0.867188,-0.91406 -2.390625,-1.71094 -1.5,-0.79687 -3.398438,-1.71093 -1.195312,-0.5625 -2.601562,-1.35938 -1.40625,-0.82031 -2.671875,-1.99219 Q 31,123.83203 30.179687,122.16797 q -0.796875,-1.6875 -0.796875,-4.03125 0,-3.07032 1.40625,-5.25 1.40625,-2.17969 4.007813,-3.32813 2.625,-1.17187 6.1875,-1.17187 2.671875,0 5.085937,0.63281 2.4375,0.60937 5.085938,1.78125 l -2.34375,5.64844 q -2.367188,-0.96094 -4.242188,-1.47657 -1.875,-0.53906 -3.820312,-0.53906 -1.359375,0 -2.320313,0.44531 -0.960937,0.42188 -1.453125,1.21875 -0.492187,0.77344 -0.492187,1.80469 0,1.21875 0.703125,2.0625 0.726562,0.82031 2.15625,1.59375 1.453125,0.77344 3.609375,1.80469 2.625,1.24219 4.476562,2.60156 1.875,1.33594 2.882813,3.16406 1.007812,1.80469 1.007812,4.5 z" />
37
54
  </g>
55
+
56
+ <!-- O -->
38
57
  <g transform="rotate(0, 126, 40)">
39
58
  <path fill="#efe3ae" d="m 86,86 h 80 v 80 H 86 Z" />
40
- <path aria-label="O" d="m 142.3125,125.98828 q 0,3.96094 -0.98438,7.21875 -0.98437,3.23437 -3,5.57812 -1.99218,2.34375 -5.0625,3.60938 -3.07031,1.24219 -7.26562,1.24219 -4.19531,0 -7.26562,-1.24219 -3.07032,-1.26563 -5.08594,-3.60938 -1.99219,-2.34375 -2.97656,-5.60156 -0.98438,-3.25781 -0.98438,-7.24219 0,-5.32031 1.73438,-9.25781 1.75781,-3.96094 5.39062,-6.14062 3.63281,-2.17969 9.23438,-2.17969 5.57812,0 9.16406,2.17969 3.60937,2.17968 5.34375,6.14062 1.75781,3.96094 1.75781,9.30469 z m -25.00781,0 q 0,3.58594 0.89062,6.1875 0.91407,2.57812 2.83594,3.98437 1.92188,1.38282 4.96875,1.38282 3.09375,0 5.01562,-1.38282 1.92188,-1.40625 2.78907,-3.98437 0.89062,-2.60156 0.89062,-6.1875 0,-5.39063 -2.01562,-8.48438 -2.01563,-3.09375 -6.63281,-3.09375 -3.07032,0 -5.01563,1.40625 -1.92187,1.38282 -2.83594,3.98438 -0.89062,2.57812 -0.89062,6.1875 z" />
59
+ <path d="m 142.3125,125.98828 q 0,3.96094 -0.98438,7.21875 -0.98437,3.23437 -3,5.57812 -1.99218,2.34375 -5.0625,3.60938 -3.07031,1.24219 -7.26562,1.24219 -4.19531,0 -7.26562,-1.24219 -3.07032,-1.26563 -5.08594,-3.60938 -1.99219,-2.34375 -2.97656,-5.60156 -0.98438,-3.25781 -0.98438,-7.24219 0,-5.32031 1.73438,-9.25781 1.75781,-3.96094 5.39062,-6.14062 3.63281,-2.17969 9.23438,-2.17969 5.57812,0 9.16406,2.17969 3.60937,2.17968 5.34375,6.14062 1.75781,3.96094 1.75781,9.30469 z m -25.00781,0 q 0,3.58594 0.89062,6.1875 0.91407,2.57812 2.83594,3.98437 1.92188,1.38282 4.96875,1.38282 3.09375,0 5.01562,-1.38282 1.92188,-1.40625 2.78907,-3.98437 0.89062,-2.60156 0.89062,-6.1875 0,-5.39063 -2.01562,-8.48438 -2.01563,-3.09375 -6.63281,-3.09375 -3.07032,0 -5.01563,1.40625 -1.92187,1.38282 -2.83594,3.98438 -0.89062,2.57812 -0.89062,6.1875 z" />
41
60
  </g>
61
+
62
+ <!-- L -->
42
63
  <g transform="rotate(0, 212, 40)">
43
64
  <path fill="#efe3ae" d="m 172,86 h 80 v 80 h -80 z" />
44
- <path aria-label="L" d="m 202.75391,143.13281 v -34.26563 h 7.26562 v 28.26563 h 13.89844 v 6 z" />
65
+ <path d="m 202.75391,143.13281 v -34.26563 h 7.26562 v 28.26563 h 13.89844 v 6 z" />
45
66
  </g>
67
+
68
+ <!-- V -->
46
69
  <g transform="rotate(0, 298, 40)">
47
70
  <path fill="#f7c2aa" d="m 258,86 h 80 v 80 h -80 z" />
48
- <path aria-label="V" d="m 313.59766,108.86718 -11.64844,34.26563 h -7.92188 l -11.625,-34.26563 h 7.33594 l 6.44531,20.39063 q 0.16407,0.51562 0.53907,1.94531 0.375,1.40625 0.75,3 0.39843,1.57031 0.53906,2.60156 0.14062,-1.03125 0.49219,-2.60156 0.375,-1.57031 0.72656,-2.97656 0.375,-1.42969 0.53906,-1.96875 l 6.49219,-20.39063 z" />
71
+ <path d="m 313.59766,108.86718 -11.64844,34.26563 h -7.92188 l -11.625,-34.26563 h 7.33594 l 6.44531,20.39063 q 0.16407,0.51562 0.53907,1.94531 0.375,1.40625 0.75,3 0.39843,1.57031 0.53906,2.60156 0.14062,-1.03125 0.49219,-2.60156 0.375,-1.57031 0.72656,-2.97656 0.375,-1.42969 0.53906,-1.96875 l 6.49219,-20.39063 z" />
49
72
  </g>
73
+
74
+ <!-- E -->
50
75
  <g transform="rotate(0, 384, 40)">
51
76
  <path fill="#efe3ae" d="m 344,86 h 80 v 80 h -80 z" />
52
- <path aria-label="E" d="m 394.60547,143.13281 h -19.73438 v -34.26563 h 19.73438 v 5.95313 h -12.46875 v 7.52344 h 11.60156 v 5.95312 h -11.60156 v 8.83594 h 12.46875 z" />
77
+ <path d="m 394.60547,143.13281 h -19.73438 v -34.26563 h 19.73438 v 5.95313 h -12.46875 v 7.52344 h 11.60156 v 5.95312 h -11.60156 v 8.83594 h 12.46875 z" />
53
78
  </g>
79
+
80
+ <!-- R -->
54
81
  <g transform="rotate(0, 470, 40)">
55
82
  <path fill="#efe3ae" d="m 430,86 h 80 v 80 h -80 z" />
56
- <path aria-label="R" d="m 468.45312,108.86718 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.39844 1.47656,2.27344 1.47656,5.74219 0,2.34375 -0.89062,4.10156 -0.89063,1.75781 -2.34375,2.97656 -1.45313,1.21875 -3.14063,1.99219 l 10.07813,14.92969 h -8.0625 l -8.17969,-13.14844 h -3.86719 v 13.14844 h -7.26562 v -34.26563 z m -0.51562,5.95313 h -2.20313 v 9.25781 h 2.34375 q 3.60938,0 5.15625,-1.19531 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
83
+ <path d="m 468.45312,108.86718 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.39844 1.47656,2.27344 1.47656,5.74219 0,2.34375 -0.89062,4.10156 -0.89063,1.75781 -2.34375,2.97656 -1.45313,1.21875 -3.14063,1.99219 l 10.07813,14.92969 h -8.0625 l -8.17969,-13.14844 h -3.86719 v 13.14844 h -7.26562 v -34.26563 z m -0.51562,5.95313 h -2.20313 v 9.25781 h 2.34375 q 3.60938,0 5.15625,-1.19531 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
57
84
  </g>
85
+
86
+ <!-- 2 -->
58
87
  <g transform="rotate(0, 642, 40)">
59
88
  <path fill="#bae3ba" d="m 602,86 h 80 v 80 h -80 z" />
60
- <path aria-label="2" d="m 654.15234,143.3789 h -23.95312 v -5.03906 l 8.60156,-8.69531 q 2.60156,-2.67188 4.17188,-4.45313 1.59375,-1.80468 2.29687,-3.28125 0.72656,-1.47656 0.72656,-3.16406 0,-2.03906 -1.14843,-3.04687 -1.125,-1.03125 -3.02344,-1.03125 -1.99219,0 -3.86719,0.91406 -1.875,0.91406 -3.91406,2.60156 l -3.9375,-4.66406 q 1.47656,-1.26563 3.11719,-2.39063 1.66406,-1.125 3.84375,-1.80468 2.20312,-0.70313 5.27343,-0.70313 3.375,0 5.78907,1.21875 2.4375,1.21875 3.75,3.32813 1.3125,2.08593 1.3125,4.73437 0,2.83594 -1.125,5.17969 -1.125,2.34375 -3.28125,4.64062 -2.13282,2.29688 -5.15625,5.08594 l -4.40625,4.14844 v 0.32812 h 14.92968 z" />
89
+ <path d="m 654.15234,143.3789 h -23.95312 v -5.03906 l 8.60156,-8.69531 q 2.60156,-2.67188 4.17188,-4.45313 1.59375,-1.80468 2.29687,-3.28125 0.72656,-1.47656 0.72656,-3.16406 0,-2.03906 -1.14843,-3.04687 -1.125,-1.03125 -3.02344,-1.03125 -1.99219,0 -3.86719,0.91406 -1.875,0.91406 -3.91406,2.60156 l -3.9375,-4.66406 q 1.47656,-1.26563 3.11719,-2.39063 1.66406,-1.125 3.84375,-1.80468 2.20312,-0.70313 5.27343,-0.70313 3.375,0 5.78907,1.21875 2.4375,1.21875 3.75,3.32813 1.3125,2.08593 1.3125,4.73437 0,2.83594 -1.125,5.17969 -1.125,2.34375 -3.28125,4.64062 -2.13282,2.29688 -5.15625,5.08594 l -4.40625,4.14844 v 0.32812 h 14.92968 z" />
61
90
  </g>
62
91
  </svg>
@@ -43,7 +43,7 @@ $hiding-duration: 200ms;
43
43
 
44
44
  .logoGrayscale {
45
45
  filter: grayscale(1);
46
- opacity: 0.3;
46
+ opacity: var(--opacity--disabled);
47
47
  }
48
48
 
49
49
  .logoColor {
@@ -60,12 +60,14 @@
60
60
  }
61
61
 
62
62
  .container {
63
+ --box-shadow--offset: 1px;
64
+ --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
65
+
63
66
  display: flex;
64
67
  flex-direction: column;
65
68
  height: 100%;
66
69
  background-color: var(--color--background);
67
- transition: var(--transition);
68
- transition-duration: var(--transition--duration--long);
70
+ transition: var(--transition--long);
69
71
  transform: translateX(var(--modal--width));
70
72
  opacity: 0;
71
73
 
@@ -7,7 +7,7 @@ import { CrossSquareFill } from 'icons';
7
7
  import { TRANSITION_DURATION_LONG } from 'parameters';
8
8
  import { useTranslate } from 'state';
9
9
 
10
- import SquareButton from '../SquareButton';
10
+ import IconButton from '../IconButton';
11
11
 
12
12
  import { Section } from './components';
13
13
  import styles from './Modal.module.scss';
@@ -58,7 +58,8 @@ const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, o
58
58
  <div className={styles.header}>
59
59
  <h1 className={styles.title}>{title}</h1>
60
60
 
61
- <SquareButton
61
+ <IconButton
62
+ aria-label={translate('common.close')}
62
63
  className={styles.closeButton}
63
64
  Icon={CrossSquareFill}
64
65
  tooltip={translate('common.close')}
@@ -6,7 +6,7 @@ import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons'
6
6
  import { GITHUB_PROJECT_URL } from 'parameters';
7
7
  import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
8
8
 
9
- import SquareButton from '../SquareButton';
9
+ import IconButton from '../IconButton';
10
10
 
11
11
  import styles from './NavButtons.module.scss';
12
12
 
@@ -37,13 +37,25 @@ const NavButtons: FunctionComponent<Props> = ({
37
37
  return (
38
38
  <div className={styles.navButtons}>
39
39
  <div className={styles.group}>
40
- <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
40
+ <IconButton
41
+ aria-label={translate('common.clear')}
42
+ className={styles.button}
43
+ Icon={Eraser}
44
+ tooltip={translate('common.clear')}
45
+ onClick={onClear}
46
+ />
41
47
  </div>
42
48
 
43
49
  <div className={styles.separator} />
44
50
 
45
51
  <div className={styles.group}>
46
- <SquareButton className={styles.button} Icon={List} tooltip={translate('menu')} onClick={onShowMenu} />
52
+ <IconButton
53
+ aria-label={translate('menu')}
54
+ className={styles.button}
55
+ Icon={List}
56
+ tooltip={translate('menu')}
57
+ onClick={onShowMenu}
58
+ />
47
59
  </div>
48
60
  </div>
49
61
  );
@@ -52,13 +64,20 @@ const NavButtons: FunctionComponent<Props> = ({
52
64
  return (
53
65
  <div className={styles.navButtons}>
54
66
  <div className={styles.group}>
55
- <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
67
+ <IconButton
68
+ aria-label={translate('common.clear')}
69
+ className={styles.button}
70
+ Icon={Eraser}
71
+ tooltip={translate('common.clear')}
72
+ onClick={onClear}
73
+ />
56
74
  </div>
57
75
 
58
76
  <div className={styles.separator} />
59
77
 
60
78
  <div className={styles.group}>
61
- <SquareButton
79
+ <IconButton
80
+ aria-label={translate('remaining-tiles')}
62
81
  className={classNames(styles.button, {
63
82
  [styles.error]: hasOverusedTiles,
64
83
  })}
@@ -67,7 +86,8 @@ const NavButtons: FunctionComponent<Props> = ({
67
86
  onClick={onShowRemainingTiles}
68
87
  />
69
88
 
70
- <SquareButton
89
+ <IconButton
90
+ aria-label={translate('words')}
71
91
  className={classNames(styles.button, {
72
92
  [styles.error]: hasInvalidWords,
73
93
  })}
@@ -80,7 +100,8 @@ const NavButtons: FunctionComponent<Props> = ({
80
100
  <div className={styles.separator} />
81
101
 
82
102
  <div className={styles.group}>
83
- <SquareButton.Link
103
+ <IconButton.Link
104
+ aria-label={translate('github')}
84
105
  className={styles.button}
85
106
  href={GITHUB_PROJECT_URL}
86
107
  Icon={Github}
@@ -94,7 +115,8 @@ const NavButtons: FunctionComponent<Props> = ({
94
115
 
95
116
  <div className={styles.group}>
96
117
  {!isTouchDevice && (
97
- <SquareButton
118
+ <IconButton
119
+ aria-label={translate('keyMap')}
98
120
  className={styles.button}
99
121
  Icon={Keyboard}
100
122
  tooltip={translate('keyMap')}
@@ -102,7 +124,13 @@ const NavButtons: FunctionComponent<Props> = ({
102
124
  />
103
125
  )}
104
126
 
105
- <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
127
+ <IconButton
128
+ aria-label={translate('settings')}
129
+ className={styles.button}
130
+ Icon={Cog}
131
+ tooltip={translate('settings')}
132
+ onClick={onShowSettings}
133
+ />
106
134
  </div>
107
135
  </div>
108
136
  );
@@ -9,4 +9,8 @@
9
9
  @include focus-effect;
10
10
 
11
11
  --background-color: var(--color--background);
12
+
13
+ &:focus-within {
14
+ z-index: 1;
15
+ }
12
16
  }
@@ -18,6 +18,7 @@ import {
18
18
  selectCharacterIsValid,
19
19
  selectCharacterPoints,
20
20
  selectConfig,
21
+ selectLocale,
21
22
  useTranslate,
22
23
  useTypedSelector,
23
24
  } from 'state';
@@ -49,6 +50,7 @@ const RackTile: FunctionComponent<Props> = ({
49
50
  }) => {
50
51
  const dispatch = useDispatch();
51
52
  const translate = useTranslate();
53
+ const locale = useTypedSelector(selectLocale);
52
54
  const config = useTypedSelector(selectConfig);
53
55
  const points = useTypedSelector((state) => selectCharacterPoints(state, character));
54
56
  const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
@@ -91,6 +93,9 @@ const RackTile: FunctionComponent<Props> = ({
91
93
 
92
94
  return (
93
95
  <Tile
96
+ aria-label={translate('rack.tile.location', {
97
+ index: (index + 1).toLocaleString(locale),
98
+ })}
94
99
  autoFocus={index === 0}
95
100
  className={styles.tile}
96
101
  character={character === null ? undefined : character}
@@ -8,24 +8,21 @@ interface Props {
8
8
  children?: ReactNode;
9
9
  className?: string;
10
10
  disabled?: boolean;
11
- id: string;
12
11
  name: string;
13
12
  value: string;
14
13
  onChange: ChangeEventHandler<HTMLInputElement>;
15
14
  }
16
15
 
17
- const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, value, onChange }) => (
16
+ const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, name, value, onChange }) => (
18
17
  <label
19
18
  className={classNames(styles.radio, className, {
20
19
  [styles.checked]: checked,
21
20
  })}
22
- htmlFor={id}
23
21
  >
24
22
  <input
25
23
  checked={checked}
26
24
  className={styles.input}
27
25
  disabled={disabled}
28
- id={id}
29
26
  name={name}
30
27
  type="radio"
31
28
  value={value}
@@ -34,6 +34,7 @@ const HeaderButton = ({ column }: Props): ReactElement => {
34
34
 
35
35
  return (
36
36
  <button
37
+ aria-label={translate(column.translationKey)}
37
38
  className={classNames(styles.headerButton, column.className)}
38
39
  key={column.id}
39
40
  type="button"
@@ -43,6 +43,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
43
43
 
44
44
  return (
45
45
  <button
46
+ aria-label={result.word}
46
47
  className={classNames(styles.result, {
47
48
  [styles.highlighted]: index === highlightedIndex,
48
49
  })}
@@ -31,7 +31,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
31
31
  justify-content: space-between;
32
32
  border-bottom: var(--border);
33
33
  font-weight: 700;
34
- overflow: auto;
35
34
  }
36
35
 
37
36
  .headerButton {
@@ -46,7 +45,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
46
45
  &:focus,
47
46
  &:hover {
48
47
  background-color: var(--color--primary);
49
- color: white;
48
+ color: var(--color--primary--opposite);
50
49
  }
51
50
  }
52
51
 
@@ -74,7 +73,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
74
73
  &.highlighted {
75
74
  &:not(:disabled) {
76
75
  background-color: var(--color--primary);
77
- color: white;
76
+ color: var(--color--primary--opposite);
78
77
  }
79
78
  }
80
79
  }
@@ -31,6 +31,7 @@ const SolveButton: FunctionComponent<Props> = ({ className }) => {
31
31
 
32
32
  return (
33
33
  <Button
34
+ aria-label={translate('results.solve')}
34
35
  className={className}
35
36
  disabled={isLoading || !isOutdated || !hasTiles}
36
37
  Icon={Search}
@@ -0,0 +1,19 @@
1
+ import { CSSProperties, FunctionComponent } from 'react';
2
+
3
+ const INVISIBLE_STYLE: CSSProperties = {
4
+ color: 'transparent',
5
+ pointerEvents: 'none',
6
+ position: 'absolute',
7
+ userSelect: 'none',
8
+ transform: 'translateY(-9999px)',
9
+ };
10
+
11
+ const SeoMessage: FunctionComponent = () => (
12
+ <p style={INVISIBLE_STYLE}>
13
+ Scrabble Solver 2 is a free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring words
14
+ using given letters and board state. Available in English, French, German, Polish & Spanish. Source code is
15
+ available on GitHub - contributions are welcome!
16
+ </p>
17
+ );
18
+
19
+ export default SeoMessage;
@@ -0,0 +1 @@
1
+ export { default } from './SeoMessage';
@@ -109,6 +109,10 @@
109
109
  width: 100%;
110
110
  }
111
111
 
112
+ .emptyState {
113
+ margin-top: var(--spacing);
114
+ }
115
+
112
116
  .solve {
113
117
  --spacing: var(--spacing--l);
114
118
 
@@ -17,10 +17,14 @@ import {
17
17
  } from 'parameters';
18
18
  import {
19
19
  resultsSlice,
20
+ selectAreResultsOutdated,
20
21
  selectConfig,
21
22
  selectResultCandidate,
23
+ selectSolveError,
22
24
  selectSortedFilteredResults,
25
+ selectSortedResults,
23
26
  solveSlice,
27
+ useTranslate,
24
28
  useTypedSelector,
25
29
  } from 'state';
26
30
 
@@ -31,7 +35,7 @@ import Rack from '../Rack';
31
35
  import Results from '../Results';
32
36
  import Well from '../Well';
33
37
 
34
- import { MobileControls, SolveButton } from './components';
38
+ import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
35
39
  import styles from './Solver.module.scss';
36
40
 
37
41
  interface Props {
@@ -44,6 +48,7 @@ interface Props {
44
48
  // eslint-disable-next-line max-statements
45
49
  const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
46
50
  const dispatch = useDispatch();
51
+ const translate = useTranslate();
47
52
  const isTouchDevice = useIsTouchDevice();
48
53
  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
49
54
  const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
@@ -58,7 +63,10 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
58
63
  isLessThanM ? Number.POSITIVE_INFINITY : 0,
59
64
  );
60
65
  const config = useTypedSelector(selectConfig);
66
+ const error = useTypedSelector(selectSolveError);
67
+ const isOutdated = useTypedSelector(selectAreResultsOutdated);
61
68
  const resultCandidate = useTypedSelector(selectResultCandidate);
69
+ const allResults = useTypedSelector(selectSortedResults);
62
70
  const results = useTypedSelector(selectSortedFilteredResults);
63
71
  const [bestResult] = results || [];
64
72
  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
@@ -116,10 +124,10 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
116
124
  };
117
125
 
118
126
  useEffect(() => {
119
- if (bestResult) {
127
+ if (isLessThanL && bestResult && !isOutdated) {
120
128
  dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
121
129
  }
122
- }, [bestResult, dispatch]);
130
+ }, [bestResult, dispatch, isLessThanL, isOutdated]);
123
131
 
124
132
  return (
125
133
  <div className={classNames(styles.solver, className)}>
@@ -155,11 +163,21 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
155
163
  </form>
156
164
 
157
165
  {isLessThanL && (
158
- <MobileControls
159
- className={styles.controls}
160
- style={{ maxWidth: maxControlsWidth }}
161
- onShowResults={onShowResults}
162
- />
166
+ <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
167
+ <ResultCandidatePicker onResultClick={onShowResults} />
168
+
169
+ {error && (
170
+ <EmptyState className={styles.emptyState} variant="error">
171
+ {error.message}
172
+ </EmptyState>
173
+ )}
174
+
175
+ {allResults && allResults.length === 0 && !isOutdated && (
176
+ <EmptyState className={styles.emptyState} variant="warning">
177
+ {translate('results.empty-state.no-results')}
178
+ </EmptyState>
179
+ )}
180
+ </div>
163
181
  )}
164
182
  </div>
165
183
  </div>
@@ -4,9 +4,7 @@
4
4
  width: 100%;
5
5
  border: var(--border);
6
6
  border-radius: var(--border--radius);
7
- background-color: white;
8
- box-shadow: var(--box-shadow);
9
- cursor: pointer;
7
+ background-color: var(--color--white);
10
8
  text-align: center;
11
9
  }
12
10
 
@@ -0,0 +1,15 @@
1
+ @import 'styles/mixins';
2
+
3
+ .insertButton {
4
+ @include media('>=s') {
5
+ padding: var(--spacing--m) var(--spacing--xl);
6
+ }
7
+
8
+ @include media('<xs') {
9
+ padding: var(--spacing--m);
10
+ }
11
+ }
12
+
13
+ .icon {
14
+ transform: scale(1.5);
15
+ }
@@ -1,20 +1,23 @@
1
+ import classNames from 'classnames';
1
2
  import { FunctionComponent } from 'react';
2
3
  import { useDispatch } from 'react-redux';
3
4
 
4
5
  import { Check } from 'icons';
5
- import { resultsSlice, selectResultCandidate, useTypedSelector } from 'state';
6
+ import { resultsSlice, selectAreResultsOutdated, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
6
7
 
7
8
  import Button from '../../../Button';
8
9
 
9
- import styles from './ApplyButton.module.scss';
10
+ import styles from './InsertButton.module.scss';
10
11
 
11
12
  interface Props {
12
13
  className?: string;
13
14
  }
14
15
 
15
- const ApplyButton: FunctionComponent<Props> = ({ className }) => {
16
+ const InsertButton: FunctionComponent<Props> = ({ className }) => {
16
17
  const dispatch = useDispatch();
18
+ const translate = useTranslate();
17
19
  const resultCandidate = useTypedSelector(selectResultCandidate);
20
+ const isOutdated = useTypedSelector(selectAreResultsOutdated);
18
21
 
19
22
  const handleClick = () => {
20
23
  if (resultCandidate) {
@@ -24,8 +27,9 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
24
27
 
25
28
  return (
26
29
  <Button
27
- className={className}
28
- disabled={!resultCandidate}
30
+ aria-label={translate('results.insert')}
31
+ className={classNames(styles.insertButton, className)}
32
+ disabled={isOutdated || !resultCandidate}
29
33
  Icon={Check}
30
34
  iconClassName={styles.icon}
31
35
  type="submit"
@@ -35,4 +39,4 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
35
39
  );
36
40
  };
37
41
 
38
- export default ApplyButton;
42
+ export default InsertButton;
@@ -0,0 +1 @@
1
+ export { default } from './InsertButton';