From 1bb59198dd5fa5ae6aa0701432d367ee7e09a389 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 29 May 2021 13:30:10 +0200
Subject: [PATCH] Implement CheckBoxRow and SpinBoxFloatRow

---
 ts/deckoptions/AdvancedOptions.svelte | 144 ++++++++++----------------
 ts/deckoptions/AudioOptions.svelte    |  49 +++------
 ts/deckoptions/CheckBoxRow.svelte     |  30 ++++++
 ts/deckoptions/DisplayOrder.svelte    | 121 ++++++++--------------
 ts/deckoptions/SpinBoxFloatRow.svelte |  28 +++++
 ts/deckoptions/SpinBoxRow.svelte      |   3 +-
 ts/deckoptions/TimerOptions.svelte    |  52 ++++------
 7 files changed, 188 insertions(+), 239 deletions(-)
 create mode 100644 ts/deckoptions/CheckBoxRow.svelte
 create mode 100644 ts/deckoptions/SpinBoxFloatRow.svelte

diff --git a/ts/deckoptions/AdvancedOptions.svelte b/ts/deckoptions/AdvancedOptions.svelte
index 0f33290bf..861dfa6c4 100644
--- a/ts/deckoptions/AdvancedOptions.svelte
+++ b/ts/deckoptions/AdvancedOptions.svelte
@@ -4,14 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import SpinBoxFloat from "./SpinBoxFloat.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -20,91 +15,62 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.schedulingMaximumInterval()}
-            <HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBox
-                min={1}
-                max={365 * 100}
-                bind:value={$config.maximumReviewInterval}
-            />
-            <RevertButton
-                defaultValue={defaults.maximumReviewInterval}
-                bind:value={$config.maximumReviewInterval}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.maximumReviewInterval}
+        defaultValue={defaults.maximumReviewInterval}
+        min={1}
+        max={365 * 100}
+        markdownTooltip={tr.deckConfigMaximumIntervalTooltip()}
+    >
+        {tr.schedulingMaximumInterval()}
+    </SpinBoxRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingStartingEase()}
-            <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} />
-            <RevertButton
-                defaultValue={defaults.initialEase}
-                bind:value={$config.initialEase}
-            />
-        </Col>
-    </Row>
+    <SpinBoxFloatRow
+        bind:value={$config.initialEase}
+        defaultValue={defaults.initialEase}
+        min={1.31}
+        max={5}
+        markdownTooltip={tr.deckConfigStartingEaseTooltip()}
+    >
+        {tr.schedulingStartingEase()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingEasyBonus()}
-            <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} />
-            <RevertButton
-                defaultValue={defaults.easyMultiplier}
-                bind:value={$config.easyMultiplier}
-            />
-        </Col>
-    </Row>
+    <SpinBoxFloatRow
+        bind:value={$config.easyMultiplier}
+        defaultValue={defaults.easyMultiplier}
+        min={1}
+        max={3}
+        markdownTooltip={tr.deckConfigEasyBonusTooltip()}
+    >
+        {tr.schedulingEasyBonus()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingIntervalModifier()}
-            <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} />
-            <RevertButton
-                defaultValue={defaults.intervalMultiplier}
-                bind:value={$config.intervalMultiplier}
-            />
-        </Col>
-    </Row>
+    <SpinBoxFloatRow
+        bind:value={$config.intervalMultiplier}
+        defaultValue={defaults.intervalMultiplier}
+        min={0.5}
+        max={2}
+        markdownTooltip={tr.deckConfigIntervalModifierTooltip()}
+    >
+        {tr.schedulingIntervalModifier()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingHardInterval()}
-            <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} />
-            <RevertButton
-                defaultValue={defaults.hardMultiplier}
-                bind:value={$config.hardMultiplier}
-            />
-        </Col>
-    </Row>
+    <SpinBoxFloatRow
+        bind:value={$config.hardMultiplier}
+        defaultValue={defaults.hardMultiplier}
+        min={0.5}
+        max={1.3}
+        markdownTooltip={tr.deckConfigHardIntervalTooltip()}
+    >
+        {tr.schedulingHardInterval()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingNewInterval()}
-            <HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} />
-            <RevertButton
-                defaultValue={defaults.lapseMultiplier}
-                bind:value={$config.lapseMultiplier}
-            />
-        </Col>
-    </Row>
+    <SpinBoxFloatRow
+        bind:value={$config.lapseMultiplier}
+        defaultValue={defaults.lapseMultiplier}
+        max={1}
+        markdownTooltip={tr.deckConfigNewIntervalTooltip()}
+    >
+        {tr.schedulingNewInterval()}
+    </SpinBoxFloatRow>
 </TitledContainer>
diff --git a/ts/deckoptions/AudioOptions.svelte b/ts/deckoptions/AudioOptions.svelte
index 152600033..50ff2e4f2 100644
--- a/ts/deckoptions/AudioOptions.svelte
+++ b/ts/deckoptions/AudioOptions.svelte
@@ -4,13 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -19,34 +14,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.disableAutoplay}>
-                {tr.deckConfigDisableAutoplay()}
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.disableAutoplay}
-                bind:value={$config.disableAutoplay}
-            />
-        </Col>
-    </Row>
+    <CheckBoxRow
+        bind:value={$config.disableAutoplay}
+        defaultValue={defaults.disableAutoplay}
+    >
+        {tr.deckConfigDisableAutoplay()}
+    </CheckBoxRow>
 
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}>
-                {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-                <HelpPopup
-                    html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
-                />
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-                bind:value={$config.skipQuestionWhenReplayingAnswer}
-            />
-        </Col>
-    </Row>
+    <CheckBoxRow
+        bind:value={$config.skipQuestionWhenReplayingAnswer}
+        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+        markdownTooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
+    >
+        {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+    </CheckBoxRow>
 </TitledContainer>
diff --git a/ts/deckoptions/CheckBoxRow.svelte b/ts/deckoptions/CheckBoxRow.svelte
new file mode 100644
index 000000000..3db4cf7cc
--- /dev/null
+++ b/ts/deckoptions/CheckBoxRow.svelte
@@ -0,0 +1,30 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import marked from "marked";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: boolean;
+    export let defaultValue: boolean;
+    export let markdownTooltip: string | undefined = undefined;
+</script>
+
+<Row>
+    <Col>
+        <CheckBox bind:value
+            ><slot />
+            {#if markdownTooltip}<HelpPopup
+                    html={marked(markdownTooltip)}
+                />{/if}</CheckBox
+        >
+    </Col>
+    <Col grow={false}>
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>
diff --git a/ts/deckoptions/DisplayOrder.svelte b/ts/deckoptions/DisplayOrder.svelte
index f59a2f95f..9f80c9ae3 100644
--- a/ts/deckoptions/DisplayOrder.svelte
+++ b/ts/deckoptions/DisplayOrder.svelte
@@ -4,13 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import EnumSelector from "./EnumSelector.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
 
     import type { DeckOptionsState } from "./lib";
     import { reviewMixChoices } from "./strings";
@@ -42,82 +37,48 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewGatherPriority()}
-            <HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={newGatherPriorityChoices}
-                bind:value={$config.newCardGatherPriority}
-            />
-            <RevertButton
-                defaultValue={defaults.newCardGatherPriority}
-                bind:value={$config.newCardGatherPriority}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.newCardGatherPriority}
+        defaultValue={defaults.newCardGatherPriority}
+        choices={newGatherPriorityChoices}
+        markdownTooltip={tr.deckConfigNewGatherPriorityTooltip()}
+    >
+        {tr.deckConfigNewGatherPriority()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewCardSortOrder()}
-            <HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={newSortOrderChoices}
-                bind:value={$config.newCardSortOrder}
-            />
-            <RevertButton
-                defaultValue={defaults.newCardSortOrder}
-                bind:value={$config.newCardSortOrder}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.newCardSortOrder}
+        defaultValue={defaults.newCardSortOrder}
+        choices={newSortOrderChoices}
+        markdownTooltip={tr.deckConfigNewCardSortOrderTooltip()}
+    >
+        {tr.deckConfigNewCardSortOrder()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewReviewPriority()}
-            <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} />
-            <RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.newMix}
+        defaultValue={defaults.newMix}
+        choices={reviewMixChoices()}
+        markdownTooltip={tr.deckConfigNewReviewPriorityTooltip()}
+    >
+        {tr.deckConfigNewReviewPriority()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigInterdayStepPriority()}
-            <HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={reviewMixChoices()}
-                bind:value={$config.interdayLearningMix}
-            />
-            <RevertButton
-                defaultValue={defaults.interdayLearningMix}
-                bind:value={$config.interdayLearningMix}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.interdayLearningMix}
+        defaultValue={defaults.interdayLearningMix}
+        choices={reviewMixChoices()}
+        markdownTooltip={tr.deckConfigInterdayStepPriorityTooltip()}
+    >
+        {tr.deckConfigInterdayStepPriority()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigReviewSortOrder()}
-            <HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={reviewOrderChoices}
-                bind:value={$config.reviewOrder}
-            />
-            <RevertButton
-                defaultValue={defaults.reviewOrder}
-                bind:value={$config.reviewOrder}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.reviewOrder}
+        defaultValue={defaults.reviewOrder}
+        choices={reviewOrderChoices}
+        markdownTooltip={tr.deckConfigReviewSortOrderTooltip()}
+    >
+        {tr.deckConfigReviewSortOrder()}
+    </EnumSelectorRow>
 </TitledContainer>>
diff --git a/ts/deckoptions/SpinBoxFloatRow.svelte b/ts/deckoptions/SpinBoxFloatRow.svelte
new file mode 100644
index 000000000..7fcd046e0
--- /dev/null
+++ b/ts/deckoptions/SpinBoxFloatRow.svelte
@@ -0,0 +1,28 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import marked from "marked";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import SpinBoxFloat from "./SpinBoxFloat.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: any;
+    export let defaultValue: any;
+    export let min = 0;
+    export let max: number | undefined = undefined;
+    export let markdownTooltip: string;
+</script>
+
+<Row>
+    <Col size={7}>
+        <slot /><HelpPopup html={marked(markdownTooltip)} />
+    </Col>
+    <Col size={5}>
+        <SpinBoxFloat bind:value {min} {max} />
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deckoptions/SpinBoxRow.svelte
index c1650a832..eeb2d4d86 100644
--- a/ts/deckoptions/SpinBoxRow.svelte
+++ b/ts/deckoptions/SpinBoxRow.svelte
@@ -13,6 +13,7 @@
     export let value: any;
     export let defaultValue: any;
     export let min = 0;
+    export let max: number | undefined = undefined;
     export let markdownTooltip: string;
 </script>
 
@@ -21,7 +22,7 @@
         <slot /><HelpPopup html={marked(markdownTooltip)} />
     </Col>
     <Col size={5}>
-        <SpinBox bind:value {min} />
+        <SpinBox bind:value {min} {max} />
         <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/TimerOptions.svelte b/ts/deckoptions/TimerOptions.svelte
index 51a9825a5..2d9a9798b 100644
--- a/ts/deckoptions/TimerOptions.svelte
+++ b/ts/deckoptions/TimerOptions.svelte
@@ -4,14 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -20,32 +15,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigMaximumAnswerSecs()}
-            <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} />
-            <RevertButton
-                defaultValue={defaults.capAnswerTimeToSecs}
-                bind:value={$config.capAnswerTimeToSecs}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.capAnswerTimeToSecs}
+        defaultValue={defaults.capAnswerTimeToSecs}
+        min={30}
+        max={600}
+        markdownTooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
+    >
+        {tr.deckConfigMaximumAnswerSecs()}
+    </SpinBoxRow>
 
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.showTimer}>
-                {tr.schedulingShowAnswerTimer()}
-                <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.showTimer}
-                bind:value={$config.showTimer}
-            />
-        </Col>
-    </Row>
+    <CheckBoxRow
+        bind:value={$config.showTimer}
+        defaultValue={defaults.showTimer}
+        markdownTooltip={tr.deckConfigShowAnswerTimerTooltip()}
+    >
+        {tr.schedulingShowAnswerTimer()}
+    </CheckBoxRow>
 </TitledContainer>