feat: improve pieces page

Author: kacperwyczawski

pieces.css

@@ -0,0 +1,30 @@
+body {
+  padding: 1rem;
+}
+
+h1:target {
+  text-decoration: underline;
+}
+
+h1 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+
+  &:target {
+    text-decoration: underline;
+  }
+}
+
+ul {
+  margin-top: 0;
+  padding: 0;
+  margin-left: 48px;
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+
+  & li {
+    cursor: pointer;
+  }
+}

pieces.html

@@ -7,7 +7,7 @@
   <title>Industrial Chess</title>
   <script type="module" src="/src/pieces.ts"></script>
   <link rel="stylesheet" href="style.css" />
-  <!-- TODO: style this better -->
+  <link rel="stylesheet" href="pieces.css" />
   <link rel="icon" href="bishop-knight-white.png">
 </head>
 

src/pieces.ts

@@ -8,30 +8,36 @@ for (const piece of getAllPieces("white")) {
 
 	const h1 = document.createElement("h1");
 	h1.id = piece.name;
-	let content: string;
+	const span = document.createElement("span")
+	const img = document.createElement("img")
+	img.src = `${piece.name}-white.png`
+	img.alt = piece.name
 	if (piece.name === "bishop-rook") {
-		content = "Bishop + Rook (Queen)";
+		span.textContent = "Bishop + Rook (Queen)";
 	} else if (piece.name === "amazon") {
-		content = "Amazon (Bishop + Knight + Rook)";
+		span.textContent = "Amazon (Bishop + Knight + Rook)";
 	} else {
-		content = piece.name
+		span.textContent = piece.name
 			.split("-")
 			.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
 			.join(" + ");
 	}
-	h1.textContent = content;
+	h1.appendChild(img)
+	h1.appendChild(span)
 	body.appendChild(h1);
 
 	const ul = document.createElement("ul");
+	ul.textContent = "requires:"
 	for (const requirement of piece.requirements) {
 		const li = document.createElement("li");
 		const a = document.createElement("a");
 		a.href = `#${requirement.name}`;
-		a.textContent = requirement.name;
+		const img = document.createElement("img");
+		img.src = `${requirement.name}-white.png`
+		img.alt = requirement.name
+		a.appendChild(img)
 		li.appendChild(a);
 		ul.appendChild(li);
 	}
 	body.appendChild(ul);
 }
-
-// TODO: images

vite.config.js

@@ -10,4 +10,9 @@ export default defineConfig({
 			},
 		},
 	},
+	server: {
+		watch: {
+			usePolling: true
+		}
+	}
 });