save initiative

Katarni · Aug 3, 2024 · 074d9d6 · 074d9d6
1 parent 70d9b4f
commit 074d9d6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -62,7 +62,7 @@ <h1 id="header-title">DnD battles</h1>
 
             <div hidden="hidden" class="input-box input-box-closed">
                 <p for="initiative" class="input-name">Initiative</p>
-                <input type="number" name="initiative" class="input-field input-field-number">
+                <input type="number" name="initiative" class="input-field input-field-number" placeholder="0">
             </div>
 
             <button class="add-char-btn add-char-btn-closed">+</button>

diff --git a/js/battle.js b/js/battle.js
@@ -7,7 +7,8 @@ function getVal(id, name) {
 }
 
 document.querySelector(".add-char-btn").onclick = openInputFields;
-document.querySelector(".remove-btn").onclick = clearCharacters;
+document.querySelector("#remove-all-btn").onclick = clearCharacters;
+document.querySelector("#reorder-btn").onclick = reorderCharacters;
 
 for (let i = 0; i < parseInt(localStorage.getItem("counting")); ++i) {
     document.querySelector('.add-char-box').insertAdjacentElement("afterend", getCharElm(i.toString()));
@@ -55,6 +56,10 @@ function addCharacter() {
         document.querySelector("[name='max-hp']").classList.remove("input-box-incorrect")
     }
 
+    if (document.querySelector("[name='initiative']").value == "") {
+        document.querySelector("[name='initiative']").value = "0";
+    }
+
     if (parseInt(document.querySelector("[name='hp']").value) > parseInt(document.querySelector("[name='max-hp']").value)) {
         document.querySelector("[name='hp']").value = document.querySelector("[name='max-hp']").value;
     }
@@ -65,6 +70,8 @@ function addCharacter() {
                             document.querySelector("[name='hp']").value);
     localStorage.setItem("char-" + localStorage.getItem("counting") + "-max-hp",
                             document.querySelector("[name='max-hp']").value);
+    localStorage.setItem("char-" + localStorage.getItem("counting") + "-initiative",
+                            document.querySelector("[name='initiative']").value);
 
     document.querySelector("[name='char-name']").value = "";
     document.querySelector("[name='hp']").value = "";
@@ -120,6 +127,7 @@ function clearCharacters() {
         localStorage.removeItem("char-" + i.toString() + "-name");
         localStorage.removeItem("char-" + i.toString() + "-hp");
         localStorage.removeItem("char-" + i.toString() + "-max-hp");
+        localStorage.removeItem("char-" + i.toString() + "-initiative");
 
         document.querySelector("main").removeChild(document.querySelector("#char-" + i.toString()));
     }
@@ -240,6 +248,7 @@ function deleteChar(id) {
         localStorage.setItem("char-" + (i-1).toString() + "-name", getVal(i.toString(), "name"));
         localStorage.setItem("char-" + (i-1).toString() + "-hp", getVal(i.toString(), "hp"));
         localStorage.setItem("char-" + (i-1).toString() + "-max-hp", getVal(i.toString(), "max-hp"));
+        localStorage.setItem("char-" + (i-1).toString() + "-initiative", getVal(i.toString(), "initiative"));
 
         document.querySelector("#char-" + i.toString()).id = "char-" + (i-1).toString();
     }
@@ -248,6 +257,7 @@ function deleteChar(id) {
     localStorage.removeItem("char-" + localStorage.getItem("counting") + "-name");
     localStorage.removeItem("char-" + localStorage.getItem("counting") + "-hp");
     localStorage.removeItem("char-" + localStorage.getItem("counting") + "-max-hp");
+    localStorage.removeItem("char-" + localStorage.getItem("counting") + "-initiative");
 }
 
 function openHealthCalc() {
@@ -336,3 +346,7 @@ function healChar(mul) {
 
     document.querySelector("[name='hp-delta']").value = "";
 }
+
+function reorderCharacters() {
+
+}
diff --git a/styles/add-char.css b/styles/add-char.css
@@ -81,6 +81,10 @@
     padding-right: 5px;
 }
 
+.input-field::placeholder {
+    color: #9893a5;
+}
+
 .input-field-text {
     width: 30%;
 }