<!DOCTYPE html>
<!-- vim:set nowrap: -->
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta charset="UTF-8">
<title>FIELD OF THE CLOTH OF GOLD</title>
<link rel="icon" href="favicon.svg">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/common/play.css">
<script defer src="/common/play.js"></script>
<script defer src="play.js"></script>
<style>
@font-face{
font-family: "Albert Text";
src: url('fonts/AlbertText-Bold.woff2') format('woff2');
}
main {
user-select: none;
background-color: #666;
background-image: url(background.png);
box-shadow: inset 0 0 8px #0008;
}
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;
//text-shadow: 0 0 2px #fff8;
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%);
}
#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%); }
#mapwrap {
width: 825px;
margin: 0px auto;
}
#map {
width: 825px;
height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px + 12px);
}
#board, #hand, .court {
box-sizing: border-box;
position: absolute;
width: 825px;
border: 2px solid #0004;
border-color: #fff3 #0004 #0004 #fff3;
box-shadow: 0 0 0 1px #222, 1px 1px 8px -2px #000;
}
#hand, .court {
height: 80px;
}
#board {
height: 638px;
background-size: 825px 638px;
background-position: center;
background-image: url(map75.jpg);
border-color: #fff8 #2228 #2228 #fff8;
}
@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: #666 }
.red.court { background-color: hsl(359,35%,45%) }
.blue.court { background-color: hsl(220,35%,45%) }
#map div {
position: absolute;
transition-property: top, left;
transition-duration: 500ms;
transition-timing-function: ease;
}
.action {
cursor: pointer;
}
.token {
width: 41px;
height: 44px;
background-size: 41px 44px;
filter: drop-shadow(0px 2px 4px #0008);
}
.token.action {
filter:
drop-shadow(0px 2px 0px white)
drop-shadow(2px 0px 0px white)
drop-shadow(-2px 0px 0px white)
drop-shadow(0px -2px 0px white)
}
.token.selected {
filter:
drop-shadow(0px 2px 0px yellow)
drop-shadow(2px 0px 0px yellow)
drop-shadow(-2px 0px 0px yellow)
drop-shadow(0px -2px 0px yellow)
}
.tile {
box-sizing: border-box;
width: 56px;
height: 56px;
background-repeat: no-repeat;
background-size: 38px 38px;
background-position: center;
border-width: 2px;
border-style: solid;
box-shadow: 0 0 0 1px #222, 1px 2px 4px #0008;
}
.tile.action {
box-shadow: 0 0 0 1px #222, 0 0 0 4px white;
}
.tile.selected {
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%); }
.tile.red { background-image: url(images/red.png); background-color: hsl(0,90%,49%); }
.tile.green { background-image: url(images/green.png); background-color: hsl(125,21%,33%); }
.tile { border-color: #fff5 #0003 #0003 #fff5; }
.tile.gold { border-color: #fff6 #0003 #0003 #fff6 }
.tile.white { border-color: #ddd #bbb #bbb #ddd }
.tile.green { border-color: #fff3 #0003 #0003 #fff3 }
</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>
</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>
</header>
<aside>
<div id="roles">
<div class="role" id="role_Red">
<div class="role_name">
Red
<div class="role_hand_size" id="red_hand_size"></div>
<div class="role_user"></div>
</div>
</div>
<div class="role" id="role_Blue">
<div class="role_name">
Blue
<div class="role_hand_size" id="blue_hand_size"></div>
<div class="role_user"></div>
</div>
</div>
</div>
<div id="log"></div>
</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>
</main>
<footer id="status"></footer>
</body>