Skip to content

Commit 4fe0075

Browse files
Jack-PapelJack-Papel
authored
Merge pull request #748 from mafia-rust/feature/rework-mobile
Rework Mobile
2 parents f6caf7f + e01cc2b commit 4fe0075

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+571
-571
lines changed

‎client/src/components/ChatMessage.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,9 +156,7 @@ const ChatElement = React.memo((
156156
}
157157
defaultOpen={GAME_MANAGER.getMySpectator()}
158158
>
159-
<div className="grave-message">
160-
<GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
161-
</div>
159+
<GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
162160
</DetailsSummary>
163161
</div>;
164162
}

‎client/src/components/DetailsSummary.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function DetailsSummary(props: Readonly<{
2424
}, [props.open, openState, props.disabled]);
2525

2626
return <div className={"details-summary-container "+(props.className??"")}>
27-
<div className="details-summary-summary-container"
27+
<div className={"details-summary-summary-container"+(open ? " open" : "")}
2828
onClick={() => {
2929
if(props.disabled) return;
3030
setOpen(!open);
@@ -33,7 +33,7 @@ export default function DetailsSummary(props: Readonly<{
3333
>
3434
{(props.dropdownArrow === undefined || props.dropdownArrow === true) ?
3535
((props.disabled === undefined || props.disabled===false) ?
36-
<Icon>{open ? "expand_more" : "expand_less"}</Icon>
36+
<Icon>{open ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon>
3737
:
3838
<Icon>close</Icon>
3939
) :

‎client/src/components/TextAreaDropdown.tsx

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import { ReactElement, useEffect, useMemo, useState } from "react";
1+
import React, { ReactElement, useEffect, useMemo, useState } from "react";
22
import StyledText from "./StyledText";
33
import { sanitizePlayerMessage } from "./ChatMessage";
44
import GAME_MANAGER, { replaceMentions } from "..";
5-
import React from "react";
65
import { Button } from "./Button";
76
import Icon from "./Icon";
87
import translate from "../game/lang";
98
import "./textAreaDropdown.css";
9+
import DetailsSummary from "./DetailsSummary";
1010

1111
export function TextDropdownArea(props: Readonly<{
1212
titleString: string,
1313
savedText: string,
14+
defaultOpen?: boolean,
1415
open?: boolean,
16+
dropdownArrow?: boolean,
1517
onAdd?: () => void,
1618
onSubtract?: () => void,
1719
onSave: (text: string) => void,
@@ -37,26 +39,29 @@ export function TextDropdownArea(props: Readonly<{
3739
}
3840

3941
return (
40-
<details className="text-area-dropdown" open={props.open ?? false}>
41-
<summary>
42-
<TextDropdownLabel
43-
titleString={props.titleString}
44-
savedText={props.savedText}
45-
field={field}
46-
onAdd={props.onAdd}
47-
onSubtract={props.onSubtract}
48-
onSave={save}
49-
cantPost={props.cantPost}
50-
/>
51-
</summary>
42+
<DetailsSummary
43+
className="text-area-dropdown"
44+
dropdownArrow={props.dropdownArrow}
45+
defaultOpen={props.defaultOpen}
46+
open={props.open}
47+
summary={<TextDropdownLabel
48+
titleString={props.titleString}
49+
savedText={props.savedText}
50+
field={field}
51+
onAdd={props.onAdd}
52+
onSubtract={props.onSubtract}
53+
onSave={save}
54+
cantPost={props.cantPost}
55+
/>}
56+
>
5257
{unsaved ? "Unsaved" : ""}
5358
<PrettyTextArea
5459
field={field}
5560
setField={setField}
5661
save={save}
5762
send={send}
5863
/>
59-
</details>
64+
</DetailsSummary>
6065
)
6166
}
6267

@@ -144,11 +149,12 @@ function PrettyTextArea(props: Readonly<{
144149
const [writing, setWriting] = useState<boolean>(false);
145150
const [hover, setHover] = useState<boolean>(false);
146151

147-
return <div
152+
return <div className="pretty-text-area"
148153
onMouseEnter={() => setHover(true)}
149154
onMouseLeave={() => setHover(false)}
155+
onTouchEnd={() => setWriting(true)}
150156
onFocus={() => setWriting(true)}
151-
onBlur={() => setWriting(false)}
157+
onBlur={() => {setWriting(false); setHover(false)}}
152158
>
153159
{(!writing && !hover)
154160
? <div className="textarea">

‎client/src/components/chatMessage.css

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,6 @@
101101
.chat-message.warning {
102102
background-color: #660000;
103103
}
104-
.grave-message {
105-
border: .13rem solid var(--background-border-color);
106-
border-bottom-color: var(--background-border-shadow-color);
107-
border-right-color: var(--background-border-shadow-color);
108-
border-radius: .5rem;
109-
margin: .13rem;
110-
padding: .25rem;
111-
}
112104

113105
.kira-guess-results {
114106
display: flex;
@@ -134,4 +126,7 @@
134126
}
135127
.kira-guess-result.notInGame{
136128
border-color: red;
129+
}
130+
.chat-message-div .details-summary-container {
131+
width: 100%;
137132
}

‎client/src/components/detailsSummary.css

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,24 @@
55
align-items: center;
66

77
background-color: var(--primary-color);
8-
border: .13rem solid var(--primary-border-color);
9-
border-bottom-color: var(--primary-border-shadow-color);
10-
border-right-color: var(--primary-border-shadow-color);
11-
margin: .13rem;
12-
padding: .13rem;
138
border-radius: .5rem;
9+
padding: .13rem;
10+
}
11+
.details-summary-summary-container.open {
12+
border-bottom-left-radius: 0;
13+
border-bottom-right-radius: 0;
14+
border-bottom: .13rem solid var(--primary-border-shadow-color);
1415
}
1516
.details-summary-container{
1617
display: flex;
1718
flex-direction: column;
18-
width: 100%;
19-
margin: 0;
19+
margin: .13rem;
2020
padding: 0;
21+
background-color: var(--secondary-color);
22+
border: .13rem solid var(--primary-border-color);
23+
border-bottom-color: var(--primary-border-shadow-color);
24+
border-right-color: var(--primary-border-shadow-color);
25+
border-radius: 0.5rem;
2126
/* justify-content: left;
2227
align-items: center; */
2328
}

‎client/src/components/dragAndDrop.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
div.draggable {
2-
cursor: grab
2+
cursor: grab;
3+
touch-action: none;
34
}
45

56
div.draggable.dragged {

‎client/src/components/gameModeSettings/EnabledModifiersDisplay.tsx

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎client/src/components/gameModeSettings/EnabledModifiersSelector.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { ReactElement, useCallback, useContext } from "react";
2+
import { MODIFIERS, ModifierType } from "../../game/gameState.d";
3+
import translate from "../../game/lang";
4+
import StyledText from "../StyledText";
5+
import { GameModeContext } from "./GameModesEditor";
6+
import { Button } from "../Button";
7+
8+
export function EnabledModifiersSelector(props: Readonly<{
9+
disabled: boolean,
10+
enabledModifiers?: ModifierType[],
11+
onChange?: (modifiers: ModifierType[]) => void,
12+
}>): ReactElement {
13+
let { enabledModifiers } = useContext(GameModeContext);
14+
enabledModifiers = props.enabledModifiers ?? enabledModifiers;
15+
16+
return <div className="chat-menu-colors selector-section">
17+
<h2>{translate("modifiers")}</h2>
18+
<EnabledModifiersDisplay
19+
disabled={props.disabled}
20+
modifiable={!props.disabled}
21+
enabledModifiers={enabledModifiers}
22+
onEnableModifiers={(modifiers: ModifierType[]) => {
23+
if (props.onChange) {
24+
props.onChange(enabledModifiers.concat(modifiers))
25+
}
26+
}}
27+
onDisableModifiers={(modifiers: ModifierType[]) => {
28+
if (props.onChange) {
29+
props.onChange(enabledModifiers.filter(modifier => !modifiers.includes(modifier)))
30+
}
31+
}}
32+
/>
33+
</div>
34+
}
35+
36+
type EnabledModifiersDisplayProps = {
37+
enabledModifiers: ModifierType[],
38+
} & (
39+
{
40+
modifiable: true,
41+
onDisableModifiers: (modifiers: ModifierType[]) => void,
42+
onEnableModifiers: (modifiers: ModifierType[]) => void,
43+
disabled?: boolean,
44+
} |
45+
{
46+
modifiable?: false,
47+
}
48+
)
49+
50+
export function EnabledModifiersDisplay(props: EnabledModifiersDisplayProps): ReactElement {
51+
const isEnabled = useCallback((modifier: ModifierType) => props.enabledModifiers.includes(modifier), [props.enabledModifiers]);
52+
53+
const modifierTextElement = (modifier: ModifierType) => {
54+
55+
return <StyledText
56+
noLinks={props.modifiable ?? false}
57+
className={!isEnabled(modifier) ? "keyword-disabled" : undefined}
58+
>
59+
{translate(modifier)}
60+
</StyledText>
61+
}
62+
63+
return <div>
64+
{MODIFIERS.map((modifier, i) =>
65+
props.modifiable
66+
? <Button key={modifier}
67+
disabled={props.disabled}
68+
onClick={() => (!isEnabled(modifier) ? props.onEnableModifiers : props.onDisableModifiers)([modifier])}
69+
>
70+
{modifierTextElement(modifier)}
71+
</Button>
72+
: <div key={modifier} className={"placard" + (!isEnabled(modifier) ? " disabled" : "")}>
73+
{modifierTextElement(modifier)}
74+
</div>
75+
76+
)}
77+
</div>
78+
}

‎client/src/components/gameModeSettings/EnabledRoleSelector.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ import { GameModeContext } from "./GameModesEditor";
1313

1414

1515

16-
export default function EnabledRoleSelector(props: {
16+
export default function EnabledRoleSelector(props: Readonly<{
1717
disabled?: boolean,
1818
onDisableRoles: (role: Role[]) => void,
1919
onEnableRoles: (role: Role[]) => void,
2020
onIncludeAll: () => void
21-
}): ReactElement {
21+
}>): ReactElement {
2222
const {enabledRoles} = useContext(GameModeContext);
2323

2424
const [roleOutlineOption, setRoleOutlineOption] = useState<RoleOutlineOption>({ type: "roleSet", roleSet: "town" });
@@ -37,7 +37,7 @@ export default function EnabledRoleSelector(props: {
3737

3838
return <div className="role-specific-colors selector-section">
3939
<h2>{translate("menu.lobby.enabledRoles")}</h2>
40-
<div>
40+
{(props.disabled !== true) && <div>
4141
<Button
4242
onClick={props.onIncludeAll}
4343
disabled={props.disabled}
@@ -63,7 +63,7 @@ export default function EnabledRoleSelector(props: {
6363
onChange={setRoleOutlineOption}
6464
/>
6565
</div>
66-
</div>
66+
</div>}
6767

6868
<EnabledRolesDisplay
6969
enabledRoles={enabledRoles}
@@ -111,7 +111,7 @@ export function EnabledRolesDisplay(props: EnabledRolesDisplayProps): ReactEleme
111111
>
112112
{roleTextElement(role)}
113113
</Button>
114-
: <div key={i} className={"disabled-role-element" + (!isEnabled(role) ? " disabled" : "")}>
114+
: <div key={i} className={"placard" + (!isEnabled(role) ? " disabled" : "")}>
115115
{roleTextElement(role)}
116116
</div>
117117

‎client/src/components/gameModeSettings/GameModeSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ function GameModeSelectorPanel(props: {
144144
return true;
145145
}
146146

147-
const verbose = !props.canModifySavedGameModes;
147+
const verbose = false;
148148

149149
const shareableGameModeJsonString = JSON.stringify({
150150
format: LATEST_VERSION_STRING,

0 commit comments

Comments
 (0)