Some design changes + more work on pro codes sim
parent
ac49540a5d
commit
8736e02a92
|
|
@ -0,0 +1,66 @@
|
|||
const CODES_STORAGE_NAME = "kh3/pro-codes-sim/codes/";
|
||||
const MERIT_STORAGE_NAME = "kh3/pro-codes-sim/merit/";
|
||||
const STAR_MULTIPLIER = 1.25;
|
||||
|
||||
let selectionAllState = false;
|
||||
let stars = 0;
|
||||
let totalMerit = 0;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {});
|
||||
|
||||
function toggleCode(code) {
|
||||
let codeStars = Number(code.dataset["stars"]);
|
||||
|
||||
if (code.checked) {
|
||||
stars += codeStars;
|
||||
} else {
|
||||
stars -= codeStars;
|
||||
selectionAllState = false;
|
||||
updateAllButton();
|
||||
}
|
||||
updateStarsCounter();
|
||||
}
|
||||
|
||||
function toggleAllCodes() {
|
||||
const codes = document.querySelectorAll("#codes .slot input");
|
||||
|
||||
if (!selectionAllState) {
|
||||
selectionAllState = true;
|
||||
updateAllButton();
|
||||
for (let code of codes) {
|
||||
if (code.checked) {
|
||||
continue;
|
||||
}
|
||||
code.checked = true;
|
||||
stars += Number(code.dataset["stars"]);
|
||||
}
|
||||
} else {
|
||||
selectionAllState = false;
|
||||
updateAllButton();
|
||||
for (let code of codes) {
|
||||
if (!code.checked) {
|
||||
continue;
|
||||
}
|
||||
code.checked = false;
|
||||
stars -= Number(code.dataset["stars"]);
|
||||
}
|
||||
}
|
||||
|
||||
updateStarsCounter();
|
||||
}
|
||||
|
||||
function updateStarsCounter() {
|
||||
let counter = document.getElementById("totalStars");
|
||||
counter.innerText = "Stars: " + stars;
|
||||
}
|
||||
|
||||
function updateAllButton() {
|
||||
const btn = document.querySelector("#codes .slot button");
|
||||
if (selectionAllState) {
|
||||
btn.classList.add("danger");
|
||||
} else {
|
||||
btn.classList.remove("danger");
|
||||
}
|
||||
}
|
||||
|
||||
Object.assign(window, { toggleCode, toggleAllCodes });
|
||||
|
|
@ -17,3 +17,19 @@ table {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 0 1 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@ button {
|
|||
background: var(--button-bg-color);
|
||||
color: var(--text-color);
|
||||
padding: 8px;
|
||||
border-color: var(--button-border-color);
|
||||
border-style: groove;
|
||||
border-color: var(--button-border-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
transition-duration: 0.1s;
|
||||
|
||||
|
|
@ -85,6 +85,10 @@ button {
|
|||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border-bottom-color: var(--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
|
|
@ -108,7 +112,6 @@ input[type="radio"] {
|
|||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding-top: 8px;
|
||||
|
||||
& + label {
|
||||
cursor: pointer;
|
||||
|
|
@ -133,7 +136,7 @@ input[type="radio"] {
|
|||
content: "\2713";
|
||||
color: var(--primary-color);
|
||||
font-size: 48px;
|
||||
top: -10px;
|
||||
top: -16px;
|
||||
left: -4px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
|
|
@ -152,7 +155,7 @@ input[type="radio"] {
|
|||
|
||||
&:checked:after {
|
||||
font-size: 16px;
|
||||
top: 10px;
|
||||
top: 2px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,4 +15,7 @@
|
|||
|
||||
--primary-color: #00aa00;
|
||||
--primary-light-color: #60de60;
|
||||
|
||||
--error-color: hsl(2, 68%, 53%);
|
||||
--error-color-lighter: hsl(2, 68%, 63%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,10 +90,19 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 40%;
|
||||
row-gap: 20px;
|
||||
row-gap: 1rem;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tracked-filter {
|
||||
margin-bottom: 16px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#content {
|
||||
display: flex;
|
||||
margin: 4rem;
|
||||
margin: 0 4rem;
|
||||
}
|
||||
|
||||
#score,
|
||||
|
|
@ -9,10 +9,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
margin-top: 2rem;
|
||||
|
||||
#fights {
|
||||
.slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,44 @@
|
|||
<input
|
||||
type="radio"
|
||||
id="hasAny"
|
||||
name="charFilter"
|
||||
autocomplete="off"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label for="hasAny">Any</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="hasAny"
|
||||
name="charFilter"
|
||||
autocomplete="off"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label for="hasAny">Any</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="hasTerra"
|
||||
autocomplete="off"
|
||||
value="T"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasTerra">Terra</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="hasTerra"
|
||||
autocomplete="off"
|
||||
value="T"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasTerra">Terra</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="hasVentus"
|
||||
autocomplete="off"
|
||||
value="V"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasVentus">Ventus</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="hasVentus"
|
||||
autocomplete="off"
|
||||
value="V"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasVentus">Ventus</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="hasAqua"
|
||||
autocomplete="off"
|
||||
value="A"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasAqua">Aqua</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="hasAqua"
|
||||
autocomplete="off"
|
||||
value="A"
|
||||
name="charFilter"
|
||||
/>
|
||||
<label for="hasAqua">Aqua</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,39 @@
|
|||
<input type="text" id="filter" autocomplete="off" />
|
||||
<br />
|
||||
<input
|
||||
type="radio"
|
||||
id="searchResult"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
value="commands"
|
||||
checked
|
||||
/>
|
||||
<label for="searchResult">Result</label>
|
||||
<div class="row">
|
||||
<input type="text" id="filter" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="searchIngredients"
|
||||
autocomplete="off"
|
||||
value="ingredients"
|
||||
name="search"
|
||||
/>
|
||||
<label for="searchIngredients">Ingredients</label>
|
||||
<div class="row">
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="searchResult"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
value="commands"
|
||||
checked
|
||||
/>
|
||||
<label for="searchResult">Result</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="searchAbilities"
|
||||
autocomplete="off"
|
||||
value="abilities"
|
||||
name="search"
|
||||
/>
|
||||
<label for="searchAbilities">Abilities</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="searchIngredients"
|
||||
autocomplete="off"
|
||||
value="ingredients"
|
||||
name="search"
|
||||
/>
|
||||
<label for="searchIngredients">Ingredients</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="searchAbilities"
|
||||
autocomplete="off"
|
||||
value="abilities"
|
||||
name="search"
|
||||
/>
|
||||
<label for="searchAbilities">Abilities</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,55 @@
|
|||
<input
|
||||
type="radio"
|
||||
id="isAny"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label for="isAny">Any</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="isAny"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label for="isAny">Any</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="isAttack"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="attack"
|
||||
/>
|
||||
<label for="isAttack">Attack</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="isAttack"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="attack"
|
||||
/>
|
||||
<label for="isAttack">Attack</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="isMagic"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="magic"
|
||||
/>
|
||||
<label for="isMagic">Magic</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="isMagic"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="magic"
|
||||
/>
|
||||
<label for="isMagic">Magic</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="isAction"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="action"
|
||||
/>
|
||||
<label for="isAction">Action</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="isAction"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="action"
|
||||
/>
|
||||
<label for="isAction">Action</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
id="isShotlock"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="shotlock"
|
||||
/>
|
||||
<label for="isShotlock">Shotlock</label>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="isShotlock"
|
||||
name="typeFilter"
|
||||
autocomplete="off"
|
||||
value="shotlock"
|
||||
/>
|
||||
<label for="isShotlock">Shotlock</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% include "components/bbs/search.html" %}
|
||||
<br />
|
||||
{% include "components/bbs/type-filters.html" %}
|
||||
<br />
|
||||
{% include "components/bbs/char-filters.html" %}
|
||||
<div class="filters">
|
||||
{% include "components/bbs/search.html" %}
|
||||
<div class="row">{% include "components/bbs/type-filters.html" %}</div>
|
||||
<div class="row">{% include "components/bbs/char-filters.html" %}</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -11,19 +11,30 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="score"><h1>Merit: 365000</h1></div>
|
||||
<div id="score">
|
||||
<h1 id="totalMerit">Merit: 365000</h1>
|
||||
<h2 id="totalStars">Stars: 0</h2>
|
||||
</div>
|
||||
<div id="codes">
|
||||
{% for code in pro_codes %}
|
||||
<div class="slot">
|
||||
<input type="checkbox" id="{{code.id()}}" autocomplete="off">
|
||||
<label for="{{code.id()}}">{{code.name}}</label>
|
||||
<button onclick="toggleAllCodes()">Toggle All</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for code in pro_codes %}
|
||||
<div class="slot">
|
||||
<input type="checkbox" id="{{code.id()}}" autocomplete="off" data-stars="{{code.stars}}" onclick="toggleCode(this)">
|
||||
<label for="{{code.id()}}">{{code.name}}</label>
|
||||
<span>
|
||||
{% for star in 0..5 %}
|
||||
{% if star < code.stars %}★{% else %}☆{% endif %}
|
||||
{% endfor %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="fights">
|
||||
{% for fight in fights %}
|
||||
<div class="slot">
|
||||
<button onclick="" data-base-merit="{{fight.merit}}">Track</button>
|
||||
<button onclick="" data-base-merit="{{fight.merit}}">Mark</button>
|
||||
<span>{{fight.enemy}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue