Merge pull request #749 from mafia-rust/main

Update!
mafia-rust · Dec 29, 2024 · 2cb5027 · 2cb5027
2 parents e8b4086 + f9e74d5
commit 2cb5027
Show file tree

Hide file tree

Showing 62 changed files with 1,157 additions and 821 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -46,6 +46,7 @@
         "Thanos",
         "Tidyable",
         "tungstenite",
+        "uncategorized",
         "unclicked",
         "Unswappable",
         "Uzumaki",

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -17,14 +17,16 @@
     "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",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-    "@types/react-helmet": "^6.1.11"
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-responsive-masonry": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
@@ -156,9 +156,7 @@ const ChatElement = React.memo((
                     }
                     defaultOpen={GAME_MANAGER.getMySpectator()}
                 >
-                    <div className="grave-message">
-                        <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
-                    </div>
+                    <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
                 </DetailsSummary>
             </div>;
     }

diff --git a/client/src/components/DetailsSummary.tsx b/client/src/components/DetailsSummary.tsx
@@ -24,7 +24,7 @@ export default function DetailsSummary(props: Readonly<{
     }, [props.open, openState, props.disabled]);
 
     return <div className={"details-summary-container "+(props.className??"")}>
-        <div className="details-summary-summary-container"
+        <div className={"details-summary-summary-container"+(open ? " open" : "")}
             onClick={() => {
                 if(props.disabled) return;
                 setOpen(!open);
@@ -33,7 +33,7 @@ export default function DetailsSummary(props: Readonly<{
         >
             {(props.dropdownArrow === undefined || props.dropdownArrow === true) ? 
                 ((props.disabled === undefined || props.disabled===false) ? 
-                    <Icon>{open ? "expand_more" : "expand_less"}</Icon>
+                    <Icon>{open ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon>
                  : 
                     <Icon>close</Icon>
                 ) : 

diff --git a/client/src/components/TextAreaDropdown.tsx b/client/src/components/TextAreaDropdown.tsx
@@ -1,17 +1,19 @@
-import { ReactElement, useEffect, useMemo, useState } from "react";
+import React, { ReactElement, useEffect, useMemo, useState } from "react";
 import StyledText from "./StyledText";
 import { sanitizePlayerMessage } from "./ChatMessage";
 import GAME_MANAGER, { replaceMentions } from "..";
-import React from "react";
 import { Button } from "./Button";
 import Icon from "./Icon";
 import translate from "../game/lang";
 import "./textAreaDropdown.css";
+import DetailsSummary from "./DetailsSummary";
 
 export function TextDropdownArea(props: Readonly<{
     titleString: string,
     savedText: string,
+    defaultOpen?: boolean,
     open?: boolean,
+    dropdownArrow?: boolean,
     onAdd?: () => void,
     onSubtract?: () => void,
     onSave: (text: string) => void,
@@ -37,26 +39,29 @@ export function TextDropdownArea(props: Readonly<{
     }
 
     return (
-        <details className="text-area-dropdown" open={props.open ?? false}>
-            <summary>
-                <TextDropdownLabel
-                    titleString={props.titleString}
-                    savedText={props.savedText}
-                    field={field}
-                    onAdd={props.onAdd}
-                    onSubtract={props.onSubtract}
-                    onSave={save}
-                    cantPost={props.cantPost}
-                />
-            </summary>
+        <DetailsSummary
+            className="text-area-dropdown"
+            dropdownArrow={props.dropdownArrow}
+            defaultOpen={props.defaultOpen}
+            open={props.open}
+            summary={<TextDropdownLabel
+                titleString={props.titleString}
+                savedText={props.savedText}
+                field={field}
+                onAdd={props.onAdd}
+                onSubtract={props.onSubtract}
+                onSave={save}
+                cantPost={props.cantPost}
+            />}
+        >
             {unsaved ? "Unsaved" : ""}
             <PrettyTextArea
                 field={field}
                 setField={setField}
                 save={save}
                 send={send}
             />
-        </details>
+        </DetailsSummary>
     )
 }
 
@@ -144,11 +149,12 @@ function PrettyTextArea(props: Readonly<{
     const [writing, setWriting] = useState<boolean>(false);
     const [hover, setHover] = useState<boolean>(false);
 
-    return <div
+    return <div className="pretty-text-area"
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onTouchEnd={() => setWriting(true)}
         onFocus={() => setWriting(true)}
-        onBlur={() => setWriting(false)}
+        onBlur={() => {setWriting(false); setHover(false)}}
     >
         {(!writing && !hover)
             ? <div className="textarea">