diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 197 |
1 files changed, 96 insertions, 101 deletions
@@ -23,9 +23,11 @@ header.your_turn { background-color: orange; } .role_supply { float: right; } #log { background-color: ghostwhite; } -#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; } +#log .h1 { background-color: dimgray; color: ghostwhite; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; } #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; } -#log .h3 { background-color: lavender; padding-top:2px; padding-bottom:2px; text-align: center; } +#log .h3 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; } +#log .axis { background-color: hsl(120, 25%, 75%) } +#log .allied { background-color: hsl(35, 45%, 80%) } #log > .i { padding-left: 20px; } #log > .ii { padding-left: 32px; } #log > div > .i { padding-left: 12px; } @@ -206,7 +208,7 @@ 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; } -td { min-width: 16px; } +td { min-width: 16px; height: 19px; } th { background-color: #222; color: oldlace; } td { background-color: oldlace; } table .required_target { background-color: #b8d9ca } @@ -279,21 +281,6 @@ td img { vertical-align: middle } /* MAP */ -svg .fortress { - fill: indianred; - stroke: saddlebrown; -} - -svg .fortress.axis { - fill: seagreen; - stroke: darkgreen; -} - -svg .side { - stroke-linecap: round; - stroke-width: 4; -} - svg .hex { stroke-width: 2; } @@ -330,27 +317,47 @@ svg .hex.tip { /* HEX CONTROL */ -svg .side.axis_control { - stroke: seagreen; +svg .fortress.allied { + fill: firebrick; + stroke: darkred; +} + +svg .fortress.axis { + fill: forestgreen; + stroke: darkgreen; +} + +svg .side { + stroke-linecap: round; stroke-dasharray: 54 100; stroke-dashoffset: -8; + stroke-width: 4; +} + +svg .side.axis_control { + stroke: darkgreen; } svg .side.allied_control { - stroke: firebrick; - stroke-dasharray: 54 100; - stroke-dashoffset: -8; + stroke: darkred; } -body.Allied svg .side.axis_control { stroke: black; } -body.Allied svg .side.allied_control { stroke: none; } -body.Axis svg .side.axis_control { stroke: none; } -body.Axis svg .side.allied_control { stroke: black; } +body.Allied svg .side.axis_control { stroke: #222 } +body.Axis svg .side.allied_control { stroke: #222 } +body.Allied svg .side.allied_control { stroke: none } +body.Axis svg .side.axis_control { stroke: none } /* SUPPLY LINES */ +svg #lines line { + pointer-events: none; + stroke: none; + stroke-width: 6px; + stroke-linecap: round; +} + svg .hex.axis_supply { - fill: seagreen; + fill: forestgreen; fill-opacity: 0.4; } @@ -360,30 +367,20 @@ svg .hex.allied_supply { } svg .hex.axis_supply.allied_supply { - fill: darkgoldenrod; + fill: blue; fill-opacity: 0.4; } -svg #lines line { - pointer-events: none; - stroke: none; - stroke-width: 6px; - stroke-linecap: round; -} - svg #lines line.axis_supply { - stroke: darkslategray; - stroke-opacity: 0.6; + stroke: darkgreen; } svg #lines line.allied_supply { stroke: darkred; - stroke-opacity: 0.6; } svg #lines line.axis_supply.allied_supply { - stroke: darkorange; - stroke-opacity: 0.6; + stroke: navy; } /* UNITS */ @@ -402,27 +399,23 @@ svg #lines line.axis_supply.allied_supply { } .unit { + background-size: 1000%; + background-repeat: no-repeat; + border-style: solid; + transition: top 200ms, left 200ms, transform 200ms; +} + +.unit { width: 51px; height: 51px; border-width: 4px; } + .unit.m { width: 42px; height: 42px; border-width: 4px; } -.unit.s { - width: 34px; - height: 34px; - border-width: 3px; -} - -.unit { - background-size: 1000%; - background-repeat: no-repeat; - border-style: solid; - transition: top 200ms, left 200ms, transform 200ms; -} .unit.revealed { background-image: url(units.svg); @@ -433,32 +426,32 @@ svg #lines line.axis_supply.allied_supply { } .unit.axis { - background-color: #9aa880; - border-color: #899572; - box-shadow: 0 0 2px 1px #2d292c80; + background-color: hsl(80, 20%, 60%); + border-color: hsl(80, 20%, 50%); + box-shadow: 0 0 2px 1px hsl(80, 20%, 20%); } -.unit.allied { - background-color: #cebc9a; - border-color: #b7a889; - box-shadow: 0 0 2px 1px #5c3a1e80; +.unit.axis.moved:not(.disrupted):not(.unsupplied) { + border-color: hsl(80, 20%, 40%); } -/* -.unit.axis { - background-color: gray; - border-color: dimgray; - box-shadow: 0 0 2px 1px #2226; +.unit.axis.moved:not(.revealed) { + background-color: hsl(80, 20%, 50%); } .unit.allied { - background-color: indianred; - border-color: brown; - background-color: #a85; - border-color: #642; - box-shadow: 0 0 2px 1px #4116; + background-color: hsl(35, 40%, 60%); + border-color: hsl(35, 40%, 50%); + box-shadow: 0 0 2px 1px hsl(30, 40%, 20%); +} + +.unit.allied.moved:not(.disrupted):not(.unsupplied) { + border-color: hsl(35, 40%, 40%); +} + +.unit.allied.moved:not(.revealed) { + background-color: hsl(35, 40%, 50%); } -*/ .unit.axis.revealed { background-color: #abba8e; @@ -472,26 +465,9 @@ svg #lines line.axis_supply.allied_supply { background-color: #e4d1ab; } -.unit.action { - box-shadow: 0 0 0 2px white; -} - -.unit.action.hit { - box-shadow: 0 0 0 2px white, 0 0 0 4px black; -} - -.unit.selected { - box-shadow: 0 0 0 2px yellow; -} - -.unit.moved { - //border-color: black; - //background-color: silver; - filter: grayscale(50%) -} - .unit.disrupted { border-color: #222; + box-shadow: 0 0 2px 1px black; } .unit.disrupted:not(.revealed) { @@ -501,7 +477,8 @@ svg #lines line.axis_supply.allied_supply { } .unit.unsupplied { - border-color: royalblue; + border-color: #c00; + box-shadow: 0 0 2px 1px darkred; } .unit.unsupplied:not(.revealed) { @@ -511,11 +488,11 @@ svg #lines line.axis_supply.allied_supply { } .unit.disrupted.unsupplied { - border-color: #222 royalblue; + border-color: #222 #c00; } .unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { - border-color: royalblue #222; + border-color: #c00 #222; } .unit.disrupted.unsupplied:not(.revealed) { @@ -524,6 +501,18 @@ svg #lines line.axis_supply.allied_supply { background-position: 0% 90%, 90% 10%; } +.unit.action { + box-shadow: 0 0 0 2px white; +} + +.unit.action.hit { + box-shadow: 0 0 0 2px white, 0 0 0 4px black; +} + +.unit.selected { + box-shadow: 0 0 0 2px yellow; +} + .unit.r0 { transform: rotate(0deg); } .unit.r1 { transform: rotate(-90deg); } .unit.r2 { transform: rotate(-180deg); } @@ -785,6 +774,7 @@ svg #lines line.axis_supply.allied_supply { <tr><td>Trail<td>+1 </table> +<!-- <table> <tr><th colspan="2">SUPPLY RANGE <tr><td>Highway<td>∞ @@ -792,6 +782,7 @@ svg #lines line.axis_supply.allied_supply { <tr><td>Trail<td>2 <tr><td>No Road<td>1 </table> +--> <table> <tr><th colspan="2">UNIT SPEED @@ -815,21 +806,14 @@ svg #lines line.axis_supply.allied_supply { <td>1 </table> +<!-- <table> <tr><th colspan="2">HEXSIDE LIMIT <tr><td>Mountain<br>Ridge<br>Marsh<td>0 <tr><td>Pass<td>1 <tr><td>Clear<td>2 </table> - -<table> -<tr><th colspan="3">TURN OPTIONS -<tr><td>◐<td>Basic<td>MC -<tr><td>◐◐<td>Offensive<td>MMC -<tr><td>◐◐<td>Assault<td>MC* -<tr><td>◐◐◐<td>Blitz<td>MC+MC -<tr><td>No Cost<td>Pass<td>W -</table> +--> <table> <tr><td class="blank" colspan="2"><th colspan="4">TARGET UNIT @@ -885,11 +869,22 @@ svg #lines line.axis_supply.allied_supply { <tr><td> <img src="icons/infantry.svg"> <td>1 +<!-- <tr><td colspan="2"><i>Elite Units cost double</i> +--> <tr><td>Minefields<td>15 <tr><td>Supply Card<td>10 </table> +<table> +<tr><th colspan="3">TURN OPTIONS +<tr><td>◐<td>Basic<td>MC +<tr><td>◐◐<td>Offensive<td>MMC +<tr><td>◐◐<td>Assault<td>MC* +<tr><td>◐◐◐<td>Blitz<td>MC+MC +<tr><td>No Cost<td>Pass<td>W +</table> + </div> </div> |