Planning.

1 files changed, 130 insertions, 70 deletions

diff --git a/play.html b/play.html
index 11635b6..2f7c763 100644
--- a/play.html
+++ b/play.html
@@ -42,7 +42,7 @@ header.your_turn { background-color: orange; }
 	font-variant-numeric: tabular-nums;
 }
 
-/* DIALOGS */
+/* ARTS OF WAR */
 
 #arts_of_war {
 	background-color: white;
@@ -75,6 +75,63 @@ header.your_turn { background-color: orange; }
 	gap: 12px;
 }
 
+/* PLAN */
+
+#plan {
+	background-color: white;
+	border: 1px solid black;
+	position: fixed;
+	top: 84px;
+	left: 36px;
+	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
+	z-index: 51;
+	user-select: none;
+}
+
+#plan_header {
+	font-weight: bold;
+	cursor: move;
+	border-bottom: 1px solid black;
+	background-color: lightsteelblue;
+	padding: 3px 1em;
+}
+
+#plan_list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	padding: 12px;
+	height: 260px;
+}
+
+#plan_actions {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 12px;
+	gap: 12px;
+	height: 130px;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+#plan_list {
+	background-color: slategray;
+}
+
+#plan_actions {
+	border-top: 2px dotted white;
+	background-color: slategray;
+}
+
+body.Russians #plan_actions .teutonic { display: none }
+body.Teutons #plan_actions .russian { display: none }
+
+#plan_actions .card {
+	width: 93px;
+	height: 130px;
+	background-size: 93px 130px;
+}
+
 /* MATS */
 
 .court {
@@ -113,7 +170,7 @@ header.your_turn { background-color: orange; }
 .mat .c1, .mat .c2 {
 	position: absolute;
 	width: 186px;
-	height: 261px;
+	height: 260px;
 	background-color: green;
 }
 
@@ -369,9 +426,9 @@ body.shift .mat .card:hover {
 }
 
 .card {
-	background-size: 186px 261px;
+	background-size: 186px 260px;
 	width: 186px;
-	height: 261px;
+	height: 260px;
 	border-radius: 8px;
 	transition: 100ms;
 }
@@ -772,7 +829,6 @@ body.shift .marker:hover { transform: scale(2); z-index: 200; }
 
 .card.russian.aow_back{background-image:url(cards.1x/aow_russian_back.jpg)}
 .card.teutonic.aow_back{background-image:url(cards.1x/aow_teutonic_back.jpg)}
-
 .card.aow_0{background-image:url(cards.1x/aow_teutonic_01.jpg)}
 .card.aow_1{background-image:url(cards.1x/aow_teutonic_02.jpg)}
 .card.aow_2{background-image:url(cards.1x/aow_teutonic_03.jpg)}
@@ -794,7 +850,6 @@ body.shift .marker:hover { transform: scale(2); z-index: 200; }
 .card.aow_18{background-image:url(cards.1x/aow_teutonic_none.jpg)}
 .card.aow_19{background-image:url(cards.1x/aow_teutonic_none.jpg)}
 .card.aow_20{background-image:url(cards.1x/aow_teutonic_none.jpg)}
-
 .card.aow_21{background-image:url(cards.1x/aow_russian_01.jpg)}
 .card.aow_22{background-image:url(cards.1x/aow_russian_02.jpg)}
 .card.aow_23{background-image:url(cards.1x/aow_russian_03.jpg)}
@@ -819,17 +874,14 @@ body.shift .marker:hover { transform: scale(2); z-index: 200; }
 
 .card.teutonic.cc_back{background-image:url(cards.1x/cc_teutonic_back.jpg)}
 .card.russian.cc_back{background-image:url(cards.1x/cc_russian_back.jpg)}
-
 .card.teutonic.cc_pass{background-image:url(cards.1x/cc_teutonic_pass.jpg)}
 .card.russian.cc_pass{background-image:url(cards.1x/cc_russian_pass.jpg)}
-
 .card.cc_lord_0{background-image:url(cards.1x/cc_teutonic_andreas.jpg)}
 .card.cc_lord_1{background-image:url(cards.1x/cc_teutonic_heinrich.jpg)}
 .card.cc_lord_2{background-image:url(cards.1x/cc_teutonic_hermann.jpg)}
 .card.cc_lord_3{background-image:url(cards.1x/cc_teutonic_knud_and_abel.jpg)}
 .card.cc_lord_4{background-image:url(cards.1x/cc_teutonic_rudolf.jpg)}
 .card.cc_lord_5{background-image:url(cards.1x/cc_teutonic_yaroslav.jpg)}
-
 .card.cc_lord_6{background-image:url(cards.1x/cc_russian_aleksandr.jpg)}
 .card.cc_lord_7{background-image:url(cards.1x/cc_russian_andrey.jpg)}
 .card.cc_lord_8{background-image:url(cards.1x/cc_russian_domash.jpg)}
@@ -838,67 +890,69 @@ body.shift .marker:hover { transform: scale(2); z-index: 200; }
 .card.cc_lord_11{background-image:url(cards.1x/cc_russian_vladislav.jpg)}
 
 @media (min-resolution: 97dpi) {
-.card.russian.aow_back{background-image:url(cards.1x/aow_russian_back.jpg)}
-.card.teutonic.aow_back{background-image:url(cards.1x/aow_teutonic_back.jpg)}
-.card.aow_0{background-image:url(cards.1x/aow_russian_01.jpg)}
-.card.aow_1{background-image:url(cards.1x/aow_russian_02.jpg)}
-.card.aow_2{background-image:url(cards.1x/aow_russian_03.jpg)}
-.card.aow_3{background-image:url(cards.1x/aow_russian_04.jpg)}
-.card.aow_4{background-image:url(cards.1x/aow_russian_05.jpg)}
-.card.aow_5{background-image:url(cards.1x/aow_russian_06.jpg)}
-.card.aow_6{background-image:url(cards.1x/aow_russian_07.jpg)}
-.card.aow_7{background-image:url(cards.1x/aow_russian_08.jpg)}
-.card.aow_8{background-image:url(cards.1x/aow_russian_09.jpg)}
-.card.aow_9{background-image:url(cards.1x/aow_russian_10.jpg)}
-.card.aow_10{background-image:url(cards.1x/aow_russian_11.jpg)}
-.card.aow_11{background-image:url(cards.1x/aow_russian_12.jpg)}
-.card.aow_12{background-image:url(cards.1x/aow_russian_13.jpg)}
-.card.aow_13{background-image:url(cards.1x/aow_russian_14.jpg)}
-.card.aow_14{background-image:url(cards.1x/aow_russian_15.jpg)}
-.card.aow_15{background-image:url(cards.1x/aow_russian_16.jpg)}
-.card.aow_16{background-image:url(cards.1x/aow_russian_17.jpg)}
-.card.aow_17{background-image:url(cards.1x/aow_russian_18.jpg)}
-.card.aow_18{background-image:url(cards.1x/aow_russian_none.jpg)}
-.card.aow_19{background-image:url(cards.1x/aow_russian_none.jpg)}
-.card.aow_20{background-image:url(cards.1x/aow_russian_none.jpg)}
-.card.aow_21{background-image:url(cards.1x/aow_teutonic_01.jpg)}
-.card.aow_22{background-image:url(cards.1x/aow_teutonic_02.jpg)}
-.card.aow_23{background-image:url(cards.1x/aow_teutonic_03.jpg)}
-.card.aow_24{background-image:url(cards.1x/aow_teutonic_04.jpg)}
-.card.aow_25{background-image:url(cards.1x/aow_teutonic_05.jpg)}
-.card.aow_26{background-image:url(cards.1x/aow_teutonic_06.jpg)}
-.card.aow_27{background-image:url(cards.1x/aow_teutonic_07.jpg)}
-.card.aow_28{background-image:url(cards.1x/aow_teutonic_08.jpg)}
-.card.aow_29{background-image:url(cards.1x/aow_teutonic_09.jpg)}
-.card.aow_30{background-image:url(cards.1x/aow_teutonic_10.jpg)}
-.card.aow_31{background-image:url(cards.1x/aow_teutonic_11.jpg)}
-.card.aow_32{background-image:url(cards.1x/aow_teutonic_12.jpg)}
-.card.aow_33{background-image:url(cards.1x/aow_teutonic_13.jpg)}
-.card.aow_34{background-image:url(cards.1x/aow_teutonic_14.jpg)}
-.card.aow_35{background-image:url(cards.1x/aow_teutonic_15.jpg)}
-.card.aow_36{background-image:url(cards.1x/aow_teutonic_16.jpg)}
-.card.aow_37{background-image:url(cards.1x/aow_teutonic_17.jpg)}
-.card.aow_38{background-image:url(cards.1x/aow_teutonic_18.jpg)}
-.card.aow_39{background-image:url(cards.1x/aow_teutonic_none.jpg)}
-.card.aow_40{background-image:url(cards.1x/aow_teutonic_none.jpg)}
-.card.aow_41{background-image:url(cards.1x/aow_teutonic_none.jpg)}
-
-.card.cc_russian_back{background-image:url(cards.2x/cc_russian_back.jpg)}
-.card.cc_russian_aleksandr{background-image:url(cards.2x/cc_russian_aleksandr.jpg)}
-.card.cc_russian_andrey{background-image:url(cards.2x/cc_russian_andrey.jpg)}
-.card.cc_russian_domash{background-image:url(cards.2x/cc_russian_domash.jpg)}
-.card.cc_russian_gavrilo{background-image:url(cards.2x/cc_russian_gavrilo.jpg)}
-.card.cc_russian_karelians{background-image:url(cards.2x/cc_russian_karelians.jpg)}
-.card.cc_russian_vladislav{background-image:url(cards.2x/cc_russian_vladislav.jpg)}
-.card.cc_russian_pass{background-image:url(cards.2x/cc_russian_pass.jpg)}
-.card.cc_teutonic_back{background-image:url(cards.2x/cc_teutonic_back.jpg)}
-.card.cc_teutonic_andreas{background-image:url(cards.2x/cc_teutonic_andreas.jpg)}
-.card.cc_teutonic_heinrich{background-image:url(cards.2x/cc_teutonic_heinrich.jpg)}
-.card.cc_teutonic_hermann{background-image:url(cards.2x/cc_teutonic_hermann.jpg)}
-.card.cc_teutonic_knud_and_abel{background-image:url(cards.2x/cc_teutonic_knud_and_abel.jpg)}
-.card.cc_teutonic_rudolf{background-image:url(cards.2x/cc_teutonic_rudolf.jpg)}
-.card.cc_teutonic_yaroslav{background-image:url(cards.2x/cc_teutonic_yaroslav.jpg)}
-.card.cc_teutonic_pass{background-image:url(cards.2x/cc_teutonic_pass.jpg)}
+
+.card.russian.aow_back{background-image:url(cards.2x/aow_russian_back.jpg)}
+.card.teutonic.aow_back{background-image:url(cards.2x/aow_teutonic_back.jpg)}
+.card.aow_0{background-image:url(cards.2x/aow_russian_01.jpg)}
+.card.aow_1{background-image:url(cards.2x/aow_russian_02.jpg)}
+.card.aow_2{background-image:url(cards.2x/aow_russian_03.jpg)}
+.card.aow_3{background-image:url(cards.2x/aow_russian_04.jpg)}
+.card.aow_4{background-image:url(cards.2x/aow_russian_05.jpg)}
+.card.aow_5{background-image:url(cards.2x/aow_russian_06.jpg)}
+.card.aow_6{background-image:url(cards.2x/aow_russian_07.jpg)}
+.card.aow_7{background-image:url(cards.2x/aow_russian_08.jpg)}
+.card.aow_8{background-image:url(cards.2x/aow_russian_09.jpg)}
+.card.aow_9{background-image:url(cards.2x/aow_russian_10.jpg)}
+.card.aow_10{background-image:url(cards.2x/aow_russian_11.jpg)}
+.card.aow_11{background-image:url(cards.2x/aow_russian_12.jpg)}
+.card.aow_12{background-image:url(cards.2x/aow_russian_13.jpg)}
+.card.aow_13{background-image:url(cards.2x/aow_russian_14.jpg)}
+.card.aow_14{background-image:url(cards.2x/aow_russian_15.jpg)}
+.card.aow_15{background-image:url(cards.2x/aow_russian_16.jpg)}
+.card.aow_16{background-image:url(cards.2x/aow_russian_17.jpg)}
+.card.aow_17{background-image:url(cards.2x/aow_russian_18.jpg)}
+.card.aow_18{background-image:url(cards.2x/aow_russian_none.jpg)}
+.card.aow_19{background-image:url(cards.2x/aow_russian_none.jpg)}
+.card.aow_20{background-image:url(cards.2x/aow_russian_none.jpg)}
+.card.aow_21{background-image:url(cards.2x/aow_teutonic_01.jpg)}
+.card.aow_22{background-image:url(cards.2x/aow_teutonic_02.jpg)}
+.card.aow_23{background-image:url(cards.2x/aow_teutonic_03.jpg)}
+.card.aow_24{background-image:url(cards.2x/aow_teutonic_04.jpg)}
+.card.aow_25{background-image:url(cards.2x/aow_teutonic_05.jpg)}
+.card.aow_26{background-image:url(cards.2x/aow_teutonic_06.jpg)}
+.card.aow_27{background-image:url(cards.2x/aow_teutonic_07.jpg)}
+.card.aow_28{background-image:url(cards.2x/aow_teutonic_08.jpg)}
+.card.aow_29{background-image:url(cards.2x/aow_teutonic_09.jpg)}
+.card.aow_30{background-image:url(cards.2x/aow_teutonic_10.jpg)}
+.card.aow_31{background-image:url(cards.2x/aow_teutonic_11.jpg)}
+.card.aow_32{background-image:url(cards.2x/aow_teutonic_12.jpg)}
+.card.aow_33{background-image:url(cards.2x/aow_teutonic_13.jpg)}
+.card.aow_34{background-image:url(cards.2x/aow_teutonic_14.jpg)}
+.card.aow_35{background-image:url(cards.2x/aow_teutonic_15.jpg)}
+.card.aow_36{background-image:url(cards.2x/aow_teutonic_16.jpg)}
+.card.aow_37{background-image:url(cards.2x/aow_teutonic_17.jpg)}
+.card.aow_38{background-image:url(cards.2x/aow_teutonic_18.jpg)}
+.card.aow_39{background-image:url(cards.2x/aow_teutonic_none.jpg)}
+.card.aow_40{background-image:url(cards.2x/aow_teutonic_none.jpg)}
+.card.aow_41{background-image:url(cards.2x/aow_teutonic_none.jpg)}
+
+.card.teutonic.cc_back{background-image:url(cards.2x/cc_teutonic_back.jpg)}
+.card.russian.cc_back{background-image:url(cards.2x/cc_russian_back.jpg)}
+.card.teutonic.cc_pass{background-image:url(cards.2x/cc_teutonic_pass.jpg)}
+.card.russian.cc_pass{background-image:url(cards.2x/cc_russian_pass.jpg)}
+.card.cc_lord_0{background-image:url(cards.2x/cc_teutonic_andreas.jpg)}
+.card.cc_lord_1{background-image:url(cards.2x/cc_teutonic_heinrich.jpg)}
+.card.cc_lord_2{background-image:url(cards.2x/cc_teutonic_hermann.jpg)}
+.card.cc_lord_3{background-image:url(cards.2x/cc_teutonic_knud_and_abel.jpg)}
+.card.cc_lord_4{background-image:url(cards.2x/cc_teutonic_rudolf.jpg)}
+.card.cc_lord_5{background-image:url(cards.2x/cc_teutonic_yaroslav.jpg)}
+.card.cc_lord_6{background-image:url(cards.2x/cc_russian_aleksandr.jpg)}
+.card.cc_lord_7{background-image:url(cards.2x/cc_russian_andrey.jpg)}
+.card.cc_lord_8{background-image:url(cards.2x/cc_russian_domash.jpg)}
+.card.cc_lord_9{background-image:url(cards.2x/cc_russian_gavrilo.jpg)}
+.card.cc_lord_10{background-image:url(cards.2x/cc_russian_karelians.jpg)}
+.card.cc_lord_11{background-image:url(cards.2x/cc_russian_vladislav.jpg)}
+
 }
 
 </style>
@@ -910,6 +964,12 @@ body.shift .marker:hover { transform: scale(2); z-index: 200; }
 <div id="arts_of_war_list"></div>
 </div>
 
+<div id="plan" class="hide">
+<div id="plan_header">Plan</div>
+<div id="plan_list"></div>
+<div id="plan_actions"></div>
+</div>
+
 <header>
 	<div id="toolbar">
 		<div class="menu">