summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-10-27 18:50:05 +0200
committerTor Andersson <tor@ccxvii.net>2023-10-27 18:50:05 +0200
commiteb45705273b2ac604c8641b67fd2811b75474620 (patch)
treeeecd3c22f766e4d5a2d094256c6d19273498ff66 /play.html
parent2edbf29e4a207ea42489317def8ea93fadf9c441 (diff)
downloadvotes-for-women-eb45705273b2ac604c8641b67fd2811b75474620.tar.gz
demo pieces on map
Diffstat (limited to 'play.html')
-rw-r--r--play.html93
1 files 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); }
+
</style>
</head>
<body>
@@ -86,15 +137,39 @@ main {
<main data-min-zoom="0.75" data-max-zoom="1.5" onclick="hide_popup_menu()">
+ <div id="mapwrap">
<div id="map">
- <svg id="svgmap" width="2200px" height="1700px" viewBox="0 0 2200 1700">
+ <svg id="svgmap" width="1100px" height="850px" viewBox="0 0 2200 1700">
</svg>
- <div id="pieces">
- </div>
+ <div id="turn" class="piece turn" style="left:800px;top:765px;"></div>
+ <div class="piece congress" style="left:500px;top:765px;"></div>
+ <div class="piece red1" style="left:350px;top:100px;"></div>
+ <div class="piece red2 action" style="left:450px;top:175px;"></div>
+ <div class="piece red3" style="left:550px;top:150px;"></div>
+ <div class="piece purple1" style="left:250px;top:100px;"></div>
+ <div class="piece purple2" style="left:250px;top:200px;"></div>
+ <div class="piece yellow1" style="left:300px;top:100px;"></div>
+ <div class="piece yellow2" style="left:300px;top:200px;"></div>
+
+ <div class="piece yes" style="left:500px;top:400px;"></div>
+ <div class="piece no" style="left:350px;top:400px;"></div>
+
+ <div class="piece cube red" style="left:100px;top:150px;"></div>
+ <div class="piece cube red" style="left:120px;top:150px;"></div>
+ <div class="piece cube red" style="left:140px;top:150px;"></div>
+ <div class="piece cube red" style="left:160px;top:150px;"></div>
+ <div class="piece cube yellow" style="left:100px;top:170px;"></div>
+ <div class="piece cube yellow" style="left:120px;top:170px;"></div>
+ <div class="piece cube yellow" style="left:140px;top:170px;"></div>
+ <div class="piece cube purple" style="left:100px;top:190px;"></div>
+ <div class="piece cube purple" style="left:120px;top:190px;"></div>
+ <div class="piece cube purple" style="left:140px;top:190px;"></div>
+ <div class="piece cube purple" style="left:160px;top:190px;"></div>
</div>
+ </div>
<div id="hand" class="hand">
</div>