Merge branch 'main' into resizable-panels

.vscode/settings.json

@@ -6,22 +6,30 @@
         "Chronokaiser",
         "Consig",
         "Deodat",
+        "Disguiser",
         "Doesnt",
         "dompurify",
         "entriy",
         "Informant",
         "Informants",
         "inno",
         "killable",
+        "Kira",
+        "Kiras",
         "Mafiosos",
         "Necro",
         "necronomicon",
+        "Ojos",
         "Parris",
         "Playerlist",
         "Poli",
+        "Pyrolisk",
+        "Pyrolisks",
         "Rabblerouser",
         "rbed",
+        "reeducator",
         "repr",
+        "retrainer",
         "Retri",
         "Retributionist",
         "Retributionists",
@@ -39,6 +47,8 @@
         "tungstenite",
         "unclicked",
         "Unswappable",
+        "Uzumaki",
+        "Uzumakis",
         "vigi",
         "votee",
         "whisperee",

client/package.json

@@ -14,7 +14,6 @@
     "@types/react-dom": "^18.0.11",
     "dompurify": "^3.0.3",
     "marked": "^5.1.0",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-resizable-panels": "^2.1.6",
@@ -25,8 +24,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-    "@types/react-helmet": "^6.1.11",
-    "@types/react-window": "^1.8.8"
+    "@types/react-helmet": "^6.1.11"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/ListMap.tsx

@@ -0,0 +1,32 @@
+export type ListMapData<K, V> = [K, V][]
+
+export default class ListMap<K, V> {
+    list: ListMapData<K, V>;
+    constructor(list: ListMapData<K, V> = []) {
+        this.list = list
+    }
+    get(key: K): V | null {
+        for (const [k, v] of this.list) {
+            if (k === key) {
+                return v
+            }
+        }
+        return null
+    }
+    set(key: K, value: V) {
+        this.list = this.list.filter(([k, v]) => k !== key);
+        this.list.push([key, value])
+    }
+    delete(key: K) {
+        this.list = this.list.filter(([k, v]) => k !== key)
+    }
+    entries(): ListMapData<K, V> {
+        return this.list
+    }
+    keys(): K[] {
+        return this.list.map(([k, v]) => k)
+    }
+    values(): V[] {
+        return this.list.map(([k, v]) => v)
+    }
+}

client/src/components/Button.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { ReactElement, useState } from "react";
+import React, { useEffect, useMemo, useRef, ReactElement, useState, forwardRef } from "react";
 import "./button.css";
 import ReactDOM from "react-dom/client";
+import { THEME_CSS_ATTRIBUTES } from "..";
 
 export type ButtonProps<R> = Omit<JSX.IntrinsicElements['button'], 'onClick' | 'ref'> & {
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => (R | void | Promise<R | void>)
@@ -23,8 +23,21 @@ function reconcileProps<R>(props: ButtonProps<R>): JSX.IntrinsicElements['button
 const POPUP_TIMEOUT_MS = 1000;
 
 export function Button<R>(props: ButtonProps<R>): ReactElement {
+    return <RawButton {...props} />
+}
+
+const RawButton = forwardRef<HTMLButtonElement, ButtonProps<any>>(function RawButton<R>(props: ButtonProps<R>, passedRef: React.ForwardedRef<HTMLButtonElement>): ReactElement {
     const [success, setSuccess] = useState<R | "unclicked">("unclicked");
     const ref = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (typeof passedRef === "function") {
+            passedRef(ref.current);
+        } else if (passedRef) {
+            passedRef.current = ref.current
+        }
+    }, [props, ref, passedRef]);
+
     const popupContainer = useRef<HTMLDivElement>(document.createElement('div'));
 
     let lastTimeout: NodeJS.Timeout | null = null;
@@ -67,7 +80,9 @@ export function Button<R>(props: ButtonProps<R>): ReactElement {
             }
         }}
     >{children}</button>
-}
+})
+
+export { RawButton };
 
 function ButtonPopup(props: { children: React.ReactNode, button: HTMLButtonElement }): ReactElement {
     const ref = useRef<HTMLDivElement>(null);
@@ -78,7 +93,7 @@ function ButtonPopup(props: { children: React.ReactNode, button: HTMLButtonEleme
         const buttonBounds = props.button.getBoundingClientRect();
         ref.current.style.top = `${buttonBounds.bottom}px`;
         ref.current.style.left = `${(buttonBounds.left + buttonBounds.width / 2)}px`;
-        ['background-color', 'primary-border-color', 'primary-color', 'secondary-color', 'tab-color'].forEach(prop => {
+        THEME_CSS_ATTRIBUTES.forEach(prop => {
             if ((ref.current) === null) return;
             ref.current.style.setProperty(`--${prop}`, getComputedStyle(props.button).getPropertyValue(`--${prop}`))
         })

client/src/components/ChatMessage.tsx

@@ -9,12 +9,13 @@ import { Grave } from "../game/graveState";
 import DOMPurify from "dompurify";
 import GraveComponent from "./grave";
 import { RoleOutline, translateRoleOutline } from "../game/roleListState.d";
-import { AuditorResult } from "../menu/game/gameScreenContent/RoleSpecificMenus/LargeAuditorMenu";
-import { PuppeteerAction } from "../menu/game/gameScreenContent/RoleSpecificMenus/SmallPuppeteerMenu";
-import { KiraGuess, KiraGuessResult, kiraGuessTranslate } from "../menu/game/gameScreenContent/RoleSpecificMenus/LargeKiraMenu";
 import { CopyButton } from "./ClipboardButtons";
 import { useLobbyOrGameState, usePlayerState } from "./useHooks";
-import { RecruiterAction } from "../menu/game/gameScreenContent/RoleSpecificMenus/RecruiterMenu";
+import { KiraGuess, KiraGuessResult, kiraGuessTranslate } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/KiraMenu";
+import { AuditorResult } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/AuditorMenu";
+import { PuppeteerAction } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/SmallPuppeteerMenu";
+import { RecruiterAction } from "../menu/game/gameScreenContent/AbilityMenu/RoleSpecificMenus/RecruiterMenu";
+import DetailsSummary from "./DetailsSummary";
 
 const ChatElement = React.memo((
     props: {
@@ -146,20 +147,22 @@ const ChatElement = React.memo((
             }
 
             return <div className={"chat-message-div"}>
-                <details open={GAME_MANAGER.getMySpectator()}>
-                    <summary>
+                <DetailsSummary
+                    summary={
                         <StyledText className={"chat-message " + style}
                             playerKeywordData={props.playerKeywordData}
                         >
                             {(chatGroupIcon??"")} {translate("chatMessage.playerDied",
                                 playerNames[message.variant.grave.player], graveRoleString
                             )}
                         </StyledText>
-                    </summary>
+                    }
+                    defaultOpen={GAME_MANAGER.getMySpectator()}
+                >
                     <div className="grave-message">
                         <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
                     </div>
-                </details>
+                </DetailsSummary>
             </div>;
     }
 
@@ -530,12 +533,6 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
             } else {
                 return translate("chatMessage.spyMafiaVisit", playerListToString(message.players, playerNames));
             }
-        case "spyCultistCount":
-            if(message.count === 1){
-                return translate("chatMessage.spyCultistCount.one");
-            }else{
-                return translate("chatMessage.spyCultistCount", message.count);
-            }
         case "spyBug":
             return translate("chatMessage.spyBug."+message.bug);
         case "trackerResult":
@@ -580,7 +577,7 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
             const visitedByNobody = message.visitedBy.length === 0;
 
             return translate("chatMessage.informantResult",
-                translate("chatMessage.informantResult.role", translate("role."+message.role+".name")),
+                translate("chatMessage.targetHasRole", translate("role."+message.role+".name")),
                 visitedNobody 
                     ? translate("chatMessage.informantResult.visited.nobody") 
                     : translate("chatMessage.informantResult.visited", playerListToString(message.visited, playerNames)),
@@ -609,16 +606,14 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
             );
         case "roleChosen":
             if(message.role === null){
-                return translate("chatMessage.rRoleChosen.none");
+                return translate("chatMessage.roleChosen.none");
             }else{
                 return translate("chatMessage.roleChosen.role", translate("role."+message.role+".name"));
             }
         case "puppeteerActionChosen":
             return translate("chatMessage.puppeteerActionChosen."+message.action);
         case "recruiterActionChosen":
             return translate("chatMessage.recruiterActionChosen."+message.action);
-        case "erosActionChosen":
-            return translate("chatMessage.erosActionChosen."+message.action);
         case "marksmanChosenMarks":
             if(message.marks.length === 0){
                 return translate("chatMessage.marksmanChosenMarks.none");
@@ -630,8 +625,8 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
             return translate("chatMessage.mediumHauntStarted", playerNames[message.medium], playerNames[message.player]);
         case "youWerePossessed":
             return translate("chatMessage.youWerePossessed" + (message.immune ? ".immune" : ""));
-        case "possessionTargetsRole":
-            return translate("chatMessage.possessionTargetsRole", translate("role."+message.role+".name"));
+        case "targetHasRole":
+            return translate("chatMessage.targetHasRole", translate("role."+message.role+".name"));
         case "werewolfTrackingResult":
             if(message.players.length === 0){
                 return translate(
@@ -650,6 +645,11 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
             return translate("chatMessage.youAreLoveLinked", playerNames[message.player]);
         case "playerDiedOfABrokenHeart":
             return translate("chatMessage.playerDiedOfBrokenHeart", playerNames[message.player], playerNames[message.lover]);
+        case "syndicateGunTarget":
+            return translate("chatMessage.syndicateGunTarget",
+                playerNames[message.shooter],
+                message.target===null?translate("nobody"):playerNames[message.target]
+            );
         case "chronokaiserSpeedUp":
             return translate("chatMessage.chronokaiserSpeedUp", message.percent);
         case "deputyShotYou":
@@ -680,6 +680,7 @@ export function translateChatMessage(message: ChatMessageVariant, playerNames?:
         case "psychicFailed":
         case "phaseFastForwarded":
         case "mayorCantWhisper":
+        case "politicianCountdownStarted":
         case "youAttackedSomeone":
         case "youWereAttacked":
         case "armorsmithArmorBroke":
@@ -789,6 +790,8 @@ export type ChatMessageVariant = {
     playerIndex: PlayerIndex
 } | {
     type: "mayorCantWhisper"
+} | {
+    type: "politicianCountdownStarted"
 } | {
     type: "reporterReport",
     report: string
@@ -865,9 +868,6 @@ export type ChatMessageVariant = {
 } | {
     type: "spyMafiaVisit", 
     players: PlayerIndex[]
-} | {
-    type: "spyCultistCount",
-    count: number
 } | {
     type: "spyBug", 
     bug: "silenced" | "roleblocked" | "protected" | "transported" | "possessed"
@@ -919,6 +919,10 @@ export type ChatMessageVariant = {
     type: "playerDiedOfABrokenHeart",
     player: PlayerIndex
     lover: PlayerIndex
+} | {
+    type: "syndicateGunTarget",
+    shooter: PlayerIndex
+    target: PlayerIndex | null
 } | {
     type: "youWereProtected"
 } | {
@@ -959,9 +963,6 @@ export type ChatMessageVariant = {
 } | {
     type: "recruiterActionChosen",
     action: RecruiterAction,
-} | {
-    type: "erosActionChosen",
-    action: "loveLink" | "kill",
 } | {
     type: "marksmanChosenMarks",
     marks: PlayerIndex[],
@@ -971,7 +972,7 @@ export type ChatMessageVariant = {
     type: "youWerePossessed",
     immune: boolean
 } | {
-    type: "possessionTargetsRole",
+    type: "targetHasRole",
     role: Role
 } | {
     type: "targetsMessage",

client/src/components/CheckBox.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import Icon from "./Icon"
+import "./checkBox.css"
+
+export default function CheckBox(props: {
+    checked: boolean,
+    onChange: (checked: boolean) => void
+}) {
+    return <label
+        className="checkbox"
+        onClick={()=>{
+            props.onChange(!props.checked)
+        }}
+    >
+        <Icon>{props.checked ? "check" : "close"}</Icon>
+    </label>
+}