Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi match & better integrated custom games #2879

Merged
merged 5 commits into from
Dec 10, 2024
Merged

Multi match & better integrated custom games #2879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38b80e0
Re-integrate custom games back onto unified play page, toggle display…
anoek Dec 6, 2024
0f74538
Add support for selecting multiple acceptable size/time settings
anoek Dec 6, 2024
b4d9cbe
Goban bump
anoek Dec 6, 2024
af676af
Made human rank range deltas instead of absolute ranks
anoek Dec 7, 2024
f3a665b
Added some perfectly clear descriptions of the clock ranges when deal…
anoek Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"express-http-proxy": "^2.0.0",
"fork-ts-checker-webpack-plugin": "^9.0.0",
"globals": "^15.8.0",
"goban": "=8.3.68",
"goban": "=8.3.69",
"gulp": "^5.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-eslint-new": "^2.2.0",
Expand Down
6 changes: 5 additions & 1 deletion src/lib/automatch_manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ interface Events {

export type AutomatchPreferences = AutomatchPreferencesBase & {
uuid: string;
size_speed_options: Array<{ size: Size; speed: Speed }>;
size_speed_options: Array<{
size: Size;
speed: Speed;
system: "byoyomi" | "fischer";
}>;
};

class AutomatchToast extends React.PureComponent<{}, any> {
Expand Down
12 changes: 11 additions & 1 deletion src/lib/preferences.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,23 @@ export const defaults = {
"play.tab": "automatch" as "automatch" | "custom",
"automatch.size": "9x9" as Size,
"automatch.speed": "rapid" as JGOFTimeControlSpeed,
"automatch.game-clock": "flexible" as "exact" | "flexible",
"automatch.game-clock": "flexible" as "exact" | "flexible" | "multiple",
"automatch.handicaps": "standard" as "enabled" | "standard" | "disabled",
"automatch.time-control": "fischer" as "fischer" | "byoyomi",
"automatch.opponent": "human" as "human" | "bot",
"automatch.bot": 0,
"automatch.lower-rank-diff": 3,
"automatch.upper-rank-diff": 3,
"automatch.show-custom-games": false,
"automatch.multiple-sizes": { "9x9": false, "13x13": false, "19x19": false },
"automatch.multiple-speeds": {
"blitz-fischer": false,
"blitz-byoyomi": false,
"rapid-fischer": false,
"rapid-byoyomi": false,
"live-fischer": false,
"live-byoyomi": false,
},
"board-labeling": "automatic",
"chat.show-all-global-channels": true,
"chat.show-all-group-channels": true,
Expand Down
15 changes: 0 additions & 15 deletions src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,21 +100,6 @@ export interface AutomatchPreferencesBase {
condition: AutomatchCondition;
value: "japanese" | "chinese" | "aga" | "korean" | "nz" | "ing";
};
time_control: {
condition: AutomatchCondition;
value: {
system: AutomatchTimeControlSystem;
initial_time?: number;
time_increment?: number;
max_time?: number;
main_time?: number;
period_time?: number;
periods?: number;
stones_per_period?: number;
per_move?: number;
pause_on_weekends?: boolean;
};
};
handicap: {
condition: AutomatchCondition;
value: "enabled" | "disabled";
Expand Down
12 changes: 12 additions & 0 deletions src/views/Play/CustomGames.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
align-items: stretch;
justify-content: center;
box-sizing: border-box;
margin-bottom: 8rem;

.header-container {
width: 100%;
Expand Down Expand Up @@ -58,6 +59,17 @@
}
}

.create-custom-games-buttons {
display: flex;
gap: 1rem;
justify-content: space-between;
width: 100%;

button {
height: 3rem;
font-size: 1.1rem;
}
}

// This shenanigans is needed to ensure that the canvas of the seek graph
// remains rendered, so we don't loose the reference we have to it.
Expand Down
135 changes: 71 additions & 64 deletions src/views/Play/CustomGames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { anyChallengesToShow, challenge_sort, time_per_move_challenge_sort } fro
import { RengoManagementPane } from "@/components/RengoManagementPane";
import { RengoTeamManagementPane } from "@/components/RengoTeamManagementPane";
import { PlayContext } from "./PlayContext";
import { ChallengeModalBody } from "@/components/ChallengeModal";
import { challenge } from "@/components/ChallengeModal";

const CHALLENGE_LIST_FREEZE_PERIOD = 1000; // Freeze challenge list for this period while they move their mouse on it

Expand Down Expand Up @@ -391,6 +391,12 @@ export function CustomGames(): JSX.Element {
});
}, [live_list, cancelOpenChallenge]);

const disable_challenge_buttons = !!(
liveOwnChallengePending() ||
live_rengo_challenge_to_show ||
automatch_manager.active_live_automatcher
);

return (
<PlayContext.Provider
value={{
Expand All @@ -404,71 +410,53 @@ export function CustomGames(): JSX.Element {
}}
>
<div id="CustomGames">
<Card>
{liveOwnChallengePending() ? (
<>
<div className="automatch-header">{_("Waiting for opponent...")}</div>
<div className="automatch-row-container">
<div className="spinner">
<div className="double-bounce1"></div>
<div className="double-bounce2"></div>
</div>
{liveOwnChallengePending() ? (
<Card>
<div className="automatch-header">{_("Waiting for opponent...")}</div>
<div className="automatch-row-container">
<div className="spinner">
<div className="double-bounce1"></div>
<div className="double-bounce2"></div>
</div>
<div className="automatch-settings">
<button className="danger sm" onClick={cancelOwnChallenges}>
{pgettext("Cancel challenge", "Cancel")}
</button>
</div>
</>
) : live_rengo_challenge_to_show ? (
<>
<RengoManagementPane
</div>
<div className="automatch-settings">
<button className="danger sm" onClick={cancelOwnChallenges}>
{pgettext("Cancel challenge", "Cancel")}
</button>
</div>
</Card>
) : live_rengo_challenge_to_show ? (
<Card>
<RengoManagementPane
challenge_id={live_rengo_challenge_to_show.challenge_id}
rengo_challenge_list={rengo_list}
startRengoChallenge={rengo_utils.startOwnRengoChallenge}
cancelChallenge={cancelOpenRengoChallenge}
withdrawFromRengoChallenge={unNominateForRengoChallenge}
joinRengoChallenge={rengo_utils.nominateForRengoChallenge}
lock={
rengo_manage_pane_lock[live_rengo_challenge_to_show?.challenge_id]
}
>
<RengoTeamManagementPane
challenge_id={live_rengo_challenge_to_show.challenge_id}
rengo_challenge_list={rengo_list}
startRengoChallenge={rengo_utils.startOwnRengoChallenge}
cancelChallenge={cancelOpenRengoChallenge}
withdrawFromRengoChallenge={unNominateForRengoChallenge}
joinRengoChallenge={rengo_utils.nominateForRengoChallenge}
lock={
challenge_list={rengo_list}
moderator={user.is_moderator}
show_chat={false}
assignToTeam={rengo_utils.assignToTeam}
kickRengoUser={rengo_utils.kickRengoUser}
locked={
rengo_manage_pane_lock[
live_rengo_challenge_to_show?.challenge_id
live_rengo_challenge_to_show.challenge_id
]
}
>
<RengoTeamManagementPane
challenge_id={live_rengo_challenge_to_show.challenge_id}
challenge_list={rengo_list}
moderator={user.is_moderator}
show_chat={false}
assignToTeam={rengo_utils.assignToTeam}
kickRengoUser={rengo_utils.kickRengoUser}
locked={
rengo_manage_pane_lock[
live_rengo_challenge_to_show.challenge_id
]
}
lock={(lock: boolean) =>
setPaneLock(live_rengo_challenge_to_show.challenge_id, lock)
}
/>
</RengoManagementPane>
</>
) : (
<div>
<ChallengeModalBody
mode="open"
modal={{
on: (event: "open" | "close", callback: () => void) => {
console.log("on", event, callback);
},
off: (event: "open" | "close", callback: () => void) => {
console.log("off", event, callback);
},
}}
lock={(lock: boolean) =>
setPaneLock(live_rengo_challenge_to_show.challenge_id, lock)
}
/>
</div>
)}
</Card>
</RengoManagementPane>
</Card>
) : null}
<div className="row">
<div className="row header-container">
<h2 className="header-title">
Expand Down Expand Up @@ -505,6 +493,27 @@ export function CustomGames(): JSX.Element {
showIcons={true}
toggleHandler={toggleFilterHandler}
></SeekGraphLegend>

<div className="create-custom-games-buttons">
<button
className="primary"
disabled={disable_challenge_buttons}
onClick={() => {
challenge(undefined, undefined, undefined, undefined, undefined);
}}
>
{_("Create a custom game")}
</button>
<button
className="primary"
disabled={disable_challenge_buttons}
onClick={() => {
challenge(undefined, undefined, true, undefined, undefined);
}}
>
{_("Play a custom computer game")}
</button>
</div>
</div>

<div id="challenge-list-container">
Expand Down Expand Up @@ -558,10 +567,8 @@ export function CustomGames(): JSX.Element {
.join(",")}
</span>

<span className={m.time_control.condition + " cell"}>
{m.time_control.condition === "no-preference"
? pgettext("Automatch: no preference", "No preference")
: timeControlSystemText(m.time_control.value.system)}
<span className={m.size_speed_options[0].system + " cell"}>
{timeControlSystemText(m.size_speed_options[0].system)}
</span>

<span className={m.handicap.condition + " cell"}>
Expand Down
13 changes: 13 additions & 0 deletions src/views/Play/Play.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,18 @@
}

}

.custom-games-toggle-container {
margin-top: 2rem;
text-align: center;
margin-bottom: 8rem;
&.showing-custom-games {
margin-bottom: 1rem;
}
}
.custom-games-toggle {
font-size: 1.3rem;
}
}


Expand Down Expand Up @@ -307,4 +319,5 @@
.fa-times-circle-o {
cursor: pointer;
}

}
29 changes: 27 additions & 2 deletions src/views/Play/Play.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,26 @@
import * as React from "react";
import * as preferences from "@/lib/preferences";

import { _, pgettext } from "@/lib/translate";
//import { _, pgettext } from "@/lib/translate";
import { _ } from "@/lib/translate";
import { QuickMatch } from "./QuickMatch";
import { CustomGames } from "./CustomGames";

export function Play(): JSX.Element {
const [tab, setTab] = preferences.usePreference("play.tab");
const [show_custom_games, setShowCustomGames] = preferences.usePreference(
"automatch.show-custom-games",
);
const toggleCustomGames = React.useCallback(() => {
setShowCustomGames(!show_custom_games);
}, [show_custom_games]);

React.useEffect(() => {
window.document.title = _("Play");
}, []);

return (
<div className="Play container">
{/*
<div className="tab-head">
<h2 className="Matchmaking-header">
<i className="ogs-goban"></i> {pgettext("Play page", "Matchmaking")}
Expand All @@ -51,9 +58,27 @@ export function Play(): JSX.Element {
</span>
</div>
</div>
*/}

{/*
{tab === "automatch" && <QuickMatch />}
{tab === "custom" && <CustomGames />}
*/}
<QuickMatch />

<div>
<div
className={
"custom-games-toggle-container " +
(show_custom_games ? "showing-custom-games" : "")
}
>
<button className="custom-games-toggle" onClick={toggleCustomGames}>
{show_custom_games ? _("Hide custom games") : _("Explore custom games")}
</button>
</div>
{show_custom_games && <CustomGames />}
</div>
</div>
);
}
Loading
Loading