Visual pathing for bbs finishers

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "khguide"
-version = "1.4.0"
+version = "1.4.1"
 edition = "2024"
 
 [dependencies]

input/bbs/finishers.toml

@@ -11,7 +11,8 @@ name = "Heat Slash 1"
 char = ["A", "V", "T"]
 level = 2
 row = 1
-next = ["finish"]
+path = [false, false, true]
+previous = ["finish"]
 goal = "Activate the Firestorm Command Style 8 times"
 color = "#d00000"
 
@@ -20,7 +21,8 @@ name = "Heat Slash 2"
 char = ["A"]
 level = 3
 row = 1
-next = ["heat-slash-1"]
+path = [false, true, false]
+previous = ["heat-slash-1"]
 goal = "Activate the Firestorm Command Style 12 times"
 color = "#d00000"
 
@@ -29,7 +31,8 @@ name = "Rising Rock 1"
 char = ["T"]
 level = 2
 row = 3
-next = ["finish"]
+path = [false, true, false]
+previous = ["finish"]
 goal = "Earn 2000 CP"
 color = "#683000"
 
@@ -38,7 +41,8 @@ name = "Rising Rock 2"
 char = ["T"]
 level = 3
 row = 3
-next = ["rising-rock-1"]
+path = [false, true, false]
+previous = ["rising-rock-1"]
 goal = "Earn 4200 CP"
 color = "#683000"
 
@@ -47,7 +51,8 @@ name = "Dark Star 1"
 char = ["T"]
 level = 4
 row = 2
-next = ["rising-rock-2"]
+path = [false, false, true]
+previous = ["rising-rock-2"]
 goal = "Defeat 420 enemies"
 color = "#683000"
 
@@ -56,7 +61,8 @@ name = "Dark Star 2"
 char = ["T"]
 level = 5
 row = 1
-next = ["dark-star-1"]
+path = [false, false, true]
+previous = ["dark-star-1"]
 goal = "Defeat 550 enemies"
 color = "#683000"
 
@@ -65,7 +71,8 @@ name = "Air Flair 1"
 char = ["V"]
 level = 2
 row = 3
-next = ["finish"]
+path = [false, true, false]
+previous = ["finish"]
 goal = "Earn 2000 CP"
 color = "#0088f8"
 
@@ -74,7 +81,8 @@ name = "Air Flair 2"
 char = ["V"]
 level = 3
 row = 3
-next = ["air-flair-1"]
+path = [false, true, false]
+previous = ["air-flair-1"]
 goal = "Earn 4000 CP"
 color = "#0088f8"
 
@@ -83,7 +91,8 @@ name = "Air Flair 3"
 char = ["V"]
 level = 4
 row = 2
-next = ["air-flair-2"]
+path = [false, false, true]
+previous = ["air-flair-2"]
 goal = "Take 4500 steps"
 color = "#0088f8"
 
@@ -92,7 +101,8 @@ name = "Air Flair 4"
 char = ["V"]
 level = 5
 row = 1
-next = ["air-flair-3"]
+path = [false, false, true]
+previous = ["air-flair-3"]
 goal = "Take 7000 steps"
 color = "#0088f8"
 
@@ -101,7 +111,8 @@ name = "Magic Pulse 1"
 char = ["A"]
 level = 2
 row = 3
-next = ["finish"]
+path = [false, true, false]
+previous = ["finish"]
 goal = "Earn 2000 CP"
 color = "#7000d0"
 
@@ -110,7 +121,8 @@ name = "Magic Pulse 2"
 char = ["A"]
 level = 3
 row = 3
-next = ["magic-pulse-1"]
+path = [false, true, false]
+previous = ["magic-pulse-1"]
 goal = "Earn 3800 CP"
 color = "#7000d0"
 
@@ -119,7 +131,8 @@ name = "Magic Pulse 3"
 char = ["A"]
 level = 4
 row = 2
-next = ["magic-pulse-2"]
+path = [false, false, true]
+previous = ["magic-pulse-2"]
 goal = "Defeat 350 enemies"
 color = "#7000d0"
 
@@ -128,7 +141,8 @@ name = "Magic Pulse 4"
 char = ["A"]
 level = 5
 row = 1
-next = ["magic-pulse-3"]
+path = [false, false, true]
+previous = ["magic-pulse-3"]
 goal = "Defeat 500 enemies"
 color = "#7000d0"
 
@@ -137,7 +151,8 @@ name = "Gold Rush"
 char = ["A", "V", "T"]
 level = 2
 row = 5
-next = ["finish"]
+path = [true, false, false]
+previous = ["finish"]
 goal = "Collect 1000 munny"
 color = "#e8d800"
 
@@ -146,7 +161,8 @@ name = "Ramuh's Judgement"
 char = ["A", "V", "T"]
 level = 3
 row = 2
-next = ["air-flair-1", "magic-pulse-1", "rising-rock-1"]
+path = [false, false, true]
+previous = ["air-flair-1", "magic-pulse-1", "rising-rock-1"]
 goal = "Activate the Thunderbolt Command Style 12 times"
 color = "green"
 
@@ -155,7 +171,8 @@ name = "Twisted Hours"
 char = ["A", "V", "T"]
 level = 3
 row = 4
-next = ["air-flair-1", "magic-pulse-1", "rising-rock-1", "gold-rush"]
+path = [true, false, true]
+previous = ["air-flair-1", "magic-pulse-1", "rising-rock-1", "gold-rush"]
 goal = "Take 7000 steps"
 color = "gray"
 
@@ -164,7 +181,8 @@ name = "Surprise! 1"
 char = ["A", "V", "T"]
 level = 3
 row = 5
-next = ["gold-rush"]
+path = [false, true, false]
+previous = ["gold-rush"]
 goal = "Collect 1400 munny"
 color = "#e8d800"
 
@@ -172,8 +190,9 @@ color = "#e8d800"
 name = "Surprise! 2"
 char = ["A", "V", "T"]
 level = 4
-row = 4
+row = 5
-next = ["twisted-hours", "surprise-1"]
+path = [true, true, false]
+previous = ["twisted-hours", "surprise-1"]
 goal = "Collect 5200 munny"
 color = "#e8d800"
 
@@ -182,7 +201,8 @@ name = "Heal Strike"
 char = ["A", "V", "T"]
 level = 4
 row = 3
-next = ["rising-rock-2", "air-flair-2", "magic-pulse-2"]
+path = [false, true, false]
+previous = ["rising-rock-2", "air-flair-2", "magic-pulse-2"]
 goal = "Use the effect of Second Chance or Once More to survive lethal damage 5 times"
 color = "green"
 
@@ -191,7 +211,8 @@ name = "Random End"
 char = ["T"]
 level = 4
 row = 4
-next = ["twisted-hours"]
+path = [false, true, false]
+previous = ["twisted-hours"]
 goal = "Take 8000 steps"
 color = "gray"
 
@@ -200,7 +221,8 @@ name = "Explosion"
 char = ["A", "V", "T"]
 level = 5
 row = 2
-next = ["dark-star-1", "air-flair-3", "magic-pulse-3"]
+path = [false, true, false]
+previous = ["dark-star-1", "air-flair-3", "magic-pulse-3"]
 goal = "Earn 6400 CP"
 color = "orange"
 
@@ -208,8 +230,9 @@ color = "orange"
 name = "Celebration"
 char = ["V"]
 level = 5
-row = 4
+row = 5
-next = ["surprise-2"]
+path = [false, true, false]
+previous = ["surprise-2"]
 goal = "Collect 7000 munny"
 color = "#e8d800"
 
@@ -218,7 +241,8 @@ name = "Ice Burst"
 char = ["A"]
 level = 5
 row = 3
-next = ["magic-pulse-3"]
+path = [true, false, false]
+previous = ["magic-pulse-3"]
 goal = "Activate the Diamond Dust Command Style 15 times"
 color = "#50b8e8"
 
@@ -227,7 +251,8 @@ name = "Demolition"
 char = ["T"]
 level = 6
 row = 1
-next = ["dark-star-2"]
+path = [false, true, false]
+previous = ["dark-star-2"]
 goal = "Earn 10000 CP"
 color = "#183050"
 
@@ -236,7 +261,8 @@ name = "Stratosphere"
 char = ["V"]
 level = 6
 row = 1
-next = ["air-flair-4"]
+path = [false, true, false]
+previous = ["air-flair-4"]
 goal = "Defeat 800 enemies"
 color = "#e8e8d0"
 
@@ -245,6 +271,7 @@ name = "Teleport Spike"
 char = ["A"]
 level = 6
 row = 1
-next = ["magic-pulse-4"]
+path = [false, true, false]
+previous = ["magic-pulse-4"]
 goal = "Defeat 800 enemies"
 color = "#b830a0"

public/scripts/bbs/finishers.js

@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 		'input[type="radio"][name="charFilter"]',
 	);
 
-	let detailsField = document.getElementById("finisherDetails");
+	const detailsField = document.getElementById("finisher-details");
 
 	charFilters[0].checked = true;
 	charFilters.forEach(function (item, _) {

public/styles/bbs/finishers.css

@@ -9,6 +9,7 @@ table {
 
 	& td,
 	& td:first-child {
+		position: relative;
 		border: 0px;
 		height: 33px;
 		text-shadow: 2px 2px #000;
@@ -23,9 +24,57 @@ table {
 	}
 }
 
-#finisherDetails {
+.path {
+	position: absolute;
+	top: -38px;
+	left: -50%;
+	font-size: 100px;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	pointer-events: none;
+	clip-path: circle(22% at 155px 60px);
+
+	&::after {
+		content: "─";
+	}
+
+	&.top {
+		/* top: -56px; */
+		z-index: 1;
+		&::after {
+			content: "└";
+		}
+	}
+
+	&.bottom {
+		/* top: -20px; */
+		z-index: 1;
+		&::after {
+			content: "┌";
+		}
+	}
+}
+
+#finisher-details {
 	text-align: center;
 	font-size: 18px;
 	margin-top: 16px;
 	text-shadow: 2px 2px #000;
 }
+
+@media (max-width: 768px) {
+	table {
+		width: 200%;
+	}
+
+	#finisher-details {
+		width: 200%;
+	}
+
+	.path {
+		top: 5px;
+		font-size: 30px;
+		clip-path: none;
+	}
+}

src/bbs/finisher.rs

@@ -2,15 +2,33 @@ use serde::Deserialize;
 
 use super::Character;
 
+type Path = (bool, bool, bool);
+
 #[derive(Debug, Deserialize)]
 pub struct Finisher {
 	pub name: String,
 	pub char: Vec<Character>,
 	pub level: u8,
 	#[serde(default)]
-	pub next: Vec<String>,
+	pub previous: Vec<String>,
+	#[serde(default)]
+	pub path: Path,
 	#[serde(default)]
 	pub row: u8,
 	pub goal: String,
 	pub color: String,
 }
+
+impl Finisher {
+	pub fn has_top_path(&self) -> bool {
+		self.path.0
+	}
+
+	pub fn has_mid_path(&self) -> bool {
+		self.path.1
+	}
+
+	pub fn has_bottom_path(&self) -> bool {
+		self.path.2
+	}
+}

templates/pages/bbs/finishers.html

@@ -28,7 +28,21 @@
 					{% for lvl in 1..=6u8 %}
 						{% match get_at(char, *lvl, *row) %}
 							{% when Some with (val) %}
-							<td class="finisher" style="color: {{val.color}};" data-goal="{{ val.goal }}">{{ val.name }}</td>
+							<td class="finisher" style="color: {{val.color}};" data-goal="{{ val.goal }}">
+								{{ val.name }}
+
+								{% if val.has_top_path() %}
+								<div class="path top"></div>
+								{% endif %}
+
+								{% if val.has_mid_path() %}
+								<div class="path"></div>
+								{% endif %}
+
+								{% if val.has_bottom_path() %}
+								<div class="path bottom"></div>
+								{% endif %}
+							</td>
 							{% when None %}
 							<td></td>
 						{% endmatch %}
@@ -39,6 +53,6 @@
 	{% endfor %}
 </table>
 
-<div id="finisherDetails">---</div>
+<div id="finisher-details">---</div>
 
 {% endblock %}