From 8fd7580b5b05d02353bc91cce4d9c8c9be61206f Mon Sep 17 00:00:00 2001
From: Minoru Sekine <Minoru.Sekine.JP@gmail.com>
Date: Thu, 11 Jul 2024 07:33:59 +0900
Subject: [PATCH] fix: Gain input usability with replacing spin to dropdown.
 (#38)

---
 index.html     | 26 ++++++++++++++++----------
 nol_tsukumo.js | 10 ++++------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index c69acf2..fc55cac 100644
--- a/index.html
+++ b/index.html
@@ -33,16 +33,22 @@ <h2>ターゲット</h2>
       <input type="number" name="to-level" id="to-level-input" value="1" step="1" min="1" max="31">
     </li>
     <li>
-      <label for="tsukumo-gain-input"><span class="target">倍率</span></label>
-      <input type="number" name="tsukumo-gain" id="tsukumo-gain-input" value="1.0" step="0.1" min="1.0" max="2.0">
-      <details>
-	<summary>倍率目安</summary>
-	<ul>
-	  <li>x1.0: 通常時</li>
-	  <li>x1.5: 九十九キャンペーン中</li>
-	  <li>x2.0: もののふの日ボーナス最大</li>
-	</ul>
-      </details>
+      <label for="tsukumo-gain-dropdown"><span class="target">倍率</span></label>
+      <select name="tsukumo-gain" id="tsukumo-gain-dropdown">
+	<optgroup label="通常時">
+	  <option value="1.0">x1.0</option>
+	</optgroup>
+	<optgroup label="九十九キャンペーン中">
+	  <option value="1.5">x1.5</option>
+	</optgroup>
+	<optgroup label="もののふの日ボーナス">
+	  <option value="1.2">x1.2</option>
+	  <option value="1.4">x1.4</option>
+	  <option value="1.6">x1.6</option>
+	  <option value="1.8">x1.8</option>
+	  <option value="2.0">x2.0</option>
+	</optgroup>
+      </select>
     </li>
   </ul>
 
diff --git a/nol_tsukumo.js b/nol_tsukumo.js
index 1a82fa9..07a91fc 100644
--- a/nol_tsukumo.js
+++ b/nol_tsukumo.js
@@ -492,7 +492,7 @@ class NolTsukumoController extends NolTsukumoModelObserverInterface {
   #currentLevelInput = null;
   #currentExpInput = null;
   #currentNumOfActivatedTsukumo = null;
-  #gainInput = null;
+  #gainDropdown = null;
   #memoButton = null;
   #memoClearButton = null;
   #memoUndoButton = null;
@@ -515,7 +515,7 @@ class NolTsukumoController extends NolTsukumoModelObserverInterface {
     this.#currentExpInput = document.getElementById('exp-input');
     this.#currentNumOfActivatedTsukumo =
       document.getElementById('active-tsukumo-num-input');
-    this.#gainInput = document.getElementById('tsukumo-gain-input');
+    this.#gainDropdown = document.getElementById('tsukumo-gain-dropdown');
     this.#memoButton = document.getElementById('memo-button');
     this.#memoClearButton = document.getElementById('memo-clear-button');
     this.#memoUndoButton = document.getElementById('memo-undo-button');
@@ -541,11 +541,9 @@ class NolTsukumoController extends NolTsukumoModelObserverInterface {
       this.#model.setToLevel(parseInt(this.#toLevelInput.value, 10));
     });
 
-    this.#gainInput.addEventListener('input', () => {
-      const gain = parseFloat(this.#gainInput.value);
+    this.#gainDropdown.addEventListener('change', () => {
+      const gain = parseFloat(this.#gainDropdown.value);
       this.#model.setGain(gain);
-      // Do not omit ".0" even if just integer value.
-      this.#gainInput.value = gain.toFixed(1);
     });
 
     this.#memoButton.addEventListener('click', () => {