From eb45705273b2ac604c8641b67fd2811b75474620 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 27 Oct 2023 18:50:05 +0200 Subject: demo pieces on map --- play.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 84 insertions(+), 9 deletions(-) diff --git a/play.html b/play.html index 4721946..42e0482 100644 --- a/play.html +++ b/play.html @@ -18,26 +18,77 @@ main { } #mapwrap { - width: 2200px; - height: 1700px; + width: 1100px; + height: 850px; box-shadow: 0 1px 8px #0008; } #map { - width: 2200px; - height: 1700px; + width: 1100px; + height: 850px; background-color: #f0e7d0; background-image: url(map.webp); + background-size: 1100px 850px; } #map-texture { position: absolute; - width: 2200px; - height: 1700px; + width: 1100px; + height: 850px; background-image: url(map-texture.jpg); + background-size: 1100px 850px; mix-blend-mode: multiply; } +svg { + position: absolute; +} + +.piece { + position: absolute; + background-repeat: no-repeat; + background-size: contain; + filter: drop-shadow(0px 1px 2px #0004); +} + +.piece.action { + filter: + drop-shadow(2px 0px 0px white) + drop-shadow(0px 2px 0px white) + drop-shadow(-2px 0px 0px white) + drop-shadow(0px -2px 0px white); +} + +.piece.cube { + width: 14px; + height: 14px; + border: 1px solid black; +} + +.piece.turn { + width: 30px; + height: 30px; + border-radius: 50%; + border: 1px solid black; + background-color: #666; +} + +.piece.purple.cube { background-color: #6d5798; } +.piece.yellow.cube { background-color: #fec36d; } +.piece.red.cube { background-color: #e06136; } + +.piece.congress { width: 32px; height: 32px; background-image: url(pieces/cog.svg); } +.piece.no { width: 42px; height: 32px; background-image: url(pieces/no.svg); } +.piece.yes { width: 42px; height: 32px; background-image: url(pieces/yes.svg); } +.piece.turn3d { width: 33px; height: 36px; background-image: url(pieces/turn.svg); } +.piece.purple1 { width: 36px; height: 50px; background-image: url(pieces/purple1.svg); } +.piece.purple2 { width: 36px; height: 50px; background-image: url(pieces/purple2.svg); } +.piece.yellow1 { width: 36px; height: 50px; background-image: url(pieces/yellow1.svg); } +.piece.yellow2 { width: 36px; height: 50px; background-image: url(pieces/yellow2.svg); } +.piece.red1 { width: 36px; height: 50px; background-image: url(pieces/red1.svg); } +.piece.red2 { width: 36px; height: 50px; background-image: url(pieces/red2.svg); } +.piece.red3 { width: 36px; height: 50px; background-image: url(pieces/red3.svg); } + @@ -86,15 +137,39 @@ main {

+ +

-- cgit v1.2.3