Color tables to match.

1 files changed, 46 insertions, 11 deletions

diff --git a/play.html b/play.html
index 40b45a0..fd7f607 100644
--- a/play.html
+++ b/play.html
@@ -189,10 +189,14 @@ 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 black; text-align: center; padding: 2px 4px; }
-td { background-color: white; min-width: 20px; }
+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; }
+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 }
-th { background-color: gainsboro; }
 
 /* MAP */
 
@@ -304,6 +308,17 @@ svg .hex.action.forced_march {
 	stroke-width: 2;
 }
 
+svg .hex.exit {
+	fill: black;
+	fill-opacity: 0.125;
+}
+
+svg .hex.refit.action {
+	visibility: hidden;
+	stroke: lightskyblue;
+	stroke-width: 2;
+}
+
 svg .hex.from {
 	fill: gold;
 	fill-opacity: 0.2;
@@ -717,21 +732,41 @@ svg .hex.tip {
 
 <table>
 <tr><td class="blank" colspan="2"><th colspan="4">TARGET UNIT
-<tr><td class="blank" colspan="2">
+<tr>
+<td class="blank" colspan="2">
 <td><img src="icons/armor.svg">
 <td><img src="icons/infantry.svg">
 <td><img src="icons/motorized_antitank_old.svg">
 <td><img src="icons/artillery.svg">
 <tr><th rowspan="4" style="writing-mode:vertical-lr;min-width:20px">FIRING UNIT
-    <td><img src="icons/armor.svg"><td>(SF)<td>DF<td>SF<td>[TF]
-<tr><td><img src="icons/infantry.svg"><td>SF<td>(SF)<td>SF<td>[TF]
-<tr><td><img src="icons/motorized_antitank_old.svg"><td>DF<td>SF<td>SF<td>[TF]
-<tr><td><img src="icons/artillery.svg"><td>SF*<td>DF*<td>DF*<td>SF*
+<td><img src="icons/armor.svg">
+<td class="required_target">(SF)
+<td>DF
+<td>SF
+<td class="only_unsupported">[TF]
+<tr>
+<td><img src="icons/infantry.svg">
+<td>SF
+<td class="required_target">(SF)
+<td>SF
+<td class="only_unsupported">[TF]
+<tr>
+<td><img src="icons/motorized_antitank_old.svg">
+<td>DF
+<td>SF
+<td>SF
+<td class="only_unsupported">[TF]
+<tr>
+<td><img src="icons/artillery.svg">
+<td class="must_fire_first">SF*
+<td class="must_fire_first">DF*
+<td class="must_fire_first">DF*
+<td class="must_fire_first">SF*
 <!--
 <tr><td colspan="6">
-(SF) Required target,
-[TF] Only if unsupported,
-<br>* Must fire first
+<span class="must_fire_first">(Must fire first)</span><br>
+<span class="required_target">[Required target]</span><br>
+<span class="only_unsupported">Only if unsupported*</span>
 -->
 </table>