diff options
| -rw-r--r-- | play.css | 626 | ||||
| -rw-r--r-- | play.html | 633 |
2 files changed, 628 insertions, 631 deletions
diff --git a/play.css b/play.css new file mode 100644 index 0000000..793278a --- /dev/null +++ b/play.css @@ -0,0 +1,626 @@ +main { background-color: dimgray; } +#roles { background-color: silver; } +header { background-color: silver; } +header.your_turn { background-color: orange; } +#role_Axis .role_name { background-color: darkseagreen; } +#role_Allied .role_name { background-color: tan; } +.role_supply { float: right; } + +#log { background-color: ghostwhite; } +#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: gainsboro; text-align: center; } +#log .h4 { text-decoration: underline; font-style: italic; } +#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; } +#log .hex:hover { cursor: pointer; text-decoration: underline; } + +.action { + cursor: pointer; +} + +#log { + font-variant-numeric: tabular-nums; +} + +/* CARDS */ + +.hand { + margin: 24px; + display: flex; + flex-wrap: wrap; + justify-content: center; + min-height: 170px; + max-width: 2672px; + gap: 20px; +} + +.card { + background-size: cover; + background-repeat: no-repeat; + background-color: ivory; + width: 124px; + height: 170px; + border-radius: 8px; + box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + transition: 100ms; +} + +.card.real { + background-image: url(card_real.svg); +} + +.card.dummy { + background-image: url(card_dummy.svg); +} + +.card.action:hover { + transform: scale(1.1); +} + + +/* BATTLE DIALOG */ + +#battle { background-color: #d6c4a9; background: url(texture_clear.png); } +#battle_header { background-color: brown; color: gold } +#battle_hits { background-color: #c4ab8b; } +#battle_buttons { background-color: #c4ab8b; } +#battle_message { background-color: #d6c4a9; } + +#battle { + position: fixed; + min-width: 524px; /* 6 blocks wide */ + left: 12px; + top: 56px; + z-index: 100; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); + border: 1px solid black; + user-select: none; +} + +#battle_header { + cursor: move; + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + font-weight: bold; + border-bottom: 1px solid black; +} + +#battle_message { + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + border-top: 1px solid black; +} + +#battle_hits { + padding: 4px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 6px; + border-bottom: 1px solid black; +} + +#battle_hits .hits_text { + width: 24px; +} + +#battle_hits .hits_icon { + display: block; + vertical-align: middle +} + +.battle_line { + margin: 24px; + min-height: 60px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +#battle_buttons { + padding: 12px; + min-height: 28px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; + border-top: 1px solid black; +} + +/* PURSUIT FIRE DIALOG */ + +#pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); } +#pursuit_header { background-color: brown; color: gold } +#pursuit_hits { background-color: #c4ab8b; } +#pursuit_buttons { background-color: #c4ab8b; } +#pursuit_message { background-color: #d6c4a9; } + +#pursuit { + position: fixed; + min-width: 524px; /* 6 blocks wide */ + left: 12px; + top: 56px; + z-index: 100; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); + border: 1px solid black; + user-select: none; +} + +#pursuit_header { + cursor: move; + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + font-weight: bold; + border-bottom: 1px solid black; +} + +#pursuit_hits { + padding: 4px; + text-align: center; + border-bottom: 1px solid black; +} + +#pursuit_message { + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + border-top: 1px solid black; +} + +#pursuit_buttons { + padding: 12px; + min-height: 28px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; + border-top: 1px solid black; +} + +/* TABLES */ + +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; height: 19px; } +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 } +td span { padding: 0 4px } +td img { vertical-align: middle } + +/* MAP */ + +#mapwrap { + width: 2672px; + height: 960px; + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); +} + +#map { + background-repeat: no-repeat; + width: 2672px; + height: 960px; + overflow: clip; +} + +#mapsvg { + display: block; + position: absolute; + user-select: none; +} + +#calendar, #calendar2 { + user-select: none; + position: absolute; + display: flex; + top: 24px; + left: 1956px; + gap: 20px; +} + +.month { + visibility: hidden; + width: 46px; + height: 46px; + background-color: #fee0bf; + background-color: wheat; + font-size: 28px; + line-height: 46px; + font-weight: bold; + text-align: center; + border: 2px solid #222; + color: #222; +} + +.month.show { + visibility: visible; +} + +.month.now { + background-color: tan; + box-shadow: 0 0 0 4px #fff4; +} + +/* MAP */ + +svg .hex { + stroke-width: 2; +} + +svg .hex.exit { + fill: black; + fill-opacity: 0.125; +} + +svg .hex.refit.action { + stroke: lightskyblue; +} + +svg .hex.action { + stroke: ivory; + stroke-dasharray: 2 2; + stroke-dashoffset: 1; +} + +svg .hex.action.forced_march { + stroke: crimson; +} + +svg .hex.selected { + stroke: yellow; + stroke-dasharray: none; +} + +svg .hex.tip { + stroke: yellow; + stroke-width: 3; + stroke-dasharray: 4 4; +} + +/* HEX CONTROL */ + +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: darkred; +} + +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: forestgreen; + fill-opacity: 0.4; +} + +svg .hex.allied_supply { + fill: firebrick; + fill-opacity: 0.4; +} + +svg .hex.axis_supply.allied_supply { + fill: blue; + fill-opacity: 0.4; +} + +svg #lines line.axis_supply { + stroke: darkgreen; +} + +svg #lines line.allied_supply { + stroke: darkred; +} + +svg #lines line.axis_supply.allied_supply { + stroke: navy; +} + +/* UNITS */ + +.minefield { + position: absolute; + pointer-events: none; + width: 48px; + height: 48px; + background-image: url(minefield.svg); + opacity: 0.5; +} + +#map .unit { + position: absolute; +} + +.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.revealed { + background-image: url(units.svg); +} + +#mapwrap.fit .unit.revealed { + background-image: url(units-simple.svg); +} + +.unit.axis { + background-color: hsl(80, 20%, 60%); + border-color: hsl(80, 20%, 50%); + box-shadow: 0 0 2px 1px hsl(80, 20%, 20%); +} + +.unit.axis.eliminated, +.unit.axis.fired, +.unit.axis.moved:not(.disrupted):not(.unsupplied) { + border-color: hsl(80, 20%, 40%); +} + +.unit.axis.eliminated:not(.revealed), +.unit.axis.fired:not(.revealed), +.unit.axis.moved:not(.revealed) { + background-color: hsl(80, 20%, 50%); +} + +.unit.allied { + background-color: hsl(35, 40%, 60%); + border-color: hsl(35, 40%, 50%); + box-shadow: 0 0 2px 1px hsl(30, 40%, 20%); +} + +.unit.allied.eliminated, +.unit.allied.fired, +.unit.allied.moved:not(.disrupted):not(.unsupplied) { + border-color: hsl(35, 40%, 40%); +} + +.unit.allied.eliminated:not(.revealed), +.unit.allied.fired:not(.revealed), +.unit.allied.moved:not(.revealed) { + background-color: hsl(35, 40%, 50%); +} + +.unit.moved:not(.revealed) { + background-image: url(moved.svg); + background-size: 75%; + background-position: center bottom; +} + +.unit.eliminated:not(.revealed) { + background-image: url(eliminated.svg); + background-size: 60%; + background-position: center; +} + +.unit.axis.revealed { + background-color: #abba8e; +} + +.unit.axis.italian.revealed { + background-color: #f9e3b3; +} + +.unit.allied.revealed { + background-color: #e4d1ab; +} + +.unit.disrupted { + border-color: #222; + box-shadow: 0 0 2px 1px black; +} + +.unit.disrupted:not(.revealed) { + background-image: url(disrupted.svg); + background-size: 75%; + background-position: center; +} + +.unit.unsupplied { + border-color: #c00; + box-shadow: 0 0 2px 1px darkred; +} + +.unit.unsupplied:not(.revealed) { + background-image: url(unsupplied.svg); + background-size: 75%; + background-position: center; +} + +.unit.disrupted.unsupplied { + border-color: #222 #c00; +} + +.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { + border-color: #c00 #222; +} + +.unit.disrupted.unsupplied:not(.revealed) { + background-image: url(unsupplied.svg), url(disrupted.svg); + background-size: 50%, 50%; + 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); } +.unit.r3 { transform: rotate(-270deg); } + +.unit.r0.hit1 { transform: rotate(-15deg); } +.unit.r1.hit1 { transform: rotate(-105deg); } +.unit.r2.hit1 { transform: rotate(-195deg); } +.unit.r3.hit1 { transform: rotate(-285deg); } + +.unit.r0.hit2 { transform: rotate(-30deg); } +.unit.r1.hit2 { transform: rotate(-120deg); } +.unit.r2.hit2 { transform: rotate(-210deg); } +.unit.r3.hit2 { transform: rotate(-300deg); } + +.unit.r0.hit3 { transform: rotate(-45deg); } +.unit.r1.hit3 { transform: rotate(-135deg); } +.unit.r2.hit3 { transform: rotate(-225deg); } +.unit.r3.hit3 { transform: rotate(-315deg); } + +.unit.u0{background-position:0% 0%} +.unit.u1{background-position:11.11111111111111% 0%} +.unit.u2{background-position:22.22222222222222% 0%} +.unit.u3{background-position:33.33333333333333% 0%} +.unit.u4{background-position:44.44444444444444% 0%} +.unit.u5{background-position:55.55555555555556% 0%} +.unit.u6{background-position:66.66666666666666% 0%} +.unit.u7{background-position:77.77777777777777% 0%} +.unit.u8{background-position:88.88888888888889% 0%} +.unit.u9{background-position:100% 0%} +.unit.u10{background-position:0% 11.11111111111111%} +.unit.u11{background-position:11.11111111111111% 11.11111111111111%} +.unit.u12{background-position:22.22222222222222% 11.11111111111111%} +.unit.u13{background-position:33.33333333333333% 11.11111111111111%} +.unit.u14{background-position:44.44444444444444% 11.11111111111111%} +.unit.u15{background-position:55.55555555555556% 11.11111111111111%} +.unit.u16{background-position:66.66666666666666% 11.11111111111111%} +.unit.u17{background-position:77.77777777777777% 11.11111111111111%} +.unit.u18{background-position:88.88888888888889% 11.11111111111111%} +.unit.u19{background-position:100% 11.11111111111111%} +.unit.u20{background-position:0% 22.22222222222222%} +.unit.u21{background-position:11.11111111111111% 22.22222222222222%} +.unit.u22{background-position:22.22222222222222% 22.22222222222222%} +.unit.u23{background-position:33.33333333333333% 22.22222222222222%} +.unit.u24{background-position:44.44444444444444% 22.22222222222222%} +.unit.u25{background-position:55.55555555555556% 22.22222222222222%} +.unit.u26{background-position:66.66666666666666% 22.22222222222222%} +.unit.u27{background-position:77.77777777777777% 22.22222222222222%} +.unit.u28{background-position:88.88888888888889% 22.22222222222222%} +.unit.u29{background-position:100% 22.22222222222222%} +.unit.u30{background-position:0% 33.33333333333333%} +.unit.u31{background-position:11.11111111111111% 33.33333333333333%} +.unit.u32{background-position:22.22222222222222% 33.33333333333333%} +.unit.u33{background-position:33.33333333333333% 33.33333333333333%} +.unit.u34{background-position:44.44444444444444% 33.33333333333333%} +.unit.u35{background-position:55.55555555555556% 33.33333333333333%} +.unit.u36{background-position:66.66666666666666% 33.33333333333333%} +.unit.u37{background-position:77.77777777777777% 33.33333333333333%} +.unit.u38{background-position:88.88888888888889% 33.33333333333333%} +.unit.u39{background-position:100% 33.33333333333333%} +.unit.u40{background-position:0% 44.44444444444444%} +.unit.u41{background-position:11.11111111111111% 44.44444444444444%} +.unit.u42{background-position:22.22222222222222% 44.44444444444444%} +.unit.u43{background-position:33.33333333333333% 44.44444444444444%} +.unit.u44{background-position:44.44444444444444% 44.44444444444444%} +.unit.u45{background-position:55.55555555555556% 44.44444444444444%} +.unit.u46{background-position:66.66666666666666% 44.44444444444444%} +.unit.u47{background-position:77.77777777777777% 44.44444444444444%} +.unit.u48{background-position:88.88888888888889% 44.44444444444444%} +.unit.u49{background-position:100% 44.44444444444444%} +.unit.u50{background-position:0% 55.55555555555556%} +.unit.u51{background-position:11.11111111111111% 55.55555555555556%} +.unit.u52{background-position:22.22222222222222% 55.55555555555556%} +.unit.u53{background-position:33.33333333333333% 55.55555555555556%} +.unit.u54{background-position:44.44444444444444% 55.55555555555556%} +.unit.u55{background-position:55.55555555555556% 55.55555555555556%} +.unit.u56{background-position:66.66666666666666% 55.55555555555556%} +.unit.u57{background-position:77.77777777777777% 55.55555555555556%} +.unit.u58{background-position:88.88888888888889% 55.55555555555556%} +.unit.u59{background-position:100% 55.55555555555556%} +.unit.u60{background-position:0% 66.66666666666666%} +.unit.u61{background-position:11.11111111111111% 66.66666666666666%} +.unit.u62{background-position:22.22222222222222% 66.66666666666666%} +.unit.u63{background-position:33.33333333333333% 66.66666666666666%} +.unit.u64{background-position:44.44444444444444% 66.66666666666666%} +.unit.u65{background-position:55.55555555555556% 66.66666666666666%} +.unit.u66{background-position:66.66666666666666% 66.66666666666666%} +.unit.u67{background-position:77.77777777777777% 66.66666666666666%} +.unit.u68{background-position:88.88888888888889% 66.66666666666666%} +.unit.u69{background-position:100% 66.66666666666666%} +.unit.u70{background-position:0% 77.77777777777777%} +.unit.u71{background-position:11.11111111111111% 77.77777777777777%} +.unit.u72{background-position:22.22222222222222% 77.77777777777777%} +.unit.u73{background-position:33.33333333333333% 77.77777777777777%} +.unit.u74{background-position:44.44444444444444% 77.77777777777777%} +.unit.u75{background-position:55.55555555555556% 77.77777777777777%} +.unit.u76{background-position:66.66666666666666% 77.77777777777777%} +.unit.u77{background-position:77.77777777777777% 77.77777777777777%} +.unit.u78{background-position:88.88888888888889% 77.77777777777777%} +.unit.u79{background-position:100% 77.77777777777777%} +.unit.u80{background-position:0% 88.88888888888889%} +.unit.u81{background-position:11.11111111111111% 88.88888888888889%} +.unit.u82{background-position:22.22222222222222% 88.88888888888889%} +.unit.u83{background-position:33.33333333333333% 88.88888888888889%} +.unit.u84{background-position:44.44444444444444% 88.88888888888889%} +.unit.u85{background-position:55.55555555555556% 88.88888888888889%} +.unit.u86{background-position:66.66666666666666% 88.88888888888889%} +.unit.u87{background-position:77.77777777777777% 88.88888888888889%} +.unit.u88{background-position:88.88888888888889% 88.88888888888889%} +.unit.u89{background-position:100% 88.88888888888889%} +.unit.u90{background-position:0% 100%} +.unit.u91{background-position:11.11111111111111% 100%} +.unit.u92{background-position:22.22222222222222% 100%} +.unit.u93{background-position:33.33333333333333% 100%} @@ -1,6 +1,6 @@ <!DOCTYPE html> <!-- vim:set nowrap: --> -<html> +<html lang="en"> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> <meta charset="utf-8"> @@ -8,639 +8,10 @@ <link rel="icon" href="favicon.png"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/play.css"> +<link rel="stylesheet" href="play.css"> <script defer src="/common/play.js"></script> <script defer src="data.js"></script> <script defer src="play.js"></script> -<style> - -main { background-color: dimgray; } -#roles { background-color: silver; } -header { background-color: silver; } -header.your_turn { background-color: orange; } -#role_Axis .role_name { background-color: darkseagreen; } -#role_Allied .role_name { background-color: tan; } -.role_supply { float: right; } - -#log { background-color: ghostwhite; } -#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: gainsboro; text-align: center; } -#log .h4 { text-decoration: underline; font-style: italic; } -#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; } -#log .hex:hover { cursor: pointer; text-decoration: underline; } - -.action { - cursor: pointer; -} - -#log { - font-variant-numeric: tabular-nums; -} - -/* CARDS */ - -.hand { - margin: 24px; - display: flex; - flex-wrap: wrap; - justify-content: center; - min-height: 170px; - max-width: 2672px; - gap: 20px; -} - -.card { - background-size: cover; - background-repeat: no-repeat; - background-color: ivory; - width: 124px; - height: 170px; - border-radius: 8px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); - transition: 100ms; -} - -.card.real { - background-image: url(card_real.svg); -} - -.card.dummy { - background-image: url(card_dummy.svg); -} - -.card.action:hover { - transform: scale(1.1); -} - - -/* BATTLE DIALOG */ - -#battle { background-color: #d6c4a9; background: url(texture_clear.png); } -#battle_header { background-color: brown; color: gold } -#battle_hits { background-color: #c4ab8b; } -#battle_buttons { background-color: #c4ab8b; } -#battle_message { background-color: #d6c4a9; } - -#battle { - position: fixed; - min-width: 524px; /* 6 blocks wide */ - left: 12px; - top: 56px; - z-index: 100; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - border: 1px solid black; - user-select: none; -} - -#battle_header { - cursor: move; - padding: 2px 8px; - line-height: 24px; - min-height: 24px; - text-align: center; - font-weight: bold; - border-bottom: 1px solid black; -} - -#battle_message { - padding: 2px 8px; - line-height: 24px; - min-height: 24px; - text-align: center; - border-top: 1px solid black; -} - -#battle_hits { - padding: 4px; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 6px; - border-bottom: 1px solid black; -} - -#battle_hits .hits_text { - width: 24px; -} - -#battle_hits .hits_icon { - display: block; - vertical-align: middle -} - -.battle_line { - margin: 24px; - min-height: 60px; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 16px; -} - -#battle_buttons { - padding: 12px; - min-height: 28px; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 12px; - border-top: 1px solid black; -} - -/* PURSUIT FIRE DIALOG */ - -#pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); } -#pursuit_header { background-color: brown; color: gold } -#pursuit_hits { background-color: #c4ab8b; } -#pursuit_buttons { background-color: #c4ab8b; } -#pursuit_message { background-color: #d6c4a9; } - -#pursuit { - position: fixed; - min-width: 524px; /* 6 blocks wide */ - left: 12px; - top: 56px; - z-index: 100; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - border: 1px solid black; - user-select: none; -} - -#pursuit_header { - cursor: move; - padding: 2px 8px; - line-height: 24px; - min-height: 24px; - text-align: center; - font-weight: bold; - border-bottom: 1px solid black; -} - -#pursuit_hits { - padding: 4px; - text-align: center; - border-bottom: 1px solid black; -} - -#pursuit_message { - padding: 2px 8px; - line-height: 24px; - min-height: 24px; - text-align: center; - border-top: 1px solid black; -} - -#pursuit_buttons { - padding: 12px; - min-height: 28px; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 12px; - border-top: 1px solid black; -} - -/* TABLES */ - -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; height: 19px; } -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 } -td span { padding: 0 4px } -td img { vertical-align: middle } - -/* MAP */ - -#mapwrap { - width: 2672px; - height: 960px; - box-shadow: 0px 1px 10px rgba(0,0,0,0.5); -} - -#map { - background-repeat: no-repeat; - width: 2672px; - height: 960px; - overflow: clip; -} - -#mapsvg { - display: block; - position: absolute; - user-select: none; -} - -#calendar, #calendar2 { - user-select: none; - position: absolute; - display: flex; - top: 24px; - left: 1956px; - gap: 20px; -} - -.month { - visibility: hidden; - width: 46px; - height: 46px; - background-color: #fee0bf; - background-color: wheat; - font-size: 28px; - line-height: 46px; - font-weight: bold; - text-align: center; - border: 2px solid #222; - color: #222; -} - -.month.show { - visibility: visible; -} - -.month.now { - background-color: tan; - box-shadow: 0 0 0 4px #fff4; -} - -/* MAP */ - -svg .hex { - stroke-width: 2; -} - -svg .hex.exit { - fill: black; - fill-opacity: 0.125; -} - -svg .hex.refit.action { - stroke: lightskyblue; -} - -svg .hex.action { - stroke: ivory; - stroke-dasharray: 2 2; - stroke-dashoffset: 1; -} - -svg .hex.action.forced_march { - stroke: crimson; -} - -svg .hex.selected { - stroke: yellow; - stroke-dasharray: none; -} - -svg .hex.tip { - stroke: yellow; - stroke-width: 3; - stroke-dasharray: 4 4; -} - -/* HEX CONTROL */ - -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: darkred; -} - -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: forestgreen; - fill-opacity: 0.4; -} - -svg .hex.allied_supply { - fill: firebrick; - fill-opacity: 0.4; -} - -svg .hex.axis_supply.allied_supply { - fill: blue; - fill-opacity: 0.4; -} - -svg #lines line.axis_supply { - stroke: darkgreen; -} - -svg #lines line.allied_supply { - stroke: darkred; -} - -svg #lines line.axis_supply.allied_supply { - stroke: navy; -} - -/* UNITS */ - -.minefield { - position: absolute; - pointer-events: none; - width: 48px; - height: 48px; - background-image: url(minefield.svg); - opacity: 0.5; -} - -#map .unit { - position: absolute; -} - -.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.revealed { - background-image: url(units.svg); -} - -#mapwrap.fit .unit.revealed { - background-image: url(units-simple.svg); -} - -.unit.axis { - background-color: hsl(80, 20%, 60%); - border-color: hsl(80, 20%, 50%); - box-shadow: 0 0 2px 1px hsl(80, 20%, 20%); -} - -.unit.axis.eliminated, -.unit.axis.fired, -.unit.axis.moved:not(.disrupted):not(.unsupplied) { - border-color: hsl(80, 20%, 40%); -} - -.unit.axis.eliminated:not(.revealed), -.unit.axis.fired:not(.revealed), -.unit.axis.moved:not(.revealed) { - background-color: hsl(80, 20%, 50%); -} - -.unit.allied { - background-color: hsl(35, 40%, 60%); - border-color: hsl(35, 40%, 50%); - box-shadow: 0 0 2px 1px hsl(30, 40%, 20%); -} - -.unit.allied.eliminated, -.unit.allied.fired, -.unit.allied.moved:not(.disrupted):not(.unsupplied) { - border-color: hsl(35, 40%, 40%); -} - -.unit.allied.eliminated:not(.revealed), -.unit.allied.fired:not(.revealed), -.unit.allied.moved:not(.revealed) { - background-color: hsl(35, 40%, 50%); -} - -.unit.moved:not(.revealed) { - background-image: url(moved.svg); - background-size: 75%; - background-position: center bottom; -} - -.unit.eliminated:not(.revealed) { - background-image: url(eliminated.svg); - background-size: 60%; - background-position: center; -} - -.unit.axis.revealed { - background-color: #abba8e; -} - -.unit.axis.italian.revealed { - background-color: #f9e3b3; -} - -.unit.allied.revealed { - background-color: #e4d1ab; -} - -.unit.disrupted { - border-color: #222; - box-shadow: 0 0 2px 1px black; -} - -.unit.disrupted:not(.revealed) { - background-image: url(disrupted.svg); - background-size: 75%; - background-position: center; -} - -.unit.unsupplied { - border-color: #c00; - box-shadow: 0 0 2px 1px darkred; -} - -.unit.unsupplied:not(.revealed) { - background-image: url(unsupplied.svg); - background-size: 75%; - background-position: center; -} - -.unit.disrupted.unsupplied { - border-color: #222 #c00; -} - -.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { - border-color: #c00 #222; -} - -.unit.disrupted.unsupplied:not(.revealed) { - background-image: url(unsupplied.svg), url(disrupted.svg); - background-size: 50%, 50%; - 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); } -.unit.r3 { transform: rotate(-270deg); } - -.unit.r0.hit1 { transform: rotate(-15deg); } -.unit.r1.hit1 { transform: rotate(-105deg); } -.unit.r2.hit1 { transform: rotate(-195deg); } -.unit.r3.hit1 { transform: rotate(-285deg); } - -.unit.r0.hit2 { transform: rotate(-30deg); } -.unit.r1.hit2 { transform: rotate(-120deg); } -.unit.r2.hit2 { transform: rotate(-210deg); } -.unit.r3.hit2 { transform: rotate(-300deg); } - -.unit.r0.hit3 { transform: rotate(-45deg); } -.unit.r1.hit3 { transform: rotate(-135deg); } -.unit.r2.hit3 { transform: rotate(-225deg); } -.unit.r3.hit3 { transform: rotate(-315deg); } - -.unit.u0{background-position:0% 0%} -.unit.u1{background-position:11.11111111111111% 0%} -.unit.u2{background-position:22.22222222222222% 0%} -.unit.u3{background-position:33.33333333333333% 0%} -.unit.u4{background-position:44.44444444444444% 0%} -.unit.u5{background-position:55.55555555555556% 0%} -.unit.u6{background-position:66.66666666666666% 0%} -.unit.u7{background-position:77.77777777777777% 0%} -.unit.u8{background-position:88.88888888888889% 0%} -.unit.u9{background-position:100% 0%} -.unit.u10{background-position:0% 11.11111111111111%} -.unit.u11{background-position:11.11111111111111% 11.11111111111111%} -.unit.u12{background-position:22.22222222222222% 11.11111111111111%} -.unit.u13{background-position:33.33333333333333% 11.11111111111111%} -.unit.u14{background-position:44.44444444444444% 11.11111111111111%} -.unit.u15{background-position:55.55555555555556% 11.11111111111111%} -.unit.u16{background-position:66.66666666666666% 11.11111111111111%} -.unit.u17{background-position:77.77777777777777% 11.11111111111111%} -.unit.u18{background-position:88.88888888888889% 11.11111111111111%} -.unit.u19{background-position:100% 11.11111111111111%} -.unit.u20{background-position:0% 22.22222222222222%} -.unit.u21{background-position:11.11111111111111% 22.22222222222222%} -.unit.u22{background-position:22.22222222222222% 22.22222222222222%} -.unit.u23{background-position:33.33333333333333% 22.22222222222222%} -.unit.u24{background-position:44.44444444444444% 22.22222222222222%} -.unit.u25{background-position:55.55555555555556% 22.22222222222222%} -.unit.u26{background-position:66.66666666666666% 22.22222222222222%} -.unit.u27{background-position:77.77777777777777% 22.22222222222222%} -.unit.u28{background-position:88.88888888888889% 22.22222222222222%} -.unit.u29{background-position:100% 22.22222222222222%} -.unit.u30{background-position:0% 33.33333333333333%} -.unit.u31{background-position:11.11111111111111% 33.33333333333333%} -.unit.u32{background-position:22.22222222222222% 33.33333333333333%} -.unit.u33{background-position:33.33333333333333% 33.33333333333333%} -.unit.u34{background-position:44.44444444444444% 33.33333333333333%} -.unit.u35{background-position:55.55555555555556% 33.33333333333333%} -.unit.u36{background-position:66.66666666666666% 33.33333333333333%} -.unit.u37{background-position:77.77777777777777% 33.33333333333333%} -.unit.u38{background-position:88.88888888888889% 33.33333333333333%} -.unit.u39{background-position:100% 33.33333333333333%} -.unit.u40{background-position:0% 44.44444444444444%} -.unit.u41{background-position:11.11111111111111% 44.44444444444444%} -.unit.u42{background-position:22.22222222222222% 44.44444444444444%} -.unit.u43{background-position:33.33333333333333% 44.44444444444444%} -.unit.u44{background-position:44.44444444444444% 44.44444444444444%} -.unit.u45{background-position:55.55555555555556% 44.44444444444444%} -.unit.u46{background-position:66.66666666666666% 44.44444444444444%} -.unit.u47{background-position:77.77777777777777% 44.44444444444444%} -.unit.u48{background-position:88.88888888888889% 44.44444444444444%} -.unit.u49{background-position:100% 44.44444444444444%} -.unit.u50{background-position:0% 55.55555555555556%} -.unit.u51{background-position:11.11111111111111% 55.55555555555556%} -.unit.u52{background-position:22.22222222222222% 55.55555555555556%} -.unit.u53{background-position:33.33333333333333% 55.55555555555556%} -.unit.u54{background-position:44.44444444444444% 55.55555555555556%} -.unit.u55{background-position:55.55555555555556% 55.55555555555556%} -.unit.u56{background-position:66.66666666666666% 55.55555555555556%} -.unit.u57{background-position:77.77777777777777% 55.55555555555556%} -.unit.u58{background-position:88.88888888888889% 55.55555555555556%} -.unit.u59{background-position:100% 55.55555555555556%} -.unit.u60{background-position:0% 66.66666666666666%} -.unit.u61{background-position:11.11111111111111% 66.66666666666666%} -.unit.u62{background-position:22.22222222222222% 66.66666666666666%} -.unit.u63{background-position:33.33333333333333% 66.66666666666666%} -.unit.u64{background-position:44.44444444444444% 66.66666666666666%} -.unit.u65{background-position:55.55555555555556% 66.66666666666666%} -.unit.u66{background-position:66.66666666666666% 66.66666666666666%} -.unit.u67{background-position:77.77777777777777% 66.66666666666666%} -.unit.u68{background-position:88.88888888888889% 66.66666666666666%} -.unit.u69{background-position:100% 66.66666666666666%} -.unit.u70{background-position:0% 77.77777777777777%} -.unit.u71{background-position:11.11111111111111% 77.77777777777777%} -.unit.u72{background-position:22.22222222222222% 77.77777777777777%} -.unit.u73{background-position:33.33333333333333% 77.77777777777777%} -.unit.u74{background-position:44.44444444444444% 77.77777777777777%} -.unit.u75{background-position:55.55555555555556% 77.77777777777777%} -.unit.u76{background-position:66.66666666666666% 77.77777777777777%} -.unit.u77{background-position:77.77777777777777% 77.77777777777777%} -.unit.u78{background-position:88.88888888888889% 77.77777777777777%} -.unit.u79{background-position:100% 77.77777777777777%} -.unit.u80{background-position:0% 88.88888888888889%} -.unit.u81{background-position:11.11111111111111% 88.88888888888889%} -.unit.u82{background-position:22.22222222222222% 88.88888888888889%} -.unit.u83{background-position:33.33333333333333% 88.88888888888889%} -.unit.u84{background-position:44.44444444444444% 88.88888888888889%} -.unit.u85{background-position:55.55555555555556% 88.88888888888889%} -.unit.u86{background-position:66.66666666666666% 88.88888888888889%} -.unit.u87{background-position:77.77777777777777% 88.88888888888889%} -.unit.u88{background-position:88.88888888888889% 88.88888888888889%} -.unit.u89{background-position:100% 88.88888888888889%} -.unit.u90{background-position:0% 100%} -.unit.u91{background-position:11.11111111111111% 100%} -.unit.u92{background-position:22.22222222222222% 100%} -.unit.u93{background-position:33.33333333333333% 100%} - -</style> </head> <body> |