Fix calendar layout.

4 files changed, 143 insertions, 148 deletions

diff --git a/play.css b/play.css
index d3fe3c8..00ba656 100644
--- a/play.css
+++ b/play.css
@@ -435,11 +435,17 @@ body.shift #capabilities2 {
 }
 
 .box {
+	box-sizing: border-box;
 	position: absolute;
 	border: 3px solid transparent;
+	border-radius: 15px 0 50% 50% / 15px 0 20px 20px;
+}
+
+.box.box16 {
+	border-radius: 0
 }
 
-.box.calendar.action {
+.box.action {
 	border-color: white;
 	background-color: #fff6;
 }
diff --git a/play.js b/play.js
index b432e56..43ac1a2 100644
--- a/play.js
+++ b/play.js
@@ -426,23 +426,23 @@ function lord_has_capability(lord, card_or_list) {
 
 // === BUILD UI ===
 
-const original_boxes = {
-	box1: [200,34,103,163],
-	box2: [303,34,103,163],
-	box3: [406,34,99,163],
-	box4: [506,34,103,163],
-	box5: [608,34,104,163],
-	box6: [735,34,102,163],
-	box7: [837,34,102,163],
-	box8: [939,34,102,163],
-	box9: [1041,34,99,163],
-	box10: [1140,34,102,163],
-	box11: [735,258,107,155],
-	box12: [842,258,97,155],
-	box13: [939,258,102,155],
-	box14: [1041,258,114,155],
-	box15: [1154,258,93,155],
-	box16: [1247,258,65,155],
+const calendar_boxes = {
+	"box1": [204,38,100,162],
+	"box2": [306,38,100,162],
+	"box3": [408,38,100,162],
+	"box4": [510,38,100,162],
+	"box5": [612,38,100,162],
+	"box6": [734,38,100,162],
+	"box7": [836,38,100,162],
+	"box8": [938,38,100,162],
+	"box9": [1040,38,100,162],
+	"box10": [1142,38,100,162],
+	"box11": [734,260,100,162],
+	"box12": [836,260,100,162],
+	"box13": [938,260,100,162],
+	"box14": [1040,260,100,162],
+	"box15": [1142,260,100,162],
+	"box16": [938,423,310,52],
 }
 
 const track_boxes = [
@@ -694,11 +694,11 @@ function build_map() {
 
 	for (let i = 1; i <= 16; ++i) {
 		let name = "box" + i
-		let x = original_boxes[name][0]
-		let y = original_boxes[name][1]
-		let w = original_boxes[name][2] - 8
-		let h = original_boxes[name][3] - 8
-		calendar_xy[i] = [ x + w, y ]
+		let x = calendar_boxes[name][0]
+		let y = calendar_boxes[name][1]
+		let w = calendar_boxes[name][2]
+		let h = calendar_boxes[name][3]
+		calendar_xy[i] = [ x, y ]
 		let e = ui.calendar[i] = document.createElement("div")
 		e.className = "calendar box " + name
 		e.style.left = x + "px"
@@ -842,16 +842,8 @@ function layout_calendar() {
 				d = 46
 				z += 100
 			}
-			if (loc === 0) {
-				x += -6 + 46 * i
-				z = 1
-			} else if (loc === 17) {
-				x += 60 - 46 * i
-				z = 60 - i
-			} else {
-				x += (146 - 94 - 2)
-				y += (227 - 46 - 2) - i * d
-			}
+			x += 10
+			y += i * d
 			e.style.top = y + "px"
 			e.style.left = x + "px"
 			e.style.zIndex = z
@@ -860,26 +852,9 @@ function layout_calendar() {
 		list = calendar_layout_cylinder[loc]
 		for (let i = 0; i < list.length; ++i) {
 			let e = list[i]
-			let x = cx, y = cy, z = 61
-			if (loc === 0) {
-				let k = calendar_layout_service[0].length
-				if (k > 0)
-					x += k * 46 + 46 + i * 46
-				else
-					x += 0 + i * 46
-			} else if (loc === 17) {
-				let k = calendar_layout_service[17].length
-				if (k > 0)
-					x += 60 - k * 46 - i * 46
-				else
-					x += 60 + i * 46
-			} else if (loc === 1) {
-				x += 46 + (i%2) * 46 + (i/2|0) * 12
-				y += 66 + (i/2|0) * 36
-			} else {
-				x += 6 + (i%3) * 46 + (i/3|0) * 24
-				y += 66 + (i/3|0) * 36
-			}
+			let x = cx, y = cy, z = 61 + i
+			x += 10
+			y += i * 32 - 3
 			e.style.top = y + "px"
 			e.style.left = x + "px"
 			e.style.zIndex = z
@@ -1002,7 +977,7 @@ function update_lord(ix) {
 		update_lord_mat(ix)
 	} else {
 		let t = locale - 100
-		if (t > 17) t = 17
+		if (t > 16) t = 16
 		calendar_layout_cylinder[t].push(ui.lord_cylinder[ix])
 		ui.lord_cylinder[ix].classList.remove("hide")
 	}
@@ -1227,10 +1202,10 @@ function on_update() {
 	} else {
 		ui.turn.className = `marker circle turn levy`
 	}
-	ui.turn.style.left = (calendar_xy[view.turn >> 1][0] - 52) + "px"
-	ui.turn.style.top = (calendar_xy[view.turn >> 1][1] + 100) + "px"
-	ui.end.style.left = (calendar_xy[view.end][0] - 52) + "px"
-	ui.end.style.top = (calendar_xy[view.end][1] + 100) + "px"
+	ui.turn.style.left = (calendar_xy[view.turn >> 1][0] + 91 - 52) + "px"
+	ui.turn.style.top = (calendar_xy[view.turn >> 1][1] + 94) + "px"
+	ui.end.style.left = (calendar_xy[view.end][0] + 91 - 52) + "px"
+	ui.end.style.top = (calendar_xy[view.end][1] + 94) + "px"
 
 	ui.held_york.textContent = `${view.held1} Held`
 	ui.held_lancaster.textContent = `${view.held2} Held`
diff --git a/rules.js b/rules.js
index 492ddbf..b39bfc8 100644
--- a/rules.js
+++ b/rules.js
@@ -535,7 +535,7 @@ function get_lord_calendar(lord) {
 }
 
 function set_lord_cylinder_on_calendar(lord, turn) {
-	if (turn < 0) turn = 0
+	if (turn < 1) turn = 1
 	if (turn > 16) turn = 16
 	set_lord_locale(lord, CALENDAR + turn)
 }
diff --git a/tools/layout.svg b/tools/layout.svg
index 221f71c..f5cf298 100644
--- a/tools/layout.svg
+++ b/tools/layout.svg
@@ -37,17 +37,29 @@
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="1.7203598"
-     inkscape:cx="899.81112"
-     inkscape:cy="1510.9419"
+     showgrid="true"
+     inkscape:zoom="1.5362746"
+     inkscape:cx="799.00859"
+     inkscape:cy="450.88239"
      inkscape:window-width="1920"
      inkscape:window-height="1057"
      inkscape:window-x="-8"
      inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:current-layer="g8"
-     inkscape:document-rotation="0" />
+     inkscape:document-rotation="0"
+     inkscape:snap-object-midpoints="false"
+     inkscape:snap-bbox="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="false"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-nodes="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid131" />
+  </sodipodi:namedview>
   <g
      inkscape:groupmode="layer"
      inkscape:label="Image"
@@ -55,11 +67,13 @@
     <image
        sodipodi:absref="/home/tor/src/rally/public/plantagenet/map75.png"
        xlink:href="../map75.png"
-       width="1275"
-       height="1650"
-       preserveAspectRatio="none"
+       inkscape:svg-dpi="1"
+       style="image-rendering:pixelated"
+       sodipodi:insensitive="true"
        id="image10"
-       sodipodi:insensitive="true" />
+       preserveAspectRatio="none"
+       height="1650"
+       width="1275" />
     <rect
        style="fill:#000000;fill-opacity:0.378049"
        id="rect785"
@@ -918,134 +932,134 @@
        y="748.80194"
        inkscape:label="North Sea" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:1.26755"
        id="rect1101"
-       width="64.571655"
-       height="155.37808"
-       x="1247.4283"
-       y="258.07095"
+       width="310"
+       height="52"
+       x="938"
+       y="423"
        inkscape:label="box16" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983431"
        id="rect347"
-       width="103.01522"
-       height="162.60246"
-       x="200.34895"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="204"
+       y="38"
        inkscape:label="box1"
        ry="0" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983428"
        id="rect349"
-       width="103.01523"
-       height="162.60246"
-       x="303.36417"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="306"
+       y="38"
        inkscape:label="box2"
        ry="0" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:1.00197"
        id="rect351"
-       width="99.238983"
-       height="162.60246"
-       x="406.37939"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="408"
+       y="38"
        inkscape:label="box3" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.98469"
        id="rect353"
-       width="102.75162"
-       height="162.60246"
-       x="505.61841"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="510"
+       y="38"
        inkscape:label="box4" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.978644"
        id="rect355"
-       width="104.02521"
-       height="162.60246"
-       x="608.37"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="612"
+       y="38"
        inkscape:label="box5" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.988282"
        id="rect357"
-       width="102.00527"
-       height="162.60246"
-       x="734.6142"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="734"
+       y="38"
        inkscape:label="box6" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.988285"
        id="rect359"
-       width="102.00527"
-       height="162.60246"
-       x="836.61945"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="836"
+       y="38"
        inkscape:label="box7" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.988283"
        id="rect361"
-       width="102.00529"
-       height="162.60246"
-       x="938.62469"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="938"
+       y="38"
        inkscape:label="box8" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:1.00331"
        id="rect363"
-       width="98.975388"
-       height="162.60246"
-       x="1040.63"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="1040"
+       y="38"
        inkscape:label="box9" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.988286"
        id="rect365"
-       width="102.00532"
-       height="162.60246"
-       x="1139.6053"
-       y="33.706673"
+       width="100"
+       height="162"
+       x="1142"
+       y="38"
        inkscape:label="box10" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.986867"
        id="rect367"
-       width="107.05499"
-       height="155.37872"
-       x="734.6142"
-       y="258.07031"
+       width="100"
+       height="162"
+       x="734"
+       y="260"
        inkscape:label="box11" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:1.03699"
        id="rect372"
-       width="96.955528"
-       height="155.37872"
-       x="841.66919"
-       y="258.07031"
+       width="100"
+       height="162"
+       x="836"
+       y="260"
        inkscape:label="box12" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:1.011"
        id="rect374"
-       width="102.00529"
-       height="155.37872"
-       x="938.62469"
-       y="258.07031"
+       width="100"
+       height="162"
+       x="938"
+       y="260"
        inkscape:label="box13" />
     <rect
-       style="fill:#000000;fill-opacity:0.378049"
+       style="fill:#000000;fill-opacity:0.378049;stroke-width:0.956998"
        id="rect376"
-       width="113.84265"
-       height="155.37872"
-       x="1040.63"
-       y="258.07031"
+       width="100"
+       height="162"
+       x="1040"
+       y="260"
        inkscape:label="box14" />
     <rect
-       style="display:inline;fill:#000000;fill-opacity:0.378049"
+       style="display:inline;fill:#000000;fill-opacity:0.378049;stroke-width:1.05907"
        id="rect380"
-       width="92.955688"
-       height="155.37872"
-       x="1154.4727"
-       y="258.07031"
+       width="100"
+       height="162"
+       x="1142"
+       y="260"
        inkscape:label="box15" />
   </g>
 </svg>