From 4a7765e6e0d237119e761bfd0afa9bf06dbfbd3c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 8 Sep 2022 19:26:04 +0200 Subject: Appearance tweaks. --- info/units.html | 8 +-- map.svg | 69 +++++++++++++------- play.html | 197 +++++++++++++++++++++++++++----------------------------- play.js | 7 +- 4 files changed, 150 insertions(+), 131 deletions(-) diff --git a/info/units.html b/info/units.html index 168115d..567fef7 100644 --- a/info/units.html +++ b/info/units.html @@ -16,21 +16,21 @@ body { height: 51px; background-repeat: no-repeat; border-style: solid; - border-width: 3px; + border-width: 4px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.5); background-image: url(../units.svg); } .unit.italian { background-color: #f9e3b3; - border-color: dimgray; + border-color: hsl(80, 20%, 50%); } .unit.german { background-color: #abba8e; - border-color: dimgray; + border-color: hsl(80, 20%, 50%); } .unit.allied { background-color: #e4d1ab; - border-color: tan; + border-color: hsl(35, 40%, 50%); } .unit.u0{background-position:-0px -0px} diff --git a/map.svg b/map.svg index c9f3539..01cb51a 100644 --- a/map.svg +++ b/map.svg @@ -1,7 +1,7 @@ @@ -52,14 +52,26 @@ - - - - + + + + + + + + + + - - + + @@ -170,7 +182,7 @@ - + @@ -181,23 +193,32 @@ /> - + + - + - + @@ -252,7 +273,7 @@ - + 2 5 2 @@ -260,22 +281,22 @@ - + LIBYA EGYPT Cyrenaica Western Desert - + Jebel el Akhdar - + Qattara Depression - + Gulf of Sirte @@ -284,7 +305,7 @@ Mediterranean Sea - + Benghazi Alexandria Ghemines diff --git a/play.html b/play.html index c35e8e7..054dda9 100644 --- a/play.html +++ b/play.html @@ -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 */ @@ -401,28 +398,24 @@ svg #lines line.axis_supply.allied_supply { 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.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 {
Trail+1 +
UNIT SPEED @@ -815,21 +806,14 @@ svg #lines line.axis_supply.allied_supply { 1
+
TARGET UNIT @@ -885,11 +869,22 @@ svg #lines line.axis_supply.allied_supply {
1 +
Minefields15
Supply Card10
+ +
TURN OPTIONS +
◐BasicMC +
◐◐OffensiveMMC +
◐◐AssaultMC* +
◐◐◐BlitzMC+MC +
No CostPassW +
+ diff --git a/play.js b/play.js index 8eb6983..5b08e2a 100644 --- a/play.js +++ b/play.js @@ -666,8 +666,6 @@ function update_unit(e, u) { if (is_italian_unit(u)) e.classList.toggle("italian", false) } - e.classList.toggle("disrupted", is_unit_disrupted(u)) - e.classList.toggle("unsupplied", is_unit_unsupplied(u)) } let stack_list = new Array(map_w * map_h + 21) @@ -720,6 +718,8 @@ function layout_stack(stack, hex, start_x, start_y, wrap, xdir) { update_unit(e, u) + e.classList.toggle("disrupted", is_unit_disrupted(u)) + e.classList.toggle("unsupplied", is_unit_unsupplied(u)) e.classList.toggle("action", !view.battle && is_unit_action(u)) e.classList.toggle("selected", !view.battle && is_unit_selected(u)) e.classList.toggle("moved", is_unit_moved(u)) @@ -745,6 +745,9 @@ function update_map() { ui.bardia.classList.toggle("axis", (view.fortress & 1) === 0) ui.benghazi.classList.toggle("axis", (view.fortress & 2) === 0) ui.tobruk.classList.toggle("axis", (view.fortress & 4) === 0) + ui.bardia.classList.toggle("allied", (view.fortress & 1) !== 0) + ui.benghazi.classList.toggle("allied", (view.fortress & 2) !== 0) + ui.tobruk.classList.toggle("allied", (view.fortress & 4) !== 0) for (let i = 0; i < stack_list.length; ++i) { stack_list[i][0].length = 0 -- cgit v1.2.3