summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pieces/iso_purple_cube.svg6
-rw-r--r--pieces/iso_red_cube.svg6
-rw-r--r--pieces/iso_yellow_cube.svg6
-rw-r--r--play.html25
-rw-r--r--tools/genpieces.mjs80
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"))