summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-06-05 02:16:37 +0200
committerTor Andersson <tor@ccxvii.net>2023-07-16 13:06:00 +0200
commitfa3fc7fd0184fc8500cbe21cee7440433d1d1c4c (patch)
tree073404683cb482a9797a09e87480293550f60907 /play.html
parent64b8441e2650f8e527c6834ced4aeb2bde7de77b (diff)
downloadfield-cloth-gold-fa3fc7fd0184fc8500cbe21cee7440433d1d1c4c.tar.gz
Start rules.
Diffstat (limited to 'play.html')
-rw-r--r--play.html45
1 files changed, 32 insertions, 13 deletions
diff --git a/play.html b/play.html
index dcdefed..bc33c84 100644
--- a/play.html
+++ b/play.html
@@ -18,15 +18,22 @@ main { background-color: dimgray }
#role_Blue .role_name { background-color: skyblue; }
#mapwrap {
- width: 1100px;
- height: 850px;
+ width: 1104px;
+ height: 854px;
box-shadow: 0px 1px 10px #0008;
+ margin: 12px auto;
}
#map {
width: 1100px;
height: 850px;
- background-image: url(map100.png);
+ background-size: 1100px 850px;
+ background-image: url(map100.jpg);
+ border: 2px solid #333;
+}
+
+@media (min-resolution: 97dpi) {
+ #map { background-image: url(map200.jpg) }
}
#map div {
@@ -72,10 +79,18 @@ main { background-color: dimgray }
.panel {
max-width: 1100px;
- margin: 36px auto;
+ margin: 24px auto;
background-color: #555;
+ border: 2px solid #333;
+ box-shadow: 0 1px 10px #0008;
}
+#red_court_header { background-color: #644 }
+#red_court { background-color: #655 }
+
+#blue_court_header { background-color: #446 }
+#blue_court { background-color: #556 }
+
.panel_header {
background-color: #444;
color: white;
@@ -89,8 +104,9 @@ main { background-color: dimgray }
display: flex;
justify-content: start;
flex-wrap: wrap;
- padding: 20px;
- gap: 20px;
+ padding: 16px;
+ gap: 16px;
+ min-height: 80px;
}
</style>
@@ -150,16 +166,19 @@ main { background-color: dimgray }
<div id="hand_panel" class="panel">
<div id="hand_header" class="panel_header">Hand</div>
<div id="hand" class="panel_body">
-
-<div class="tile red" style="left:198px;top:300px"></div>
-<div class="tile blue" style="left:338px;top:300px"></div>
-<div class="tile green" style="left:478px;top:300px"></div>
-<div class="tile white" style="left:618px;top:300px"></div>
-<div class="tile gold" style="left:758px;top:300px"></div>
-
</div>
</div>
+<div id="red_court_panel" class="panel">
+<div id="red_court_header" class="panel_header">Red Court</div>
+<div id="red_court" class="panel_body">
+</div></div>
+
+<div id="blue_court_panel" class="panel">
+<div id="blue_court_header" class="panel_header">Blue Court</div>
+<div id="blue_court" class="panel_body">
+</div></div>
+
</main>
<footer id="status"></footer>