Finalized the pro codes sim
parent
8736e02a92
commit
157e1e1bf4
|
|
@ -5,18 +5,80 @@ const STAR_MULTIPLIER = 1.25;
|
|||
let selectionAllState = false;
|
||||
let stars = 0;
|
||||
let totalMerit = 0;
|
||||
let fightMerit = [];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {});
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
const codes = document.querySelectorAll("#codes .slot input");
|
||||
const fights = document.querySelectorAll("#fights .slot button");
|
||||
|
||||
// Loading enabled codes
|
||||
for (let code of codes) {
|
||||
const hasCodeToggled =
|
||||
localStorage.getItem(CODES_STORAGE_NAME + code.id) === "true"
|
||||
? true
|
||||
: false;
|
||||
if (hasCodeToggled) {
|
||||
// Normally the toggleCode gets called after the checkbox is checked,
|
||||
// since we don't interact with it at this point we mark it as checked manually here
|
||||
code.checked = true;
|
||||
toggleCode(code);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading marked fights and their merit
|
||||
for (let fight of fights) {
|
||||
const source = fight.dataset["meritSource"];
|
||||
const merit =
|
||||
Number(localStorage.getItem(MERIT_STORAGE_NAME + source)) ?? 0;
|
||||
if (merit > 0) {
|
||||
markFight(fight);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function markFight(data) {
|
||||
const source = data.dataset["meritSource"];
|
||||
const baseMerit = data.dataset["baseMerit"];
|
||||
const isMarked = data.dataset["marked"] === "true" ? true : false;
|
||||
const fightLabel = data.parentNode.querySelector("span");
|
||||
|
||||
if (isMarked) {
|
||||
data.dataset["marked"] = false;
|
||||
totalMerit -= fightMerit[source];
|
||||
updateMeritCounter();
|
||||
fightMerit[source] = 0;
|
||||
|
||||
localStorage.removeItem(MERIT_STORAGE_NAME + source);
|
||||
|
||||
data.innerText = "Mark";
|
||||
data.classList.remove("danger");
|
||||
fightLabel.innerText = source;
|
||||
} else {
|
||||
let merit = baseMerit * (stars * STAR_MULTIPLIER);
|
||||
data.dataset["marked"] = true;
|
||||
totalMerit += merit;
|
||||
updateMeritCounter();
|
||||
fightMerit[source] = merit;
|
||||
|
||||
localStorage.setItem(MERIT_STORAGE_NAME + source, merit);
|
||||
|
||||
data.innerText = "Unmark";
|
||||
data.classList.add("danger");
|
||||
fightLabel.innerText = source + " | " + merit + " Merit";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCode(code) {
|
||||
let codeStars = Number(code.dataset["stars"]);
|
||||
|
||||
if (code.checked) {
|
||||
stars += codeStars;
|
||||
localStorage.setItem(CODES_STORAGE_NAME + code.id, true);
|
||||
} else {
|
||||
stars -= codeStars;
|
||||
selectionAllState = false;
|
||||
updateAllButton();
|
||||
localStorage.removeItem(CODES_STORAGE_NAME + code.id);
|
||||
}
|
||||
updateStarsCounter();
|
||||
}
|
||||
|
|
@ -33,6 +95,7 @@ function toggleAllCodes() {
|
|||
}
|
||||
code.checked = true;
|
||||
stars += Number(code.dataset["stars"]);
|
||||
localStorage.setItem(CODES_STORAGE_NAME + code.id, true);
|
||||
}
|
||||
} else {
|
||||
selectionAllState = false;
|
||||
|
|
@ -43,6 +106,7 @@ function toggleAllCodes() {
|
|||
}
|
||||
code.checked = false;
|
||||
stars -= Number(code.dataset["stars"]);
|
||||
localStorage.removeItem(CODES_STORAGE_NAME + code.id);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,6 +118,11 @@ function updateStarsCounter() {
|
|||
counter.innerText = "Stars: " + stars;
|
||||
}
|
||||
|
||||
function updateMeritCounter() {
|
||||
let counter = document.getElementById("totalMerit");
|
||||
counter.innerText = "Merit: " + totalMerit;
|
||||
}
|
||||
|
||||
function updateAllButton() {
|
||||
const btn = document.querySelector("#codes .slot button");
|
||||
if (selectionAllState) {
|
||||
|
|
@ -63,4 +132,4 @@ function updateAllButton() {
|
|||
}
|
||||
}
|
||||
|
||||
Object.assign(window, { toggleCode, toggleAllCodes });
|
||||
Object.assign(window, { markFight, toggleCode, toggleAllCodes });
|
||||
|
|
|
|||
|
|
@ -8,10 +8,11 @@
|
|||
#fights {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
margin-top: 2rem;
|
||||
width: 33%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
|
|
@ -19,4 +20,20 @@
|
|||
margin-bottom: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.inset-box-shadow {
|
||||
box-shadow: inset 0px 0px 40px 40px var(--bg-color);
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
margin-left: -200px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
padding: 60px 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
{% block content %}
|
||||
<div id="score">
|
||||
<h1 id="totalMerit">Merit: 365000</h1>
|
||||
<h1 id="totalMerit">Merit: 0</h1>
|
||||
<h2 id="totalStars">Stars: 0</h2>
|
||||
</div>
|
||||
<div id="codes">
|
||||
|
|
@ -32,11 +32,14 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
<div id="fights">
|
||||
{% for fight in fights %}
|
||||
<div class="slot">
|
||||
<button onclick="" data-base-merit="{{fight.merit}}">Mark</button>
|
||||
<span>{{fight.enemy}}</span>
|
||||
<div class="inset-box-shadow"></div>
|
||||
<div class="scrollable">
|
||||
{% for fight in fights %}
|
||||
<div class="slot">
|
||||
<button onclick="markFight(this)" data-merit-source="{{fight.enemy}}" data-base-merit="{{fight.merit}}">Mark</button>
|
||||
<span>{{fight.enemy}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue