use 3d isometric cubes

5 files changed, 114 insertions, 9 deletions

diff --git a/pieces/iso_purple_cube.svg b/pieces/iso_purple_cube.svg
new file mode 100644
index 0000000..9a049e6
--- /dev/null
+++ b/pieces/iso_purple_cube.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25">
+<path fill="#6d5798" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5"/>
+<path fill="#432d6a" d="M20.5,7.5,20.5,18.5,10.5,24.5,10.5,13.5"/>
+<path fill="#5f4988" d="M10.5,13.5,10.5,24.5,0.5,18.5,0.5,7.5"/>
+<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#1e023e" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5z M20.5,7.5,20.5,18.5,10.5,24.5,0.5,18.5,0.5,7.5 M10.5,13.5,10.5,24.5"/>
+</svg>
diff --git a/pieces/iso_red_cube.svg b/pieces/iso_red_cube.svg
new file mode 100644
index 0000000..dc3fdd9
--- /dev/null
+++ b/pieces/iso_red_cube.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25">
+<path fill="#e06136" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5"/>
+<path fill="#9d1f00" d="M20.5,7.5,20.5,18.5,10.5,24.5,10.5,13.5"/>
+<path fill="#c94c1f" d="M10.5,13.5,10.5,24.5,0.5,18.5,0.5,7.5"/>
+<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#5c0000" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5z M20.5,7.5,20.5,18.5,10.5,24.5,0.5,18.5,0.5,7.5 M10.5,13.5,10.5,24.5"/>
+</svg>
diff --git a/pieces/iso_yellow_cube.svg b/pieces/iso_yellow_cube.svg
new file mode 100644
index 0000000..146acaa
--- /dev/null
+++ b/pieces/iso_yellow_cube.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25">
+<path fill="#fec36d" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5"/>
+<path fill="#aa7309" d="M20.5,7.5,20.5,18.5,10.5,24.5,10.5,13.5"/>
+<path fill="#e1a851" d="M10.5,13.5,10.5,24.5,0.5,18.5,0.5,7.5"/>
+<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#5b2900" d="M10.5,0.5,20.5,7.5,10.5,13.5,0.5,7.5z M20.5,7.5,20.5,18.5,10.5,24.5,0.5,18.5,0.5,7.5 M10.5,13.5,10.5,24.5"/>
+</svg>
diff --git a/play.html b/play.html
index 4bdb659..3b98ad5 100644
--- a/play.html
+++ b/play.html
@@ -223,6 +223,7 @@ div.congress_box.action {
 }
 
 .piece {
+	pointer-events: none;
 	position: absolute;
 	background-repeat: no-repeat;
 	background-size: contain;
@@ -230,6 +231,7 @@ div.congress_box.action {
 }
 
 .piece.action {
+	pointer-events: auto;
 	filter:
 		drop-shadow(2px 0px 0px white)
 		drop-shadow(0px 2px 0px white)
@@ -245,11 +247,20 @@ div.congress_box.action {
 		drop-shadow(0px -2px 0px yellow);
 }
 
-.piece.cube {
-	width: 14px;
-	height: 14px;
-	border: 1px solid black;
-}
+
+/* 2D CUBES */
+.piece.cube { width: 21px; height: 25px; }
+.piece.red.cube { background-image: url(pieces/iso_red_cube.svg); }
+.piece.yellow.cube { background-image: url(pieces/iso_yellow_cube.svg); }
+.piece.purple.cube { background-image: url(pieces/iso_purple_cube.svg); }
+
+/* 2D CUBES */
+/*
+.piece.cube { width: 14px; height: 14px; border: 1px solid black; }
+.piece.purple.cube { background-color: #6d5798; }
+.piece.yellow.cube { background-color: #fec36d; }
+.piece.red.cube { background-color: #e06136; }
+*/
 
 .piece.turn {
 	width: 30px;
@@ -259,10 +270,6 @@ div.congress_box.action {
 	background-color: #666;
 }
 
-.piece.purple.cube { background-color: #6d5798; }
-.piece.yellow.cube { background-color: #fec36d; }
-.piece.red.cube { background-color: #e06136; }
-
 .piece.yes { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/yes.svg); }
 .piece.yellow2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow2.svg); }
 .piece.yellow1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow1.svg); }
diff --git a/tools/genpieces.mjs b/tools/genpieces.mjs
new file mode 100644
index 0000000..fd8c3d3
--- /dev/null
+++ b/tools/genpieces.mjs
@@ -0,0 +1,80 @@
+import fs from "fs"
+import { formatHex, parseHex, convertRgbToOklab } from "culori"
+
+function make_piece_colors(base) {
+	let rgb = parseHex(base)
+        let sh1 = convertRgbToOklab(rgb); sh1.l *= 0.9;
+        let sh2 = convertRgbToOklab(rgb); sh2.l *= 0.8;
+        let sh3 = convertRgbToOklab(rgb); sh3.l *= 0.7;
+        let sh4 = convertRgbToOklab(rgb); sh4.l *= 0.4;
+	return [ base, formatHex(sh1), formatHex(sh2), formatHex(sh3), formatHex(sh4) ]
+}
+
+function print_cube(output, c) {
+	let svg = []
+
+	let xo = 0
+	let yo = 0
+	let ys = 2/3
+
+	let w = 14
+	let d = Math.sqrt(w * w + w * w)
+	let h = Math.round(w * 0.8)
+
+	let v = [
+		[ xo + (d/2), yo + (0) * ys ],
+		[ xo + (d), yo + (d/2) * ys ],
+		[ xo + (d/2), yo + (d) * ys ],
+		[ xo + (0), yo + (d/2) * ys ],
+	]
+
+	for (let xy of v) {
+		xy[0] = Math.round(xy[0]) + 0.5
+		xy[1] = Math.round(xy[1]) + 0.5
+	}
+
+	let iw = Math.max(...v.map(xy => xy[0])) + 0.5
+	let ih = Math.max(...v.map(xy => xy[1])) + h + 0.5
+
+	let v2 = [
+		[ v[1][0], v[1][1] ],
+		[ v[1][0], v[1][1] + h ],
+		[ v[2][0], v[2][1] + h ],
+		[ v[3][0], v[3][1] + h ],
+		[ v[3][0], v[3][1] ],
+	]
+
+	let v3 = [
+		[ v[2][0], v[2][1] ],
+		[ v[2][0], v[2][1] + h ],
+	]
+
+	let f1 = [
+		[ v[1][0], v[1][1] ],
+		[ v[1][0], v[1][1] + h ],
+		[ v[2][0], v[2][1] + h ],
+		[ v[2][0], v[2][1] ],
+	]
+
+	let f2 = [
+		[ v[2][0], v[2][1] ],
+		[ v[2][0], v[2][1] + h ],
+		[ v[3][0], v[3][1] + h ],
+		[ v[3][0], v[3][1] ],
+	]
+
+	svg.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${iw}" height="${ih}">`)
+
+	svg.push(`<path fill="${c[0]}" d="M${v}"/>`)
+	svg.push(`<path fill="${c[3]}" d="M${f1}"/>`)
+	svg.push(`<path fill="${c[1]}" d="M${f2}"/>`)
+
+	svg.push(`<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="${c[4]}" d="M${v}z M${v2} M${v3}"/>`)
+
+	svg.push(`</svg>`)
+	fs.writeFileSync(output, svg.join("\n") + "\n")
+}
+
+print_cube("pieces/iso_red_cube.svg", make_piece_colors("#e06136"))
+print_cube("pieces/iso_yellow_cube.svg", make_piece_colors("#fec36d"))
+print_cube("pieces/iso_purple_cube.svg", make_piece_colors("#6d5798"))