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,3 +1,4 @@
+<div>
 	<input
 		type="radio"
 		id="hasAny"
@@ -7,7 +8,9 @@
 		checked
 	/>
 	<label for="hasAny">Any</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="hasTerra"
@@ -16,7 +19,9 @@
 		name="charFilter"
 	/>
 	<label for="hasTerra">Terra</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="hasVentus"
@@ -25,7 +30,9 @@
 		name="charFilter"
 	/>
 	<label for="hasVentus">Ventus</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="hasAqua"
@@ -34,3 +41,4 @@
 		name="charFilter"
 	/>
 	<label for="hasAqua">Aqua</label>
+</div>

templates/components/bbs/search.html

@@ -1,5 +1,9 @@
+<div class="row">
 	<input type="text" id="filter" autocomplete="off" />
-<br />
+</div>
+
+<div class="row">
+	<div>
 		<input
 			type="radio"
 			id="searchResult"
@@ -9,7 +13,9 @@
 			checked
 		/>
 		<label for="searchResult">Result</label>
+	</div>
 
+	<div>
 		<input
 			type="radio"
 			id="searchIngredients"
@@ -18,7 +24,9 @@
 			name="search"
 		/>
 		<label for="searchIngredients">Ingredients</label>
+	</div>
 
+	<div>
 		<input
 			type="radio"
 			id="searchAbilities"
@@ -27,3 +35,5 @@
 			name="search"
 		/>
 		<label for="searchAbilities">Abilities</label>
+	</div>
+</div>

templates/components/bbs/type-filters.html

@@ -1,3 +1,4 @@
+<div>
 	<input
 		type="radio"
 		id="isAny"
@@ -7,7 +8,9 @@
 		checked
 	/>
 	<label for="isAny">Any</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="isAttack"
@@ -16,7 +19,9 @@
 		value="attack"
 	/>
 	<label for="isAttack">Attack</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="isMagic"
@@ -25,7 +30,9 @@
 		value="magic"
 	/>
 	<label for="isMagic">Magic</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="isAction"
@@ -34,7 +41,9 @@
 		value="action"
 	/>
 	<label for="isAction">Action</label>
+</div>
 
+<div>
 	<input
 		type="radio"
 		id="isShotlock"
@@ -43,3 +52,4 @@
 		value="shotlock"
 	/>
 	<label for="isShotlock">Shotlock</label>
+</div>

templates/pages/bbs/melding.html

@@ -11,11 +11,11 @@
 {% endblock %}
 
 {% block content %}
+	<div class="filters">
 		{% include "components/bbs/search.html" %}
-	<br />
+		<div class="row">{% include "components/bbs/type-filters.html" %}</div>
-	{% include "components/bbs/type-filters.html" %}
+		<div class="row">{% include "components/bbs/char-filters.html" %}</div>
-	<br />
+	</div>
-	{% include "components/bbs/char-filters.html" %}
 
 	<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">
+		<div class="slot">
+			<button onclick="toggleAllCodes()">Toggle All</button>
+		</div>
 		{% for code in pro_codes %}
 			<div class="slot">
-			<input type="checkbox" id="{{code.id()}}" autocomplete="off">
+				<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 %}