use 3d isometric cubes

1 files changed, 16 insertions, 9 deletions

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); }