From b2a99e6f91c8254550a150ef7217ec4d11c8c0c5 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Fri, 18 Jun 2021 15:11:21 +0200
Subject: tripoli: Use divs for turn and season markers too.

---
 play.html | 11 +++++------
 ui.js     | 16 ++++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/play.html b/play.html
index a1b8f98..eb71cbd 100644
--- a/play.html
+++ b/play.html
@@ -96,7 +96,7 @@ svg image {
 
 svg circle, .piece {
 	transition-property: x, y, cx, cy, top, left;
-	transition-duration: 700ms;
+	transition-duration: 1s;
 	transition-timing-function: ease;
 }
 
@@ -104,7 +104,7 @@ svg circle, .piece {
 	position: absolute;
 	pointer-events: none;
 	background-size: cover;
-	background-repeat: none;
+	background-repeat: no-repeat;
 	filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
 }
 
@@ -128,6 +128,7 @@ svg circle, .piece {
 .piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); }
 .piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); }
 .piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); }
+.piece.marker { width: 50px; height: 50px; border-radius: 50%; background-color: #444; border: 2px solid black; }
 
 .harbor {
 	fill-opacity: 0;
@@ -332,10 +333,6 @@ svg circle, .piece {
 <circle class="harbor" id="benghazi" r="92" cy="583" cx="1877"/>
 <circle class="harbor" id="alexandria" r="92" cy="454.5" cx="2335.5"/>
 <circle class="harbor" id="tripoli" r="128" cy="604.5" cx="1416"/>
-<g id="markers" fill="#444" stroke="black" stroke-width="2">
-<circle id="year" r="26" cx="175" cy="728"/>
-<circle id="season" r="26" cx="893" cy="728"/>
-</g>
 </svg>
 <div id="pieces">
 <div id="us_frigate_1" class="piece us_frigate"></div>
@@ -417,6 +414,8 @@ svg circle, .piece {
 <div id="gold_10" class="piece gold"></div>
 <div id="gold_11" class="piece gold"></div>
 <div id="gold_12" class="piece gold"></div>
+<div id="year" class="piece marker"></div>
+<div id="season" class="piece marker"></div>
 </div>
 </div>
 </div>
diff --git a/ui.js b/ui.js
index 7687252..3402515 100644
--- a/ui.js
+++ b/ui.js
@@ -55,8 +55,6 @@ const TRACK_1804 = get_space_id("1804");
 const TRACK_1805 = get_space_id("1805");
 const TRACK_1806 = get_space_id("1806");
 
-let map = document.getElementById("svgmap");
-
 let ui = {
 	spaces: {},
 	pieces: {},
@@ -86,6 +84,7 @@ function on_click_space(evt) { send_action('space', evt.target.space); }
 function on_click_piece(evt) { send_action('piece', evt.target.piece); }
 
 function build_map() {
+	let map = document.getElementById("svgmap");
 	for (let i = 0; i < SPACES.length; ++i) {
 		let space = SPACES[i];
 		let id = space.replace(/ /g, "_").toLowerCase();
@@ -212,15 +211,16 @@ function on_update() {
 }
 
 function update_year_marker(year) {
-	let e = map.getElementById("year");
-	e.setAttribute("cx", YEAR_X[year]);
-	e.setAttribute("cy", YEAR_Y);
+	let e = document.getElementById("year");
+	console.log("year", e);
+	e.style.left = Math.round(YEAR_X[year] - 27) + "px";
+	e.style.top = Math.round(YEAR_Y - 27) + "px";
 }
 
 function update_season_marker(season) {
-	let e = map.getElementById("season");
-	e.setAttribute("cx", SEASON_X[season]);
-	e.setAttribute("cy", YEAR_Y);
+	let e = document.getElementById("season");
+	e.style.left = Math.round(SEASON_X[season] - 27) + "px";
+	e.style.top = Math.round(YEAR_Y - 27) + "px";
 }
 
 function set_piece_xy(p, x, y) {
-- 
cgit v1.2.3