GameListView.jsx 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import React from "react";
  2. import { useTranslation, Trans } from "react-i18next";
  3. import styled from "styled-components";
  4. import { useQuery } from "react-query";
  5. import SliderRange from "../components/ui/SliderRange";
  6. import Spinner from "./Spinner";
  7. import playerSVG from "../images/player.svg";
  8. import languageSVG from "../images/language.svg";
  9. import clockSVG from "../images/clock.svg";
  10. import { getGames } from "../utils/api";
  11. import { search } from "./utils";
  12. import GameListItem from "./GameListItem";
  13. import { StyledGameList } from "./StyledGameList";
  14. const Header = styled.header`
  15. background-color: var(--bg-color);
  16. position: relative;
  17. background: linear-gradient(
  18. 180deg,
  19. rgba(0, 0, 0, 1) 0%,
  20. rgba(0, 0, 0, 0.6) 40%,
  21. rgba(0, 0, 0, 0.6) 60%,
  22. rgba(0, 0, 0, 1) 100%
  23. ),
  24. 100% 50% / contain no-repeat url(/hero.png);
  25. padding: 14vh 5%;
  26. margin-bottom: 20px;
  27. & .baseline {
  28. padding: 2px;
  29. font-weigth: 800;
  30. font-size: 3.2vw;
  31. line-height: 1.2em;
  32. }
  33. & .subbaseline {
  34. padding: 2px;
  35. color: var(--font-color2);
  36. font-size: 1.4vw;
  37. }
  38. @media screen and (max-width: 1024px) {
  39. & {
  40. padding: 1em 5%;
  41. }
  42. & .baseline {
  43. display: inline-block;
  44. background-color: #00000088;
  45. font-size: 32px;
  46. }
  47. & .subbaseline {
  48. display: inline-block;
  49. background-color: #00000088;
  50. font-size: 16px;
  51. }
  52. }
  53. @media screen and (max-width: 640px) {
  54. & {
  55. display: none;
  56. }
  57. }
  58. `;
  59. const Filter = styled.div`
  60. text-align: center;
  61. & .incentive {
  62. width: 100%;
  63. font-size: 3.5vw;
  64. padding: 0.5em;
  65. margin: 0;
  66. }
  67. @media screen and (max-width: 1024px) {
  68. & .incentive {
  69. font-size: 32px;
  70. }
  71. }
  72. input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]) {
  73. background-color: #1c1c1c;
  74. color: var(--font-color2);
  75. max-width: 30rem;
  76. display: inline;
  77. margin: 2rem;
  78. &::placeholder {
  79. color: var(--font-color2);
  80. }
  81. }
  82. `;
  83. const StyledGameFilters = styled.ul`
  84. list-style: none;
  85. display: flex;
  86. flex-wrap: wrap;
  87. align-items: center;
  88. justify-content: center;
  89. padding: 0;
  90. > li {
  91. flex: auto;
  92. max-width: 25rem;
  93. margin: 1rem;
  94. padding: 1.5rem 1rem 1rem;
  95. text-align: center;
  96. border-radius: 0.5rem;
  97. .filter-title {
  98. text-transform: uppercase;
  99. color: var(--font-color2);
  100. font-size: 1.3rem;
  101. }
  102. &.small-filter {
  103. max-width: 20rem;
  104. }
  105. }
  106. .language-filter {
  107. background: url(${languageSVG}) #1d1d1d no-repeat -35% -25%;
  108. ul {
  109. text-align: left;
  110. list-style: none;
  111. padding: 0;
  112. color: var(--font-color2);
  113. }
  114. }
  115. .player-filter {
  116. background: url(${playerSVG}) #1d1d1d no-repeat -35% -25%;
  117. }
  118. .duration-filter {
  119. background: url(${clockSVG}) #1d1d1d no-repeat -40% -40%;
  120. }
  121. `;
  122. const StyledGameResultNumber = styled.p`
  123. text-align: center;
  124. `;
  125. const Content = styled.div`
  126. background-color: var(--bg-secondary-color);
  127. `;
  128. const hasIntervalOverlap = (interval1, interval2) => {
  129. return interval1[0] <= interval2[1] && interval1[1] >= interval2[0];
  130. };
  131. const hasRequestedValues = (filterValue, gameSettings) => {
  132. if (!filterValue?.length || !gameSettings?.length) {
  133. return true;
  134. }
  135. return hasIntervalOverlap(filterValue, gameSettings);
  136. };
  137. const hasAllowedMaterialLanguage = (filterCriteria, game) => {
  138. const MULTI_LANG_KEYWORD = "Multi-lang";
  139. return (
  140. !game.materialLanguage ||
  141. game.materialLanguage === MULTI_LANG_KEYWORD ||
  142. filterCriteria.languages.includes(game.materialLanguage)
  143. );
  144. };
  145. const GameListView = () => {
  146. const { t } = useTranslation();
  147. const NULL_SEARCH_TERM = "";
  148. const [filterCriteria, setFilterCriteria] = React.useState({
  149. searchTerm: NULL_SEARCH_TERM,
  150. nbOfPlayers: [1, 9],
  151. durations: [15, 90],
  152. languages: ["fr", "en"],
  153. });
  154. const { isLoading, data: gameList } = useQuery("games", async () =>
  155. (await getGames())
  156. .filter((game) => game.published)
  157. .sort((a, b) => {
  158. const [nameA, nameB] = [
  159. a.board.defaultName || a.board.name,
  160. b.board.defaultName || b.board.name,
  161. ];
  162. if (nameA < nameB) {
  163. return -1;
  164. }
  165. if (nameA > nameB) {
  166. return 1;
  167. }
  168. return 0;
  169. })
  170. );
  171. const filteredGameList = React.useMemo(() => {
  172. return gameList
  173. ? gameList.filter((game) => {
  174. return (
  175. (filterCriteria.searchTerm === NULL_SEARCH_TERM ||
  176. search(filterCriteria.searchTerm, game.defaultName)) &&
  177. hasRequestedValues(filterCriteria.nbOfPlayers, game.playerCount) &&
  178. hasRequestedValues(filterCriteria.durations, game.duration) &&
  179. hasAllowedMaterialLanguage(filterCriteria, game)
  180. );
  181. })
  182. : [];
  183. }, [gameList, filterCriteria]);
  184. const onChangeNbOfPlayersSlider = (values) => {
  185. setFilterCriteria({
  186. ...filterCriteria,
  187. nbOfPlayers: values,
  188. });
  189. };
  190. const onChangeDurationSlider = (values) => {
  191. setFilterCriteria({
  192. ...filterCriteria,
  193. durations: values,
  194. });
  195. };
  196. const onChangeSearchTerm = (event) => {
  197. setFilterCriteria({
  198. ...filterCriteria,
  199. searchTerm: event.target.value,
  200. });
  201. };
  202. const toggleLang = (lang) => {
  203. if (filterCriteria.languages.includes(lang)) {
  204. return filterCriteria.languages.filter((language) => language !== lang);
  205. } else {
  206. return [...filterCriteria.languages, lang];
  207. }
  208. };
  209. const onChangelanguageFilter = (lang) => {
  210. setFilterCriteria({
  211. ...filterCriteria,
  212. languages: toggleLang(lang),
  213. });
  214. };
  215. return (
  216. <>
  217. <Header>
  218. <Trans i18nKey="baseline">
  219. <h2 className="baseline">
  220. Play board games online
  221. <br />
  222. with your friends - for free!
  223. </h2>
  224. <p className="subbaseline">
  225. Choose from our selection or create your own.
  226. <br />
  227. No need to sign up. Just start a game and share the link with your
  228. friends.
  229. </p>
  230. </Trans>
  231. </Header>
  232. <Content>
  233. <Filter>
  234. <h2 className="incentive">{t("Start a game now")}</h2>
  235. <input
  236. type="search"
  237. id="game-search"
  238. name="game-search"
  239. aria-label={t("Search for a game")}
  240. placeholder={t("Search for a game")}
  241. value={filterCriteria.searchTerm}
  242. onChange={onChangeSearchTerm}
  243. />
  244. <StyledGameFilters>
  245. <li className="player-filter">
  246. <span className="filter-title">{t("Number of players")}</span>
  247. <SliderRange
  248. defaultValue={[1, 9]}
  249. min={1}
  250. max={9}
  251. value={filterCriteria.nbOfPlayers}
  252. step={1}
  253. onChange={onChangeNbOfPlayersSlider}
  254. />
  255. </li>
  256. <li className="duration-filter">
  257. <span className="filter-title">{t("Duration (mins)")}</span>
  258. <SliderRange
  259. defaultValue={[15, 90]}
  260. min={15}
  261. max={90}
  262. value={filterCriteria.durations}
  263. step={15}
  264. onChange={onChangeDurationSlider}
  265. />
  266. </li>
  267. <li className="small-filter language-filter">
  268. <span className="filter-title">{t("Language")}</span>
  269. <div>
  270. <ul>
  271. <li>
  272. <input
  273. type="checkbox"
  274. id="french-filter"
  275. name="french-filter"
  276. defaultChecked={filterCriteria.languages.includes("fr")}
  277. onChange={() => onChangelanguageFilter("fr")}
  278. />
  279. <label htmlFor="french-filter">{t("French")}</label>
  280. </li>
  281. <li>
  282. <input
  283. type="checkbox"
  284. id="english-filter"
  285. name="english-filter"
  286. defaultChecked={filterCriteria.languages.includes("en")}
  287. onChange={() => onChangelanguageFilter("en")}
  288. data-lang="en"
  289. />
  290. <label htmlFor="english-filter">{t("English")}</label>
  291. </li>
  292. </ul>
  293. </div>
  294. </li>
  295. </StyledGameFilters>
  296. <StyledGameResultNumber>
  297. {t("games-available", { nbOfGames: `${filteredGameList.length}` })}
  298. </StyledGameResultNumber>
  299. </Filter>
  300. {!isLoading && (
  301. <StyledGameList>
  302. {filteredGameList.map((game) => (
  303. <GameListItem key={game.id} game={game} />
  304. ))}
  305. </StyledGameList>
  306. )}
  307. {isLoading && (
  308. <div style={{ padding: "1em" }}>
  309. <Spinner />
  310. </div>
  311. )}
  312. </Content>
  313. </>
  314. );
  315. };
  316. export default GameListView;