Better design and structure and finalized data for komory bar and necho cat

input/ddd/abilities.json

@@ -5,12 +5,12 @@
 			{
 				"id": 0,
 				"name": "Stray",
-				"color": "#17CBD8"
+				"color": "cyan"
 			},
 			{
 				"id": 1,
 				"name": "Smart Cookie",
-				"color": "#992A9B"
+				"color": "purple"
 			}
 		],
 		"abilities": [
@@ -159,12 +159,12 @@
 			{
 				"id": 0,
 				"name": "Rescuer",
-				"color": "#3FE4D1"
+				"color": "cyan"
 			},
 			{
 				"id": 1,
 				"name": "Aggro",
-				"color": "#992A9B"
+				"color": "purple"
 			}
 		],
 		"abilities": [
@@ -180,7 +180,7 @@
 				"pos": "B3",
 				"type": "Spirit",
 				"price": "10 LP",
-				"path": ["E"]
+				"path": ["W", "E"]
 			},
 			{
 				"name": "Checkpoint",
@@ -274,7 +274,7 @@
 				"type": "Stat",
 				"price": "30 LP",
 				"route": 1,
-				"path": ["W"]
+				"path": ["W", "E"]
 			},
 			{
 				"name": "Dark Screen",
@@ -297,6 +297,13 @@
 				"type": "Checkpoint",
 				"price": "Link x2",
 				"path": ["W", "E"]
+			},
+			{
+				"name": "Confusing Strike",
+				"pos": "H3",
+				"type": "Attack",
+				"price": "100 LP",
+				"path": ["W"]
 			}
 		]
 	},
@@ -306,12 +313,12 @@
 			{
 				"id": 0,
 				"name": "Diva",
-				"color": "#3FE4D1"
+				"color": "cyan"
 			},
 			{
 				"id": 1,
 				"name": "Artist",
-				"color": "#7AE43F"
+				"color": "green"
 			}
 		],
 		"abilities": [
@@ -329,6 +336,121 @@
 				"type": "Spirit",
 				"price": "200 LP",
 				"path": ["E"]
+			},
+			{
+				"name": "HP Boost",
+				"pos": "B3",
+				"type": "Stat",
+				"price": "30 LP",
+				"path": ["E"]
+			},
+			{
+				"name": "Confusion Block",
+				"pos": "B4",
+				"type": "Stat",
+				"price": "30 LP",
+				"route": 0,
+				"path": ["W", "E"]
+			},
+			{
+				"name": "Thunder Boost",
+				"pos": "B5",
+				"type": "Stat",
+				"price": "50 LP",
+				"path": ["E", "S"]
+			},
+			{
+				"name": "Magic Haste",
+				"pos": "B6",
+				"type": "Stat",
+				"price": "50 LP",
+				"path": ["E", "N"]
+			},
+			{
+				"name": "Checkpoint",
+				"pos": "C1",
+				"type": "Checkpoint",
+				"price": "Link x3",
+				"path": ["W", "S"]
+			},
+			{
+				"name": "Magic Boost",
+				"pos": "C2",
+				"type": "Stat",
+				"price": "100 LP",
+				"path": ["E", "N", "S"]
+			},
+			{
+				"name": "Sleepra",
+				"pos": "C3",
+				"type": "Magic",
+				"price": "100 LP",
+				"path": ["W", "E", "N", "S"]
+			},
+			{
+				"name": "Magic Haste",
+				"pos": "C4",
+				"type": "Stat",
+				"price": "50 LP",
+				"path": ["W", "E", "N", "S"]
+			},
+			{
+				"name": "Thunder Boost",
+				"pos": "C5",
+				"type": "Stat",
+				"price": "30 LP",
+				"path": ["W", "E", "N", "S"]
+			},
+			{
+				"name": "Thunder",
+				"pos": "C6",
+				"type": "Magic",
+				"price": "10 LP",
+				"path": ["W", "N", "S"]
+			},
+			{
+				"name": "Start",
+				"pos": "C7",
+				"type": "Start",
+				"price": "",
+				"path": ["N"]
+			},
+			{
+				"name": "Thunder Boost",
+				"pos": "D2",
+				"type": "Stat",
+				"price": "100 LP",
+				"route": 1,
+				"path": ["W", "E"]
+			},
+			{
+				"name": "Magic Haste",
+				"pos": "D3",
+				"type": "Stat",
+				"price": "100 LP",
+				"path": ["W", "S"]
+			},
+			{
+				"name": "Time Bomb",
+				"pos": "D4",
+				"type": "Magic",
+				"price": "50 LP",
+				"path": ["W", "N"]
+			},
+			{
+				"name": "Sleep Block",
+				"pos": "D5",
+				"type": "Stat",
+				"price": "30 LP",
+				"path": ["W"]
+			},
+			{
+				"name": "Magic Haste",
+				"pos": "E2",
+				"type": "Stat",
+				"price": "150 LP",
+				"route": 1,
+				"path": ["W"]
 			}
 		]
 	}

src/ddd.rs

@@ -124,6 +124,7 @@ struct Route {
 enum AbilityType {
 	Start,
 	Checkpoint,
+	Secret,
 	Stat,
 	Spirit,
 	Support,
@@ -174,6 +175,35 @@ struct Ability {
 	path: Vec<Direction>,
 }
 
+impl Ability {
+	pub fn get_slot_details(&self, board: &Board) -> String {
+		let mut details = String::new();
+		if let Some(route) = self.route {
+			for broute in &board.routes {
+				if broute.id == route {
+					details += &format!("{} ", broute.color);
+					break;
+				}
+			}
+		}
+
+		for path in &self.path {
+			match path {
+				Direction::North => details += "north ",
+				Direction::South => details += "south ",
+				Direction::East => details += "east ",
+				Direction::West => details += "west ",
+			}
+		}
+
+		if self.r#type == AbilityType::Start {
+			details += "start ";
+		}
+
+		details
+	}
+}
+
 #[derive(Debug, Deserialize, PartialEq, Eq)]
 enum Direction {
 	#[serde(alias = "N")]

templates/pages/ddd-abilities.html

@@ -10,16 +10,123 @@
 			td {
 				width: 120px;
 				height: 100px;
-			}
+				position: relative;
+				overflow: hidden;
 
-			td.slot-w {
+				& span {
-				height: 20px;
+					position: inherit;
-			}
+					z-index: 10;
+					color: black;
+				}
 
-			td.slot-h {
+				& .slot {
-				width: 20px;
+					width: 70%;
+					height: 70%;
+					position: relative;
+					left: 15px;
+					background-color: #cbf;
+					z-index: 10;
+					align-content: center;
+					font-size: 14px;
+				}
+
+				&.slot-w {
+					height: 20px;
+				}
+
+				&.slot-h {
+					width: 20px;
+				}
+
+				&.start .slot {
+					background-color: #dcbf7e;
+				}
+
+				&.cyan {
+					background-color: #35a0a8;
+				}
+
+				&.purple {
+					background-color: #992a9b;
+				}
+
+				&.green {
+					background-color: #7ecf50;
+				}
+
+				&.north.east.south.west .path::after {
+					content: "┼";
+				}
+
+				&.east.south.west .path::after {
+					content: "┬";
+				}
+
+				&.east.north.west .path::after {
+					content: "┴";
+				}
+
+				&.north.south.west .path::after {
+					content: "┤";
+				}
+
+				&.north.south.east .path::after {
+					content: "├";
+				}
+
+				&.south.east .path::after {
+					content: "┌";
+				}
+
+				&.south.west .path::after {
+					content: "┐";
+				}
+
+				&.north.west .path::after {
+					content: "┘";
+				}
+
+				&.north.east .path::after {
+					content: "└";
+				}
+
+				&.east.west .path::after {
+					content: "─";
+				}
+
+				&.north.south .path::after {
+					content: "│";
+				}
+
+				&.west .path::after {
+					content: "╴";
+				}
+
+				&.east .path::after {
+					content: "╶";
+				}
+
+				&.south .path::after {
+					content: "╷";
+				}
+
+				&.north .path::after {
+					content: "╵";
+				}
 			}
-	}
+		}
+
+		.path {
+			position: absolute;
+			top: -70px;
+			left: 0;
+			font-size: 200px;
+			width: 100%;
+			height: 100%;
+			z-index: 0;
+			/*color: #3c3c3c;*/
+			color: #ccbbff;
+		}
 	</style>
 	<script>
 		function debounce(callback, wait = 300) {
@@ -36,10 +143,12 @@
 
 {% block content %}
 	{% for board in boards %}
+		Spirit: {{+ board.spirit +}}
+		<br />
 		Total LP Needed: {{+ board.total_lp +}}
-		<br>
+		<br />
 		Max Level Needed: {{+ board.max_level +}}
-		<br><br>
+		<br /><br />
 		Stats:
 		<ul>
 			{% for val in board.stats %}
@@ -69,7 +178,21 @@
 							{% let ability = board.get_ability_at(x, y) %}
 							{% match ability %}
 								{% when Some with (val) %}
-								<td colspan="1">{{ val.name }}</td>
+								<td
+									colspan="1"
+									class="{{ val.get_slot_details(board) }}"
+								>
+									<div class="slot">
+										<span>{{ val.name }}</span>
+										{% match val.type %}
+											{% when AbilityType::Checkpoint %}
+											<br />
+											<span>{{ val.price }}</span>
+											{% when _ %}
+										{% endmatch %}
+									</div>
+									<div class="path"></div>
+								</td>
 								{% when None %}
 								<td colspan="1"></td>
 							{% endmatch %}