summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--cards.css12
-rw-r--r--play.html244
2 files changed, 136 insertions, 120 deletions
diff --git a/cards.css b/cards.css
index 16dde96..b7506d3 100644
--- a/cards.css
+++ b/cards.css
@@ -21,6 +21,18 @@
user-select: none;
}
+.flip .card {
+ box-shadow: -1px -2px 8px #0008;
+}
+
+.flip .card, .flip .card > div {
+ transform: rotate(180deg);
+}
+
+.flip .card > div.link {
+ transform: none;
+}
+
/* FORMATION CARD */
.name {
diff --git a/play.html b/play.html
index 323d4e2..d478f12 100644
--- a/play.html
+++ b/play.html
@@ -15,10 +15,36 @@
<script defer src="play.js"></script>
<style>
+:root {
+ --red: hsl(360, 77%, 51%);
+ --pink: hsl(359, 81%, 78%);
+ --blue: hsl(211, 78%, 52%);
+ --dkblue: hsl(240, 69%, 57%);
+
+ --hi-red: hsl(360, 77%, 61%);
+ --hi-pink: hsl(359, 81%, 83%);
+ --hi-blue: hsl(211, 78%, 62%);
+ --hi-dkblue: hsl(240, 69%, 67%);
+
+ --lo-red: hsl(360, 77%, 41%);
+ --lo-pink: hsl(359, 81%, 68%);
+ --lo-blue: hsl(211, 78%, 42%);
+ --lo-dkblue: hsl(240, 69%, 47%);
+
+ --gray: hsl(0, 0%, 90%);
+ --lo-gray: hsl(0, 0%, 75%);
+ --hi-gray: hsl(0, 0%, 100%);
+}
+
#replay_panel { background-color: tan; }
#roles { background-color: bisque; }
#log { background-color: floralwhite; }
+.role.blue { background-color: #8bf }
+.role.red { background-color: #f88 }
+
+/* LOG */
+
#log .h1 {
text-align: center;
font-weight: bold;
@@ -61,8 +87,20 @@
#log .red { background-color: pink; }
#log .pink { background-color: mistyrose; }
-.role.blue { background-color: #8bf }
-.role.red { background-color: #f88 }
+.mini {
+ display: inline-block;
+ vertical-align: -3px;
+ width: 12px;
+ height: 12px;
+ border-width: 1px;
+ background-size: 600% 100%;
+ background-repeat: no-repeat;
+ background-image: url(images/die_black_pips.svg);
+ background-color: #ccc;
+ border: 1px solid black;
+}
+
+/* PANELS */
main {
background-color: #666;
@@ -71,31 +109,37 @@ main {
box-shadow: inset 0 0 8px #0008;
}
-#player1, #player2 {
- padding: 1px;
-}
-
/* TODO: set min-width per scenario */
.table { min-width: fit-content; }
-.card, .card * {
- pointer-events: none;
+/* TODO: set this if side ever has any reserves */
+.table_reserve.always { min-height: 449px; }
+
+.player_pool {
+ width: 500px;
+ background-color: #0002;
+ margin: 0 auto;
}
-.card.action, .card *.action {
- pointer-events: auto;
+#player1 .player_pool {
+ margin: 0 auto 23px auto;
+ border-radius: 0 0 24px 24px;
+ padding-bottom: 4px;
}
-.number { display: none; }
-body.shift .number { display: block; }
+#player2 .player_pool {
+ margin: 23px auto 0 auto;
+ border-radius: 24px 24px 0 0;
+ padding-top: 4px;
+}
+/*
.player_pool {
- width: 500px;
- margin: 24px auto;
- background-color: #2225;
- padding: 2px;
+ margin: 23px auto;
border-radius: 24px;
+ padding: 4px;
}
+*/
.player_name {
color: antiquewhite;
@@ -104,43 +148,57 @@ body.shift .number { display: block; }
text-align: center;
font-style: italic;
font-family: "Source Serif";
- margin: 4px;
+ //padding: 4px;
}
-.table_reserve, .table_front, .table_pool {
+.table_pool {
+ display: flex;
+ justify-content: center;
+ height: 36px;
+ gap: 12px;
+ align-items: center;
+ margin: 8px;
+}
+
+.table_reserve, .table_front {
display: flex;
justify-content: center;
gap: 24px;
- padding: 0 23px;
+ padding: 0 24px;
}
-.table_reserve, .table_front { align-items: start; }
-.flip .table_reserve, .flip .table_front { align-items: end; }
+#player1 .table_reserve, #player1 .table_front { align-items: end; }
+#player2 .table_reserve, #player2 .table_front { align-items: start; }
.table_front {
min-height: 509px;
}
.table_reserve {
- min-height: 1px;
+ background-color: #0002;
+}
+
+#player1 .table_reserve { padding: 24px 24px 0 24px; }
+#player2 .table_reserve { padding: 0 24px 24px 24px; }
+
+#player1 .table_reserve, #player1 .table_front {
+ flex-direction: row-reverse;
}
-.table_reserve .slot_dice { display: none }
+/* CARD SLOTS */
.slot_cubes {
height: 87px;
display: flex;
flex-direction: row;
justify-content: center;
- align-items: end;
flex-wrap: wrap;
gap: 8px;
margin: 12px;
}
-.flip .slot_cubes {
- align-items: start;
-}
+#player1 .slot_cubes { align-items: start; }
+#player2 .slot_cubes { align-items: end; }
/* S38 Fleurus - Retreat to Nivelles */
[data-card="237A"] .slot_cubes:empty { display: none }
@@ -150,17 +208,20 @@ body.shift .number { display: block; }
margin: 12px;
min-height: 87px;
display: flex;
- flex-direction: column;
- justify-content: end;
align-items: center;
gap: 1px;
}
-.flip .slot_sticks {
+#player1 .slot_sticks {
justify-content: start;
flex-direction: column-reverse;
}
+#player2 .slot_sticks {
+ justify-content: end;
+ flex-direction: column;
+}
+
.slot_shift {
min-height: 11px;
display: flex;
@@ -180,39 +241,43 @@ body.shift .number { display: block; }
height: 36px;
flex-direction: row;
justify-content: center;
- align-ntems: end;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
}
-.stick {
- width: 90%;
- //margin: 0 auto;
- height: 6px;
- border: 2px solid black;
- box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
+.table_reserve .slot_dice {
+ display: none;
}
-:root {
- --red: hsl(360, 77%, 51%);
- --pink: hsl(359, 81%, 78%);
- --blue: hsl(211, 78%, 52%);
- --dkblue: hsl(240, 69%, 57%);
+/* PIECES */
- --hi-red: hsl(360, 77%, 61%);
- --hi-pink: hsl(359, 81%, 83%);
- --hi-blue: hsl(211, 78%, 62%);
- --hi-dkblue: hsl(240, 69%, 67%);
+.card, .card * {
+ pointer-events: none;
+}
- --lo-red: hsl(360, 77%, 41%);
- --lo-pink: hsl(359, 81%, 68%);
- --lo-blue: hsl(211, 78%, 42%);
- --lo-dkblue: hsl(240, 69%, 47%);
+.card.action, .card *.action {
+ pointer-events: auto;
+}
- --gray: hsl(0, 0%, 90%);
- --lo-gray: hsl(0, 0%, 75%);
- --hi-gray: hsl(0, 0%, 100%);
+.card .number { display: none; }
+body.shift .card .number { display: block; }
+
+.cube {
+ width: 24px;
+ height: 24px;
+ background-color: #eee;
+ border-style: solid;
+ border-width: 2px;
+ border-color: #fff #ccc #ccc #fff;
+ box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
+}
+
+.stick {
+ width: 90%;
+ height: 6px;
+ border: 2px solid black;
+ box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
}
.red .stick { background-color: var(--red); }
@@ -227,49 +292,6 @@ body.shift .number { display: block; }
.hit.stick { background-color: var(--gray); border-color: var(--hi-gray) var(--lo-gray) var(--lo-gray) var(--hi-gray); }
-.table_pool {
- margin: 12px;
- height: 36px;
- gap: 12px;
- align-items: center;
-}
-
-.flip .table_reserve, .flip .table_front {
- flex-direction: row-reverse;
-}
-
-.card {
- box-shadow: 1px 2px 8px #0008;
-}
-
-.flip .card {
- box-shadow: -1px -2px 8px #0008;
-}
-
-.flip .card, .flip .card > div {
- transform: rotate(180deg);
-}
-
-.flip .card > div.link {
- transform: none;
-}
-
-.table_separator {
- text-align: center;
- color: orange;
- font-size: 48px;
-}
-
-.cube {
- width: 24px;
- height: 24px;
- background-color: #eee;
- border-style: solid;
- border-width: 2px;
- border-color: #fff #ccc #ccc #fff;
- box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
-}
-
.die {
width: 32px;
height: 32px;
@@ -284,19 +306,6 @@ body.shift .number { display: block; }
box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
}
-.mini {
- display: inline-block;
- vertical-align: -3px;
- width: 12px;
- height: 12px;
- border-width: 1px;
- background-size: 600% 100%;
- background-repeat: no-repeat;
- background-image: url(images/die_black_pips.svg);
- background-color: #ccc;
- border: 1px solid black;
-}
-
.d0 { background-position: -100% 0 }
.d1 { background-position: 0% 0; }
.d2 { background-position: 20% 0; }
@@ -316,6 +325,8 @@ body.shift .number { display: block; }
text-align: center;
}
+/* ACTION HIGHLIGHTS */
+
.die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; }
.card.action { box-shadow: 0 0 0 3px whitesmoke; }
.card.selected { box-shadow: 0 0 0px 3px gold; }
@@ -337,13 +348,6 @@ body.shift .number { display: block; }
background-color: #fff4;
}
-/*
-.card.blue.selected { box-shadow: 0 0 0px 3px dodgerblue; }
-.card.dkblue.selected { box-shadow: 0 0 0px 3px dodgerblue; }
-.card.pink.selected { box-shadow: 0 0 0px 3px red; }
-.card.red.selected { box-shadow: 0 0 0px 3px red; }
-*/
-
</style>
</head>
<body>
@@ -382,23 +386,23 @@ body.shift .number { display: block; }
<div class="table">
<div class="flip" id="player1">
+ <div id="reserve1" class="table_reserve"></div>
<div class="player_pool">
- <div id="name1" class="player_name"></div>
+ <div id="name1" class="player_name">&nbsp;</div>
<div id="pool1" class="table_pool"></div>
<div id="morale1" class="table_pool"></div>
</div>
- <div id="reserve1" class="table_reserve"></div>
<div id="front1" class="table_front"></div>
</div>
<div id="player2">
<div id="front2" class="table_front"></div>
- <div id="reserve2" class="table_reserve"></div>
<div class="player_pool">
<div id="morale2" class="table_pool"></div>
<div id="pool2" class="table_pool"></div>
- <div id="name2" class="player_name"></div>
+ <div id="name2" class="player_name">&nbsp;</div>
</div>
+ <div id="reserve2" class="table_reserve"></div>
</div>
<div class="table">