fix: Gain input usability with replacing spin to dropdown. (#38)

MinoruSekine · Jul 10, 2024 · 8fd7580 · 8fd7580
1 parent 2e4fdb0
commit 8fd7580
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git 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
@@ -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', () => {