From f481375059d8623eea9c5f253ea173105b4de52c Mon Sep 17 00:00:00 2001 From: LForchini Date: Tue, 9 Jul 2024 12:54:08 +0100 Subject: [PATCH 1/5] Mostly working and styled --- .../AutomatchSettings/AutomatchSettings.tsx | 25 +- src/components/TimeControl/TimeControl.ts | 2 +- src/lib/automatch_manager.tsx | 5 +- src/lib/data_schema.ts | 3 +- src/lib/types.ts | 2 +- src/views/Play/Play.styl | 73 ++--- src/views/Play/Play.tsx | 256 +++++++++++------- 7 files changed, 228 insertions(+), 138 deletions(-) diff --git a/src/components/AutomatchSettings/AutomatchSettings.tsx b/src/components/AutomatchSettings/AutomatchSettings.tsx index 666e44054e..84bea8b5bd 100644 --- a/src/components/AutomatchSettings/AutomatchSettings.tsx +++ b/src/components/AutomatchSettings/AutomatchSettings.tsx @@ -32,6 +32,7 @@ export type AutomatchPreferences = AutomatchPreferencesBase & { size_options: Si interface AutomatchSettingsState { tab: Speed; blitz_settings: AutomatchPreferences; + rapid_settings: AutomatchPreferences; live_settings: AutomatchPreferences; correspondence_settings: AutomatchPreferences; } @@ -55,6 +56,25 @@ const default_blitz: AutomatchPreferences = { value: "disabled", }, }; +const default_rapid: AutomatchPreferences = { + upper_rank_diff: 3, + lower_rank_diff: 3, + size_options: ["19x19"], + rules: { + condition: "no-preference", + value: "japanese", + }, + time_control: { + condition: "no-preference", + value: { + system: "byoyomi", + }, + }, + handicap: { + condition: "no-preference", + value: "enabled", + }, +}; const default_live: AutomatchPreferences = { upper_rank_diff: 3, lower_rank_diff: 3, @@ -104,10 +124,12 @@ const ConditionSelect = (props: { value: any; onChange: (x: any) => void }) => ( ); -export function getAutomatchSettings(speed: "blitz" | "live" | "correspondence") { +export function getAutomatchSettings(speed: "blitz" | "live" | "rapid" | "correspondence") { switch (speed) { case "blitz": return dup(data.get("automatch.blitz", default_blitz)); + case "rapid": + return dup(data.get("automatch.rapid", default_rapid)); case "live": return dup(data.get("automatch.live", default_live)); case "correspondence": @@ -125,6 +147,7 @@ export class AutomatchSettings extends Modal< this.state = { tab: data.get("automatch.last-tab", "live") as Speed, blitz_settings: data.get("automatch.blitz", default_blitz), + rapid_settings: data.get("automatch.rapid", default_rapid), live_settings: data.get("automatch.live", default_live), correspondence_settings: data.get("automatch.correspondence", default_correspondence), }; diff --git a/src/components/TimeControl/TimeControl.ts b/src/components/TimeControl/TimeControl.ts index 98e5da933a..6258f7bffa 100644 --- a/src/components/TimeControl/TimeControl.ts +++ b/src/components/TimeControl/TimeControl.ts @@ -16,7 +16,7 @@ */ export namespace TimeControlTypes { - export type TimeControlSpeed = "blitz" | "live" | "correspondence"; + export type TimeControlSpeed = "blitz" | "rapid" | "live" | "correspondence"; export type TimeControlSystem = | "fischer" | "byoyomi" diff --git a/src/lib/automatch_manager.tsx b/src/lib/automatch_manager.tsx index 535264e6a5..ac52dcb0b1 100644 --- a/src/lib/automatch_manager.tsx +++ b/src/lib/automatch_manager.tsx @@ -157,9 +157,8 @@ class AutomatchManager extends TypedEventEmitter { /* live game? track it, and pop up our searching toast */ if ( - preferences.size_speed_options.filter( - (opt) => opt.speed === "blitz" || opt.speed === "live", - ).length + preferences.size_speed_options.filter((opt) => opt.speed in ["blitz", "rapid", "live"]) + .length ) { this.last_find_match_uuid = preferences.uuid; if (this.active_toast) { diff --git a/src/lib/data_schema.ts b/src/lib/data_schema.ts index fbba17e30c..22ad11c1b9 100644 --- a/src/lib/data_schema.ts +++ b/src/lib/data_schema.ts @@ -20,7 +20,7 @@ * all the possible keys as well as the associated value types. */ -import { GroupList, ActiveTournamentList, Size, RuleSet } from "./types"; +import { GroupList, ActiveTournamentList, Size, Speed, RuleSet } from "./types"; import { Announcement } from "src/components/Announcements"; import { ValidSound, ValidSoundGroup } from "./sfx"; import { defaults as defaultPreferences, ValidPreference } from "./preferences"; @@ -159,6 +159,7 @@ interface PMSchema { type AutomatchSchema = { "last-tab": TimeControlSpeed; size_options: Size[]; + speed_option: Speed; } & { [speed_key in TimeControlSpeed]: AutomatchPreferences; }; diff --git a/src/lib/types.ts b/src/lib/types.ts index 1961253916..52f768ec8d 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -83,7 +83,7 @@ export interface ActiveTournament { export type ActiveTournamentList = Array; -export type Speed = "blitz" | "live" | "correspondence"; +export type Speed = "blitz" | "rapid" | "live" | "correspondence"; export type Size = "9x9" | "13x13" | "19x19"; export type AutomatchCondition = "required" | "preferred" | "no-preference"; export type RuleSet = "japanese" | "chinese" | "aga" | "korean" | "nz" | "ing"; diff --git a/src/views/Play/Play.styl b/src/views/Play/Play.styl index 7dd2a3a257..adace2cab3 100644 --- a/src/views/Play/Play.styl +++ b/src/views/Play/Play.styl @@ -61,13 +61,47 @@ display: flex; justify-content: space-between; align-items: center; + } + + .automatch-content { - .btn-group { + .btn-group { + width: 100%; display: flex; + flex-direction: row; flex-wrap: nowrap; + justify-content: space-between; + border-radius: 10px; + + button { + font-weight: bold; + + width: 100%; + height: 75%; + min-height: 2rem + padding: 0.5rem; + } + + button::before { + content: none; + } } } + .automatch-speed-name { + font-size: large; + margin-bottom: 0.3rem; + } + + .automatch-play { + font-size: xx-large; + font-weight: bold; + width: 100% + margin-left: 0; + margin-right: 0; + border-radius: 5px; + } + .rengo-management-row { td { padding-bottom: 2rem; @@ -161,10 +195,9 @@ font-size: 1.1rem; font-weight: bold; flex-grow: 1; - flex-basis: 13rem; - max-width: 13rem; + flex-basis: 48%; height: 4rem; - margin: 0.5rem; + margin: 0.2rem; white-space: nowrap; display: flex; align-items: center; @@ -229,38 +262,6 @@ padding-left: 3rem; } - .custom-game-row { - display: flex; - justify-content: space-around; - align-content: stretch - width: 100%; - - button { - font-size: 1.1rem; - font-weight: bold; - flex-grow: 1; - width: 100%; - max-width: 13rem; - margin: 0.5rem; - height: 4rem; - - .fa { - margin: 0.2rem; - } - } - } - - .custom-game-header { - display: flex; - justify-content: space-around; - align-content: stretch - width: 100%; - justify-content: space-between; - align-items: left; - font-size: 1.3rem; - margin-top: 1rem; - } - .showall-selector { width: 100%; text-align: left; diff --git a/src/views/Play/Play.tsx b/src/views/Play/Play.tsx index 3c0bf6bb9e..698cddef69 100644 --- a/src/views/Play/Play.tsx +++ b/src/views/Play/Play.tsx @@ -47,7 +47,7 @@ import { ChallengeLinkButton } from "ChallengeLinkButton"; import { allocateCanvasOrError } from "goban"; import { alert } from "swal_config"; -import { Size } from "src/lib/types"; +import { Size, Speed } from "src/lib/types"; import { RengoManagementPane } from "RengoManagementPane"; import { RengoTeamManagementPane } from "RengoTeamManagementPane"; @@ -67,6 +67,7 @@ interface PlayState { showLoadingSpinnerForCorrespondence: boolean; filter: ChallengeFilter; automatch_size_options: Size[]; + automatch_speed_option: Speed; freeze_challenge_list: boolean; // Don't change the challenge list while they are trying to point the mouse at it pending_challenges: { [id: number]: Challenge }; // challenges received while frozen show_in_rengo_management_pane: number[]; // a challenge_ids for challenges to show with pane open in the rengo challenge list @@ -117,6 +118,7 @@ export class Play extends React.Component<{}, PlayState> { showLoadingSpinnerForCorrespondence: false, filter: filter as ChallengeFilter, automatch_size_options: data.get("automatch.size_options", ["9x9", "13x13", "19x19"]), + automatch_speed_option: data.get("automatch.speed_option", "live"), freeze_challenge_list: false, // Don't change the challenge list while they are trying to point the mouse at it pending_challenges: [], // challenges received while frozen show_in_rengo_management_pane: [], @@ -329,7 +331,10 @@ export class Play extends React.Component<{}, PlayState> { this.forceUpdate(); }; - findMatch = (speed: "blitz" | "live" | "correspondence") => { + findMatch = () => { + // REFACTOR THIS TO SEPARATE OUT CORRESPONDENCE FROM THE OTHER TWO + const speed = this.state.automatch_speed_option; + if (data.get("user").anonymous) { void alert.fire(_("Please sign in first")); return; @@ -340,8 +345,8 @@ export class Play extends React.Component<{}, PlayState> { uuid: uuid(), size_speed_options: this.state.automatch_size_options.map((size) => { return { - size: size, - speed: speed, + size, + speed, }; }), lower_rank_diff: settings.lower_rank_diff, @@ -362,10 +367,43 @@ export class Play extends React.Component<{}, PlayState> { preferences.uuid = uuid(); automatch_manager.findMatch(preferences); this.onAutomatchEntry(); + }; - if (speed === "correspondence") { - this.setState({ showLoadingSpinnerForCorrespondence: true }); + findCorrespondenceMatch = () => { + if (data.get("user").anonymous) { + void alert.fire(_("Please sign in first")); + return; } + + const settings = getAutomatchSettings("correspondence"); + const preferences: AutomatchPreferences = { + uuid: uuid(), + size_speed_options: this.state.automatch_size_options.map((size) => { + return { + size, + speed: "correspondence", + }; + }), + lower_rank_diff: settings.lower_rank_diff, + upper_rank_diff: settings.upper_rank_diff, + rules: { + condition: settings.rules.condition, + value: settings.rules.value, + }, + time_control: { + condition: settings.time_control.condition, + value: settings.time_control.value, + }, + handicap: { + condition: settings.handicap.condition, + value: settings.handicap.value, + }, + }; + preferences.uuid = uuid(); + automatch_manager.findMatch(preferences); + this.onAutomatchEntry(); + + this.setState({ showLoadingSpinnerForCorrespondence: true }); }; dismissCorrespondenceSpinner = () => { @@ -411,6 +449,11 @@ export class Play extends React.Component<{}, PlayState> { this.setState({ automatch_size_options: size_options }); } + toggleSpeed(speed: Speed) { + data.set("automatch.speed_option", speed); + this.setState({ automatch_speed_option: speed }); + } + toggleFilterHandler = (key: ChallengeFilterKey) => { const newValue = !this.state.filter[key]; const newFilter = { ...this.state.filter }; @@ -475,6 +518,20 @@ export class Play extends React.Component<{}, PlayState> { } }; + getConcreteSpeed = (speed: Speed): String => { + // TODO: this can be made dynamic to account for user options + + switch (speed) { + case "blitz": + return "1m + 3x20s"; + case "rapid": + return "5m + 3x30s"; + case "live": + return "20m + 3x60s"; + } + return speed; + }; + render() { const corr_automatcher_uuids = Object.keys( automatch_manager.active_correspondence_automatchers, @@ -646,6 +703,10 @@ export class Play extends React.Component<{}, PlayState> { return this.state.automatch_size_options.indexOf(size) >= 0; }; + const speed_enabled = (speed: Speed) => { + return this.state.automatch_speed_option.indexOf(speed) >= 0; + }; + const own_live_rengo_challenge = this.ownRengoChallengesPending().find((c) => isLiveGame(c.time_control_parameters, c.width, c.height), ); @@ -764,109 +825,114 @@ export class Play extends React.Component<{}, PlayState> {
{_("Automatch finder")}
-
- - - -
+ {" "} - {_("Settings ")} + {_("Settings")}
-
-
- - + + +
+
+ + + +
+
-
- - +
- -
-
-
{_("Custom Game")}
-
-
- + +
+
+ + +
From c3e61a8abec4fd5b055e3d770306b5eb7a9f2829 Mon Sep 17 00:00:00 2001 From: LForchini Date: Tue, 9 Jul 2024 13:07:57 +0100 Subject: [PATCH 2/5] Add rapid settings --- .../AutomatchSettings/AutomatchSettings.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/AutomatchSettings/AutomatchSettings.tsx b/src/components/AutomatchSettings/AutomatchSettings.tsx index 84bea8b5bd..fb436fa698 100644 --- a/src/components/AutomatchSettings/AutomatchSettings.tsx +++ b/src/components/AutomatchSettings/AutomatchSettings.tsx @@ -162,6 +162,8 @@ export class AutomatchSettings extends Modal< switch (this.state.tab) { case "blitz": return dup(this.state.blitz_settings); + case "rapid": + return dup(this.state.rapid_settings); case "live": return dup(this.state.live_settings); case "correspondence": @@ -176,6 +178,10 @@ export class AutomatchSettings extends Modal< data.set("automatch.blitz", settings); this.setState({ blitz_settings: settings }); break; + case "rapid": + data.set("automatch.rapid", settings); + this.setState({ rapid_settings: settings }); + break; case "live": data.set("automatch.live", settings); this.setState({ live_settings: settings }); @@ -261,6 +267,12 @@ export class AutomatchSettings extends Modal< > {_("Blitz")} + - +
+ +
diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx index 7c6f9fa2d3..b393a2ab69 100644 --- a/src/views/User/GameHistoryTable.tsx +++ b/src/views/User/GameHistoryTable.tsx @@ -558,6 +558,8 @@ function getSpeedClass(speed: Speed) { return "speed-icon ogs-turtle"; case "live": return "speed-icon fa fa-clock-o"; + case "rapid": + return "speed-icon fa fa-wind"; case "blitz": return "speed-icon fa fa-bolt"; } From bd174f06682c92e6634a8a79d9193c3385f1081a Mon Sep 17 00:00:00 2001 From: LForchini Date: Tue, 16 Jul 2024 20:17:38 +0100 Subject: [PATCH 4/5] Give same space to lower buttons --- src/views/Play/Play.styl | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/views/Play/Play.styl b/src/views/Play/Play.styl index 25a7e0ad00..67280160fc 100644 --- a/src/views/Play/Play.styl +++ b/src/views/Play/Play.styl @@ -191,9 +191,12 @@ display: flex; justify-content: space-around; align-content: stretch - width: 100%; + width: auto; flex-wrap: wrap; + padding-left: 0.3rem; + padding-right: 0.3rem; + button { font-size: 1.1rem; font-weight: bold; From 08a27179ba7e32ad82c23aa8c21edb84a453f872 Mon Sep 17 00:00:00 2001 From: LForchini Date: Tue, 16 Jul 2024 20:20:00 +0100 Subject: [PATCH 5/5] incease play button height --- src/views/Play/Play.styl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Play/Play.styl b/src/views/Play/Play.styl index 67280160fc..ee72cb7ed2 100644 --- a/src/views/Play/Play.styl +++ b/src/views/Play/Play.styl @@ -88,8 +88,8 @@ } .automatch-play { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: 1.5rem; + padding-bottom: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.2rem;