Enhanced role list

client/src/components/Popover.tsx

@@ -1,10 +1,10 @@
-import React, { ReactElement, useEffect, useMemo, useRef } from "react";
+import React, { ReactElement, ReactNode, useEffect, useMemo, useRef } from "react";
 import ReactDOM from "react-dom/client";
 import { THEME_CSS_ATTRIBUTES } from "..";
 
 export default function Popover<T extends HTMLElement = HTMLElement>(props: Readonly<{
     open: boolean,
-    children: JSX.Element,
+    children: ReactNode,
     setOpenOrClosed: (open: boolean) => void,
     onRender?: (popoverElement: HTMLDivElement, anchorElement?: T | undefined) => void
     anchorRef?: React.RefObject<T>,

client/src/components/Select.tsx

@@ -134,33 +134,7 @@ export default function Select<K extends { toString(): string}>(props: Readonly<
         <Popover className="custom-select-options"
             open={open}
             setOpenOrClosed={handleSetOpen}
-            onRender={(dropdownElement, buttonElement) => {
-                if (!buttonElement) return;
-
-                const buttonBounds = buttonElement.getBoundingClientRect();
-                dropdownElement.style.width = `${buttonBounds.width}px`;
-                dropdownElement.style.left = `${buttonBounds.left}px`;
-
-                const spaceAbove = buttonBounds.top;
-                const spaceBelow = window.innerHeight - buttonBounds.bottom;
-
-                const oneRem = parseFloat(getComputedStyle(buttonElement).fontSize);
-
-                const maxHeight = (25 - .25) * oneRem;
-                const optionsHeight = 1 + .5 * oneRem + (dropdownElement.firstElementChild?.clientHeight ?? Infinity);
-
-                if (spaceAbove > spaceBelow) {
-                    const newHeight = Math.min(maxHeight, spaceAbove - .25 * oneRem, optionsHeight);
-                    dropdownElement.style.height = `${newHeight}px`;
-                    dropdownElement.style.top = `unset`;
-                    dropdownElement.style.bottom = `${spaceBelow + buttonBounds.height + .25 * oneRem}px`;
-                } else {
-                    const newHeight = Math.min(maxHeight, spaceBelow - .25 * oneRem, optionsHeight);
-                    dropdownElement.style.height = `${newHeight}px`;
-                    dropdownElement.style.top = `${spaceAbove + buttonBounds.height + .25 * oneRem}px`;
-                    dropdownElement.style.bottom = `unset`;
-                }
-            }}
+            onRender={dropdownPlacementFunction}
             anchorRef={ref}
         >
             <SelectOptions 
@@ -176,6 +150,34 @@ export default function Select<K extends { toString(): string}>(props: Readonly<
     </>
 }
 
+export function dropdownPlacementFunction(dropdownElement: HTMLElement, buttonElement: HTMLElement | undefined) {
+    if (!buttonElement) return;
+
+    const buttonBounds = buttonElement.getBoundingClientRect();
+    dropdownElement.style.width = `${buttonBounds.width}px`;
+    dropdownElement.style.left = `${buttonBounds.left}px`;
+
+    const spaceAbove = buttonBounds.top;
+    const spaceBelow = window.innerHeight - buttonBounds.bottom;
+
+    const oneRem = parseFloat(getComputedStyle(buttonElement).fontSize);
+
+    const maxHeight = (25 - .25) * oneRem;
+    const optionsHeight = 1 + .5 * oneRem + (dropdownElement.firstElementChild?.clientHeight ?? Infinity);
+
+    if (spaceAbove > spaceBelow) {
+        const newHeight = Math.min(maxHeight, spaceAbove - .25 * oneRem, optionsHeight);
+        dropdownElement.style.height = `${newHeight}px`;
+        dropdownElement.style.top = `unset`;
+        dropdownElement.style.bottom = `${spaceBelow + buttonBounds.height + .25 * oneRem}px`;
+    } else {
+        const newHeight = Math.min(maxHeight, spaceBelow - .25 * oneRem, optionsHeight);
+        dropdownElement.style.height = `${newHeight}px`;
+        dropdownElement.style.top = `${spaceAbove + buttonBounds.height + .25 * oneRem}px`;
+        dropdownElement.style.bottom = `unset`;
+    }
+}
+
 function SelectOptions<K extends { toString(): string}>(props: Readonly<{
     searchString?: string,
     options: SelectOptionsNoSearch<K>,

client/src/components/gameModeSettings/EnabledRoleSelector.tsx

@@ -1,10 +1,9 @@
-import { ReactElement, useCallback, useContext, useState } from "react"
+import React, { 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 { RoleOrRoleSet, getAllRoles, getRolesFromRoleOrRoleSet } from "../../game/roleListState.d";
 import { Role } from "../../game/roleState.d";
-import { RoleOutlineOptionSelector } from "./OutlineSelector";
+import { RoleOrRoleSetSelector } from "./OutlineSelector";
 import "./disabledRoleSelector.css"
 import Icon from "../Icon";
 import { Button } from "../Button";
@@ -21,14 +20,14 @@ export default function EnabledRoleSelector(props: Readonly<{
 }>): ReactElement {
     const {enabledRoles} = useContext(GameModeContext);
 
-    const [roleOutlineOption, setRoleOutlineOption] = useState<RoleOutlineOption>({ type: "roleSet", roleSet: "town" });
+    const [roleOrRoleSet, setRoleOrRoleSet] = useState<RoleOrRoleSet>({ type: "roleSet", roleSet: "town" });
 
-    const disableOutlineOption = (outline: RoleOutlineOption) => {
-        props.onDisableRoles(getRolesFromOutlineOption(outline));
+    const disableOutlineOption = (outline: RoleOrRoleSet) => {
+        props.onDisableRoles(getRolesFromRoleOrRoleSet(outline));
     }
 
-    const enableOutlineOption = (outline: RoleOutlineOption) => {
-        props.onEnableRoles(getRolesFromOutlineOption(outline));
+    const enableOutlineOption = (outline: RoleOrRoleSet) => {
+        props.onEnableRoles(getRolesFromRoleOrRoleSet(outline));
     }
 
     const disableAll = () => {
@@ -49,18 +48,17 @@ export default function EnabledRoleSelector(props: Readonly<{
 
             <div className="disabled-role-selector-area">
                 <Button
-                    onClick={()=>{enableOutlineOption(roleOutlineOption)}}
+                    onClick={()=>{enableOutlineOption(roleOrRoleSet)}}
                     disabled={props.disabled}
                 >{translate("menu.enabledRoles.include")}</Button>
                 <Button
-                    onClick={()=>{disableOutlineOption(roleOutlineOption)}}
+                    onClick={()=>{disableOutlineOption(roleOrRoleSet)}}
                     disabled={props.disabled}
                 >{translate("menu.enabledRoles.exclude")}</Button>
-                <RoleOutlineOptionSelector
-                    excludeAny={true}
+                <RoleOrRoleSetSelector
                     disabled={props.disabled}
-                    roleOutlineOption={roleOutlineOption}
-                    onChange={setRoleOutlineOption}
+                    roleOrRoleSet={roleOrRoleSet}
+                    onChange={setRoleOrRoleSet}
                 />
             </div>
         </div>}

client/src/components/gameModeSettings/GameModesEditor.tsx

@@ -61,7 +61,7 @@ export default function GameModesEditor(props: Readonly<{
     }, [roleList]);
 
     const addOutline = () => {
-        setRoleList([...roleList, {type: "any"}]);
+        setRoleList([...roleList, [{ roleSet: "any" }]]);
     }
     const removeOutline = (index: number) => {
         let newRoleList = [...roleList];