diff --git a/.vscode/settings.json b/.vscode/settings.json index c93d2779a..aca913d3d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -46,6 +46,7 @@ "Thanos", "Tidyable", "tungstenite", + "uncategorized", "unclicked", "Unswappable", "Uzumaki", diff --git a/client/package-lock.json b/client/package-lock.json index 8b1f69227..d002fec18 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-helmet": "^6.1.0", "react-resizable-panels": "^2.1.6", + "react-responsive-masonry": "^2.6.0", "react-scripts": "^5.0.1", "react-virtuoso": "^4.12.0", "typescript": "^4", @@ -29,7 +30,8 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2", - "@types/react-helmet": "^6.1.11" + "@types/react-helmet": "^6.1.11", + "@types/react-responsive-masonry": "^2.1.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4310,6 +4312,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-responsive-masonry": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.3.tgz", + "integrity": "sha512-aOFUtv3QwNMmy0BgpQpvivQ/+vivMTB6ARrzf9eTSXsLzXpVnfEtjpHpSknYDnr8KaQmlgeauAj8E7wo/qMOTg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -14616,6 +14627,11 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, + "node_modules/react-responsive-masonry": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.6.0.tgz", + "integrity": "sha512-aD1NMUOoRHoL2PT6k4b/+MtH8ZbSLxk8nr6O04HVLXjy7hFRrVXcHNTHscuTtBC70w0hEsJTATHHUxToQsY3PA==" + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -20917,6 +20933,15 @@ "@types/react": "*" } }, + "@types/react-responsive-masonry": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.3.tgz", + "integrity": "sha512-aOFUtv3QwNMmy0BgpQpvivQ/+vivMTB6ARrzf9eTSXsLzXpVnfEtjpHpSknYDnr8KaQmlgeauAj8E7wo/qMOTg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -28338,6 +28363,11 @@ "integrity": "sha512-oIqo/7pp2TsR+Dp1qZMr1l4RBDV4Zz/0HEG5zxliBJoHqqFnG0MbmFbk+5Q1VMGfPQ4uhXxefunLC1o7v38PDQ==", "requires": {} }, + "react-responsive-masonry": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.6.0.tgz", + "integrity": "sha512-aD1NMUOoRHoL2PT6k4b/+MtH8ZbSLxk8nr6O04HVLXjy7hFRrVXcHNTHscuTtBC70w0hEsJTATHHUxToQsY3PA==" + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/client/package.json b/client/package.json index 74fa3140e..19afc49b2 100644 --- a/client/package.json +++ b/client/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.2.0", "react-helmet": "^6.1.0", "react-resizable-panels": "^2.1.6", + "react-responsive-masonry": "^2.6.0", "react-scripts": "^5.0.1", "react-virtuoso": "^4.12.0", "typescript": "^4", @@ -24,7 +25,8 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2", - "@types/react-helmet": "^6.1.11" + "@types/react-helmet": "^6.1.11", + "@types/react-responsive-masonry": "^2.1.3" }, "scripts": { "start": "react-scripts start", diff --git a/client/src/components/Wiki.tsx b/client/src/components/Wiki.tsx index 7d958b2ea..538d819ea 100644 --- a/client/src/components/Wiki.tsx +++ b/client/src/components/Wiki.tsx @@ -1,15 +1,19 @@ -import React, { ReactElement, useCallback, useEffect, useState } from "react"; +import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react"; import translate from "../game/lang"; import "./wiki.css"; import { Role, getMainRoleSetFromRole } from "../game/roleState.d"; import GAME_MANAGER, { regEscape } from ".."; -import WikiArticle, { getSearchStrings } from "./WikiArticle"; -import { ARTICLES, WikiArticleLink, getArticleTitle } from "./WikiArticleLink"; +import WikiArticle, { getSearchStrings, PageCollection } from "./WikiArticle"; +import { ARTICLES, WikiArticleLink, getArticleTitle, wikiPageIsEnabled } from "./WikiArticleLink"; import StyledText from "./StyledText"; import Icon from "./Icon"; import { ContentMenu, MenuController } from "../menu/game/GameScreen"; import { AnchorController } from "../menu/Anchor"; import WikiCoverCard from "./WikiCoverCard"; +import { getAllRoles } from "../game/roleListState.d"; +import { useLobbyOrGameState } from "./useHooks"; +import { MODIFIERS, ModifierType } from "../game/gameState.d"; +import Masonry from "react-responsive-masonry"; export function setWikiSearchPage(page: WikiArticleLink, anchorController: AnchorController, menuController?: MenuController) { @@ -28,7 +32,8 @@ export function setWikiSearchPage(page: WikiArticleLink, anchorController: Ancho export default function Wiki(props: Readonly<{ - enabledRoles?: Role[], + enabledRoles: Role[], + enabledModifiers: ModifierType[], initialWikiPage?: WikiArticleLink, onPageChange?: (page: WikiArticleLink | null) => void, }>): ReactElement { @@ -76,10 +81,6 @@ export default function Wiki(props: Readonly<{ } } - - - - return