Skip to content

Commit

Permalink
Merge pull request #748 from mafia-rust/feature/rework-mobile
Browse files Browse the repository at this point in the history
Rework Mobile
  • Loading branch information
Jack-Papel authored Dec 29, 2024
2 parents f6caf7f + e01cc2b commit 4fe0075
Show file tree
Hide file tree
Showing 49 changed files with 571 additions and 571 deletions.
4 changes: 1 addition & 3 deletions client/src/components/ChatMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/DetailsSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
) :
Expand Down
40 changes: 23 additions & 17 deletions client/src/components/TextAreaDropdown.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>
)
}

Expand Down Expand Up @@ -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">
Expand Down
11 changes: 3 additions & 8 deletions client/src/components/chatMessage.css
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,6 @@
.chat-message.warning {
background-color: #660000;
}
.grave-message {
border: .13rem solid var(--background-border-color);
border-bottom-color: var(--background-border-shadow-color);
border-right-color: var(--background-border-shadow-color);
border-radius: .5rem;
margin: .13rem;
padding: .25rem;
}

.kira-guess-results {
display: flex;
Expand All @@ -134,4 +126,7 @@
}
.kira-guess-result.notInGame{
border-color: red;
}
.chat-message-div .details-summary-container {
width: 100%;
}
19 changes: 12 additions & 7 deletions client/src/components/detailsSummary.css
Original file line number Diff line number Diff line change
Expand Up @@ -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; */
}
3 changes: 2 additions & 1 deletion client/src/components/dragAndDrop.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
div.draggable {
cursor: grab
cursor: grab;
touch-action: none;
}

div.draggable.dragged {
Expand Down
77 changes: 0 additions & 77 deletions client/src/components/gameModeSettings/EnabledModifiersDisplay.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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>
}
10 changes: 5 additions & 5 deletions client/src/components/gameModeSettings/EnabledRoleSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" });
Expand All @@ -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}
Expand All @@ -63,7 +63,7 @@ export default function EnabledRoleSelector(props: {
onChange={setRoleOutlineOption}
/>
</div>
</div>
</div>}

<EnabledRolesDisplay
enabledRoles={enabledRoles}
Expand Down Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ function GameModeSelectorPanel(props: {
return true;
}

const verbose = !props.canModifySavedGameModes;
const verbose = false;

const shareableGameModeJsonString = JSON.stringify({
format: LATEST_VERSION_STRING,
Expand Down
Loading

0 comments on commit 4fe0075

Please sign in to comment.