From 078aa0ba6d2f5d1e7cc2197881fcdf8dc439d958 Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Wed, 18 Dec 2024 22:32:17 -0500
Subject: [PATCH 1/8] Separate Popover into its own element

---
 client/src/components/Popover.tsx | 159 ++++++++++++++++++++++++++
 client/src/components/Select.tsx  | 183 +++++++-----------------------
 client/src/components/select.css  |   3 +-
 client/src/menu/main/Credits.tsx  |   2 +-
 4 files changed, 201 insertions(+), 146 deletions(-)
 create mode 100644 client/src/components/Popover.tsx

diff --git a/client/src/components/Popover.tsx b/client/src/components/Popover.tsx
new file mode 100644
index 000000000..78dd578f1
--- /dev/null
+++ b/client/src/components/Popover.tsx
@@ -0,0 +1,159 @@
+import React, { ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
+import "./select.css";
+import ReactDOM from "react-dom/client";
+import { THEME_CSS_ATTRIBUTES } from "..";
+
+export type PopoverController = {
+    setOpenOrClosed: (open: boolean) => void,
+    open: boolean,
+}
+
+const PopoverContext = React.createContext<PopoverController | undefined>(undefined);
+
+export default function Popover(props: Readonly<{
+    open: boolean,
+    children: JSX.Element,
+    setOpenOrClosed: (open: boolean) => void,
+    anchorRef?: React.RefObject<HTMLElement>,
+    className?: string
+}>): ReactElement {
+    const handleSetOpen = useCallback((isOpen: boolean) => {
+        props.setOpenOrClosed(isOpen);
+    }, [props]);
+
+    const thisRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(document.createElement('div'));
+
+    const popoverRoot = useMemo(() => {
+        const popoverElement = popoverRef.current;
+        popoverElement.style.position = "absolute";
+
+        document.body.appendChild(popoverElement);
+        return ReactDOM.createRoot(popoverElement);
+    }, [])
+
+    //set ref
+    useEffect(() => {
+        const initialPopover = popoverRef.current;
+        return () => {
+            setTimeout(() => {
+                popoverRoot.unmount();
+            })
+            initialPopover.remove();
+            
+            popoverRef.current = document.createElement('div');
+        }
+    }, [popoverRoot])
+
+    //match css styles
+    useEffect(() => {
+        const styleBenefactor = props.anchorRef?.current ?? thisRef.current;
+        const popoverElement = popoverRef.current;
+        
+        if (styleBenefactor) {
+            // Match styles
+            THEME_CSS_ATTRIBUTES.forEach(prop => {
+                popoverElement.style.setProperty(`--${prop}`, getComputedStyle(styleBenefactor).getPropertyValue(`--${prop}`))
+            })
+
+            popoverElement.className = 'popover ' + (props.className ?? '')
+        }
+    }, [props.anchorRef, props.className])
+
+    // This is for the popover's anchor, not the element named Anchor
+    const [anchorLocation, setAnchorLocation] = React.useState(() => {
+        const bounds = props.anchorRef?.current?.getBoundingClientRect();
+
+        if (bounds) {
+            return { top: bounds.top, left: bounds.left }
+        } else {
+            return {top: 0, left: 0}
+        }
+    });
+
+    //close on scroll
+    useEffect(() => {
+        const listener = () => {
+            const bounds = props.anchorRef?.current?.getBoundingClientRect();
+            if (
+                bounds &&
+                props.open &&
+                (
+                    anchorLocation.top !== bounds?.top || 
+                    anchorLocation.left !== bounds?.left
+                )
+            )
+                handleSetOpen(false);
+        };
+        
+        window.addEventListener("scroll", listener, true);
+        window.addEventListener("resize", listener);
+        return () => {
+            window.removeEventListener("scroll", listener, true);
+            window.removeEventListener("resize", listener);
+        }
+    })
+
+    const PopoverContextToBeProvided = useMemo(() => ({
+        setOpenOrClosed: props.setOpenOrClosed,
+        open: props.open
+    }), [props.open, props.setOpenOrClosed])
+
+    //open and set position
+    useEffect(() => {
+        const anchorElement = props.anchorRef?.current;
+        const popoverElement = popoverRef.current;
+
+        if (anchorElement && props.open) {
+            popoverRoot.render(
+                <PopoverContext.Provider value={PopoverContextToBeProvided}>
+                    {props.children}
+                </PopoverContext.Provider>
+            );
+
+
+            popoverElement.hidden = false;
+
+            const buttonBounds = anchorElement.getBoundingClientRect();
+            // Position
+            popoverElement.style.width = `${buttonBounds.width}px`;
+            popoverElement.style.left = `${buttonBounds.left}px`;
+            setAnchorLocation({top: buttonBounds.top, left: buttonBounds.left});
+
+            const spaceAbove = buttonBounds.top;
+            const spaceBelow = window.innerHeight - buttonBounds.bottom;
+
+            const oneRem = parseFloat(getComputedStyle(anchorElement).fontSize);
+
+            if (spaceAbove > spaceBelow) {
+                const newHeight = Math.min((25 - .25) * oneRem, spaceAbove - .25 * oneRem);
+                popoverElement.style.height = `${newHeight}px`;
+                popoverElement.style.top = `unset`;
+                popoverElement.style.bottom = `${spaceBelow + buttonBounds.height + .25 * oneRem}px`;
+            } else {
+                const newHeight = Math.min((25 - .25) * oneRem, spaceBelow - .25 * oneRem);
+                popoverElement.style.height = `${newHeight}px`;
+                popoverElement.style.top = `${spaceAbove + buttonBounds.height + .25 * oneRem}px`;
+                popoverElement.style.bottom = `unset`;
+            }
+        } else {
+            popoverElement.hidden = true;
+        }
+    }, [handleSetOpen, props.open, props.children, popoverRoot, props.anchorRef, PopoverContextToBeProvided])
+
+    //close on click outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (!popoverRef.current?.contains(event.target as Node) && props.open) {
+                handleSetOpen(false);
+            }
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", handleClickOutside);
+        })
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [handleSetOpen, props.open]);
+
+    return <div ref={thisRef} />
+}
\ No newline at end of file
diff --git a/client/src/components/Select.tsx b/client/src/components/Select.tsx
index a0169c24f..d0aecc75a 100644
--- a/client/src/components/Select.tsx
+++ b/client/src/components/Select.tsx
@@ -4,6 +4,7 @@ import "./select.css";
 import Icon from "./Icon";
 import ReactDOM from "react-dom/client";
 import { THEME_CSS_ATTRIBUTES } from "..";
+import Popover from "./Popover";
 
 export type SelectOptionsNoSearch<K extends { toString(): string}> = Map<K, React.ReactNode>;
 export type SelectOptionsSearch<K extends { toString(): string}> = Map<K, [React.ReactNode, string]>;
@@ -45,7 +46,7 @@ export default function Select<K extends { toString(): string}>(props: Readonly<
         }
     }, [props]);
 
-    const [open, setOpen]= React.useState(false);
+    const [open, setOpen] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
     
 
@@ -101,156 +102,52 @@ export default function Select<K extends { toString(): string}>(props: Readonly<
         }
     }
 
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(document.createElement('div'));
+    const ref = useRef<HTMLButtonElement>(null);
 
-    const dropdownRoot = useMemo(() => {
-        const dropdownElement = dropdownRef.current;
-        dropdownElement.style.position = "absolute";
-
-        document.body.appendChild(dropdownElement);
-        return ReactDOM.createRoot(dropdownElement);
-    }, [])
-
-    //set ref
-    useEffect(() => {
-        const initialDropdown = dropdownRef.current;
-        return () => {
-            setTimeout(() => {
-                dropdownRoot.unmount();
-            })
-            initialDropdown.remove();
-            
-            dropdownRef.current = document.createElement('div');
-        }
-    }, [dropdownRoot])
-
-    //match css styles
-    useEffect(() => {
-        const buttonElement = buttonRef.current;
-        const dropdownElement = dropdownRef.current;
-        
-        if (buttonElement) {
-            // Match styles
-            THEME_CSS_ATTRIBUTES.forEach(prop => {
-                dropdownElement.style.setProperty(`--${prop}`, getComputedStyle(buttonElement).getPropertyValue(`--${prop}`))
-            })
-
-            dropdownElement.className = 'custom-select-options'
-        }
-    }, [])
-
-    const [buttonLocation, setButtonLocation] = React.useState({top: 0, left: 0});
-
-    //close on scroll
-    useEffect(() => {
-        const listener = (ev: Event) => {
-            const bounds = buttonRef.current?.getBoundingClientRect();
-            if (
-                open &&
-                (
-                    buttonLocation.top !== bounds?.top || 
-                    buttonLocation.left !== bounds?.left
-                )
-            )
-                handleSetOpen(false);
-        };
-        
-        window.addEventListener("scroll", listener, true);
-        window.addEventListener("resize", listener);
-        return () => {
-            window.removeEventListener("scroll", listener, true);
-            window.removeEventListener("resize", listener);
-        }
-    })
-
-    //open and set position
-    useEffect(() => {
-        const buttonElement = buttonRef.current;
-        const dropdownElement = dropdownRef.current;
+    const value = optionsSearch.get(props.value);
+    if(value === undefined) {
+        console.error(`Value not found in options ${props.value}`);
+    }
 
-        if (buttonElement && open) {
-            dropdownRoot.render(<SelectOptions
+    return <>
+        <RawButton
+            ref={ref}
+            disabled={props.disabled}
+            onClick={()=>{handleSetOpen(!open)}}
+            className={"custom-select "+(props.className?props.className:"")}
+            onKeyDown={(e)=>{
+                if(props.disabled) return;
+                if(e.key === "Enter" && !open) {
+                    e.preventDefault();
+                    handleSetOpen(true);
+                }else if(e.key === "Tab") {
+                    handleSetOpen(false);
+                }else{
+                    e.preventDefault();
+                    handleKeyInput(e.key);
+                }
+            }}
+        >
+            {open === true ? 
+                <Icon>keyboard_arrow_up</Icon> :
+                <Icon>keyboard_arrow_down</Icon>}
+            {value !== undefined?value[0]:props.value.toString()}
+        </RawButton>
+        <Popover className="custom-select-options"
+            open={open}
+            setOpenOrClosed={handleSetOpen}
+            anchorRef={ref}
+        >
+            <SelectOptions 
                 options={optionsNoSearch}
                 onChange={(value)=>{
                     if(props.disabled) return;
                     handleSetOpen(false);
                     handleOnChange(value);
                 }}
-            />);
-
-
-            dropdownElement.hidden = false;
-
-            const buttonBounds = buttonElement.getBoundingClientRect();
-            // Position
-            dropdownElement.style.width = `${buttonBounds.width}px`;
-            dropdownElement.style.left = `${buttonBounds.left}px`;
-            setButtonLocation({top: buttonBounds.top, left: buttonBounds.left});
-
-            const spaceAbove = buttonBounds.top;
-            const spaceBelow = window.innerHeight - buttonBounds.bottom;
-
-            const oneRem = parseFloat(getComputedStyle(buttonElement).fontSize);
-
-            if (spaceAbove > spaceBelow) {
-                const newHeight = Math.min((25 - .25) * oneRem, spaceAbove - .25 * oneRem);
-                dropdownElement.style.height = `${newHeight}px`;
-                dropdownElement.style.top = `unset`;
-                dropdownElement.style.bottom = `${spaceBelow + buttonBounds.height + .25 * oneRem}px`;
-            } else {
-                const newHeight = Math.min((25 - .25) * oneRem, spaceBelow - .25 * oneRem);
-                dropdownElement.style.height = `${newHeight}px`;
-                dropdownElement.style.top = `${spaceAbove + buttonBounds.height + .25 * oneRem}px`;
-                dropdownElement.style.bottom = `unset`;
-            }
-        } else {
-            dropdownElement.hidden = true;
-        }
-    }, [handleOnChange, handleSetOpen, open, props.disabled, optionsNoSearch, dropdownRoot])
-
-    //close on click outside
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (!dropdownRef.current?.contains(event.target as Node) && open) {
-                handleSetOpen(false);
-            }
-        };
-
-        setTimeout(() => {
-            document.addEventListener("click", handleClickOutside);
-        })
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [handleSetOpen, open]);
-
-    const value = optionsSearch.get(props.value);
-    if(value === undefined) {
-        console.error(`Value not found in options ${props.value}`);
-    }
-
-    return <RawButton
-        ref={buttonRef}
-        disabled={props.disabled}
-        onClick={()=>{handleSetOpen(!open)}}
-        className={"custom-select "+(props.className?props.className:"")}
-        onKeyDown={(e)=>{
-            if(props.disabled) return;
-            if(e.key === "Enter" && !open) {
-                e.preventDefault();
-                handleSetOpen(true);
-            }else if(e.key === "Tab") {
-                handleSetOpen(false);
-            }else{
-                e.preventDefault();
-                handleKeyInput(e.key);
-            }
-        }}
-    >
-        {open === true ? 
-            <Icon>keyboard_arrow_up</Icon> :
-            <Icon>keyboard_arrow_down</Icon>}
-        {value !== undefined?value[0]:props.value.toString()}
-    </RawButton>
+            />
+        </Popover>
+    </>
 }
 
 function SelectOptions<K extends { toString(): string}>(props: Readonly<{
diff --git a/client/src/components/select.css b/client/src/components/select.css
index 31f9ec555..4f3ac7374 100644
--- a/client/src/components/select.css
+++ b/client/src/components/select.css
@@ -9,10 +9,9 @@
 .custom-select-options {
     position: absolute;
     min-width: max-content;
-    max-height: min-content;
     overflow-y: scroll;
 
-    padding: .13rem .25rem;
+    padding: .13rem .13rem;
     background-color: var(--secondary-color);
     border-radius: .25rem;
     border: .13rem solid var(--primary-border-color);
diff --git a/client/src/menu/main/Credits.tsx b/client/src/menu/main/Credits.tsx
index 751f32169..5186f4d05 100644
--- a/client/src/menu/main/Credits.tsx
+++ b/client/src/menu/main/Credits.tsx
@@ -13,7 +13,7 @@ export default function Credits(): ReactElement {
         <div>
             <h3>{translate("leadDevelopers")}</h3>
             <p>
-                <span>Jack Papel</span>
+                <span>Jack Papel (<a href="https://www.jackpapel.com">Website</a>)</span>
                 <span>Sammy</span>
             </p>
             <h3>{translate("otherContributors")}</h3>

From 8f06b390e20b083d561b32a1268d1f777cc876bc Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Wed, 18 Dec 2024 23:38:07 -0500
Subject: [PATCH 2/8] Move select-specific code from popover

---
 client/src/components/Popover.tsx | 86 +++++++++++--------------------
 client/src/components/Select.tsx  | 28 +++++++++-
 client/src/components/select.css  |  2 +-
 3 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/client/src/components/Popover.tsx b/client/src/components/Popover.tsx
index 78dd578f1..8c7d1281b 100644
--- a/client/src/components/Popover.tsx
+++ b/client/src/components/Popover.tsx
@@ -1,26 +1,15 @@
-import React, { ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { ReactElement, useEffect, useMemo, useRef } from "react";
 import "./select.css";
 import ReactDOM from "react-dom/client";
 import { THEME_CSS_ATTRIBUTES } from "..";
-
-export type PopoverController = {
-    setOpenOrClosed: (open: boolean) => void,
-    open: boolean,
-}
-
-const PopoverContext = React.createContext<PopoverController | undefined>(undefined);
-
-export default function Popover(props: Readonly<{
+export default function Popover<T extends HTMLElement = HTMLElement>(props: Readonly<{
     open: boolean,
     children: JSX.Element,
     setOpenOrClosed: (open: boolean) => void,
-    anchorRef?: React.RefObject<HTMLElement>,
+    onRender?: (popoverElement: HTMLDivElement, anchorElement?: T | undefined) => void
+    anchorRef?: React.RefObject<T>,
     className?: string
 }>): ReactElement {
-    const handleSetOpen = useCallback((isOpen: boolean) => {
-        props.setOpenOrClosed(isOpen);
-    }, [props]);
-
     const thisRef = useRef<HTMLDivElement>(null);
     const popoverRef = useRef<HTMLDivElement>(document.createElement('div'));
 
@@ -83,7 +72,7 @@ export default function Popover(props: Readonly<{
                     anchorLocation.left !== bounds?.left
                 )
             )
-                handleSetOpen(false);
+            props.setOpenOrClosed(false);
         };
         
         window.addEventListener("scroll", listener, true);
@@ -94,58 +83,45 @@ export default function Popover(props: Readonly<{
         }
     })
 
-    const PopoverContextToBeProvided = useMemo(() => ({
-        setOpenOrClosed: props.setOpenOrClosed,
-        open: props.open
-    }), [props.open, props.setOpenOrClosed])
+    const popoverContext = useMemo(() => {
+        return {
+            popoverElement: popoverRef.current,
+            anchorElement: props.anchorRef?.current ?? undefined,
+            open: props.open
+        }
+    }, [props.anchorRef, props.open])
 
     //open and set position
     useEffect(() => {
-        const anchorElement = props.anchorRef?.current;
         const popoverElement = popoverRef.current;
+        const anchorElement = props.anchorRef?.current;
+
+        if (props.open) {
+            popoverRoot.render(props.children);
+
+            if (anchorElement) {
+                const anchorBounds = anchorElement.getBoundingClientRect();
 
-        if (anchorElement && props.open) {
-            popoverRoot.render(
-                <PopoverContext.Provider value={PopoverContextToBeProvided}>
-                    {props.children}
-                </PopoverContext.Provider>
-            );
-
-
-            popoverElement.hidden = false;
-
-            const buttonBounds = anchorElement.getBoundingClientRect();
-            // Position
-            popoverElement.style.width = `${buttonBounds.width}px`;
-            popoverElement.style.left = `${buttonBounds.left}px`;
-            setAnchorLocation({top: buttonBounds.top, left: buttonBounds.left});
-
-            const spaceAbove = buttonBounds.top;
-            const spaceBelow = window.innerHeight - buttonBounds.bottom;
-
-            const oneRem = parseFloat(getComputedStyle(anchorElement).fontSize);
-
-            if (spaceAbove > spaceBelow) {
-                const newHeight = Math.min((25 - .25) * oneRem, spaceAbove - .25 * oneRem);
-                popoverElement.style.height = `${newHeight}px`;
-                popoverElement.style.top = `unset`;
-                popoverElement.style.bottom = `${spaceBelow + buttonBounds.height + .25 * oneRem}px`;
-            } else {
-                const newHeight = Math.min((25 - .25) * oneRem, spaceBelow - .25 * oneRem);
-                popoverElement.style.height = `${newHeight}px`;
-                popoverElement.style.top = `${spaceAbove + buttonBounds.height + .25 * oneRem}px`;
-                popoverElement.style.bottom = `unset`;
+                setAnchorLocation({top: anchorBounds.top, left: anchorBounds.left});
             }
+
+            setTimeout(() => {
+                popoverElement.hidden = false;
+                
+                if (props.onRender) {
+                    props.onRender(popoverElement, anchorElement ?? undefined)
+                }
+            })
         } else {
             popoverElement.hidden = true;
         }
-    }, [handleSetOpen, props.open, props.children, popoverRoot, props.anchorRef, PopoverContextToBeProvided])
+    }, [props, popoverRoot, popoverContext])
 
     //close on click outside
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             if (!popoverRef.current?.contains(event.target as Node) && props.open) {
-                handleSetOpen(false);
+                props.setOpenOrClosed(false);
             }
         };
 
@@ -153,7 +129,7 @@ export default function Popover(props: Readonly<{
             document.addEventListener("click", handleClickOutside);
         })
         return () => document.removeEventListener("click", handleClickOutside);
-    }, [handleSetOpen, props.open]);
+    }, [props]);
 
     return <div ref={thisRef} />
 }
\ No newline at end of file
diff --git a/client/src/components/Select.tsx b/client/src/components/Select.tsx
index d644db88e..6ab415352 100644
--- a/client/src/components/Select.tsx
+++ b/client/src/components/Select.tsx
@@ -134,6 +134,33 @@ 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`;
+                }
+            }}
             anchorRef={ref}
         >
             <SelectOptions 
@@ -154,7 +181,6 @@ function SelectOptions<K extends { toString(): string}>(props: Readonly<{
     options: SelectOptionsNoSearch<K>,
     onChange?: (value: K)=>void,
 }>) {
-
     return <div>
         {props.searchString ?? null}
         {[...props.options.entries()]
diff --git a/client/src/components/select.css b/client/src/components/select.css
index 4f3ac7374..d46339433 100644
--- a/client/src/components/select.css
+++ b/client/src/components/select.css
@@ -9,7 +9,7 @@
 .custom-select-options {
     position: absolute;
     min-width: max-content;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     padding: .13rem .13rem;
     background-color: var(--secondary-color);

From 024261f9d76b782faf2bf430fe959e7d008162ee Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Wed, 18 Dec 2024 23:41:22 -0500
Subject: [PATCH 3/8] Remove unused code

---
 client/src/components/Popover.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/client/src/components/Popover.tsx b/client/src/components/Popover.tsx
index 8c7d1281b..f32997987 100644
--- a/client/src/components/Popover.tsx
+++ b/client/src/components/Popover.tsx
@@ -83,14 +83,6 @@ export default function Popover<T extends HTMLElement = HTMLElement>(props: Read
         }
     })
 
-    const popoverContext = useMemo(() => {
-        return {
-            popoverElement: popoverRef.current,
-            anchorElement: props.anchorRef?.current ?? undefined,
-            open: props.open
-        }
-    }, [props.anchorRef, props.open])
-
     //open and set position
     useEffect(() => {
         const popoverElement = popoverRef.current;
@@ -115,7 +107,7 @@ export default function Popover<T extends HTMLElement = HTMLElement>(props: Read
         } else {
             popoverElement.hidden = true;
         }
-    }, [props, popoverRoot, popoverContext])
+    }, [props, popoverRoot])
 
     //close on click outside
     useEffect(() => {

From 59efad944bd6447d779ca39511a8691da20b0814 Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Wed, 18 Dec 2024 23:49:57 -0500
Subject: [PATCH 4/8] Remove select styling import

---
 client/src/components/Popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Popover.tsx b/client/src/components/Popover.tsx
index f32997987..b84a41044 100644
--- a/client/src/components/Popover.tsx
+++ b/client/src/components/Popover.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useMemo, useRef } from "react";
-import "./select.css";
 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,

From 4048c429874b3d4ae4a37a537a0a016525225a15 Mon Sep 17 00:00:00 2001
From: Sam Maselli <sammypet3@gmail.com>
Date: Sat, 4 Jan 2025 20:56:16 -0500
Subject: [PATCH 5/8] priority encyclopedia page

---
 client/src/resources/lang/en_us.json              | 2 +-
 server/src/game/player/player_helper_functions.rs | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/resources/lang/en_us.json b/client/src/resources/lang/en_us.json
index 10efbecc9..5f7eb1985 100644
--- a/client/src/resources/lang/en_us.json
+++ b/client/src/resources/lang/en_us.json
@@ -1283,7 +1283,7 @@
     
     "wiki.article.standard.priority.title":"Priority",
     "wiki.article.standard.priority.title:var.0":"Priorities",
-    "wiki.article.standard.priority.text":"***Some information in this article may be old, or incorrect***\n\nAbilities are used in a specific order called priority order. If 2 players have abilities that go on the same priority, the player with the lower player number will go first. It is recommended that you read a role's manual page before this page. Some abilities go before night starts. Attacking someone doesn't kill them until the end of the night. Here are all the priorities and the abilities that happen in them.\n\n**Before Night (Not a priority)**\n\n- Jailor chooses who to jail\n- Reporter chooses who to interview\n- Spy finds if an apostle can convert\n- Create Visits\n  - All visits are decided by who is selected by each players. During each priority, each associated ability is activated using who is being visited by who, which is not necessarily who the player selected (in the case of a transporter, witch, etc...).\n\n**1: Top Priority**\n\n- Ojo (Visit every player with certain role)\n- Doomsayer (Kill)\n- Revolutionary (Suicide)\n- Jester (Haunt)\n- Veteran (Decide to Rampage)\n- Vigilante (Suicide)\n\n**2: Transporter**\n\n- Transporter (Swap Visits)\n\n**3: Possess**\n\n- Syndicate Witch (Possess)\n\n**4: Necromancy**\n\n- Retributionist (Possess/Change Visits)\n- Necromancer (Possess/Change Visits)\n\n**5: roleblock**\n\n- Bouncer (roleblock)\n- Hypnotist (roleblock)\n- Escort (roleblock)\n- Jailor (Invisible roleblock)\n\n**6: Deception**\n\n- Hypnotist (Hypnotize)\n- Framer (Frame)\n- Blackmailer (Silence)\n- Mortician (Tag)\n- Arsonist (Douse)\n\n**7: Bodyguard**\n\n- Bodyguard (Change visits)\n\n**8: Heal**\n\n- Engineer (Intentionally dismantle, set, or use trap)\n- Bodyguard (Defend themselves)\n- Sentinel (Protect target)\n- Guardian (Defend)\n- Veteran (Defend themselves)\n\n**9: Kill**\n\n- Ojo (Kill)\n- Apostle (Kill)\n- Zealot (Kill)\n- Martyr (Kill)\n- Engineer (Indirect Kill)\n- Arsonist (Ignite)\n- Bodyguard (Attack attacker)\n- Sentinel (Attack Visitor)\n- Godfather (Attack or Make Backup Attack)\n- Jailor (Attack)\n- Mafioso (Attack)\n- Veteran (Rampage)\n- Vigilante (Attack)\n- Werewolf (Rampage and attacks)\n\n**10: Investigative**\n\n- Ojo (See)\n- Reporter (Add Report Message)\n- Psychic (Vision)\n- Engineer (Traps report info)\n- Engineer (Dismantle if triggered) \n- Arsonist (Find who is doused)\n- Bodyguard (Find if protected)\n- Informant (Investigate)\n- Sentinel (Find if protected)\n- Guardian (Find if protected)\n- Mortician (Find role and alibi)\n- Forger (Find role and alibi)\n- Lookout (Investigate)\n- Philosopher (Investigate)\n- Detective (Investigate)\n- Spy (Find who the Syndicate Visits)\n- Tracker (Investigate)\n- Werewolf (Track players scent)\n\n**11: Spy Bug**\n\n- Spy (Bug)\n\n**12: Steal Messages**\n\n- Syndicate Witch (Get target messages)\n- Necromancer (Get target messages)\n- Retributionist (Get target messages)\n\n**13: Convert**\n\n- Apostle (Convert)",
+    "wiki.article.standard.priority.text":"At the end of night many abilities happen at nearly the same time. They happen in a specific order called priority. Knowing the order of some things can help understanding of some game mechanics.\nThis is the general priority order, with some additional notes:\n- TopPriority\n- Ward\n    - Bouncer, Scarecrow, Kidnapper, Jailor, and Warden all ward here\n- Transporter\n- Warper\n- Possess\n    - Witch gets second visit deleted here\n- Roleblock\n    - Hypnotist and Escort go here\n- Deception\n    - Forger, Framer, Blackmailer go here\n    - Framer gets the second visit deleted here\n    - Syndicate backup visit is erased if the killing is blocked\n- Bodyguard\n    - Bodyguard moves the attacking visit to be towards themself\n- Heal\n    - Protective roles like Doctor and Armorsmith go here\n- Kill\n- Convert\n    - Win condition changes go here\n- Poison\n- Investigative\n    - Roles like Detective, Snoop, Lookout, and Spy go here\n- Cupid\n- SpyBug\n- StealMessages\n    - Witch steals messages\n",
 
     "wiki.article.standard.chat.title:var.0":"Chat Messages",
     "wiki.article.standard.chat.title":"Chat",
diff --git a/server/src/game/player/player_helper_functions.rs b/server/src/game/player/player_helper_functions.rs
index 2b4ae811b..c074617fc 100644
--- a/server/src/game/player/player_helper_functions.rs
+++ b/server/src/game/player/player_helper_functions.rs
@@ -182,8 +182,6 @@ impl PlayerReference{
                         AbilitySelection::Integer { .. } => {},
                         AbilitySelection::Kira { .. } => {},
                     }
-                    
-                    
                 }
 
                 possessed_visit.target.set_night_visits(game,

From 76f5055bf28afc3ff72e5b8a3e18f3575a32fe1e Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Tue, 7 Jan 2025 17:36:37 -0800
Subject: [PATCH 6/8] Get rid of weird stateType-specific functions on
 gameManager

---
 client/src/components/ChatMessage.tsx         | 85 +++++++++++--------
 client/src/components/TextAreaDropdown.tsx    |  8 +-
 client/src/components/WikiArticle.tsx         |  4 +-
 client/src/components/useHooks.tsx            | 28 ++++++
 client/src/game/gameManager.d.tsx             |  8 +-
 client/src/game/gameManager.tsx               | 53 ------------
 client/src/game/messageListener.tsx           | 48 ++++++-----
 client/src/index.tsx                          | 10 +--
 client/src/menu/game/HeaderMenu.tsx           | 26 ++++--
 .../menu/game/gameScreenContent/ChatMenu.tsx  | 16 ++--
 .../game/gameScreenContent/GraveyardMenu.tsx  |  6 +-
 .../game/gameScreenContent/PlayerListMenu.tsx | 11 ++-
 client/src/menu/lobby/LobbyNamePane.tsx       | 11 ++-
 13 files changed, 160 insertions(+), 154 deletions(-)

diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
index 47f6823d2..c05f5462b 100644
--- a/client/src/components/ChatMessage.tsx
+++ b/client/src/components/ChatMessage.tsx
@@ -10,7 +10,7 @@ import DOMPurify from "dompurify";
 import GraveComponent from "./grave";
 import { RoleOutline, translateRoleOutline } from "../game/roleListState.d";
 import { CopyButton } from "./ClipboardButtons";
-import { useGameState, useLobbyOrGameState, usePlayerState } from "./useHooks";
+import { useGameState, useLobbyOrGameState, usePlayerNames, usePlayerState, useSpectator } from "./useHooks";
 import { KiraResult, KiraResultDisplay } from "../menu/game/gameScreenContent/AbilityMenu/AbilitySelectionTypes/KiraSelectionMenu";
 import { AuditorResult } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/AuditorMenu";
 import { ControllerID, AbilitySelection, translateControllerID, controllerIdToLink } from "../game/abilityInput";
@@ -37,7 +37,8 @@ const ChatElement = React.memo((
     const [mouseHovering, setMouseHovering] = React.useState(false); 
 
     const message = props.message;
-    const playerNames = props.playerNames ?? GAME_MANAGER.getPlayerNames();
+    const realPlayerNames = usePlayerNames();
+    const playerNames = props.playerNames ?? realPlayerNames;
     const chatMessageStyles = require("../resources/styling/chatMessage.json");
     if(message.variant === undefined){
         console.error("ChatElement message with undefined variant:");
@@ -132,33 +133,13 @@ const ChatElement = React.memo((
                 />
             </div>
         case "playerDied":
-
-            let graveRoleString: string;
-            switch (message.variant.grave.information.type) {
-                case "obscured":
-                    graveRoleString = translate("obscured");
-                    break;
-                case "normal":
-                    graveRoleString = translate("role."+message.variant.grave.information.role+".name");
-                    break;
-            }
-
-            return <div className={"chat-message-div"}>
-                <DetailsSummary
-                    summary={
-                        <StyledText className={"chat-message " + style}
-                            playerKeywordData={props.playerKeywordData}
-                        >
-                            {(chatGroupIcon??"")} {translate("chatMessage.playerDied",
-                                playerNames[message.variant.grave.player], graveRoleString
-                            )}
-                        </StyledText>
-                    }
-                    defaultOpen={GAME_MANAGER.getMySpectator()}
-                >
-                    <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
-                </DetailsSummary>
-            </div>;
+            return <PlayerDiedChatMessage
+                playerKeywordData={props.playerKeywordData}
+                style={style}
+                chatGroupIcon={chatGroupIcon}
+                playerNames={playerNames}
+                message={message as any}
+            />
     }
 
     return <div
@@ -179,6 +160,43 @@ const ChatElement = React.memo((
     </div>;
 });
 
+function PlayerDiedChatMessage(props: Readonly<{
+    playerKeywordData?: KeywordDataMap,
+    style: string,
+    chatGroupIcon: string | null,
+    playerNames: string[],
+    message: ChatMessage & { variant: { type: "playerDied" } }
+}>): ReactElement {
+    let graveRoleString: string;
+    switch (props.message.variant.grave.information.type) {
+        case "obscured":
+            graveRoleString = translate("obscured");
+            break;
+        case "normal":
+            graveRoleString = translate("role."+props.message.variant.grave.information.role+".name");
+            break;
+    }
+
+    const spectator = useSpectator();
+
+    return <div className={"chat-message-div"}>
+        <DetailsSummary
+            summary={
+                <StyledText className={"chat-message " + props.style}
+                    playerKeywordData={props.playerKeywordData}
+                >
+                    {(props.chatGroupIcon ?? "")} {translate("chatMessage.playerDied",
+                        props.playerNames[props.message.variant.grave.player], graveRoleString
+                    )}
+                </StyledText>
+            }
+            defaultOpen={spectator}
+        >
+            <GraveComponent grave={props.message.variant.grave} playerNames={props.playerNames}/>
+        </DetailsSummary>
+    </div>;
+}
+
 function LobbyChatMessage(props: Readonly<{
     message: ChatMessage & { variant: { type: "lobbyMessage" } }
     playerNames: string[],
@@ -326,14 +344,9 @@ export function sanitizePlayerMessage(text: string): string {
 
 export function translateChatMessage(
     message: ChatMessageVariant,
-    playerNames?: string[],
+    playerNames: string[],
     roleList?: RoleOutline[]
 ): string {
-
-    if (playerNames === undefined) {
-        playerNames = GAME_MANAGER.getPlayerNames();
-    }
-
     switch (message.type) {
         case "lobbyMessage":
             return sanitizePlayerMessage(replaceMentions(message.text, playerNames));
@@ -522,7 +535,7 @@ export function translateChatMessage(
                     out = translate("chatMessage.abilityUsed.selection.twoRoleOutlineOption", first, second);
                     break;
                 case "string":
-                    out = translate("chatMessage.abilityUsed.selection.string", sanitizePlayerMessage(replaceMentions(message.selection.selection)));
+                    out = translate("chatMessage.abilityUsed.selection.string", sanitizePlayerMessage(replaceMentions(message.selection.selection, playerNames)));
                     break;
                 case "integer":
                     let text = translateChecked("controllerId."+controllerIdToLink(message.abilityId).replace(/\//g, ".") + ".integer." + message.selection.selection);
diff --git a/client/src/components/TextAreaDropdown.tsx b/client/src/components/TextAreaDropdown.tsx
index 5207ef69f..37f3b5652 100644
--- a/client/src/components/TextAreaDropdown.tsx
+++ b/client/src/components/TextAreaDropdown.tsx
@@ -7,6 +7,7 @@ import Icon from "./Icon";
 import translate from "../game/lang";
 import "./textAreaDropdown.css";
 import DetailsSummary from "./DetailsSummary";
+import { usePlayerNames } from "./useHooks";
 
 export function TextDropdownArea(props: Readonly<{
     titleString: string,
@@ -82,6 +83,8 @@ function TextDropdownLabel(
         return props.savedText !== props.field
     }, [props.field, props.savedText]);
 
+    const playerNames = usePlayerNames();
+
     function save(field: string) {
         props.onSave(field);
     }
@@ -92,7 +95,7 @@ function TextDropdownLabel(
     }
 
     return <div>
-        <StyledText>{replaceMentions(props.titleString)}</StyledText>
+        <StyledText>{replaceMentions(props.titleString, playerNames)}</StyledText>
         <span>
             {props.onSubtract ? <Button
                 onClick={(e) => {
@@ -152,6 +155,7 @@ function PrettyTextArea(props: Readonly<{
 }>): ReactElement {
     const [writing, setWriting] = useState<boolean>(false);
     const [hover, setHover] = useState<boolean>(false);
+    const playerNames = usePlayerNames();
 
     return <div className="pretty-text-area"
         onMouseEnter={() => setHover(true)}
@@ -162,7 +166,7 @@ function PrettyTextArea(props: Readonly<{
     >
         {(!writing && !hover)
             ? <div className="textarea">
-                <StyledText noLinks={true}>{sanitizePlayerMessage(replaceMentions(props.field))}</StyledText>
+                <StyledText noLinks={true}>{sanitizePlayerMessage(replaceMentions(props.field, playerNames))}</StyledText>
             </div>
             : <textarea
                 value={props.field}
diff --git a/client/src/components/WikiArticle.tsx b/client/src/components/WikiArticle.tsx
index c30efd7b5..e82a13ce1 100644
--- a/client/src/components/WikiArticle.tsx
+++ b/client/src/components/WikiArticle.tsx
@@ -107,7 +107,7 @@ export default function WikiArticle(props: {
             return <section className="wiki-article">
                 <WikiStyledText className="wiki-article-standard">
                     {"# "+translate(`wiki.article.${articleType}.${props.article.split("/")[1]}.title`)+"\n"}
-                    {replaceMentions(translate(`wiki.article.${articleType}.${props.article.split("/")[1]}.text`))}
+                    {replaceMentions(translate(`wiki.article.${articleType}.${props.article.split("/")[1]}.text`), DUMMY_NAMES)}
                 </WikiStyledText>
             </section>
         }
@@ -139,7 +139,7 @@ function CategoryArticle(props: Readonly<{ category: WikiCategory }>): ReactElem
     return <section className="wiki-article">
         <WikiStyledText className="wiki-article-standard">
             {"# "+title+"\n"}
-            {description ? replaceMentions(description) : ""}
+            {description ? replaceMentions(description, DUMMY_NAMES) : ""}
         </WikiStyledText>
         <PageCollection 
             title={title}
diff --git a/client/src/components/useHooks.tsx b/client/src/components/useHooks.tsx
index d7ab73e48..e2c4ca21d 100644
--- a/client/src/components/useHooks.tsx
+++ b/client/src/components/useHooks.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import GAME_MANAGER from "..";
 import { StateEventType } from "../game/gameManager.d";
 import GameState, { LobbyState, PlayerGameState } from "../game/gameState.d";
+import DUMMY_NAMES from "../resources/dummyNames.json";
 
 function usePacketListener(listener: (type?: StateEventType) => void) {
     // Catch all the packets we miss between setState and useEffect
@@ -132,4 +133,31 @@ export function usePlayerState<T>(
         }, 
         events, fallback
     );
+}
+
+export function useSpectator(): boolean | undefined {
+    return useLobbyOrGameState(
+        state => {
+            if (state.stateType === "lobby")
+                return state.players.get(state.myId!)?.clientType.type === "spectator";
+            if (state.stateType === "game")
+                return state.clientState.type === "spectator";
+            return false;
+        },
+        ["acceptJoin", "rejectStart", "startGame", "lobbyClients", "gamePlayers", "yourId"]
+    )
+}
+
+export function usePlayerNames(): string[] {
+    return useLobbyOrGameState(
+        state => {
+            if (state.stateType === "game") {
+                return state.players.map(player => player.toString())
+            } else {
+                return []
+            }
+        },
+        [],
+        DUMMY_NAMES
+    )!;
 }
\ No newline at end of file
diff --git a/client/src/game/gameManager.d.tsx b/client/src/game/gameManager.d.tsx
index aef56d693..538bfda94 100644
--- a/client/src/game/gameManager.d.tsx
+++ b/client/src/game/gameManager.d.tsx
@@ -1,7 +1,7 @@
 import { WikiArticleLink } from "../components/WikiArticleLink";
 import { DoomsayerGuess } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/LargeDoomsayerMenu";
 import { AbilityInput } from "./abilityInput";
-import { PhaseType, PhaseTimes, PlayerIndex, State, Verdict, Player, ModifierType } from "./gameState.d";
+import { PhaseType, PhaseTimes, PlayerIndex, State, Verdict, ModifierType } from "./gameState.d";
 import { ToClientPacket, ToServerPacket } from "./packet";
 import { RoleList, RoleOutline } from "./roleListState.d";
 import { Role } from "./roleState.d";
@@ -27,12 +27,6 @@ export type GameManager = {
     
 
     state: State,
-    getMyName(): string | undefined,
-    getMyHost(): boolean | undefined,
-    getMySpectator(): boolean,
-    getPlayerNames(): string[],
-    getLivingPlayers(): Player[] | null,
-    getVotesRequired(): number | null,
     updateChatFilter(filter: PlayerIndex | null): void,
 
     server: Server,
diff --git a/client/src/game/gameManager.tsx b/client/src/game/gameManager.tsx
index db4a1739b..161f86cbe 100644
--- a/client/src/game/gameManager.tsx
+++ b/client/src/game/gameManager.tsx
@@ -11,7 +11,6 @@ import { RoleOutline } from "./roleListState.d";
 import translate from "./lang";
 import PlayMenu from "../menu/main/PlayMenu";
 import { createGameState, createLobbyState } from "./gameState";
-import DUMMY_NAMES from "../resources/dummyNames.json";
 import { deleteReconnectData } from "./localStorage";
 import AudioController from "../menu/AudioController";
 
@@ -108,58 +107,6 @@ export function createGameManager(): GameManager {
             stateType: "disconnected"
         },
 
-        getMyName() {
-            if (gameManager.state.stateType === "lobby"){
-                let client = gameManager.state.players.get(gameManager.state.myId!);
-                if(client === undefined || client === null) return undefined;
-                if(client.clientType.type === "spectator") return undefined;
-                return client.clientType.name;
-            }
-            if (gameManager.state.stateType === "game" && gameManager.state.clientState.type === "player")
-                return gameManager.state.players[gameManager.state.clientState.myIndex!]?.name;
-            return undefined;
-        },
-        getMyHost() {
-            if (gameManager.state.stateType === "lobby")
-                return gameManager.state.players.get(gameManager.state.myId!)?.ready === "host";
-            if (gameManager.state.stateType === "game")
-                return gameManager.state.host;
-            return undefined;
-        },
-        getMySpectator() {
-            if (gameManager.state.stateType === "lobby")
-                return gameManager.state.players.get(gameManager.state.myId!)?.clientType.type === "spectator";
-            if (gameManager.state.stateType === "game")
-                return gameManager.state.clientState.type === "spectator";
-            return false;
-        },
-        getPlayerNames(): string[] {
-            switch (GAME_MANAGER.state.stateType) {
-                case "game":
-                    return GAME_MANAGER.state.players.map((player) => player.toString());
-                case "lobby":
-                    return [];
-                default:
-                    return DUMMY_NAMES;
-            }
-        },
-        getLivingPlayers(): Player[] | null{
-            if(GAME_MANAGER.state.stateType !== "game") return null;
-            return GAME_MANAGER.state.players.filter(player => player.alive)
-        },
-        getVotesRequired(): number | null{            
-            let count = 1;
-            let livingPlayers = GAME_MANAGER.getLivingPlayers();
-            if(livingPlayers === null) return null;
-            for (let player of livingPlayers) {
-                if (player.alive && !player.playerTags.includes("forfeitVote")) {
-                    count += 1;
-                }
-            }
-
-
-            return Math.ceil(count / 2);
-        },
         updateChatFilter(filter: PlayerIndex | null) {
             if(GAME_MANAGER.state.stateType === "game" && GAME_MANAGER.state.clientState.type === "player"){
                 GAME_MANAGER.state.clientState.chatFilter = filter===null?null:{
diff --git a/client/src/game/messageListener.tsx b/client/src/game/messageListener.tsx
index 30109beca..04070aa3f 100644
--- a/client/src/game/messageListener.tsx
+++ b/client/src/game/messageListener.tsx
@@ -149,7 +149,7 @@ export default function messageListener(packet: ToClientPacket){
                 }
                 GAME_MANAGER.state.players = new ListMap(GAME_MANAGER.state.players.entries());
             }else if(GAME_MANAGER.state.stateType === "game"){
-                GAME_MANAGER.state.host = packet.hosts.includes(GAME_MANAGER.state.myId===null?-1:GAME_MANAGER.state.myId)
+                GAME_MANAGER.state.host = packet.hosts.includes(GAME_MANAGER.state.myId ?? -1)
             }
         break;
         case "playersReady":
@@ -194,13 +194,13 @@ export default function messageListener(packet: ToClientPacket){
         case "lobbyClients":
             if(GAME_MANAGER.state.stateType === "lobby"){
 
-                let oldMySpectator = GAME_MANAGER.getMySpectator();
+                const oldMySpectator = GAME_MANAGER.state.players.get(GAME_MANAGER.state.myId!)?.clientType.type === "spectator";
 
                 GAME_MANAGER.state.players = new ListMap();
                 for(let [clientId, lobbyClient] of packet.clients){
                     GAME_MANAGER.state.players.insert(clientId, lobbyClient);
                 }
-                let newMySpectator = GAME_MANAGER.getMySpectator();
+                const newMySpectator = GAME_MANAGER.state.players.get(GAME_MANAGER.state.myId!)?.clientType.type === "spectator";
 
                 
                 if (oldMySpectator && !newMySpectator){
@@ -220,28 +220,30 @@ export default function messageListener(packet: ToClientPacket){
                 GAME_MANAGER.state.lobbyName = packet.name;
             }
         break;
-        case "startGame": {
-            const isSpectator = GAME_MANAGER.getMySpectator();
-            if(isSpectator){
-                GAME_MANAGER.setSpectatorGameState();
-                ANCHOR_CONTROLLER?.setContent(<LoadingScreen type="join" />)
-            }else{
-                GAME_MANAGER.setGameState();
-                ANCHOR_CONTROLLER?.setContent(<LoadingScreen type="join" />)
+        case "startGame": 
+            if (GAME_MANAGER.state.stateType === "lobby") {
+                const isSpectator = GAME_MANAGER.state.players.get(GAME_MANAGER.state.myId!)?.clientType.type === "spectator";
+                if(isSpectator){
+                    GAME_MANAGER.setSpectatorGameState();
+                    ANCHOR_CONTROLLER?.setContent(<LoadingScreen type="join" />)
+                }else{
+                    GAME_MANAGER.setGameState();
+                    ANCHOR_CONTROLLER?.setContent(<LoadingScreen type="join" />)
+                }
+    
+                AudioController.queueFile("audio/start_game.mp3");
             }
-
-            AudioController.queueFile("audio/start_game.mp3");
-        }
-        break;
-        case "gameInitializationComplete": {
-            const isSpectator = GAME_MANAGER.getMySpectator();
-            if(isSpectator){
-                ANCHOR_CONTROLLER?.setContent(<SpectatorGameScreen/>);
-            }else{
-                ANCHOR_CONTROLLER?.setContent(<GameScreen/>);
+            break;
+        case "gameInitializationComplete":
+            if (GAME_MANAGER.state.stateType === "game") {
+                const isSpectator = GAME_MANAGER.state.clientState.type === "spectator";
+                if(isSpectator){
+                    ANCHOR_CONTROLLER?.setContent(<SpectatorGameScreen/>);
+                }else{
+                    ANCHOR_CONTROLLER?.setContent(<GameScreen/>);
+                }
             }
-        }
-        break;
+            break;
         case "backToLobby":
             GAME_MANAGER.setLobbyState();
             ANCHOR_CONTROLLER?.setContent(<LobbyMenu/>);
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 5d1a14c7e..10367a136 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -53,15 +53,7 @@ export function regEscape(text: string) {
     return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
 }
 
-export function replaceMentions(rawText: string, playerNames?: string[]) {
-
-    if (playerNames === undefined) {
-        playerNames = GAME_MANAGER.getPlayerNames();
-        if (playerNames === undefined) {
-            return rawText;
-        }
-    }
-
+export function replaceMentions(rawText: string, playerNames: string[]) {
     let text = rawText;
     playerNames.forEach((player, i) => {
         text = text.replace(find(`@${i + 1}`), player);
diff --git a/client/src/menu/game/HeaderMenu.tsx b/client/src/menu/game/HeaderMenu.tsx
index b6c6a8824..5304fbeeb 100644
--- a/client/src/menu/game/HeaderMenu.tsx
+++ b/client/src/menu/game/HeaderMenu.tsx
@@ -7,7 +7,7 @@ import "./headerMenu.css";
 import StyledText from "../../components/StyledText";
 import Icon from "../../components/Icon";
 import { Button } from "../../components/Button";
-import { useGameState, usePlayerState } from "../../components/useHooks";
+import { useGameState, usePlayerState, useSpectator } from "../../components/useHooks";
 import { MobileContext } from "../Anchor";
 
 
@@ -26,9 +26,16 @@ export default function HeaderMenu(props: Readonly<{
         (phaseState.type === "night" || phaseState.type === "obituary") ? "background-night" : 
         "background-day";
 
+    const host = useGameState(
+        state => state.host,
+        ["playersHost"]
+    )!;
+
+    const spectator = useSpectator();
+
 
     return <div className={"header-menu " + backgroundStyle}>
-        {!(GAME_MANAGER.getMySpectator() && !GAME_MANAGER.getMyHost()) && <FastForwardButton />}
+        {!(spectator && !host) && <FastForwardButton />}
         <Information />
         {!mobile && <MenuButtons chatMenuNotification={props.chatMenuNotification}/>}
         <Timer />
@@ -106,6 +113,8 @@ function Information(): ReactElement {
             return ` ${dayNumber}`;
         }
     }, [dayNumber, phaseState.type])
+
+    const spectator = useSpectator();
     
 
     return <div className="information"> 
@@ -116,11 +125,9 @@ function Information(): ReactElement {
                         {translate("phase."+phaseState.type)}{dayNumberText}⏳{timeLeftText}
                     </div>
                 </h3>
-                {GAME_MANAGER.getMySpectator() 
-                    || <StyledText>
-                        {myName + " (" + translate("role."+(roleState!.type)+".name") + ")"}
-                    </StyledText>
-                }
+                {spectator || <StyledText>
+                    {myName + " (" + translate("role."+(roleState!.type)+".name") + ")"}
+                </StyledText>}
             </div>
         </div>
         <PhaseSpecificInformation players={players} myIndex={myIndex} phaseState={phaseState}/>
@@ -136,6 +143,9 @@ export function PhaseSpecificInformation(props: Readonly<{
         gameState => gameState.enabledModifiers,
         ["enabledModifiers"]
     )!
+
+    const spectator = useSpectator();
+
     if (
         props.phaseState.type === "testimony"
         || props.phaseState.type === "finalWords"
@@ -146,7 +156,7 @@ export function PhaseSpecificInformation(props: Readonly<{
                 <StyledText>
                     {translate(`${props.phaseState.type}.playerOnTrial`, props.players[props.phaseState.playerOnTrial].toString())}
                 </StyledText>
-                {!GAME_MANAGER.getMySpectator() && props.phaseState.type === "judgement" && <div className="judgement-info">
+                {!spectator && props.phaseState.type === "judgement" && <div className="judgement-info">
                     {(() => {
                         if (props.phaseState.playerOnTrial === props.myIndex) {
                             return translate("judgement.cannotVote.onTrial");
diff --git a/client/src/menu/game/gameScreenContent/ChatMenu.tsx b/client/src/menu/game/gameScreenContent/ChatMenu.tsx
index ec3d6bf1d..bd77c3aec 100644
--- a/client/src/menu/game/gameScreenContent/ChatMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/ChatMenu.tsx
@@ -10,7 +10,7 @@ import { HistoryPoller, HistoryQueue } from "../../../history";
 import { Button } from "../../../components/Button";
 import Icon from "../../../components/Icon";
 import StyledText, { KeywordDataMap, PLAYER_KEYWORD_DATA, PLAYER_SENDER_KEYWORD_DATA } from "../../../components/StyledText";
-import { useGameState, useLobbyOrGameState, usePlayerState } from "../../../components/useHooks";
+import { useGameState, useLobbyOrGameState, usePlayerNames, usePlayerState } from "../../../components/useHooks";
 import { Virtuoso } from 'react-virtuoso';
 
 
@@ -25,17 +25,19 @@ export default function ChatMenu(): ReactElement {
         ["yourSendChatGroups"]
     );
 
+    const playerNames = usePlayerNames();
+
     const filterString = useMemo(() => {
         if (filter === undefined || filter === null) {
             return "";
         } else if (filter.type === "playerNameInMessage") {
-            return GAME_MANAGER.getPlayerNames()[filter.player];
+            return playerNames[filter.player];
         } else if (filter.type === "myWhispersWithPlayer") {
-            return GAME_MANAGER.getPlayerNames()[filter.player];
+            return playerNames[filter.player];
         }else{
             return "";
         }
-    }, [filter]);
+    }, [filter, playerNames]);
 
     return <div className="chat-menu chat-menu-colors">
         <ContentTab close={ContentMenu.ChatMenu} helpMenu={"standard/chat"}>{translate("menu.chat.title")}</ContentTab>
@@ -108,13 +110,13 @@ export function ChatMessageSection(props: Readonly<{
                             }
                             break;
                         case "targetsMessage":
-                            msgTxt = translateChatMessage(msg.variant.message, GAME_MANAGER.getPlayerNames());
+                            msgTxt = translateChatMessage(msg.variant.message, players.map(player => player.toString()));
                             break;
                     }
 
-                    msgTxt += translateChatMessage(msg.variant, GAME_MANAGER.getPlayerNames());
+                    msgTxt += translateChatMessage(msg.variant, players.map(player => player.toString()));
                     
-                    return msgTxt.includes(GAME_MANAGER.getPlayerNames()[filter.player]);
+                    return msgTxt.includes(players[filter.player].toString());
                 case "myWhispersWithPlayer":
                     switch (msg.variant.type) {
                         //translateChatMessage errors for playerDied type.
diff --git a/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx b/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
index e96c221c5..5e84c78b8 100644
--- a/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
@@ -5,7 +5,7 @@ import { ContentMenu, ContentTab } from "../GameScreen";
 import "./graveyardMenu.css";
 import StyledText from "../../../components/StyledText";
 import { EnabledRolesDisplay } from "../../../components/gameModeSettings/EnabledRoleSelector";
-import { useGameState, usePlayerState } from "../../../components/useHooks";
+import { useGameState, usePlayerState, useSpectator } from "../../../components/useHooks";
 import { translateRoleOutline } from "../../../game/roleListState.d";
 import { Button } from "../../../components/Button";
 import DetailsSummary from "../../../components/DetailsSummary";
@@ -37,6 +37,8 @@ function RoleListDisplay(): ReactElement {
         []
     )!
 
+    const spectator = useSpectator();
+
     return <>
         {roleList.map((entry, index)=>{
             return <Button
@@ -44,7 +46,7 @@ function RoleListDisplay(): ReactElement {
                 style={{ gridRow: index + 1 }}
                 key={index}
                 onClick={()=>{
-                    if (GAME_MANAGER.getMySpectator()) return;
+                    if (spectator) return;
 
                     let newCrossedOutOutlines;
                     if(crossedOutOutlines.includes(index))
diff --git a/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx b/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx
index df1a6225b..e6611cd11 100644
--- a/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx
@@ -8,7 +8,7 @@ import { ContentMenu, ContentTab } from "../GameScreen";
 import StyledText from "../../../components/StyledText";
 import Icon from "../../../components/Icon";
 import { Button } from "../../../components/Button";
-import { useGameState, usePlayerState } from "../../../components/useHooks";
+import { useGameState, usePlayerNames, usePlayerState, useSpectator } from "../../../components/useHooks";
 import PlayerNamePlate from "../../../components/PlayerNamePlate";
 import ChatMessage, { translateChatMessage } from "../../../components/ChatMessage";
 import GraveComponent, { translateGraveRole } from "../../../components/grave";
@@ -92,6 +92,7 @@ function PlayerCard(props: Readonly<{
         playerState => playerState.sendChatGroups,
         ["yourSendChatGroups"]
     );
+    const playerNames = usePlayerNames();
 
     type NonAnonymousBlockMessage = {
         variant: {
@@ -145,6 +146,8 @@ function PlayerCard(props: Readonly<{
         false
     );
 
+    const spectator = useSpectator();
+
     return <><div 
         className={`player-card`}
         key={props.playerIndex}
@@ -155,7 +158,7 @@ function PlayerCard(props: Readonly<{
             <Button onClick={()=>setAlibiOpen(!alibiOpen)}>
                 <StyledText noLinks={true}>
                     {
-                        translateChatMessage(mostRecentBlockMessage.variant)
+                        translateChatMessage(mostRecentBlockMessage.variant, playerNames)
                             .split("\n")[1]
                             .trim()
                             .substring(0,30)
@@ -177,7 +180,7 @@ function PlayerCard(props: Readonly<{
             <StyledText>{translate("menu.playerList.player.votes", numVoted)}</StyledText>
         }
         <VoteButton playerIndex={props.playerIndex} />
-        {GAME_MANAGER.getMySpectator() ||
+        {spectator ||
             <Button 
                 disabled={isPlayerSelf || whispersDisabled}
                 onClick={()=>{
@@ -195,7 +198,7 @@ function PlayerCard(props: Readonly<{
                 {whisperNotification===true && <div className="chat-notification highlighted">!</div>}
             </Button>
         }
-        {GAME_MANAGER.getMySpectator() || (() => {
+        {spectator || (() => {
             const filter = props.playerIndex;
             const isFilterSet = chatFilter?.type === "playerNameInMessage" && (chatFilter.player === filter);
             
diff --git a/client/src/menu/lobby/LobbyNamePane.tsx b/client/src/menu/lobby/LobbyNamePane.tsx
index bf22bd311..03ccda911 100644
--- a/client/src/menu/lobby/LobbyNamePane.tsx
+++ b/client/src/menu/lobby/LobbyNamePane.tsx
@@ -38,11 +38,20 @@ export default function LobbyNamePane(): ReactElement {
 }
 
 function NameSelector(): ReactElement {
+    const myName = useLobbyState(
+        state => {
+            const client = state.players.get(state.myId!);
+            if(client === undefined || client === null) return undefined;
+            if(client.clientType.type === "spectator") return undefined;
+            return client.clientType.name;
+        },
+        ["lobbyClients", "yourId"]
+    );
     const [enteredName, setEnteredName] = React.useState("");
 
     return <div className="name-pane-selector">
         <div className="lobby-name">
-            <section><h2>{GAME_MANAGER.getMyName() ?? ""}</h2></section>
+            <section><h2>{myName ?? ""}</h2></section>
         </div>
         <div className="name-box">
             <input type="text" value={enteredName}

From 6e4bf52a1761aa0cd01e32ba5717ba943fa62864 Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Tue, 7 Jan 2025 18:35:41 -0800
Subject: [PATCH 7/8] Fix infinite loading in a lot of spots

---
 client/src/game/gameManager.d.tsx  |  6 ++--
 client/src/game/gameManager.tsx    | 46 +++++++++++++++++++++++-------
 client/src/menu/main/StartMenu.tsx |  7 +++--
 client/src/routing.tsx             | 36 +++++++++++++----------
 4 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/client/src/game/gameManager.d.tsx b/client/src/game/gameManager.d.tsx
index 538bfda94..4085ca857 100644
--- a/client/src/game/gameManager.d.tsx
+++ b/client/src/game/gameManager.d.tsx
@@ -9,12 +9,12 @@ import { Role } from "./roleState.d";
 export type Server = {
     ws: WebSocket | null,
 
-    open(): Promise<void>;
+    open(): Promise<boolean>;
     sendPacket(packets: ToServerPacket): void;
     close(): void;
 }
 
-export type StateEventType = ToClientPacket["type"] | "tick" | "filterUpdate" | "openGameMenu" | "closeGameMenu" | "whisperChatOpenOrClose";
+export type StateEventType = ToClientPacket["type"] | "tick" | "filterUpdate" | "openGameMenu" | "closeGameMenu" | "whisperChatOpenOrClose" | "connectionClosed";
 export type StateListener = (type?: StateEventType) => void;
 
 export type GameManager = {
@@ -23,7 +23,7 @@ export type GameManager = {
     setLobbyState(): void;
     setGameState(): void;
     setSpectatorGameState(): void;
-    setOutsideLobbyState(): Promise<void>;
+    setOutsideLobbyState(): Promise<boolean>;
     
 
     state: State,
diff --git a/client/src/game/gameManager.tsx b/client/src/game/gameManager.tsx
index 161f86cbe..0ec61d42f 100644
--- a/client/src/game/gameManager.tsx
+++ b/client/src/game/gameManager.tsx
@@ -92,8 +92,9 @@ export function createGameManager(): GameManager {
             AudioController.clearQueue();
             AudioController.pauseQueue();
             
-            if (!GAME_MANAGER.server.ws?.OPEN) {
-                await GAME_MANAGER.server.open();
+            if (!GAME_MANAGER.server.ws?.OPEN && !await GAME_MANAGER.server.open()) {
+                await this.setDisconnectedState();
+                return false;
             }
 
             GAME_MANAGER.state = {
@@ -101,6 +102,8 @@ export function createGameManager(): GameManager {
                 selectedRoomCode: null,
                 lobbies: new Map<number, LobbyPreviewData>()
             };
+
+            return true;
         },
 
         state: {
@@ -193,13 +196,16 @@ export function createGameManager(): GameManager {
             const promise = new Promise<boolean>((resolver) => {
                 completePromise = resolver;
             });
-            let onJoined: StateListener = (type) => {
+            const onJoined: StateListener = (type) => {
                 if (type === "acceptJoin") {
                     completePromise(true);
                     GAME_MANAGER.removeStateListener(onJoined);
                 } else if (type === "rejectJoin") {
                     completePromise(false);
                     GAME_MANAGER.removeStateListener(onJoined);
+                } else if (type === "connectionClosed") {
+                    completePromise(false);
+                    GAME_MANAGER.removeStateListener(onJoined);
                 }
             };
             GAME_MANAGER.addStateListener(onJoined);
@@ -215,16 +221,19 @@ export function createGameManager(): GameManager {
         },
         sendJoinPacket(roomCode: number) {
             let completePromise: (success: boolean) => void;
-            let promise = new Promise<boolean>((resolver) => {
+            const promise = new Promise<boolean>((resolver) => {
                 completePromise = resolver;
             });
-            let onJoined: StateListener = (type) => {
+            const onJoined: StateListener = (type) => {
                 if (type === "acceptJoin") {
                     completePromise(true);
                     GAME_MANAGER.removeStateListener(onJoined);
                 } else if (type === "rejectJoin") {
                     completePromise(false);
                     GAME_MANAGER.removeStateListener(onJoined);
+                } else if (type === "connectionClosed") {
+                    completePromise(false);
+                    GAME_MANAGER.removeStateListener(onJoined);
                 }
             };
             GAME_MANAGER.addStateListener(onJoined);
@@ -470,20 +479,34 @@ function createServer(){
 
         open : () => {
             let address = CONFIG.address;
-            Server.ws = new WebSocket(address);
+            try {
+                Server.ws = new WebSocket(address);
+            } catch {
+                return Promise.resolve(false);
+            }
 
-            let completePromise: () => void;
-            let promise = new Promise<void>((resolver) => {
-                completePromise = resolver;
-            });
+            let completePromise: (value: boolean) => void;
+            const promise = Promise.race([
+                new Promise<boolean>((resolver) => {
+                    completePromise = resolver;
+                }),
+                new Promise<boolean>((resolver) => {
+                    setTimeout(() => {
+                        resolver(false)
+                    }, 3000)
+                })
+            ]);
 
             Server.ws.onopen = (event: Event)=>{
-                completePromise();
+                completePromise(true);
                 console.log("Connected to server.");
             };
             Server.ws.onclose = (event: CloseEvent)=>{
                 console.log("Disconnected from server.");
+                completePromise(false);
+                GAME_MANAGER.invokeStateListeners("connectionClosed");
                 if (Server.ws === null) return; // We closed it ourselves
+                Server.ws = null;
 
                 ANCHOR_CONTROLLER?.pushErrorCard({
                     title: translate("notification.connectionFailed"), 
@@ -498,6 +521,7 @@ function createServer(){
             };
             Server.ws.onerror = (event: Event) => {
                 Server.close();
+                completePromise(false);
                 ANCHOR_CONTROLLER?.pushErrorCard({
                     title: translate("notification.connectionFailed"), 
                     body: translate("notification.serverNotFound")
diff --git a/client/src/menu/main/StartMenu.tsx b/client/src/menu/main/StartMenu.tsx
index 1957e7305..cab9d05ad 100644
--- a/client/src/menu/main/StartMenu.tsx
+++ b/client/src/menu/main/StartMenu.tsx
@@ -21,8 +21,11 @@ export default function StartMenu(): ReactElement {
             <div>
                 <Button onClick={async () => {
                     setAnchorContent(<LoadingScreen type="default"/>);
-                    await GAME_MANAGER.setOutsideLobbyState();
-                    setAnchorContent(<PlayMenu/>);
+                    if (await GAME_MANAGER.setOutsideLobbyState()) {
+                        setAnchorContent(<PlayMenu/>);
+                    } else {
+                        setAnchorContent(<StartMenu/>);
+                    }
                 }}>
                     <Icon>play_arrow</Icon> {translate("menu.start.button.play")}
                 </Button>
diff --git a/client/src/routing.tsx b/client/src/routing.tsx
index 11f804189..5dddad800 100644
--- a/client/src/routing.tsx
+++ b/client/src/routing.tsx
@@ -32,7 +32,10 @@ async function routeWiki(anchorController: AnchorController, page: string) {
 async function routeLobby(anchorController: AnchorController, roomCode: string) {
     const reconnectData = loadReconnectData();
 
-    await GAME_MANAGER.setOutsideLobbyState();
+    if (!await GAME_MANAGER.setOutsideLobbyState()) {
+        anchorController.setContent(<StartMenu/>);
+        return;
+    }
     
     window.history.replaceState({}, "", '/');
 
@@ -92,25 +95,28 @@ async function route404(anchorController: AnchorController, path: string) {
     )
 }
 
-async function routeMain(anchorController: AnchorController) {
+async function routeMainButFirstTryUsingReconnectData(anchorController: AnchorController) {
     window.history.replaceState({}, "", "/");
 
     const reconnectData = loadReconnectData();
     
-    if (reconnectData) {
-        await GAME_MANAGER.setOutsideLobbyState();
-
-        const success = await GAME_MANAGER.sendRejoinPacket(reconnectData.roomCode, reconnectData.playerId);
-        if (!success) {
-            // Don't show an error message for an auto-rejoin. The user didn't prompt it - they will be confused.
-            // Reconnect data is deleted in messageListener
-            await GAME_MANAGER.setDisconnectedState();
-            anchorController.clearCoverCard();
-            anchorController.setContent(<StartMenu/>);
-        }
-    } else {
+    if (!reconnectData) {
         anchorController.setContent(<StartMenu/>)
+        return;
+    }
+
+    if (!await GAME_MANAGER.setOutsideLobbyState()) {
+        anchorController.setContent(<StartMenu/>);
+        return;
+    }
+
+    if (!await GAME_MANAGER.sendRejoinPacket(reconnectData.roomCode, reconnectData.playerId)) {
+        anchorController.setContent(<StartMenu/>);
+        deleteReconnectData();
+        return;
     }
+
+    // This is where we *should* handle joining the lobby, but it's handled in messageListener... grumble grumble
 }
 
 export default async function route(anchorController: AnchorController, url: Location) {
@@ -135,5 +141,5 @@ export default async function route(anchorController: AnchorController, url: Loc
         return await route404(anchorController, url.pathname);
     }
     
-    return await routeMain(anchorController);
+    return await routeMainButFirstTryUsingReconnectData(anchorController);
 }
\ No newline at end of file

From 185c8632c639b5ee34dd519646b6791e78e50e18 Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Tue, 7 Jan 2025 18:41:57 -0800
Subject: [PATCH 8/8] Fix build

---
 client/src/game/gameManager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/game/gameManager.tsx b/client/src/game/gameManager.tsx
index 0ec61d42f..382c3cab7 100644
--- a/client/src/game/gameManager.tsx
+++ b/client/src/game/gameManager.tsx
@@ -4,7 +4,7 @@ import GAME_MANAGER from "./../index";
 import messageListener from "./messageListener";
 import CONFIG from "./../resources/config.json"
 import React from "react";
-import { PhaseType, PhaseTimes, Verdict, Player, PlayerIndex } from "./gameState.d";
+import { PhaseType, PhaseTimes, Verdict, PlayerIndex } from "./gameState.d";
 import { GameManager, Server, StateListener } from "./gameManager.d";
 import { LobbyPreviewData, ToClientPacket, ToServerPacket } from "./packet";
 import { RoleOutline } from "./roleListState.d";