summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
Diffstat (limited to 'play.html')
-rw-r--r--play.html222
1 files changed, 133 insertions, 89 deletions
diff --git a/play.html b/play.html
index 73cbf54..5d914aa 100644
--- a/play.html
+++ b/play.html
@@ -24,47 +24,17 @@ main {
box-shadow: inset 0 0 8px #0008;
}
-body.Observer #hand {
- display: none;
-}
+#role_Red .role_name { background-color: hsl(359,100%,75%); }
+#role_Blue .role_name { background-color: hsl(220,100%,80%); }
+body.Observer #hand { display: none }
.role_hand_size { float: right }
-.court, #hand, #darkness {
- font-family: "Albert Text";
- padding: 6px 10px;
- text-align: right;
- font-size: 20px;
- color: #0004;
-}
-
-#darkness {
- position: absolute;
- right: -2px;
- bottom: -2px;
- color: #444;
- text-shadow: 0 0 4px white;
-}
-
-#log { background-color: whitesmoke; }
-#log .h1 {
- margin: 6px 0;
- padding: 2px 8px;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
- background-color: hsl(0,0%,85%);
+.action {
+ cursor: pointer;
}
-#log .h1.x { background-color: hsl(0,0%,85%); }
-#log .h1.gold { background-color: hsl(50,81%,79%); }
-#log .h1.blue { background-color: hsl(201,80%,67%); }
-#log .h1.white { background-color: hsl(0,0%,100%); }
-#log .h1.red { background-color: hsl(0,90%,69%); }
-#log .h1.purple { background-color: hsl(296,29%,65%); }
-#log .h1.r{background-image:linear-gradient(90deg,transparent 180px,#000 180px,#000 181px, hsl(359,85%,60%) 181px); }
-#log .h1.b{background-image:linear-gradient(90deg,transparent 180px,#000 180px,#000 181px, hsl(220,85%,60%) 181px); }
-#role_Red .role_name { background-color: hsl(359,100%,75%); }
-#role_Blue .role_name { background-color: hsl(220,100%,80%); }
+/* BOARD */
#mapwrap {
width: 825px;
@@ -76,6 +46,14 @@ body.Observer #hand {
height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px + 12px);
}
+#hand, .court { height: 80px; }
+
+#court1 { top: 12px }
+#board { top: calc(12px + 80px + 12px) }
+#court2 { top: calc(12px + 80px + 12px + 638px + 12px) }
+#hand { top: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px) }
+#mapwrap { height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px) }
+
#board, #hand, .court {
box-sizing: border-box;
position: absolute;
@@ -85,9 +63,6 @@ body.Observer #hand {
box-shadow: 0 0 0 1px #222, 1px 1px 8px #0008;
}
-#hand, .court {
- height: 80px;
-}
#board {
height: 638px;
@@ -95,33 +70,71 @@ body.Observer #hand {
background-position: center;
background-image: url(map75.jpg);
border-color: #fff8 #2228 #2228 #fff8;
+ background-image: url(map75.jpg)
}
@media (min-resolution: 97dpi) {
#board { background-image: url(map150.jpg) }
}
-#court1 { top: 12px }
-#board { top: calc(12px + 80px + 12px) }
-#court2 { top: calc(12px + 80px + 12px + 638px + 12px) }
-#hand { top: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px) }
-#mapwrap { height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px) }
-
-#hand, .court { background-color: hsl(0,0%,55%) }
+#hand { background-color: hsl(0,0%,50%) }
.red.court { background-color: hsl(359,35%,55%) }
.blue.court { background-color: hsl(220,35%,55%) }
-#map div {
+.court, #hand, #darkness_label {
+ font-family: "Albert Text";
+ padding: 6px 10px;
+ text-align: right;
+ font-size: 20px;
+ color: #0006;
+}
+
+#darkness_label {
+ position: absolute;
+ right: -2px;
+ bottom: -2px;
+ color: #444;
+ text-shadow: 0px -1px 10px white;
+}
+
+#darkness_button {
+ position: absolute;
+ width: 56px;
+ height: 56px;
+ left: 10px;
+ bottom: 10px;
+}
+
+#darkness_button.action {
+ background-color: #0002;
+ box-shadow: inset 0 0 16px 4px black, 0 0 0px 2px white, 0 0 8px 2px white;
+}
+
+.space {
position: absolute;
+ box-sizing: border-box;
+ border: 3px solid transparent;
+}
+
+.space.oval {
+ border-radius: 50%;
+}
+
+.space.action {
+ border: 3px solid white;
+ box-shadow: 0 0 4px white;
+}
+
+/* PIECES */
+
+.token, .tile {
+ position: absolute;
+ box-sizing: border-box;
transition-property: top, left;
transition-duration: 500ms;
transition-timing-function: ease;
}
-.action {
- cursor: pointer;
-}
-
.token {
width: 41px;
height: 44px;
@@ -145,8 +158,11 @@ body.Observer #hand {
drop-shadow(0px -2px 0px yellow)
}
+.token.white { background-image: url(images/token_white.svg) }
+.token.red { background-image: url(images/token_red.svg) }
+.token.blue { background-image: url(images/token_blue.svg) }
+
.tile {
- box-sizing: border-box;
width: 56px;
height: 56px;
background-repeat: no-repeat;
@@ -165,24 +181,6 @@ body.Observer #hand {
box-shadow: 0 0 0 1px #222, 0 0 0 4px yellow;
}
-.space {
- box-sizing: border-box;
- border: 3px solid transparent;
-}
-
-.space.oval {
- border-radius: 50%;
-}
-
-.space.action {
- border: 3px solid white;
- box-shadow: 0 0 4px white;
-}
-
-.token.white { background-image: url(images/token_white.svg) }
-.token.red { background-image: url(images/token_red.svg) }
-.token.blue { background-image: url(images/token_blue.svg) }
-
.tile.gold { background-image: url(images/gold.png); background-color: hsl(50,81%,59%); }
.tile.blue { background-image: url(images/blue.png); background-color: hsl(201,80%,47%); }
.tile.white { background-image: url(images/white.png); background-color: hsl(0,0%,94%); }
@@ -194,22 +192,67 @@ body.Observer #hand {
.tile.white { border-color: #ddd #bbb #bbb #ddd }
.tile.green { border-color: #fff3 #0003 #0003 #fff3 }
+/* LOG */
+
+#log { background-color: whitesmoke; }
+
+#log .h1 {
+ margin: 6px 0;
+ padding: 2px 8px;
+ border-top: 1px solid black;
+ border-bottom: 1px solid black;
+ background-color: hsl(0,0%,85%);
+}
+
+#log .h1.x { background-color: hsl(0,0%,85%); }
+#log .h1.r { background-color: hsl(359,85%,85%); }
+#log .h1.b { background-color: hsl(220,85%,85%); }
+
+#log .t, #log .c, #log .o {
+ display: inline-block;
+ vertical-align: -2px;
+ width: 11px;
+ height: 11px;
+ border: 1px solid #222;
+}
+
+#log .c { border-radius: 50%; }
+#log .o { border-radius: 0 0 50% 50%; }
+
+#log .c.white { background-color: hsl(0,0%,94%) }
+#log .c.red { background-color: hsl(359,85%,50%) }
+#log .c.blue { background-color: hsl(220,85%,55%) }
+
+#log .t.gold { background-color: hsl(50,81%,59%); }
+#log .t.blue { background-color: hsl(201,80%,47%); }
+#log .t.white { background-color: hsl(0,0%,94%); }
+#log .t.red { background-color: hsl(0,90%,49%); }
+#log .t.green { background-color: hsl(125,21%,43%); }
+#log .t.black { background-color: hsl(0,0%,35%); }
+
+#log .o.secrecy { background-color: hsl(0,0%,35%); }
+#log .o.gold { background-color: hsl(50,81%,59%); }
+#log .o.blue { background-color: hsl(201,80%,47%); }
+#log .o.white { background-color: hsl(0,0%,94%); }
+#log .o.red { background-color: hsl(0,90%,49%); }
+#log .o.purple { background-color: hsl(296,29%,45%); }
+
</style>
</head>
<body>
<header>
<div id="toolbar">
- <div class="menu">
- <div class="menu_title"><img src="/images/cog.svg"></div>
- <div class="menu_popup">
- <a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
- <div class="resign menu_separator"></div>
- <div class="resign menu_item" onclick="confirm_resign()">Resign</div>
+ <div class="menu">
+ <div class="menu_title"><img src="/images/cog.svg"></div>
+ <div class="menu_popup">
+ <a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
+ <div class="resign menu_separator"></div>
+ <div class="resign menu_item" onclick="confirm_resign()">Resign</div>
+ </div>
</div>
- </div>
- <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
- <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
+ <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
+ <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
</div>
<div id="prompt"></div>
<div id="actions"></div>
@@ -236,16 +279,17 @@ body.Observer #hand {
</aside>
<main>
-
-<div id="mapwrap" class="fit">
-<div id="map">
-<div id="court1" class="court">Rival Court</div>
-<div id="board"><div id="darkness"></div></div>
-<div id="court2" class="court">Court</div>
-<div id="hand">Hand</div>
-</div>
-</div>
-
+ <div id="mapwrap" class="fit">
+ <div id="map">
+ <div id="court1" class="red court">Rival Court</div>
+ <div id="board">
+ <div id="darkness_button"></div>
+ <div id="darkness_label"></div>
+ </div>
+ <div id="court2" class="blue court">Court</div>
+ <div id="hand">Hand</div>
+ </div>
+ </div>
</main>
<footer id="status"></footer>