Start client.

1 files changed, 436 insertions, 0 deletions

diff --git a/play.css b/play.css
new file mode 100644
index 0000000..f33c156
--- /dev/null
+++ b/play.css
@@ -0,0 +1,436 @@
+main { background-color: #777; }
+
+#role_DS { background-color: silver }
+#role_BK { background-color: turquoise }
+#role_VK { background-color: gold }
+#role_Solo { background-image: linear-gradient(120deg, gray, turquoise, gold) }
+
+.role.active span { text-decoration: underline; }
+
+/* LAYOUT */
+
+#card_tip {
+	position: fixed;
+	z-index: 100;
+	right: 240px;
+	top: 60px;
+}
+
+#card_panel {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: start;
+	justify-content: center;
+	gap: 16px;
+	padding: 16px;
+}
+
+@media (max-width: 800px) {
+	#card_panel {
+		justify-content: start;
+	}
+}
+
+#table {
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr min-content min-content 1fr;
+	grid-template-rows: min-content max-content;
+}
+
+#mapwrap {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#card_panel {
+	grid-column: 2;
+	grid-row: 2;
+}
+
+#mapwrap[data-fit="both"] + #card_panel {
+	max-width: 250px;
+	grid-column: 3;
+	grid-row: 1;
+}
+
+@media (min-width: 2000px) {
+	#card_panel {
+		max-width: 250px;
+		grid-column: 3;
+		grid-row: 1;
+	}
+}
+
+/* LOG */
+
+#log .h1 { background-image: linear-gradient(60deg, gray, turquoise, gold); text-shadow: 0 0 4px white; }
+
+#log { font-variant-numeric: tabular-nums; }
+
+/* MAP */
+
+#mapwrap {
+	box-shadow: 0px 1px 10px #0008;
+	width: 1275px;
+	height: 1650px;
+	margin-bottom: 24px;
+}
+
+#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] {
+	margin-bottom: 0;
+}
+
+#map {
+	width: 1275px;
+	height: 1650px;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.jpg") }
+}
+
+#svgmap { position: absolute; }
+#tokens { position: absolute; }
+#pieces { position: absolute; }
+#boxes { position: absolute; }
+
+#map.hide_pieces #pieces { display: none; }
+#map.hide_tokens #tokens { display: none; }
+
+/* SPACES */
+
+path { fill: transparent; stroke-width: 4; }
+path.action { fill: white; fill-opacity: 0.3; stroke: white; }
+path.selected { stroke: yellow; }
+path.tip { stroke: white; stroke-dasharray: 4 4; }
+
+.space {
+	position: absolute;
+	border: 2px solid lime;
+}
+
+.space.province {
+	border-radius: 50%;
+}
+
+.box{position:absolute;box-sizing:border-box;border:4px solid transparent}
+.box.action{border-color:lemonchiffon;}
+.box.selected{border-color:yellow;}
+.box.tip { border-color: white; }
+
+/* PIECES */
+
+.piece {
+	position: absolute;
+	pointer-events: none;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	transition-property: top, left;
+	transition-duration: 700ms;
+	transition-timing-function: ease;
+	filter: drop-shadow(0 1px 1px #0006);
+}
+.piece.action {
+	pointer-events: auto;
+	filter:
+		drop-shadow(0 -2px 0 white)
+		drop-shadow(0 2px 0 white)
+		drop-shadow(-2px 0 0 white)
+		drop-shadow(2px 0 0 white)
+		;
+}
+.piece.selected {
+	pointer-events: auto;
+	filter:
+		drop-shadow(0 -2px 0 yellow)
+		drop-shadow(0 2px 0 yellow)
+		drop-shadow(-2px 0 0 yellow)
+		drop-shadow(2px 0 0 yellow)
+		;
+}
+
+.cylinder { width: 44px; height: 48px; }
+.disk { width: 44px; height: 38px; }
+.governor, .amir, .raja { width: 29px; height: 36px; }
+.cube { width: 29px; height: 36px; }
+
+.ds.cylinder { background-image: url(pieces/ds_cylinder.svg) }
+.ds.cube { background-image: url(pieces/ds_troop.svg) }
+.ds.disk { background-image: url(pieces/ds_disk.svg) }
+.ds.governor { background-image: url(pieces/ds_governor.svg) }
+.bk.cylinder { background-image: url(pieces/bk_cylinder.svg) }
+.bk.amir { background-image: url(pieces/bk_amir.svg) }
+.bk.amir.rebel { background-image: url(pieces/bk_amir_rebel.svg) }
+.bk.disk { background-image: url(pieces/bk_disk.svg) }
+.ve.cylinder { background-image: url(pieces/ve_cylinder.svg) }
+.ve.raja { background-image: url(pieces/ve_raja.svg) }
+.ve.raja.rebel { background-image: url(pieces/ve_raja_rebel.svg) }
+.ve.disk { background-image: url(pieces/ve_disk.svg) }
+.mongol.cube { background-image: url(pieces/mongol_invader.svg) }
+
+.disk { border-radius: 15px; }
+.noble { border-radius: 8px; }
+.cube { border-radius: 14px 14px / 10px 10px; }
+
+/* TOKENS */
+
+.token {
+	pointer-events: none;
+	position: absolute;
+	transition-property: top, left;
+	transition-duration: 700ms;
+	transition-timing-function: ease;
+	background-repeat: no-repeat;
+	border-radius: 8px;
+	border: 2px outset gray;
+	box-shadow: 0 0 0px 1px #222;
+	background-size: 45px 45px;
+	width: 45px;
+	height: 45px;
+}
+
+.token.action {
+	pointer-events: auto;
+}
+
+.token.tributary, .token.ds_ctl, .token.bk_ctl, .token.ve_ctl { border-radius: 50% }
+
+/* CARDS */
+
+.card {
+	width: 250px;
+	height: 350px;
+	border-radius: 16px;
+	background-color: #c6bb8d;
+	background-size: cover;
+	background-repeat: no-repeat;
+	box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008;
+}
+
+.card.card_back {
+	background-color: orange;
+}
+
+.card.action {
+	box-shadow: 0 0 0 3px white;
+}
+
+.card.momentum {
+	width: 186px;
+	height: 261px;
+	border-radius: 12px;
+}
+
+#deck_outer { position: relative; }
+#deck_size {
+	position: absolute;
+	right: 24px;
+	bottom: 16px;
+	font-size: 24px;
+	font-weight: bold;
+	color: white;
+}
+
+#of_gods_and_kings { position: relative; }
+#of_gods_and_kings_label {
+	position: absolute;
+	top: 6px;
+	left: 6px;
+	right: 6px;
+	border-radius: 16px;
+	text-align: center;
+	background-color: #5c4f23;
+	font-size: 16px;
+	font-weight: bold;
+	color: white;
+}
+
+#this_card { position: relative; }
+
+#this_card.c #shaded_event { border-top-color: transparent; }
+#this_card.c #unshaded_event { border-image: radial-gradient(100px 30px at bottom, transparent 65%, white) 3 }
+
+#unshaded_event, #shaded_event {
+	display: none;
+	position: absolute;
+	box-sizing: border-box;
+	border: 3px solid white;
+}
+
+#shaded_event.action, #unshaded_event.action {
+	display: block;
+}
+
+#unshaded_event {
+	left: 3px;
+	right: 3px;
+	top: 200px;
+	height: 70px;
+	border-radius: 12px;
+}
+
+#shaded_event {
+	left: 3px;
+	right: 3px;
+	bottom: 4px;
+	height: 80px;
+	border-radius: 12px;
+}
+
+/* TOKEN IMAGES */
+
+.token.tributary { background-color: #2a2c26 }
+.token.ds_ctl { background-color: #433e1d }
+.token.bk_ctl { background-color: #15908a }
+.token.ve_ctl { background-color: #fc7b0d }
+#token_ds_vp { background-color: #2a2c26 }
+#token_bk_vp { background-color: #15908a }
+#token_ve_vp { background-color: #fc7b0d }
+#token_bk_influence { background-color: #02766f }
+#token_ve_influence { background-color: #fdbb47 }
+#token_mongol_cavalry { background-color: #58291f }
+.token.cavalry.charge { background-color: #6c4a2f }
+.token.cavalry.screen { background-color: #363d29 }
+
+.token.tributary { border-color: #2a2c26 }
+.token.ds_ctl { border-color: #433e1d }
+.token.bk_ctl { border-color: #15908a }
+.token.ve_ctl { border-color: #fc7b0d }
+#token_ds_vp { border-color: #2a2c26 }
+#token_bk_vp { border-color: #15908a }
+#token_ve_vp { border-color: #fc7b0d }
+#token_bk_influence { border-color: #02766f }
+#token_ve_influence { border-color: #fdbb47 }
+#token_mongol_cavalry { border-color: #58291f }
+.token.cavalry.charge { border-color: #6c4a2f }
+.token.cavalry.screen { border-color: #363d29 }
+
+.token.tributary { background-image: url(pieces/Tributary.png) }
+.token.ds_ctl { background-image: url(pieces/Flag_DS.png) }
+.token.bk_ctl { background-image: url(pieces/Flag_BK.png) }
+.token.ve_ctl { background-image: url(pieces/Flag_VE.png) }
+#token_ds_vp { background-image: url(pieces/Victory_DS.png) }
+#token_bk_vp { background-image: url(pieces/Victory_BK.png) }
+#token_ve_vp { background-image: url(pieces/Victory_VE.png) }
+#token_bk_influence { background-image: url(pieces/Influence_BK.png) }
+#token_ve_influence { background-image: url(pieces/Influence_VE.png) }
+#token_mongol_cavalry { background-image: url(pieces/Cavalry_Mongol.png) }
+.token.cavalry.charge { background-image: url(pieces/Cavalry_Charge.png) }
+.token.cavalry.screen { background-image: url(pieces/Cavalry_Screen.png) }
+
+/* CARD IMAGES */
+
+.card.card_back{background-image:url(cards100/card_back.jpg)}
+.card.card_1{background-image:url(cards100/event_1.jpg)}
+.card.card_2{background-image:url(cards100/event_2.jpg)}
+.card.card_3{background-image:url(cards100/event_3.jpg)}
+.card.card_4{background-image:url(cards100/event_4.jpg)}
+.card.card_5{background-image:url(cards100/event_5.jpg)}
+.card.card_6{background-image:url(cards100/event_6.jpg)}
+.card.card_7{background-image:url(cards100/event_7.jpg)}
+.card.card_8{background-image:url(cards100/event_8.jpg)}
+.card.card_9{background-image:url(cards100/event_9.jpg)}
+.card.card_10{background-image:url(cards100/event_10.jpg)}
+.card.card_11{background-image:url(cards100/event_11.jpg)}
+.card.card_12{background-image:url(cards100/event_12.jpg)}
+.card.card_13{background-image:url(cards100/event_13.jpg)}
+.card.card_14{background-image:url(cards100/event_14.jpg)}
+.card.card_15{background-image:url(cards100/event_15.jpg)}
+.card.card_16{background-image:url(cards100/event_16.jpg)}
+.card.card_17{background-image:url(cards100/event_17.jpg)}
+.card.card_18{background-image:url(cards100/event_18.jpg)}
+.card.card_19{background-image:url(cards100/event_19.jpg)}
+.card.card_20{background-image:url(cards100/event_20.jpg)}
+.card.card_21{background-image:url(cards100/event_21.jpg)}
+.card.card_22{background-image:url(cards100/event_22.jpg)}
+.card.card_23{background-image:url(cards100/event_23.jpg)}
+.card.card_24{background-image:url(cards100/event_24.jpg)}
+.card.card_25{background-image:url(cards100/event_25.jpg)}
+.card.card_26{background-image:url(cards100/event_26.jpg)}
+.card.card_27{background-image:url(cards100/event_27.jpg)}
+.card.card_28{background-image:url(cards100/event_28.jpg)}
+.card.card_29{background-image:url(cards100/event_29.jpg)}
+.card.card_30{background-image:url(cards100/event_30.jpg)}
+.card.card_31{background-image:url(cards100/event_31.jpg)}
+.card.card_32{background-image:url(cards100/event_32.jpg)}
+.card.card_33{background-image:url(cards100/event_33.jpg)}
+.card.card_34{background-image:url(cards100/event_34.jpg)}
+.card.card_35{background-image:url(cards100/event_35.jpg)}
+.card.card_36{background-image:url(cards100/event_36.jpg)}
+.card.card_37{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
+.card.card_38{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
+.card.card_39{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
+.card.card_40{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
+.card.card_41{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
+.card.card_42{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
+.card.card_43{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
+.card.card_44{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
+.card.card_45{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
+.card.card_46{background-image:url(cards100/Timurid_Empire_front.jpg)}
+.card.card_47{background-image:url(cards100/Timurid_Empire_front.jpg)}
+.card.card_48{background-image:url(cards100/Succession1_front.jpg)}
+.card.card_49{background-image:url(cards100/Succession2_front.jpg)}
+.card.card_50{background-image:url(cards100/Succession3_front.jpg)}
+.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_front.jpg)}
+.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_back.jpg)}
+
+@media (min-resolution: 97dpi) {
+.card.card_back{background-image:url(cards200/card_back.jpg)}
+.card.card_1{background-image:url(cards200/event_1.jpg)}
+.card.card_2{background-image:url(cards200/event_2.jpg)}
+.card.card_3{background-image:url(cards200/event_3.jpg)}
+.card.card_4{background-image:url(cards200/event_4.jpg)}
+.card.card_5{background-image:url(cards200/event_5.jpg)}
+.card.card_6{background-image:url(cards200/event_6.jpg)}
+.card.card_7{background-image:url(cards200/event_7.jpg)}
+.card.card_8{background-image:url(cards200/event_8.jpg)}
+.card.card_9{background-image:url(cards200/event_9.jpg)}
+.card.card_10{background-image:url(cards200/event_10.jpg)}
+.card.card_11{background-image:url(cards200/event_11.jpg)}
+.card.card_12{background-image:url(cards200/event_12.jpg)}
+.card.card_13{background-image:url(cards200/event_13.jpg)}
+.card.card_14{background-image:url(cards200/event_14.jpg)}
+.card.card_15{background-image:url(cards200/event_15.jpg)}
+.card.card_16{background-image:url(cards200/event_16.jpg)}
+.card.card_17{background-image:url(cards200/event_17.jpg)}
+.card.card_18{background-image:url(cards200/event_18.jpg)}
+.card.card_19{background-image:url(cards200/event_19.jpg)}
+.card.card_20{background-image:url(cards200/event_20.jpg)}
+.card.card_21{background-image:url(cards200/event_21.jpg)}
+.card.card_22{background-image:url(cards200/event_22.jpg)}
+.card.card_23{background-image:url(cards200/event_23.jpg)}
+.card.card_24{background-image:url(cards200/event_24.jpg)}
+.card.card_25{background-image:url(cards200/event_25.jpg)}
+.card.card_26{background-image:url(cards200/event_26.jpg)}
+.card.card_27{background-image:url(cards200/event_27.jpg)}
+.card.card_28{background-image:url(cards200/event_28.jpg)}
+.card.card_29{background-image:url(cards200/event_29.jpg)}
+.card.card_30{background-image:url(cards200/event_30.jpg)}
+.card.card_31{background-image:url(cards200/event_31.jpg)}
+.card.card_32{background-image:url(cards200/event_32.jpg)}
+.card.card_33{background-image:url(cards200/event_33.jpg)}
+.card.card_34{background-image:url(cards200/event_34.jpg)}
+.card.card_35{background-image:url(cards200/event_35.jpg)}
+.card.card_36{background-image:url(cards200/event_36.jpg)}
+.card.card_37{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
+.card.card_38{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
+.card.card_39{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
+.card.card_40{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
+.card.card_41{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
+.card.card_42{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
+.card.card_43{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
+.card.card_44{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
+.card.card_45{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
+.card.card_46{background-image:url(cards200/Timurid_Empire_front.jpg)}
+.card.card_47{background-image:url(cards200/Timurid_Empire_front.jpg)}
+.card.card_48{background-image:url(cards200/Succession1_front.jpg)}
+.card.card_49{background-image:url(cards200/Succession2_front.jpg)}
+.card.card_50{background-image:url(cards200/Succession3_front.jpg)}
+.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_front.jpg)}
+.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_back.jpg)}
+}