fix(vitamins): Vitamin distribution fixes/tweaks (pokeclicker#5933)

* updates to vitamin distribution

* remove vendor prefix styling

---------

Co-authored-by: CypherX <672420+CypherX@users.noreply.github.com>

Author: CypherX

src/components/pokemonVitaminExpandedModal.html

@@ -131,9 +131,16 @@ <h5 class="modal-title text-light">Vitamins</h5>&nbsp; <button type="button" cla
                                             click: () => { $parent.removeVitamin($data, VitaminController.getMultiplier()) },
                                             class: ($parent.vitaminsUsed[$data]() > 0 && !$parent.breeding ? 'text-success' : 'text-muted')">-</button>
 
-                                    <knockout class="align-middle d-inline-block border border-secondary rounded" style="width: 2rem; overflow: hidden;" data-bind="text: $parent.vitaminsUsed[$data], event: {
-                                        blur: (data, event) => { $parent.setVitaminAmount($data, +event.currentTarget.textContent); $parent.vitaminsUsed[$data].notifySubscribers(); window.getSelection().empty(); }
-                                    }, attr: { contenteditable: $parent.breeding ? false : 'plaintext-only' }" tabindex="1" onfocus="window.getSelection().selectAllChildren(this)">0</knockout>
+                                    <input type="number" class="vitamin-input form-control form-control-sm d-inline-block text-center p-0" style="width: 2rem; height: 1.5rem; overflow: hidden;" tabindex="1"
+                                        min="0" onfocus="this.select()" onblur="window.getSelection().empty();"
+                                        data-bind="value: $parent.vitaminsUsed[$data](), // the () here is intended, this creates a one-way binding
+                                            disable: $parent.breeding,
+                                            event: {
+                                                change: (data, event) => {
+                                                    $parent.setVitaminAmount($data, +event.target.value);
+                                                    event.target.value = $parent.vitaminsUsed[$data](); // force input to update
+                                                }
+                                            }" />
 
                                     <button type="button" class="btn btn-link btn-sm text-decoration-none align-text-top" tabindex="-1" style="line-height: 0.6; font-size: 1rem;"
                                         data-bind="

src/scripts/party/PartyPokemon.ts

@@ -342,10 +342,11 @@ class PartyPokemon implements Saveable, TmpPartyPokemonType {
     }
 
     public setVitaminAmount(vitamin: GameConstants.VitaminType, amount: number) {
-        if (this.breeding || isNaN(amount) || amount < 0) {
+        if (this.breeding || isNaN(amount)) {
             return;
         }
 
+        amount = Math.max(0, amount);
         const diff = Math.floor(amount) - this.vitaminsUsed[vitamin]();
         if (diff === 0) {
             return;

src/styles/main.less

@@ -846,3 +846,12 @@ button.btn-circle {
         line-height: 30px;
     }
 }
+
+.vitamin-input {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+        appearance: none;
+        margin: 0;
+    }
+}