From e5e104228dc00c5e723651537fc832b43005bcb1 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 23 Nov 2023 13:35:01 +0100 Subject: use 3d isometric cubes --- play.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) (limited to 'play.html') 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); } -- cgit v1.2.3