jcoffey-dev
fd05217f90
The board is regions again. Voronoi cells divide it with no gaps and no overlaps and look like a board, which is what this was always supposed to be. What they cannot do is reproduce every adjacency in the rules, because provinces interleave -- the Adriatic borders Venice with Trieste between their centres. The lesson I drew from that was to abandon regions and draw the adjacency graph, which is unimpeachable and is not a map. It is circles joined by lines. The right answer is to stop asking the picture to carry the rules. Clicking a province lights up exactly where its unit may legally go, taken from the graph rather than from which shapes happen to share an edge. Vienna lights Bohemia, Galicia, Budapest, Trieste and Tyrolia; a fleet on the north coast of Spain does not light the Gulf of Lyon. The picture is a picture and the rules answer for themselves when asked.
134 lines
2.9 KiB
CSS
134 lines
2.9 KiB
CSS
/* =====================================================================
|
|
Great Powers.
|
|
|
|
Cartoony: flat fills, one heavy outline on everything, no gradients
|
|
anywhere near the board. And it takes the whole window -- the other games
|
|
on this site live in a four-by-three cabinet because the machines they
|
|
rebuild did, and this one is not rebuilding a machine.
|
|
===================================================================== */
|
|
|
|
.app {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 260px;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
grid-template-areas: 'head head' 'map side';
|
|
gap: 10px 18px;
|
|
padding: clamp(10px, 2vw, 22px);
|
|
}
|
|
|
|
header { grid-area: head; }
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(1.4rem, 3.2vw, 2.2rem);
|
|
font-weight: 900;
|
|
letter-spacing: -0.02em;
|
|
color: #ffd479;
|
|
-webkit-text-stroke: 3px #241a10;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
header p { margin: 2px 0 0; font-size: 0.9rem; }
|
|
|
|
.dim { color: #a3b3c9; }
|
|
|
|
.map-wrap {
|
|
grid-area: map;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.board {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 3px solid #241a10;
|
|
border-radius: 16px;
|
|
background: #6ea3c9;
|
|
}
|
|
|
|
.ocean { fill: #4a7fa8; }
|
|
|
|
.region {
|
|
stroke: #241a10;
|
|
stroke-width: 2.5;
|
|
stroke-linejoin: round;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Open water gets a lighter line: a coastline is a border, the middle of the
|
|
Atlantic is a convention. */
|
|
.region.sea { stroke-opacity: 0.3; stroke-width: 2; }
|
|
|
|
.region.picked { stroke: #ffd479; stroke-width: 5; }
|
|
|
|
/* Where the selected unit may actually go, taken from the rules rather than
|
|
from which shapes happen to touch. */
|
|
.region.open { stroke: #fff6e0; stroke-width: 4; stroke-dasharray: 7 5; }
|
|
|
|
.pip {
|
|
fill: #fff6e0;
|
|
stroke: #241a10;
|
|
stroke-width: 1.8;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
fill: #241a10;
|
|
}
|
|
|
|
.label.wet { fill: #dceaf5; }
|
|
|
|
.unit path {
|
|
stroke: #241a10;
|
|
stroke-width: 2.5;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* --- the side ------------------------------------------------------- */
|
|
|
|
.side {
|
|
grid-area: side;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.powers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
|
|
|
|
.powers li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-weight: 700;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.swatch {
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 2px solid #241a10;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.count { margin-left: auto; font-variant-numeric: tabular-nums; color: #a3b3c9; }
|
|
|
|
.picked h2 { margin: 0 0 2px; font-size: 1rem; }
|
|
.picked p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
|
|
|
|
@media (max-width: 780px) {
|
|
.app {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: 'head' 'map' 'side';
|
|
}
|
|
}
|