Merge branch 'main' into feature/artsy-art

.vscode/settings.json

@@ -6,22 +6,31 @@
         "Chronokaiser",
         "Consig",
         "Deodat",
+        "Disguiser",
         "Doesnt",
         "dompurify",
         "entriy",
         "Informant",
         "Informants",
         "inno",
         "killable",
+        "Kira",
+        "Kiras",
+        "Krampus",
         "Mafiosos",
         "Necro",
         "necronomicon",
+        "Ojos",
         "Parris",
         "Playerlist",
         "Poli",
+        "Pyrolisk",
+        "Pyrolisks",
         "Rabblerouser",
         "rbed",
+        "reeducator",
         "repr",
+        "retrainer",
         "Retri",
         "Retributionist",
         "Retributionists",
@@ -37,10 +46,14 @@
         "Thanos",
         "Tidyable",
         "tungstenite",
+        "uncategorized",
         "unclicked",
         "Unswappable",
+        "Uzumaki",
+        "Uzumakis",
         "vigi",
         "votee",
+        "wardblock",
         "whisperee",
         "Worsencroft",
         "zealot"

client/package.json

@@ -14,9 +14,10 @@
     "@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",
+    "react-responsive-masonry": "^2.6.0",
     "react-scripts": "^5.0.1",
     "react-virtuoso": "^4.12.0",
     "typescript": "^4",
@@ -25,7 +26,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-responsive-masonry": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/ListMap.tsx

@@ -0,0 +1,39 @@
+export type ListMapData<K, V> = [K, V][]
+
+export default class ListMap<K, V> {
+    list: ListMapData<K, V>;
+    equalsFn: ((k1: K, k2: K)=>boolean);
+    constructor(
+        list: ListMapData<K, V> = [],
+        equalsFn: ((k1: K, k2: K)=>boolean) = (k1, k2)=>k1 === k2
+    ) {
+        this.list = list;
+        this.equalsFn = equalsFn;
+    }
+    get(key: K): V | null {
+        for (const [k, v] of this.list) {
+            if (this.equalsFn(k, key)) {
+                return v
+            }
+        }
+        return null
+    }
+    insert(key: K, value: V) {
+        this.list = this.list.filter(([k, v]) => !this.equalsFn(k, key));
+        this.list.push([key, value])
+    }
+    delete(key: K) {
+        this.list = this.list.filter(([k, v]) => !this.equalsFn(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}`))
         })