Rework Mobile

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>;
     }

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>
                 ) : 

client/src/components/TextAreaDropdown.tsx

@@ -7,11 +7,13 @@ 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,
     open?: boolean,
+    dropdownArrow?: boolean,
     onAdd?: () => void,
     onSubtract?: () => void,
     onSave: (text: string) => void,
@@ -37,26 +39,28 @@ 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}
+            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 +148,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">

client/src/components/chatMessage.css

@@ -134,4 +134,7 @@
 }
 .kira-guess-result.notInGame{
     border-color: red;
+}
+.chat-message-div .details-summary-container {
+    width: 100%;
 }

client/src/components/detailsSummary.css

@@ -5,19 +5,24 @@
     align-items: center;
 
     background-color: var(--primary-color);
-    border: .13rem solid var(--primary-border-color);
-    border-bottom-color: var(--primary-border-shadow-color);
-    border-right-color: var(--primary-border-shadow-color);
-    margin: .13rem;
-    padding: .13rem;
     border-radius: .5rem;
+    padding: .13rem;
+}
+.details-summary-summary-container.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: .13rem solid var(--primary-border-shadow-color);
 }
 .details-summary-container{
     display: flex;
     flex-direction: column;
-    width: 100%;
-    margin: 0;
+    margin: .13rem;
     padding: 0;
+    background-color: var(--secondary-color);
+    border: .13rem solid var(--primary-border-color);
+    border-bottom-color: var(--primary-border-shadow-color);
+    border-right-color: var(--primary-border-shadow-color);
+    border-radius: 0.5rem;
     /* justify-content: left;
     align-items: center; */
 }

client/src/components/dragAndDrop.css

@@ -1,5 +1,6 @@
 div.draggable {
-    cursor: grab
+    cursor: grab;
+    touch-action: none;
 }
 
 div.draggable.dragged {

client/src/components/gameModeSettings/EnabledModifiersSelector.tsx

@@ -0,0 +1,78 @@
+import React, { ReactElement, useCallback, useContext } from "react";
+import { MODIFIERS, ModifierType } from "../../game/gameState.d";
+import translate from "../../game/lang";
+import StyledText from "../StyledText";
+import { GameModeContext } from "./GameModesEditor";
+import { Button } from "../Button";
+
+export function EnabledModifiersSelector(props: Readonly<{
+    disabled: boolean,
+    enabledModifiers?: ModifierType[],
+    onChange?: (modifiers: ModifierType[]) => void,
+}>): ReactElement {
+    let { enabledModifiers } = useContext(GameModeContext);
+    enabledModifiers = props.enabledModifiers ?? enabledModifiers;
+
+    return <div className="chat-menu-colors selector-section">
+        <h2>{translate("modifiers")}</h2>
+        <EnabledModifiersDisplay
+            disabled={props.disabled}
+            modifiable={!props.disabled}
+            enabledModifiers={enabledModifiers}
+            onEnableModifiers={(modifiers: ModifierType[]) => {
+                if (props.onChange) {
+                    props.onChange(enabledModifiers.concat(modifiers))
+                }
+            }}
+            onDisableModifiers={(modifiers: ModifierType[]) => {
+                if (props.onChange) {
+                    props.onChange(enabledModifiers.filter(modifier => !modifiers.includes(modifier)))
+                }
+            }}
+        />
+    </div>
+}
+
+type EnabledModifiersDisplayProps = {
+    enabledModifiers: ModifierType[],
+} & (
+    {
+        modifiable: true,
+        onDisableModifiers: (modifiers: ModifierType[]) => void,
+        onEnableModifiers: (modifiers: ModifierType[]) => void,
+        disabled?: boolean,
+    } |
+    {
+        modifiable?: false,
+    }
+)
+
+export function EnabledModifiersDisplay(props: EnabledModifiersDisplayProps): ReactElement {
+    const isEnabled = useCallback((modifier: ModifierType) => props.enabledModifiers.includes(modifier), [props.enabledModifiers]);
+
+    const modifierTextElement = (modifier: ModifierType) => {
+
+        return <StyledText 
+            noLinks={props.modifiable ?? false}
+            className={!isEnabled(modifier) ? "keyword-disabled" : undefined}
+        >
+            {translate(modifier)}
+        </StyledText>
+    }
+
+    return <div>
+        {MODIFIERS.map((modifier, i) => 
+            props.modifiable 
+                ? <Button key={modifier}
+                    disabled={props.disabled}
+                    onClick={() => (!isEnabled(modifier) ? props.onEnableModifiers : props.onDisableModifiers)([modifier])}
+                >
+                    {modifierTextElement(modifier)}
+                </Button> 
+                : <div key={modifier} className={"placard" + (!isEnabled(modifier) ? " disabled" : "")}>
+                    {modifierTextElement(modifier)}
+                </div>
+
+        )}
+    </div>
+}

client/src/components/gameModeSettings/EnabledRoleSelector.tsx

@@ -13,12 +13,12 @@ import { GameModeContext } from "./GameModesEditor";
 
 
 
-export default function EnabledRoleSelector(props: {
+export default function EnabledRoleSelector(props: Readonly<{
     disabled?: boolean,
     onDisableRoles: (role: Role[]) => void,
     onEnableRoles: (role: Role[]) => void,
     onIncludeAll: () => void
-}): ReactElement {
+}>): ReactElement {
     const {enabledRoles} = useContext(GameModeContext);
 
     const [roleOutlineOption, setRoleOutlineOption] = useState<RoleOutlineOption>({ type: "roleSet", roleSet: "town" });
@@ -37,7 +37,7 @@ export default function EnabledRoleSelector(props: {
 
     return <div className="role-specific-colors selector-section">
         <h2>{translate("menu.lobby.enabledRoles")}</h2>
-        <div>
+        {(props.disabled !== true) && <div>
             <Button
                 onClick={props.onIncludeAll}
                 disabled={props.disabled}
@@ -63,7 +63,7 @@ export default function EnabledRoleSelector(props: {
                     onChange={setRoleOutlineOption}
                 />
             </div>
-        </div>
+        </div>}
 
         <EnabledRolesDisplay 
             enabledRoles={enabledRoles}
@@ -111,7 +111,7 @@ export function EnabledRolesDisplay(props: EnabledRolesDisplayProps): ReactEleme
                 >
                     {roleTextElement(role)}
                 </Button> 
-                : <div key={i} className={"disabled-role-element" + (!isEnabled(role) ? " disabled" : "")}>
+                : <div key={i} className={"placard" + (!isEnabled(role) ? " disabled" : "")}>
                     {roleTextElement(role)}
                 </div>
 

client/src/components/gameModeSettings/GameModeSelector.tsx

@@ -144,7 +144,7 @@ function GameModeSelectorPanel(props: {
         return true;
     }
 
-    const verbose = !props.canModifySavedGameModes;
+    const verbose = false;
 
     const shareableGameModeJsonString = JSON.stringify({
         format: LATEST_VERSION_STRING,

client/src/components/gameModeSettings/GameModesEditor.tsx

@@ -13,7 +13,7 @@ import { defaultPhaseTimes } from "../../game/gameState";
 import { GameModeSelector } from "./GameModeSelector";
 import { Helmet } from "react-helmet";
 import { ShareableGameMode } from "./gameMode";
-import { EnabledModifiersDisplay } from "./EnabledModifiersDisplay";
+import { EnabledModifiersSelector } from "./EnabledModifiersSelector";
 
 const GameModeContext = createContext({
     roleList: [] as RoleList,
@@ -118,7 +118,7 @@ export default function GameModesEditor(props: Readonly<{
                     />
                 </div>
                 <div>
-                    <EnabledModifiersDisplay
+                    <EnabledModifiersSelector
                         disabled={false}
                         onChange={onSetEnabledModifiers}
                     />