Popup info system for board ability unlock requirements

input/ddd/abilities/fin-fatale.toml

@@ -154,6 +154,7 @@ type = "Checkpoint"
 price = "Level 20"
 route = 100
 path = ["N", "S"]
+tip = "Unlocks with Secret panel at B5"
 
 [[abilities]]
 name = "Zero Gravira"
@@ -162,6 +163,7 @@ type = "Magic"
 price = "100 LP"
 route = 100
 path = ["N", "S"]
+tip = "Unlocks with Secret panel at B5"
 
 [[abilities]]
 name = "Checkpoint"
@@ -170,6 +172,7 @@ type = "Checkpoint"
 price = "Level 25"
 route = 100
 path = ["N", "E"]
+tip = "Unlocks with Secret panel at B5"
 
 [[abilities]]
 name = "Sleep Block"
@@ -206,6 +209,7 @@ type = "Magic"
 price = "150 LP"
 route = 100
 path = ["W"]
+tip = "Unlocks with Secret panel at B5"
 
 [[abilities]]
 name = "Support Boost"

input/ddd/abilities/pricklemane.toml

@@ -96,6 +96,7 @@ type = "Stat"
 price = "50 LP"
 route = 100
 path = ["E"]
+tip = "Unlocks with Secret panel at B7"
 
 [[abilities]]
 name = "Start"
@@ -146,6 +147,7 @@ type = "Stat"
 price = "30 LP"
 route = 100
 path = ["N", "S"]
+tip = "Unlocks with Secret panel at B7"
 
 [[abilities]]
 name = "Circle Raid"
@@ -154,6 +156,7 @@ type = "Attack"
 price = "100 LP"
 route = 100
 path = ["N"]
+tip = "Unlocks with Secret panel at B7"
 
 [[abilities]]
 name = "Stop Block"
@@ -191,6 +194,7 @@ type = "Stat"
 price = "50 LP"
 route = 100
 path = ["W"]
+tip = "Unlocks with Secret panel at B7"
 
 [[abilities]]
 name = "Attack Haste"

input/ddd/abilities/tama-sheep.toml

@@ -145,6 +145,7 @@ type = "Magic"
 price = "50 LP"
 route = 100
 path = ["N", "E"]
+tip = "Unlocks with Secret panel at D2"
 
 [[abilities]]
 name = "Checkpoint"
@@ -160,6 +161,7 @@ type = "Stat"
 price = "30 LP"
 route = 100
 path = ["S", "E"]
+tip = "Unlocks with Secret panel at D2"
 
 [[abilities]]
 name = "HP Boost"
@@ -168,6 +170,7 @@ type = "Stat"
 price = "30 LP"
 route = 100
 path = ["W", "N"]
+tip = "Unlocks with Secret panel at D2"
 
 [[abilities]]
 name = "Sleepra"
@@ -183,6 +186,7 @@ type = "Stat"
 price = "50 LP"
 route = 100
 path = ["E", "W", "S"]
+tip = "Unlocks with Secret panel at D2"
 
 [[abilities]]
 name = "Water Screen"
@@ -206,6 +210,7 @@ type = "Stat"
 price = "100 LP"
 route = 100
 path = ["W"]
+tip = "Unlocks with Secret panel at D2"
 
 [[abilities]]
 name = "Support Boost"

input/ddd/abilities/thunderaffe.toml

@@ -146,6 +146,7 @@ type = "Magic"
 price = "150 LP"
 route = 100
 path = ["W", "E", "N"]
+tip = "Unlocks with Secret panel at E1"
 
 [[abilities]]
 name = "Thunder Boost"

src/ddd.rs

@@ -21,6 +21,26 @@ struct Board {
 }
 
 impl Board {
+	pub fn init_ability_help(&mut self) {
+		for abl in &mut self.abilities {
+			if abl.tip.is_none() && abl.route.is_some() {
+				let route_id = abl.route.unwrap();
+
+				let mut route = None;
+				for r in &self.routes {
+					if r.id == route_id {
+						route = Some(r);
+						break;
+					}
+				}
+
+				if route_id < 10 && route.is_some() {
+					abl.tip = Some(format!("Unlocks with disposition {}", route.unwrap().name));
+				}
+			}
+		}
+	}
+
 	pub fn init_routes(&mut self) {
 		self.routes.iter_mut().for_each(|r| {
 			r.interaction = match r.color {
@@ -261,9 +281,14 @@ struct Ability {
 	price: String,
 	route: Option<u32>,
 	path: Vec<Direction>,
+	tip: Option<String>,
 }
 
 impl Ability {
+	pub fn tip(&self) -> String {
+		self.tip.clone().unwrap_or_default()
+	}
+
 	pub fn get_slot_details(&self, board: &Board) -> String {
 		let mut details = String::new();
 		if let Some(route) = self.route {
@@ -343,6 +368,7 @@ pub fn init() {
 			false => None,
 		})
 		.collect::<Vec<PathBuf>>();
+
 	for path in paths {
 		let board_str = std::fs::read_to_string(path).unwrap();
 		let mut board = toml::from_str::<Board>(&board_str).unwrap();
@@ -351,6 +377,7 @@ pub fn init() {
 		board.init_total_lp();
 		board.init_max_level();
 		board.init_stats();
+		board.init_ability_help();
 
 		// dbg!(&board);
 		boards.push(board);

templates/components/ddd/board-row.html

@@ -5,7 +5,10 @@
 		{% match ability %}
 			{% when Some with (val) %}
 			<td colspan="1" class="{{ val.get_slot_details(board) }}">
-				<div class="slot">
+				<div
+					class="slot tooltip-wrapper"
+					{% if val.tip.is_some() %}style="cursor: help"{% endif %}
+				>
 					<span>{{ val.name }}</span>
 					{% match val.type %}
 						{% when AbilityType::Checkpoint %}
@@ -13,6 +16,10 @@
 						<span>{{ val.price }}</span>
 						{% when _ %}
 					{% endmatch %}
+
+					{% if val.tip.is_some() %}
+						<div class="tooltip">{{ val.tip() }}</div>
+					{% endif %}
 				</div>
 
 				<div class="path"></div>

templates/pages/ddd-abilities.html

@@ -74,7 +74,6 @@
 				width: 120px;
 				height: 100px;
 				position: relative;
-				overflow: hidden;
 
 				& span {
 					position: inherit;
@@ -94,6 +93,30 @@
 					box-shadow: 1px 1px 5px black;
 				}
 
+				.tooltip-wrapper {
+					.tooltip {
+						visibility: hidden;
+						background-color: #555;
+						max-width: 250px;
+						min-width: 150px;
+						color: #fff;
+						text-align: center;
+						border-radius: 6px;
+						padding: 8px;
+						position: absolute;
+						z-index: 1;
+						bottom: 125%;
+						left: -50%;
+						opacity: 0;
+						transition: opacity 0.3s;
+					}
+
+					&:hover .tooltip {
+						visibility: visible;
+						opacity: 1;
+					}
+				}
+
 				&.slot-w {
 					height: 20px;
 				}