Enabled Disabled stuff

client/src/components/Wiki.tsx

@@ -14,6 +14,7 @@ import { getAllRoles } from "../game/roleListState.d";
 import { useLobbyOrGameState } from "./useHooks";
 import { MODIFIERS, ModifierType } from "../game/gameState.d";
 import Masonry from "react-responsive-masonry";
+import CheckBox from "./CheckBox";
 
 
 export function setWikiSearchPage(page: WikiArticleLink, anchorController: AnchorController, menuController?: MenuController) {
@@ -36,6 +37,7 @@ export default function Wiki(props: Readonly<{
     enabledModifiers: ModifierType[],
     initialWikiPage?: WikiArticleLink,
     onPageChange?: (page: WikiArticleLink | null) => void,
+    static?: boolean
 }>): ReactElement {
 
     const [searchQuery, setSearchQuery] = useState("");
@@ -95,6 +97,7 @@ export default function Wiki(props: Readonly<{
                 enabledRoles={props.enabledRoles}
                 enabledModifiers={props.enabledModifiers}
                 onChooseArticle={chooseArticle}
+                static={props.static === true}
             />
             :
             <WikiArticle article={article}/>
@@ -128,7 +131,8 @@ function WikiSearchResults(props: Readonly<{
     searchQuery: string,
     enabledRoles: Role[],
     enabledModifiers: ModifierType[],
-    onChooseArticle: (article: WikiArticleLink) => void
+    onChooseArticle: (article: WikiArticleLink) => void,
+    static: boolean
 }>): ReactElement {
     const enabledRoles = useLobbyOrGameState(
         gameState => gameState.enabledRoles,
@@ -137,10 +141,12 @@ function WikiSearchResults(props: Readonly<{
     )!;
     const enabledModifiers = useLobbyOrGameState(
         gameState => gameState.enabledModifiers,
-        ["enabledRoles"],
+        ["enabledModifiers"],
         MODIFIERS as any as ModifierType[]
     )!;
 
+    const [hideDisabled, setHideDisabled] = useState(true);
+
     const getSearchResults = useCallback((search: string) => {
         const out = [
             ...ARTICLES.filter((page) => {return RegExp(regEscape(search.trim()), 'i').test(getArticleTitle(page))}), 
@@ -154,33 +160,37 @@ function WikiSearchResults(props: Readonly<{
     [props.searchQuery, getSearchResults])
 
     return <div className="wiki-results" tabIndex={-1}>
+        {!props.static && <label>
+            {translate("hideDisabled")}
+            <CheckBox 
+                checked={hideDisabled} 
+                onChange={checked => setHideDisabled(checked)}
+            />
+        </label>}
         {props.searchQuery === ""
-            ? <WikiMainPage enabledRoles={enabledRoles} enabledModifiers={enabledModifiers} articles={results} onChooseArticle={props.onChooseArticle}/>
-            : results.map(page => {
-                let className = undefined;
-                if((
-                    page.includes("role/") &&
-                    !enabledRoles.map(role => `role/${role}`).includes(page)
-                ) || (
-                    page.includes("modifier/") &&
-                    !enabledModifiers.map(modifier => `modifier/${modifier}`).includes(page)
-                )) {
-                    className = "keyword-disabled";
-                }
-
-                return <WikiSearchResult key={page} 
-                    page={page} 
-                    className={className} 
-                    onChooseArticle={() => props.onChooseArticle(page)}
-                    />
-            })}
+            ? <WikiMainPage 
+                enabledRoles={enabledRoles} 
+                enabledModifiers={enabledModifiers} 
+                hideDisabled={hideDisabled}
+                articles={results} 
+                onChooseArticle={props.onChooseArticle}
+            /> : <div>
+                {results
+                    .filter(page => wikiPageIsEnabled(page, enabledRoles, enabledModifiers) || !hideDisabled)
+                    .map(page => <WikiSearchResult key={page} 
+                        page={page} 
+                        className={wikiPageIsEnabled(page, enabledRoles, enabledModifiers) ? "" : "keyword-disabled"} 
+                        onChooseArticle={() => props.onChooseArticle(page)}
+                    />)}
+            </div>}
     </div>
 }
 
 function WikiMainPage(props: Readonly<{
     articles: WikiArticleLink[],
     enabledRoles: Role[],
-    enabledModifiers: ModifierType[]
+    enabledModifiers: ModifierType[],
+    hideDisabled: boolean,
     onChooseArticle: (article: WikiArticleLink) => void
 }>): ReactElement {
     const articlePartitions = useMemo(() => 
@@ -210,20 +220,24 @@ function WikiMainPage(props: Readonly<{
 
     return <div ref={ref} className="wiki-main-page">
         <Masonry columnsCount={columnCount}>
-            {Object.entries(articlePartitions).filter(([category]) => category !== "uncategorized").map(([category, pages]) => {
-                return <div className="masonry-item" key={category}>
-                    <PageCollection 
-                        title={translate(`wiki.category.${category}`)}
-                        pages={pages}
-                        enabledRoles={props.enabledRoles}
-                        enabledModifiers={props.enabledModifiers}
-                    />
-                </div>
-            })}
+            {Object.entries(articlePartitions)
+                .filter(([category]) => category !== "uncategorized")
+                .map(([category, pages]) => {
+                    return <div className="masonry-item" key={category}>
+                        <PageCollection 
+                            title={translate(`wiki.category.${category}`)}
+                            pages={pages
+                                .filter(page => wikiPageIsEnabled(page, props.enabledRoles, props.enabledModifiers) || !props.hideDisabled)}
+                            enabledRoles={props.enabledRoles}
+                            enabledModifiers={props.enabledModifiers}
+                        />
+                    </div>
+                })}
         </Masonry>
         <PageCollection 
             title={translate(`wiki.category.uncategorized`)}
-            pages={articlePartitions["uncategorized"]}
+            pages={articlePartitions["uncategorized"]
+                .filter(page => wikiPageIsEnabled(page, props.enabledRoles, props.enabledModifiers) || !props.hideDisabled)}
             enabledRoles={props.enabledRoles}
             enabledModifiers={props.enabledModifiers}
         />
@@ -240,7 +254,8 @@ type WikiPagePartitions = Record<WikiCategory | "uncategorized", WikiArticleLink
 export function partitionWikiPages(
     wikiPages: WikiArticleLink[],
     enabledRoles: Role[],
-    enabledModifiers: ModifierType[]
+    enabledModifiers: ModifierType[],
+    sort?: boolean
 ): WikiPagePartitions {
     const partitions: WikiPagePartitions = Object.fromEntries([
         ...WIKI_CATEGORIES.map(a => [a, []]),
@@ -293,10 +308,12 @@ export function partitionWikiPages(
         partitions[category].push(wikiPage)
     }
 
-    const sortFunction = getWikiPageSortFunction(enabledRoles, enabledModifiers);
-
-    for (const category of Object.keys(partitions) as WikiCategory[]) {
-        partitions[category].sort(sortFunction);
+    if (sort !== false) {
+        const sortFunction = getWikiPageSortFunction(enabledRoles, enabledModifiers);
+
+        for (const category of Object.keys(partitions) as WikiCategory[]) {
+            partitions[category].sort(sortFunction);
+        }
     }
 
     return partitions;

client/src/components/WikiArticle.tsx

@@ -156,7 +156,11 @@ export function PageCollection(props: Readonly<{
     enabledRoles: Role[],
     enabledModifiers: ModifierType[],
     children?: ReactNode
-}>): ReactElement {
+}>): ReactElement | null {
+    if (props.pages.length === 0) {
+        return null;
+    }
+
     return <>
         <h3 className="wiki-search-divider">
             <StyledText>{props.title}</StyledText>

client/src/components/WikiArticleLink.tsx

@@ -1,7 +1,7 @@
 import { MODIFIERS, ModifierType } from "../game/gameState.d";
 import translate, { langJson } from "../game/lang";
-import { Role } from "../game/roleState.d";
-import { WIKI_CATEGORIES, WikiCategory } from "./Wiki";
+import { Role, roleJsonData } from "../game/roleState.d";
+import { partitionWikiPages, WIKI_CATEGORIES, WikiCategory } from "./Wiki";
 import "./wiki.css";
 import { getAllRoles } from "../game/roleListState.d"
 
@@ -61,9 +61,22 @@ export function wikiPageIsEnabled(
     switch (page.split("/")[0]) {
         case "role":
             return enabledRoles.map(role => `role/${role}`).includes(page)
-        case "modifiers":
+        case "modifier":
             return enabledModifiers.map(modifier => `modifier/${modifier}`).includes(page)
-        default:
-            return true;
     }
+
+    if (page === "standard/mafia") {
+        return enabledRoles.some(role => roleJsonData()[role].roleSets.includes("mafia"))
+    } else if (page === "standard/cult") {
+        return enabledRoles.some(role => roleJsonData()[role].roleSets.includes("cult"))
+    }
+
+    if (page.startsWith("category/")) {
+        return partitionWikiPages(ARTICLES, enabledRoles, enabledModifiers, false)[page.split("/")[1] as any as WikiCategory]
+            .filter(p => p !== page)
+            .filter(page => wikiPageIsEnabled(page, enabledRoles, enabledModifiers))
+            .length !== 0
+    }
+
+    return true;
 }

client/src/components/gameModeSettings/EnabledModifiersSelector.tsx

@@ -1,9 +1,10 @@
-import React, { ReactElement, useCallback, useContext } from "react";
+import React, { ReactElement, useCallback, useContext, useState } from "react";
 import { MODIFIERS, ModifierType } from "../../game/gameState.d";
 import translate from "../../game/lang";
 import StyledText from "../StyledText";
 import { GameModeContext } from "./GameModesEditor";
 import { Button } from "../Button";
+import CheckBox from "../CheckBox";
 
 export function EnabledModifiersSelector(props: Readonly<{
     disabled?: boolean,
@@ -61,19 +62,32 @@ export function EnabledModifiersDisplay(props: EnabledModifiersDisplayProps): Re
         </StyledText>
     }
 
+    const [hideDisabled, setHideDisabled] = useState(true);
+
     return <div>
-        {MODIFIERS.map((modifier, i) => 
-            props.modifiable 
-                ? <Button key={modifier}
-                    disabled={props.disabled}
-                    onClick={() => (!isEnabled(modifier) ? props.onEnableModifiers : props.onDisableModifiers)([modifier])}
-                >
-                    {modifierTextElement(modifier)}
-                </Button> 
-                : <div key={modifier} className={"placard" + (!isEnabled(modifier) ? " disabled" : "")}>
-                    {modifierTextElement(modifier)}
-                </div>
-
-        )}
+        {!props.modifiable && <label>
+            {translate("hideDisabled")}
+            <CheckBox
+                checked={hideDisabled}
+                onChange={checked => setHideDisabled(checked)}
+            />
+        </label>}
+        <div>
+            {MODIFIERS
+                .filter(role => isEnabled(role) || !hideDisabled || props.modifiable)
+                .sort((a, b) => (isEnabled(a) ? -1 : 1) - (isEnabled(b) ? -1 : 1))
+                .map((modifier, i) => 
+                props.modifiable 
+                    ? <Button key={modifier}
+                        disabled={props.disabled}
+                        onClick={() => (!isEnabled(modifier) ? props.onEnableModifiers : props.onDisableModifiers)([modifier])}
+                    >
+                        {modifierTextElement(modifier)}
+                    </Button> 
+                    : <div key={modifier} className={"placard" + (!isEnabled(modifier) ? " disabled" : "")}>
+                        {modifierTextElement(modifier)}
+                    </div>
+            )}
+        </div>
     </div>
 }

client/src/components/gameModeSettings/EnabledRoleSelector.tsx

@@ -2,13 +2,14 @@ import { ReactElement, useCallback, useContext, useState } from "react"
 import translate from "../../game/lang"
 import React from "react"
 import StyledText from "../StyledText"
-import { RoleOutlineOption, getAllRoles, getRolesFromOutlineOption } from "../../game/roleListState.d";
-import { Role } from "../../game/roleState.d";
+import { ROLE_SETS, RoleOutlineOption, getAllRoles, getRolesFromOutlineOption } from "../../game/roleListState.d";
+import { Role, roleJsonData } from "../../game/roleState.d";
 import { RoleOutlineOptionSelector } from "./OutlineSelector";
 import "./disabledRoleSelector.css"
 import Icon from "../Icon";
 import { Button } from "../Button";
 import { GameModeContext } from "./GameModesEditor";
+import CheckBox from "../CheckBox";
 
 
 
@@ -102,19 +103,32 @@ export function EnabledRolesDisplay(props: EnabledRolesDisplayProps): ReactEleme
         </StyledText>
     }
 
+    const [hideDisabled, setHideDisabled] = useState(true);
+
     return <div>
-        {getAllRoles().map((role, i) => 
-            props.modifiable 
-                ? <Button key={i}
-                    disabled={props.disabled}
-                    onClick={() => (!isEnabled(role) ? props.onEnableRoles : props.onDisableRoles)([role])}
-                >
-                    {roleTextElement(role)}
-                </Button> 
-                : <div key={i} className={"placard" + (!isEnabled(role) ? " disabled" : "")}>
-                    {roleTextElement(role)}
-                </div>
-
-        )}
+        {!props.modifiable && <label>
+            {translate("hideDisabled")}
+            <CheckBox
+                checked={hideDisabled}
+                onChange={checked => setHideDisabled(checked)}
+            />
+        </label>}
+        <div>
+            {getAllRoles()
+                .filter(role => isEnabled(role) || !hideDisabled || props.modifiable)
+                .sort((a, b) => (isEnabled(a) ? -1 : 1) - (isEnabled(b) ? -1 : 1))
+                .sort((a, b) => ROLE_SETS.indexOf(roleJsonData()[a].mainRoleSet) - ROLE_SETS.indexOf(roleJsonData()[b].mainRoleSet))
+                .map((role, i) => 
+                    props.modifiable 
+                        ? <Button key={i}
+                            disabled={props.disabled}
+                            onClick={() => (!isEnabled(role) ? props.onEnableRoles : props.onDisableRoles)([role])}
+                        >
+                            {roleTextElement(role)}
+                        </Button> 
+                        : <div key={i} className={"placard" + (!isEnabled(role) ? " disabled" : "")}>
+                            {roleTextElement(role)}
+                        </div>)}
+        </div>
     </div>
 }

client/src/menu/game/gameScreenContent/graveyardMenu.css

@@ -21,4 +21,7 @@
 }
 .graveyard-menu .graveyard-menu-enabledRoles > div > *{
     width: min-content;
+}
+.graveyard-menu label {
+    display: block
 }

client/src/menu/main/StandaloneWiki.tsx

@@ -25,6 +25,7 @@ export default function StandaloneWiki(props: Readonly<{
                         window.history.replaceState({}, '', `/wiki`)
                     }
                 }}
+                static={true}
             />
         </div>
     </div>