Skip to content

Commit

Permalink
treatment and damage for characters
Browse files Browse the repository at this point in the history
  • Loading branch information
@Katarni
Katarni committed Aug 3, 2024
1 parent 4f60913 commit 021c2fa
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 10 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ It's util for manage battles in DnD
+ add character
+ check character's HP
+ clear characters list
+ remove character from characters list
+ treatment and damage for characters

## TODO

+ treatment and damage for characters
+ remove character for characters list
+ storing battles
+ export to JSON
+ import from JSON
Expand Down
35 changes: 35 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,41 @@ <h2 class="char-name">Name</h2>
<p>Delete</p>
</button>
<div class="hp-input-box">
<input inputmode="none" name="hp-delta" id="hp-delta-field">
<button id="del-btn" class="num-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-backspace" viewBox="0 0 16 16">
<path d="M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z"/>
<path d="M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 0 1 6.603 1zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/>
</svg>
</button>
</div>
<div class="btns-box">
<button class="num-btn" id="num-btn-1">1</button>
<button class="num-btn" id="num-btn-2">2</button>
<button class="num-btn" id="num-btn-3">3</button>
</div>
<div class="btns-box">
<button class="num-btn" id="num-btn-4">4</button>
<button class="num-btn" id="num-btn-5">5</button>
<button class="num-btn" id="num-btn-6">6</button>
</div>
<div class="btns-box">
<button class="num-btn" id="num-btn-7">7</button>
<button class="num-btn" id="num-btn-8">8</button>
<button class="num-btn" id="num-btn-9">9</button>
</div>
<div class="btns-box">
<button class="num-btn" id="heal-btn-calc">+</button>
<button class="num-btn" id="num-btn-0">0</button>
<button class="num-btn" id="damage-btn-calc">-</button>
</div>
</div>
</div> -->

Expand Down
104 changes: 97 additions & 7 deletions js/battle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ function clearCharacters() {
document.querySelector("main").removeChild(document.querySelector("#char-" + i.toString()));
}

if (document.querySelector("#char-addinfo-container") != null) {
document.querySelector("#char-addinfo-container").remove();
if (document.querySelector(".char-addinfo-container") != null) {
document.querySelector(".char-addinfo-container").remove();
}

localStorage.setItem("counting", "0");
Expand Down Expand Up @@ -164,6 +164,7 @@ function openCharInfo(id) {
' 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/>' +
'</svg>' +
'<p>Health</p>'
health_btn.addEventListener("click", () => openHealthCalc());
box.appendChild(health_btn);

const delete_btn = document.createElement('button');
Expand All @@ -172,10 +173,12 @@ function openCharInfo(id) {
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"/>' +
' 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"/>' +
' 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>'
delete_btn.addEventListener("click", () => deleteChar(id));
Expand Down Expand Up @@ -234,9 +237,9 @@ function deleteChar(id) {
document.querySelector("main").removeChild(document.querySelector("#" + id));

for (let i = id_number + 1; i < parseInt(localStorage.getItem("counting")); ++i) {
localStorage.setItem("char-" + (i-1).toString() + "-name", localStorage.getItem("char-" + i.toString() + "-name"));
localStorage.setItem("char-" + (i-1).toString() + "-hp", localStorage.getItem("char-" + i.toString() + "-hp"));
localStorage.setItem("char-" + (i-1).toString() + "-max-hp", localStorage.getItem("char-" + i.toString() + "-max-hp"));
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"));

document.querySelector("#char-" + i.toString()).id = "char-" + (i-1).toString();
}
Expand All @@ -246,3 +249,90 @@ function deleteChar(id) {
localStorage.removeItem("char-" + localStorage.getItem("counting") + "-hp");
localStorage.removeItem("char-" + localStorage.getItem("counting") + "-max-hp");
}

function openHealthCalc() {
document.querySelector("#char-addinfo").innerHTML = '<div class="hp-input-box">' +
'<input inputmode="none" name="hp-delta" id="hp-delta-field">' +
'<button id="del-btn" class="num-btn">' +
'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"' +
'class="bi bi-backspace" viewBox="0 0 16 16">' +
'<path d="M5.83 5.146a.5.5 0 0 0 ' +
' 0 .708L7.975 8l-2.147 2.146a.5.5 0 ' +
' 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 ' +
' 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 ' +
' 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 ' +
' 0 0 0-.707 0z"/>' +
'<path d="M13.683 1a2 2 0 0 1 2 2v10a2 2 ' +
' 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 ' +
' 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 ' +
' 0 1 6.603 1zm-7.08 1a1 1 0 0 0-.76.35L1 ' +
' 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 ' +
' 0 0 1-1V3a1 1 0 0 0-1-1z"/>' +
'</svg>' +
'</button>' +
'</div>';

document.querySelector("#char-addinfo").innerHTML +='<div class="btns-box">' +
'<button class="num-btn" id="num-btn-1">1</button>' +
'<button class="num-btn" id="num-btn-2">2</button>' +
'<button class="num-btn" id="num-btn-3">3</button>' +
'</div>';

document.querySelector("#char-addinfo").innerHTML +='<div class="btns-box">' +
'<button class="num-btn" id="num-btn-4">4</button>' +
'<button class="num-btn" id="num-btn-5">5</button>' +
'<button class="num-btn" id="num-btn-6">6</button>' +
'</div>';

document.querySelector("#char-addinfo").innerHTML +='<div class="btns-box">' +
'<button class="num-btn" id="num-btn-7">7</button>' +
'<button class="num-btn" id="num-btn-8">8</button>' +
'<button class="num-btn" id="num-btn-9">9</button>' +
'</div>';

document.querySelector("#char-addinfo").innerHTML +='<div class="btns-box">' +
'<button class="num-btn" id="heal-btn-calc">+</button>' +
'<button class="num-btn" id="num-btn-0">0</button>' +
'<button class="num-btn" id="damage-btn-calc">-</button>' +
'</div>';

for (let i = 0; i <= 9; ++i) {
document.querySelector("#num-btn-" + i.toString()).addEventListener("click", function() {
document.querySelector("[name='hp-delta']").value += i.toString();
})
}

document.querySelector("#heal-btn-calc").addEventListener("click", () => healChar(1));
document.querySelector("#damage-btn-calc").addEventListener("click", () => healChar(-1));
document.querySelector("#del-btn").addEventListener("click", function() {
let val = document.querySelector("[name='hp-delta']").value;
if (val != "") {
document.querySelector("[name='hp-delta']").value = val.substring(0, val.length - 1);
}
});
}

function healChar(mul) {
if (document.querySelector("[name='hp-delta']").value == "") return;

let delta = mul * parseInt(document.querySelector("[name='hp-delta']").value);

let id = document.querySelector(".char-addinfo-container").id;
id = id.substring(0, id.length - 5);

localStorage.setItem(id + "-hp", parseInt(getVal(id.substring(5, id.length), "hp")) + delta);

if (parseInt(getVal(id.substring(5, id.length), "hp")) < 0) {
localStorage.setItem(id + "-hp", "0");
} else if (parseInt(getVal(id.substring(5, id.length), "hp")) > parseInt(getVal(id.substring(5, id.length), "max-hp"))) {
localStorage.setItem(id + "-hp", getVal(id.substring(5, id.length), "max-hp"));
}

console.log(getVal(id.substring(5, id.length), "hp"))

document.querySelector("#" + id).querySelector(".hp").textContent = getVal(id.substring(5, id.length), "hp");

setHealthColor(id.substring(5, id.length));

document.querySelector("[name='hp-delta']").value = "";
}
82 changes: 81 additions & 1 deletion styles/char-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
border-bottom-right-radius: 15px;
margin-right: 20px;

height: 200px;
height: 280px;
width: 200px;

display: flex;
Expand Down Expand Up @@ -129,3 +129,83 @@
height: 20px;
margin-top: 3px;
}

#hp-delta-field {
width: 65%;
background: #f2e9e1;
border: 1px solid #cecacd;
border-radius: 5px;

height: 37px;
font-size: 23px;
color: #575279;

padding-left: 5px;
padding-right: 5px;
margin-top: 15px;
margin-left: 6px;
margin-bottom: 18px;
}

#hp-delta-field:focus {
outline: none;
}

.btns-box {
width: 90%;
height: 50px;

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.num-btn {
width: 29%;
height: 90%;

background: transparent;
border: 2px solid #575279;
border-radius: 5px;

color: #575279;
font-size: 23px;
font-family: "Montserrat";
}

#heal-btn-calc {
color: #56949f !important;
border: 2px solid #56949f !important;
}

#damage-btn-calc {
color: #b4637a !important;
border: 2px solid #b4637a !important;
}

#del-btn {
width: 39px;
height: 39px;

display: flex;
align-items: center;
justify-content: center;

padding: 0 !important;
margin: 0;
margin-right: 2px;
border: none !important;
}

.bi-backspace {
height: 30px;
width: 30px;
}

.hp-input-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

0 comments on commit 021c2fa

Please sign in to comment.