Some design changes + more work on pro codes sim

public/scripts/kh3/pro-codes-sim.js

@@ -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 });

public/styles/bbs/melding.css

@@ -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;
+		}
+	}
+}

public/styles/common/base.css

@@ -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;
 	}
 

public/styles/common/colors.css

@@ -15,4 +15,7 @@
 
 	--primary-color: #00aa00;
 	--primary-light-color: #60de60;
+
+	--error-color: hsl(2, 68%, 53%);
+	--error-color-lighter: hsl(2, 68%, 63%);
 }

public/styles/common/drops.css

@@ -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;
 }

public/styles/kh3/pro-codes-sim.css

@@ -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;
 	}
 }

templates/components/bbs/char-filters.html

@@ -1,36 +1,44 @@
-<input
+<div>
-	type="radio"
+	<input
-	id="hasAny"
+		type="radio"
-	name="charFilter"
+		id="hasAny"
-	autocomplete="off"
+		name="charFilter"
-	value=""
+		autocomplete="off"
-	checked
+		value=""
-/>
+		checked
-<label for="hasAny">Any</label>
+	/>
+	<label for="hasAny">Any</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="hasTerra"
+		type="radio"
-	autocomplete="off"
+		id="hasTerra"
-	value="T"
+		autocomplete="off"
-	name="charFilter"
+		value="T"
-/>
+		name="charFilter"
-<label for="hasTerra">Terra</label>
+	/>
+	<label for="hasTerra">Terra</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="hasVentus"
+		type="radio"
-	autocomplete="off"
+		id="hasVentus"
-	value="V"
+		autocomplete="off"
-	name="charFilter"
+		value="V"
-/>
+		name="charFilter"
-<label for="hasVentus">Ventus</label>
+	/>
+	<label for="hasVentus">Ventus</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="hasAqua"
+		type="radio"
-	autocomplete="off"
+		id="hasAqua"
-	value="A"
+		autocomplete="off"
-	name="charFilter"
+		value="A"
-/>
+		name="charFilter"
-<label for="hasAqua">Aqua</label>
+	/>
+	<label for="hasAqua">Aqua</label>
+</div>

templates/components/bbs/search.html

@@ -1,29 +1,39 @@
-<input type="text" id="filter" autocomplete="off" />
+<div class="row">
-<br />
+	<input type="text" id="filter" autocomplete="off" />
-<input
+</div>
-	type="radio"
-	id="searchResult"
-	name="search"
-	autocomplete="off"
-	value="commands"
-	checked
-/>
-<label for="searchResult">Result</label>
 
-<input
+<div class="row">
-	type="radio"
+	<div>
-	id="searchIngredients"
+		<input
-	autocomplete="off"
+			type="radio"
-	value="ingredients"
+			id="searchResult"
-	name="search"
+			name="search"
-/>
+			autocomplete="off"
-<label for="searchIngredients">Ingredients</label>
+			value="commands"
+			checked
+		/>
+		<label for="searchResult">Result</label>
+	</div>
 
-<input
+	<div>
-	type="radio"
+		<input
-	id="searchAbilities"
+			type="radio"
-	autocomplete="off"
+			id="searchIngredients"
-	value="abilities"
+			autocomplete="off"
-	name="search"
+			value="ingredients"
-/>
+			name="search"
-<label for="searchAbilities">Abilities</label>
+		/>
+		<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>

templates/components/bbs/type-filters.html

@@ -1,45 +1,55 @@
-<input
+<div>
-	type="radio"
+	<input
-	id="isAny"
+		type="radio"
-	name="typeFilter"
+		id="isAny"
-	autocomplete="off"
+		name="typeFilter"
-	value=""
+		autocomplete="off"
-	checked
+		value=""
-/>
+		checked
-<label for="isAny">Any</label>
+	/>
+	<label for="isAny">Any</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="isAttack"
+		type="radio"
-	name="typeFilter"
+		id="isAttack"
-	autocomplete="off"
+		name="typeFilter"
-	value="attack"
+		autocomplete="off"
-/>
+		value="attack"
-<label for="isAttack">Attack</label>
+	/>
+	<label for="isAttack">Attack</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="isMagic"
+		type="radio"
-	name="typeFilter"
+		id="isMagic"
-	autocomplete="off"
+		name="typeFilter"
-	value="magic"
+		autocomplete="off"
-/>
+		value="magic"
-<label for="isMagic">Magic</label>
+	/>
+	<label for="isMagic">Magic</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="isAction"
+		type="radio"
-	name="typeFilter"
+		id="isAction"
-	autocomplete="off"
+		name="typeFilter"
-	value="action"
+		autocomplete="off"
-/>
+		value="action"
-<label for="isAction">Action</label>
+	/>
+	<label for="isAction">Action</label>
+</div>
 
-<input
+<div>
-	type="radio"
+	<input
-	id="isShotlock"
+		type="radio"
-	name="typeFilter"
+		id="isShotlock"
-	autocomplete="off"
+		name="typeFilter"
-	value="shotlock"
+		autocomplete="off"
-/>
+		value="shotlock"
-<label for="isShotlock">Shotlock</label>
+	/>
+	<label for="isShotlock">Shotlock</label>
+</div>

templates/pages/bbs/melding.html

@@ -11,11 +11,11 @@
 {% endblock %}
 
 {% block content %}
-	{% include "components/bbs/search.html" %}
+	<div class="filters">
-	<br />
+		{% include "components/bbs/search.html" %}
-	{% include "components/bbs/type-filters.html" %}
+		<div class="row">{% include "components/bbs/type-filters.html" %}</div>
-	<br />
+		<div class="row">{% include "components/bbs/char-filters.html" %}</div>
-	{% include "components/bbs/char-filters.html" %}
+	</div>
 
 	<table>
 		<thead>

templates/pages/kh3/pro-codes-sim.html

@@ -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">
+			<button onclick="toggleAllCodes()">Toggle All</button>
-			<label for="{{code.id()}}">{{code.name}}</label>
 		</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 %}