From: Ian Jackson <ijackson@chiark.greenend.org.uk>
Date: Mon, 5 Apr 2021 10:38:43 +0000 (+0100)
Subject: JS: Fix movehist arrow ends
X-Git-Tag: otter-0.5.0~181
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~ianmdlvl/git?a=commitdiff_plain;h=9eb64750868c1b83878d63c1a7ab8e065096e8ca;p=otter.git

JS: Fix movehist arrow ends

This dasharray technique was just broken.

Signed-off-by: Ian Jackson <ijackson@chiark.greenend.org.uk>
---

diff --git a/templates/script.ts b/templates/script.ts
index 4aae898c..c4b10079 100644
--- a/templates/script.ts
+++ b/templates/script.ts
@@ -1209,8 +1209,12 @@ function movehist_record(ent: MoveHistEnt) {
   let moved = ent.diff['Moved'];
   if (moved) {
     let d = moved.d;
-    let da =
-	`0 ${MOVEHIST_ENDS} ${d - MOVEHIST_ENDS*2} ${MOVEHIST_ENDS*2}`;
+    let ends = [];
+    for (let end of [0,1]) {
+      let s = (!end ? MOVEHIST_ENDS : d - MOVEHIST_ENDS) / d;
+      ends.push([ (1-s) * old_pos[0] + s * new_pos[0],
+		  (1-s) * old_pos[1] + s * new_pos[1] ]);
+    }
     let g = document.createElementNS(svg_ns,'g');
     let sz = 4;
     let pi = players[ent.held];
@@ -1218,21 +1222,21 @@ function movehist_record(ent: MoveHistEnt) {
     // todo: would be nice to place text variously along arrow, rotated
     let svg = `
       <marker id="${meid}" viewBox="2 0 ${sz} ${sz}" 
-	refX="${sz + MOVEHIST_ENDS}" refY="${sz/2}"
+	refX="${sz}" refY="${sz/2}"
 	markerWidth="${sz + 2}" markerHeight="${sz}"
 	stroke="yellow" fill="none"
 	orient="auto-start-reverse" stroke-linejoin="mitre">
 	<path d="M 0 0 L ${sz} ${sz/2} L 0 ${sz}" />
       </marker>
-      <line x1="${old_pos[0].toString()}"
-	    y1="${old_pos[1].toString()}"
-	    x2="${new_pos[0].toString()}"
-	    y2="${new_pos[1].toString()}"
-	    stroke="yellow"  stroke-dasharray="${da}"
+      <line x1="${ends[0][0].toString()}"
+	    y1="${ends[0][1].toString()}"
+	    x2="${ends[1][0].toString()}"
+	    y2="${ends[1][1].toString()}"
+	    stroke="yellow"
 	    stroke-width="1" pointer-events="none"
 	    marker-end="url(#${meid})" />
-      <text x="${((old_pos[0] + new_pos[0]) / 2).toString()}"
-	    y="${((old_pos[1] + new_pos[1]) / 2).toString()}"
+      <text x="${((ends[0][0] + ends[1][0]) / 2).toString()}"
+	    y="${((ends[0][1] + ends[1][1]) / 2).toString()}"
 	    font-size="5" pointer-events="none"
 	    stroke-width="0.1">${nick}</text>
     `;