diff --git a/ui/lobby/src/setupCtrl.ts b/ui/lobby/src/setupCtrl.ts index f8ac2c19d0523..e42f7905389d8 100644 --- a/ui/lobby/src/setupCtrl.ts +++ b/ui/lobby/src/setupCtrl.ts @@ -72,7 +72,6 @@ export default class SetupController { constructor(ctrl: LobbyController) { this.root = ctrl; this.blindModeColor = propWithEffect('random', this.onPropChange); - // Initialize stores with default props as necessary this.store = { hook: this.makeSetupStore('hook'), @@ -101,7 +100,7 @@ export default class SetupController { private loadPropsFromStore = (forceOptions?: ForceSetupOptions) => { const storeProps = this.store[this.gameType!](); // Load props from the store, but override any store values with values found in forceOptions - this.variant = this.propWithApply(forceOptions?.variant || storeProps.variant); + this.variant = propWithEffect(forceOptions?.variant || storeProps.variant, this.onVariantChange); this.fen = this.propWithApply(forceOptions?.fen || storeProps.fen); this.timeMode = this.propWithApply(forceOptions?.timeMode || storeProps.timeMode); this.timeV = this.propWithApply(sliderInitVal(storeProps.time, timeVToTime, 100)!); @@ -136,7 +135,7 @@ export default class SetupController { } }; - private savePropsToStore = () => + private savePropsToStore = (override: Partial = {}) => this.gameType && this.store[this.gameType]({ variant: this.variant(), @@ -149,11 +148,41 @@ export default class SetupController { ratingMin: this.ratingMin(), ratingMax: this.ratingMax(), aiLevel: this.aiLevel(), + ...override, + }); + + private savePropsToStoreExceptRating = () => + this.gameType && + this.savePropsToStore({ + ratingMin: this.store[this.gameType]().ratingMin, + ratingMax: this.store[this.gameType]().ratingMax, }); + private isProvisional = () => { + const rating = this.root.data.ratingMap && this.root.data.ratingMap[this.selectedPerf()]; + return rating ? !!rating.prov : true; + }; + private onPropChange = () => { + if (this.isProvisional()) this.savePropsToStoreExceptRating(); + else this.savePropsToStore(); + this.root.redraw(); + }; + + private onVariantChange = () => { + // Handle rating update here this.enforcePropRules(); - this.savePropsToStore(); + if (this.isProvisional()) { + this.ratingMin(-500); + this.ratingMax(500); + this.savePropsToStoreExceptRating(); + } else { + if (this.gameType) { + this.ratingMin(this.store[this.gameType]().ratingMin); + this.ratingMax(this.store[this.gameType]().ratingMax); + } + this.savePropsToStore(); + } this.root.redraw(); }; @@ -177,17 +206,24 @@ export default class SetupController { validateFen = debounce(() => { const fen = this.fen(); if (!fen) return; - xhr.text(xhr.url('/setup/validate-fen', { fen, strict: this.gameType === 'ai' ? 1 : undefined })).then( - () => { - this.fenError = false; - this.lastValidFen = fen; - this.root.redraw(); - }, - () => { - this.fenError = true; - this.root.redraw(); - } - ); + xhr + .text( + xhr.url('/setup/validate-fen', { + fen, + strict: this.gameType === 'ai' ? 1 : undefined, + }) + ) + .then( + () => { + this.fenError = false; + this.lastValidFen = fen; + this.root.redraw(); + }, + () => { + this.fenError = true; + this.root.redraw(); + } + ); }, 300); ratedModeDisabled = (): boolean => diff --git a/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts b/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts index 8e7dcd20da181..403f3696e07ae 100644 --- a/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts +++ b/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts @@ -9,6 +9,10 @@ export const ratingDifferenceSliders = (ctrl: LobbyController) => { const isProvisional = !!ctrl.data.ratingMap[selectedPerf].prov; const disabled = isProvisional ? '.disabled' : ''; + // Get current rating values or use default values if isProvisional + const currentRatingMin = isProvisional ? -500 : setupCtrl.ratingMin(); + const currentRatingMax = isProvisional ? 500 : setupCtrl.ratingMax(); + return h( `div.rating-range-config.optional-config${disabled}`, { @@ -27,7 +31,7 @@ export const ratingDifferenceSliders = (ctrl: LobbyController) => { min: '-500', max: '0', step: '50', - value: setupCtrl.ratingMin(), + value: currentRatingMin, disabled: isProvisional, }, on: { @@ -38,16 +42,16 @@ export const ratingDifferenceSliders = (ctrl: LobbyController) => { }, }, }), - h('span.rating-min', '-' + Math.abs(setupCtrl.ratingMin())), + h('span.rating-min', '-' + Math.abs(currentRatingMin)), '/', - h('span.rating-max', '+' + setupCtrl.ratingMax()), + h('span.rating-max', '+' + currentRatingMax), h('input.range.rating-range__max', { attrs: { type: 'range', min: '0', max: '500', step: '50', - value: setupCtrl.ratingMax(), + value: currentRatingMax, disabled: isProvisional, }, on: {