diff --git a/app/views/setup/bits.scala b/app/views/setup/bits.scala index 3ebf2f2d9b..bd24fc24a7 100644 --- a/app/views/setup/bits.scala +++ b/app/views/setup/bits.scala @@ -1,13 +1,12 @@ package views.html.setup +import controllers.routes import play.api.data.{ Field, Form } import lila.api.Context import lila.app.templating.Environment._ import lila.app.ui.ScalatagsTemplate._ -import controllers.routes - private object bits { val prefix = "sf_" @@ -87,8 +86,11 @@ private object bits { def renderInput(field: Field) = input(name := field.name, value := field.value, tpe := "hidden") - def renderRange(field: Field) = - input(name := field.name, value := field.value, tpe := "range") + def renderDissociatedRange(field: Field) = + frag( + renderInput(field)(cls := "range-value"), + input(name := s"${field.name}_range", tpe := "range")(cls := "range-slider") + ) def renderLabel(field: Field, content: Frag) = label(`for` := s"$prefix${field.id}")(content) @@ -116,13 +118,13 @@ private object bits { trans.minutesPerSide(), ": ", span(chess.Clock.Config(~form("time").value.map(x => (x.toDouble * 60).toInt), 0).limitString), - renderRange(form("time"))(min := 0) + renderDissociatedRange(form("time")) ), div(cls := "increment_choice range")( trans.incrementInSeconds(), ": ", span(form("increment").value), - renderRange(form("increment"))(min := 0) + renderDissociatedRange(form("increment")) ) ), div(cls := "correspondence")( @@ -136,7 +138,7 @@ private object bits { trans.daysPerTurn(), ": ", span(form("days").value), - renderRange(form("days"))(min := 1) + renderDissociatedRange(form("days")) ) ) ) diff --git a/ui/lobby/src/form.ts b/ui/lobby/src/form.ts index 29987957f7..d66921beca 100644 --- a/ui/lobby/src/form.ts +++ b/ui/lobby/src/form.ts @@ -10,7 +10,9 @@ export interface FormStore { } export const toFormLines = (form: HTMLFormElement): FormLines => - Array.from(new FormData(form).entries()).reduce((o,[k,v]) => ({...o, [k]: v}), {}); + Array.from(new FormData(form).entries()) + .filter(([k, _]) => !k.includes('_range')) + .reduce((o,[k,v]) => ({...o, [k]: v}), {}); export const toFormObject = (lines: FormLines): FormObject => Object.keys(lines).reduce((o, k) => { diff --git a/ui/lobby/src/setup.ts b/ui/lobby/src/setup.ts index 9fd82b3510..64bd23f2b0 100644 --- a/ui/lobby/src/setup.ts +++ b/ui/lobby/src/setup.ts @@ -24,9 +24,8 @@ export default class Setup { }; } - private save = (form: HTMLFormElement) => { + private save = (form: HTMLFormElement) => this.stores[form.getAttribute('data-type')!].set(toFormLines(form)); - } private sliderTimes = [ 0, 1 / 4, 1 / 2, 3 / 4, 1, 3 / 2, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, @@ -106,14 +105,14 @@ export default class Setup { $fenPosition = $form.find(".fen_position"), $fenInput = $fenPosition.find('input'), forceFormPosition = !!$fenInput.val(), - $timeInput = $form.find('.time_choice input'), - $incrementInput = $form.find('.increment_choice input'), - $daysInput = $form.find('.days_choice input'), + $timeInput = $form.find('.time_choice [name=time]'), + $incrementInput = $form.find('.increment_choice [name=increment]'), + $daysInput = $form.find('.days_choice [name=days]'), typ = $form.data('type'), $ratings = $modal.find('.ratings > div'), randomColorVariants = $form.data('random-color-variants').split(','), $submits = $form.find('.color-submits__button'), - toggleButtons = function() { + toggleButtons = () => { const variantId = $variantSelect.val(), timeMode = $timeModeSelect.val(), rated = $rated.prop('checked'), @@ -234,8 +233,10 @@ export default class Setup { }); } else { $timeInput.add($incrementInput).each(function(this: HTMLInputElement) { - const input = this, $input = $(input), + const $input = $(this), $value = $input.siblings('span'), + $range = $input.siblings('.range-slider'), + range = $range[0] as HTMLInputElement, isTimeSlider = $input.parent().hasClass('time_choice'), showTime = (v: number) => { if (v == 1 / 4) return '¼'; @@ -245,57 +246,56 @@ export default class Setup { }, valueToTime = (v: number) => (isTimeSlider ? self.sliderTime : self.sliderIncrement)(v), show = (time: number) => $value.text(isTimeSlider ? showTime(time) : '' + time); - show(parseFloat(input.value)); - input.value = '' + self.sliderInitVal(parseFloat(input.value), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100); - input.max = '' + (isTimeSlider ? 38 : 30); - $input.on('input', () => { - const time = valueToTime(parseInt(input.value)); + show(parseFloat($input.val() as string)); + range.min = '0'; + range.max = '' + (isTimeSlider ? 38 : 30); + range.value = '' + self.sliderInitVal(parseFloat($input.val() as string), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100); + $range.on('input', () => { + const time = valueToTime(parseInt(range.value)); show(time); - /* input.value = '' + time; */ + $input.val('' + time); showRating(); toggleButtons(); }); }); - $daysInput.each(function(this: HTMLElement) { + $daysInput.each(function(this: HTMLInputElement) { var $input = $(this), - $value = $input.siblings('span'); + $value = $input.siblings('span'), + $range = $input.siblings('.range-slider'), + range = $range[0] as HTMLInputElement; $value.text($input.val() as string); - /* $input.after($('