new marker css

3 files changed, 113 insertions, 111 deletions

diff --git a/play.css b/play.css
index 4abe0d3..99ff1ca 100644
--- a/play.css
+++ b/play.css
@@ -105,7 +105,6 @@ aside {
 #map {
 	width: 1650px;
 	height: 2550px;
-	background-image: url(map75.png);
 	background-size: 1650px 2550px;
 	box-shadow: 1px 1px 8px #0008;
 }
@@ -126,33 +125,21 @@ aside {
 .marker.turn {
 	width: 55px;
 	height: 55px;
-	background-image: url(markers.1x/game_turn_regulars.png);
-}
-
-.marker.turn.no-regulars {
-	background-image: url(markers.1x/game_turn_no_regulars.png);
 }
 
 .marker.french-alliance {
 	width: 55px;
 	height: 55px;
-	background-image: url(markers.1x/french_alliance.png);
-}
-
-.marker.french-alliance.european-war {
-	background-image: url(markers.1x/european_war.png);
 }
 
 .marker.congress {
 	width: 55px;
 	height: 55px;
-	background-image: url(markers.1x/continental_congress.png);
 }
 
 .marker.french-navy {
 	width: 64px;
 	height: 130px;
-	background-image: url(markers.1x/french_navy_tall.png);
 }
 
 .marker.control {
@@ -161,24 +148,17 @@ aside {
 	visibility: hidden;
 }
 
-.marker.control.british {
-	visibility: visible;
-	background-image: url(markers.1x/colony_british.png);
-}
-
-.marker.control.american {
-	visibility: visible;
-	background-image: url(markers.1x/colony_american.png);
-}
+.marker.control.british { visibility: visible; }
+.marker.control.american { visibility: visible; }
 
 .pc {
+	border: none;
+	box-shadow: none;
 	width: 58px;
 	height: 66px;
+	filter: drop-shadow(1px 1px 2px #0008);
 }
 
-.pc.american { background-image: url(markers.1x/pc_american.png); }
-.pc.british { background-image: url(markers.1x/pc_british.png); }
-
 .cu {
 	width: calc(60px - 6px);
 	height: 60px;
@@ -191,14 +171,17 @@ aside {
 	border-radius: 50%;
 }
 
-.cu.american { background-image: url(markers.1x/cu_american.png); }
-.cu.british { background-image: url(markers.1x/cu_british.png); }
-.cu.french { background-image: url(markers.1x/cu_french.png); }
 
-.general {
+.general.tall {
 	width: 64px;
 	height: 130px;
 }
+
+.general.small {
+	width: 45px;
+	height: 45px;
+}
+
 .general.offmap {
 	display: none;
 }
@@ -206,25 +189,12 @@ aside {
 .general.american.action, .general.american.selected { box-shadow: 0 0 5px 5px white; }
 .general.french.action, .general.french.selected { box-shadow: 0 0 5px 5px white; }
 
-.general:hover { z-index: 1; }
-.general.selected { z-index: 2; }
-.marker.congress { z-index: 3 }
-.cu { z-index: 4; }
-.space { z-index: 5; }
-
-.general.Arnold { background-image: url(markers.1x/general_arnold_tall.png); }
-.general.Gates { background-image: url(markers.1x/general_gates_tall.png); }
-.general.Greene { background-image: url(markers.1x/general_greene_tall.png); }
-.general.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); }
-.general.Lee { background-image: url(markers.1x/general_lee_tall.png); }
-.general.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); }
-.general.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); }
-.general.Washington { background-image: url(markers.1x/general_washington_tall.png); }
-.general.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); }
-.general.Carleton { background-image: url(markers.1x/general_carleton_tall.png); }
-.general.Clinton { background-image: url(markers.1x/general_clinton_tall.png); }
-.general.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); }
-.general.Howe { background-image: url(markers.1x/general_howe_tall.png); }
+.general { z-index: 2; }
+.general:hover { z-index: 3; }
+.general.selected { z-index: 4; }
+.marker.congress { z-index: 5 }
+.cu { z-index: 1; }
+.space { z-index: 6; }
 
 .space {
 	position: absolute;
@@ -258,8 +228,9 @@ aside {
 .card {
 	width: 250px;
 	height: 350px;
-	background-size: 250px 350px;
-	border-radius: 15px;
+	background-size: 100%;
+	border-radius: 16px;
+	border: 1px solid black;
 	box-shadow: var(--piece-shadow);
 	display: none;
 }
@@ -267,6 +238,7 @@ aside {
 #turn_info .card {
 	width: 125px;
 	height: 175px;
+	border-radius: 8px;
 }
 
 .card.show {
@@ -281,70 +253,99 @@ aside {
 	border-radius: 20px;
 }
 
-.shift .hand .card:hover, .shift .hand .card.selected {
-	transform: scale(1.5) translate(0,-30px);
-	z-index: 10;
-}
-
 #war_ends {
-	left:1074px;
+	left:1073px;
 	top:1647px;
 	position:absolute;
 	width: 187px;
 	height: 262px;
-	//transform: rotate(90deg);
+	transform: rotate(90deg);
 	background-size: 187px 262px;
-	border-radius: 10px;
-	//box-shadow: 2px -2px 8px rgba(0,0,0,0.5);
+	border-radius: 12px;
 	display: none;
+	border: 1px solid black;
 }
-#war_ends.year_1779 {
-	background-image:url(cards75/WWcard-071.png);
-	display: block;
-}
-#war_ends.year_1780 {
-	background-image:url(cards75/WWcard-072.png);
-	display: block;
-}
-#war_ends.year_1781 {
-	background-image:url(cards75/WWcard-073.png);
-	display: block;
-}
-#war_ends.year_1782 {
-	background-image:url(cards75/WWcard-074.png);
-	display: block;
-}
-#war_ends.year_1783 {
-	background-image:url(cards75/WWcard-075.png);
-	display: block;
-}
+#war_ends.year_1779 { display: block; }
+#war_ends.year_1780 { display: block; }
+#war_ends.year_1781 { display: block; }
+#war_ends.year_1782 { display: block; }
+#war_ends.year_1783 { display: block; }
 
-#played_british_reinforcements { left: 911px; }
-#played_american_reinforcements_1 { left: 1144px; }
-#played_american_reinforcements_2 { left: 1376px; }
+#played_british_reinforcements { left: 909px; }
+#played_american_reinforcements_1 { left: 1142px; }
+#played_american_reinforcements_2 { left: 1375px; }
 .reinforcements {
 	position:absolute;
 	top: 1922px;
 	width: 187px;
 	height: 262px;
-	border-radius: 10px;
+	border-radius: 12px;
 	display: none;
+	border: 1px solid black;
 }
-.reinforcements.ops_1 {
-	background-image:url(cards75/WWcard-045.png);
-	display: block;
-}
-.reinforcements.ops_2 {
-	background-image:url(cards75/WWcard-023.png);
-	display: block;
-}
-.reinforcements.ops_3 {
-	background-image:url(cards75/WWcard-001.png);
-	display: block;
-}
+.reinforcements.ops_1 { display: block; }
+.reinforcements.ops_2 { display: block; }
+.reinforcements.ops_3 { display: block; }
 
 /* IMAGES */
 
+#map { background-image: url(map75.jpg); }
+
+.marker.french-navy { background-image: url(markers.1x/french_navy_tall.png); }
+
+.marker.turn { background-image: url(markers.1x/game_turn_regulars.png); }
+.marker.turn.no-regulars { background-image: url(markers.1x/game_turn_no_regulars.png); }
+.marker.french-alliance { background-image: url(markers.1x/french_alliance.png); }
+.marker.french-alliance.european-war { background-image: url(markers.1x/european_war.png); }
+.marker.congress { background-image: url(markers.1x/continental_congress.png); }
+.marker.congress { background-image: url(markers.1x/continental_congress.png); }
+.marker.control.british { background-image: url(markers.1x/colony_british.png); }
+.marker.control.american { background-image: url(markers.1x/colony_american.png); }
+.cu.american { background-image: url(markers.1x/cu_american.png); }
+.cu.british { background-image: url(markers.1x/cu_british.png); }
+.cu.french { background-image: url(markers.1x/cu_french.png); }
+
+.pc.american { background-image: url(markers.1x/pc_american.svg); }
+.pc.british { background-image: url(markers.1x/pc_british.svg); }
+
+.general.tall.Arnold { background-image: url(markers.1x/general_arnold_tall.png); }
+.general.tall.Gates { background-image: url(markers.1x/general_gates_tall.png); }
+.general.tall.Greene { background-image: url(markers.1x/general_greene_tall.png); }
+.general.tall.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); }
+.general.tall.Lee { background-image: url(markers.1x/general_lee_tall.png); }
+.general.tall.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); }
+.general.tall.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); }
+.general.tall.Washington { background-image: url(markers.1x/general_washington_tall.png); }
+.general.tall.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); }
+.general.tall.Carleton { background-image: url(markers.1x/general_carleton_tall.png); }
+.general.tall.Clinton { background-image: url(markers.1x/general_clinton_tall.png); }
+.general.tall.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); }
+.general.tall.Howe { background-image: url(markers.1x/general_howe_tall.png); }
+
+.general.small.Arnold { background-image: url(markers.1x/general_arnold.png); }
+.general.small.Gates { background-image: url(markers.1x/general_gates.png); }
+.general.small.Greene { background-image: url(markers.1x/general_greene.png); }
+.general.small.Lafayette { background-image: url(markers.1x/general_lafayette.png); }
+.general.small.Lee { background-image: url(markers.1x/general_lee.png); }
+.general.small.Lincoln { background-image: url(markers.1x/general_lincoln.png); }
+.general.small.Rochambeau { background-image: url(markers.1x/general_rochambeau.png); }
+.general.small.Washington { background-image: url(markers.1x/general_washington.png); }
+.general.small.Burgoyne { background-image: url(markers.1x/general_burgoyne.png); }
+.general.small.Carleton { background-image: url(markers.1x/general_carleton.png); }
+.general.small.Clinton { background-image: url(markers.1x/general_clinton.png); }
+.general.small.Cornwallis { background-image: url(markers.1x/general_cornwallis.png); }
+.general.small.Howe { background-image: url(markers.1x/general_howe.png); }
+
+#war_ends.year_1779 { background-image:url(cards75/WWcard-071.png); }
+#war_ends.year_1780 { background-image:url(cards75/WWcard-072.png); }
+#war_ends.year_1781 { background-image:url(cards75/WWcard-073.png); }
+#war_ends.year_1782 { background-image:url(cards75/WWcard-074.png); }
+#war_ends.year_1783 { background-image:url(cards75/WWcard-075.png); }
+
+.reinforcements.ops_1 { background-image:url(cards75/WWcard-045.png); }
+.reinforcements.ops_2 { background-image:url(cards75/WWcard-023.png); }
+.reinforcements.ops_3 { background-image:url(cards75/WWcard-001.png); }
+
 .card_back{background-image:url(cards100/WW-CardBack.png)}
 .card_1{background-image:url(cards100/WWcard-001.png)}
 .card_2{background-image:url(cards100/WWcard-001.png)}
@@ -355,7 +356,7 @@ aside {
 .card_7{background-image:url(cards100/WWcard-001.png)}
 .card_8{background-image:url(cards100/WWcard-001.png)}
 .card_9{background-image:url(cards100/WWcard-001.png)}
-.card_10{background-image:url(cards100/WWcard-01.png)}
+.card_10{background-image:url(cards100/WWcard-001.png)}
 .card_11{background-image:url(cards100/WWcard-001.png)}
 .card_12{background-image:url(cards100/WWcard-001.png)}
 .card_13{background-image:url(cards100/WWcard-001.png)}
@@ -456,3 +457,4 @@ aside {
 .card_108{background-image:url(cards100/WWcard-108.png)}
 .card_109{background-image:url(cards100/WWcard-109.png)}
 .card_110{background-image:url(cards100/WWcard-110.png)}
+
diff --git a/play.html b/play.html
index 7426339..9a69f17 100644
--- a/play.html
+++ b/play.html
@@ -71,8 +71,8 @@
 <div id="mapwrap">
 <div id="map">
 	<div id="pc"></div>
-	<div id="generals"></div>
 	<div id="cu"></div>
+	<div id="generals"></div>
 	<div id="markers"></div>
 	<div id="spaces"></div>
 	<div id="war_ends"></div>
diff --git a/play.js b/play.js
index 9d396ec..cd613d8 100644
--- a/play.js
+++ b/play.js
@@ -181,7 +181,7 @@ function build_map() {
 			e.addEventListener("click", on_space)
 			ui.spaces[i] = e
 			document.getElementById("spaces").appendChild(e)
-			ui.pc[i] = build_marker("pc", name + "-pc", space.x, space.y, 67, 58.5, [ "pc" ])
+			ui.pc[i] = build_marker("pc", name + "-pc", space.x, space.y, 58, 66, [ "pc" ])
 		}
 	}
 
@@ -193,7 +193,7 @@ function build_map() {
 		ui.blockade[zone] = e
 	}
 
-	ui.turn = build_marker("markers", "GameTurn", BOXES["Game Turn 1775"].x, BOXES["Game Turn 1775"].y, 56.5, 56.5, [
+	ui.turn = build_marker("markers", "GameTurn", BOXES["Game Turn 1775"].x, BOXES["Game Turn 1775"].y, 55, 55, [
 		"turn",
 	])
 
@@ -202,8 +202,8 @@ function build_map() {
 		"FrenchAlliance",
 		BOXES["French Alliance Track 0"].x,
 		BOXES["French Alliance Track 0"].y,
-		56.5,
-		56.5,
+		55,
+		55,
 		[ "french-alliance" ]
 	)
 
@@ -212,8 +212,8 @@ function build_map() {
 		"FrenchNavy",
 		SPACES[data.space_index["French Reinforcements"]].x - 130 / 2 - 10,
 		SPACES[data.space_index["French Reinforcements"]].y - 32,
-		126 / 2,
-		252 / 2,
+		64,
+		130,
 		[ "french-navy" ]
 	)
 
@@ -222,14 +222,14 @@ function build_map() {
 		"Congress",
 		SPACES[data.space_index["Philadelphia"]].x,
 		SPACES[data.space_index["Philadelphia"]].y,
-		113 / 2,
-		113 / 2,
+		55,
+		55,
 		[ "congress" ]
 	)
 
 	for (let c = 0; c <= 13; ++c) {
 		let name = data.colony_name[c]
-		ui.control[c] = build_marker("markers", "control_" + name, BOXES[name].x, BOXES[name].y, 38 + 8, 38 + 8, [ "control" ])
+		ui.control[c] = build_marker("markers", "control_" + name, BOXES[name].x, BOXES[name].y, 45, 45, [ "control" ])
 	}
 
 	for (let c = 1; c <= 110; ++c) {
@@ -240,7 +240,8 @@ function build_map() {
 	for (let g = 0; g < general_count; ++g) {
 		let color = GENERALS[g].owner.toLowerCase()
 		let name = GENERALS[g].name
-		ui.generals[g] = build_marker("generals", g, 0, 0, 126 / 2, 252 / 2, [ "general", color, name, "offmap" ])
+		//ui.generals[g] = build_marker("generals", g, 0, 0, 64, 130, [ "general", "tall", color, name, "offmap" ])
+		ui.generals[g] = build_marker("generals", g, 0, 0, 45, 45, [ "general", "small", color, name, "offmap" ])
 		ui.generals[g].addEventListener("click", on_general)
 	}
 }
@@ -262,8 +263,6 @@ function count_french_cu(s) {
 }
 
 function update_units() {
-	const unitW = 130 / 2
-	const unitH = 263 / 2
 	const generalX = -22
 	const generalY = 22
 	const cuX = 20
@@ -337,7 +336,8 @@ function update_units() {
 		let space = SPACES[loc] || BOXES[loc]
 		if (space) {
 			let o = offset[loc] | 0
-			update_marker_xy(e, space.x + o * generalX, space.y + o * generalY - 32)
+			// update_marker_xy(e, space.x + o * generalX, space.y + o * generalY - 32)
+			update_marker_xy(e, space.x + o * generalX + 20, space.y + o * generalY - 20)
 			e.classList.remove("offmap")
 			offset[loc] = ++o
 		} else {
@@ -357,7 +357,7 @@ function update_units() {
 			let o = offset[s] | 0
 			let x = space.x + o * cuX
 			let y = space.y + o * cuY
-			let e = build_marker("cu", null, x, y, 122 / 2, 122 / 2, cn)
+			let e = build_marker("cu", null, x, y, 60, 60, cn)
 			e.textContent = n
 			offset[s] = ++o
 		}