diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 69 |
1 files changed, 45 insertions, 24 deletions
@@ -190,8 +190,9 @@ header.your_turn { background-color: orange; } table { border-collapse: collapse; font-size: 12px; user-select: none; } td.blank { background-color: transparent; border: none } td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; } -th { background-color: #222; color: #e6d9c1; } -td { background-color: #e6d9c1; min-width: 20px; } +td { min-width: 20px; } +th { background-color: #222; color: oldlace; } +td { background-color: oldlace; } table .required_target { background-color: #b8d9ca } table .must_fire_first { background-color: #f7dc68 } table .only_unsupported { background-color: #f0b0af } @@ -232,16 +233,17 @@ td img { vertical-align: middle } display: flex; user-select: none; position: absolute; - top: 104px; + top: 24px; left: 1840px; gap: 9px; - display: none; } .month { + visibility: hidden; width: 68px; height: 68px; background-color: #fee0bf; + background-color: wheat; color: black; font-size: 40px; line-height: 68px; @@ -251,6 +253,14 @@ td img { vertical-align: middle } color: #231f20; } +.month.show { + visibility: visible; +} + +.month.now { + background-color: tan; +} + svg .side { stroke-linecap: round; stroke-width: 8px; @@ -357,6 +367,15 @@ svg .hex.tip { fill-opacity: 0.6; } +.minefield { + position: absolute; + pointer-events: none; + width: 48px; + height: 48px; + background-image: url(minefield.svg); + opacity: 0.5; +} + #map .unit { position: absolute; } @@ -656,29 +675,31 @@ svg .hex.tip { <!-- END INSERT MAP FILE --> <div id="calendar"> -<div class="month">1</div> -<div class="month">2</div> -<div class="month">3</div> -<div class="month">4</div> -<div class="month">5</div> -<div class="month">6</div> -<div class="month">7</div> -<div class="month">8</div> -<div class="month">9</div> -<div class="month">10</div> +<div class="month" id="month1">1</div> +<div class="month" id="month2">2</div> +<div class="month" id="month3">3</div> +<div class="month" id="month4">4</div> +<div class="month" id="month5">5</div> +<div class="month" id="month6">6</div> +<div class="month" id="month7">7</div> +<div class="month" id="month8">8</div> +<div class="month" id="month9">9</div> +<div class="month" id="month10">10</div> </div> <div id="calendar2"> -<div class="month">11</div> -<div class="month">12</div> -<div class="month">13</div> -<div class="month">14</div> -<div class="month">15</div> -<div class="month">16</div> -<div class="month">17</div> -<div class="month">18</div> -<div class="month">19</div> -<div class="month">20</div> +<div class="month" id="month11">11</div> +<div class="month" id="month12">12</div> +<div class="month" id="month13">13</div> +<div class="month" id="month14">14</div> +<div class="month" id="month15">15</div> +<div class="month" id="month16">16</div> +<div class="month" id="month17">17</div> +<div class="month" id="month18">18</div> +<div class="month" id="month19">19</div> +<div class="month" id="month20">20</div> </div> + +<div id="minefields"></div> <div id="units"></div> <div style="position:absolute;bottom:20px;right:24px;display:flex;gap:20px;align-items:end"> |