From 43c06ef0b97bea7afdd8cd537888e2acb41e92c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=90=D1=85=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=82=D0=B7=D1=8F=D0=BD=D0=BE=D0=B2?= <ahmetzianov.temur@ya.ru>
Date: Sat, 3 Aug 2024 14:44:52 +0500
Subject: [PATCH] added delete btn

---
 index.html             | 15 ++++++++++++---
 js/battle.js           | 15 +++++++++++++++
 styles/char-styles.css |  8 +++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 97025e8..10c5196 100644
--- a/index.html
+++ b/index.html
@@ -64,17 +64,26 @@ <h2 class="char-name">Name</h2>
             </div>
         </div> -->
 
-        <!-- <div class="char-addinfo-container" id="char-0-info">
+        <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">
+                    <svg xmlns="http://www.w3.org/2000/svg" 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>
+
+                <button id="delete-btn" class="add-info-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
+                    </svg>
+
+                    <p>Delete</p>
+                </button>
             </div>
-        </div> -->
+        </div>
 
         <div id="remove-all-box">
             <button class="remove-btn">
diff --git a/js/battle.js b/js/battle.js
index 552dfd6..504b66c 100644
--- a/js/battle.js
+++ b/js/battle.js
@@ -167,6 +167,21 @@ function openCharInfo(id) {
 
     box.appendChild(health_btn);
 
+    const delete_btn = document.createElement('button');
+    delete_btn.id = "delete-btn";
+    delete_btn.classList.add("add-info-btn");
+    delete_btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" ' +
+                                    ' class="bi bi-trash" viewBox="0 0 16 16">' +
+                                '<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 ' +
+                                    ' 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>' +
+                                    '<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 ' +
+                                    ' 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 ' +
+                                    ' 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>' +
+                            '</svg>' +
+                            '<p>Delete</p>'
+
+    box.appendChild(delete_btn);
+
     info.appendChild(box);
 
     document.querySelector("#" + id).children[1].children[1].classList.add("info-btn-opened");
diff --git a/styles/char-styles.css b/styles/char-styles.css
index 592c52d..66bf17b 100644
--- a/styles/char-styles.css
+++ b/styles/char-styles.css
@@ -96,6 +96,12 @@
     color: #56949f;
 }
 
+#delete-btn {
+    border: 2px solid #b4637a;
+
+    color: #b4637a;
+}
+
 .add-info-btn {
     background: transparent;
     border-radius: 10px;
@@ -118,7 +124,7 @@
     margin: 0;
 }
 
-#health-btn > .bi-heart {
+.add-info-btn > .bi {
     width: 20px;
     height: 20px;
     margin-top: 3px;