added health btn

Katarni · Aug 3, 2024 · 929c0fe · 929c0fe
1 parent 6ed486c
commit 929c0fe
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -66,7 +66,13 @@ <h2 class="char-name">Name</h2>
 
         <!-- <div class="char-addinfo-container" id="char-0-info">
             <div id="char-addinfo">
+                <button id="health-btn" class="add-info-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
+                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/>
+                    </svg>
 
+                    <p>Health</p>
+                </button>
             </div>
         </div> -->
 

diff --git a/js/battle.js b/js/battle.js
@@ -134,16 +134,42 @@ function clearCharacters() {
 function openCharInfo(id) {
     if (document.querySelector(".char-addinfo-container") != null) {
         if (document.querySelector(".char-addinfo-container").id == id + "-info") {
+            document.querySelector("#" + id).children[1].children[1].classList.remove("info-btn-opened");
             document.querySelector(".char-addinfo-container").remove();
             return;
         }
+        let last_id = document.querySelector(".char-addinfo-container").id;
+        last_id = last_id.substring(0, last_id.length - 5);
+
+        document.querySelector("#" + last_id).children[1].children[1].classList.remove("info-btn-opened");
         document.querySelector(".char-addinfo-container").remove();
     }
 
     const info = document.createElement('div');
     info.classList.add("char-addinfo-container");
     info.id = id + "-info";
-    info.innerHTML = '<div id="char-addinfo"></div>';
+
+    const box = document.createElement('div');
+    box.id = "char-addinfo";
+
+    const health_btn = document.createElement('button');
+    health_btn.id = "health-btn";
+    health_btn.classList.add("add-info-btn");
+    health_btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" ' +
+                                    'class="bi bi-heart" viewBox="0 0 16 16">' +
+                                '<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 ' +
+                                    ' 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 ' +
+                                    ' 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 ' +
+                                    ' 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 ' +
+                                    ' 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/>' +
+                            '</svg>' +
+                            '<p>Health</p>'
+
+    box.appendChild(health_btn);
+
+    info.appendChild(box);
+
+    document.querySelector("#" + id).children[1].children[1].classList.add("info-btn-opened");
 
     document.querySelector("#" + id).insertAdjacentElement("afterend", info);
 }

diff --git a/styles/char-styles.css b/styles/char-styles.css
@@ -29,7 +29,11 @@
     margin-right: 20px;
 
     height: 200px;
-    width: 220px;
+    width: 200px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .char-name {
@@ -51,6 +55,10 @@
     background: transparent;
 }
 
+.info-btn-opened {
+    transform: rotate(180deg);
+}
+
 .bi-chevron-compact-down {
     width: 27px;
     height: 27px;
@@ -80,4 +88,38 @@
 .high-hp {
     color: #56949f;
     /* border: 1px solid #56949f; */
+}
+
+#health-btn {
+    border: 2px solid #56949f;
+
+    color: #56949f;
+}
+
+.add-info-btn {
+    background: transparent;
+    border-radius: 10px;
+
+    width: 120px;
+    height: 40px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+
+    margin-top: 15px;
+
+    font-family: "Montserrat";
+    font-size: 20px;
+}
+
+.add-info-btn > p {
+    margin: 0;
+}
+
+#health-btn > .bi-heart {
+    width: 20px;
+    height: 20px;
+    margin-top: 3px;
 }