Full visualisation now working!

2 files changed, 20 insertions, 8 deletions

diff --git a/viewcompetition.css b/viewcompetition.css
index 0fc53f5..2eb2b22 100644
--- a/viewcompetition.css
+++ b/viewcompetition.css
@@ -74,3 +74,6 @@ div#movelist tr:first-child > td{
 div#movelist tr:nth-child(odd){background-color:#e4e4e4;}
 div#movelist tr:nth-child(even){background-color:#fff;}
 div#movelist tr:nth-child(n+2):hover{background-color:#bbf;cursor:pointer;}
+div#movelist tr.selected{
+	background-color:#afa;
+}
diff --git a/viewcompetition.js b/viewcompetition.js
index ab05c3c..be44b52 100644
--- a/viewcompetition.js
+++ b/viewcompetition.js
@@ -51,10 +51,14 @@ function init(){
 	td.setAttribute("colspan","3");
 	td.innerHTML=" ";
 	tr.appendChild(td);
-	tr.addEventListener("click",function(ev){
-		if(moveidx==0)return;
-		while(moveidx>0)prevmove(true);
-	});
+	(function(tr){
+		tr.addEventListener("click",function(ev){
+			if(moveidx==0)return;
+			while(moveidx>0)prevmove(true);
+			setselectedmovelistline(0);
+		});
+	})(tr);
+	tr.classList.add("selected");
 	movelisttbody.appendChild(tr);
 
 	MOVES.forEach(function(mv,i){
@@ -78,6 +82,7 @@ function init(){
 			if(moveidx==target)return;
 			while(moveidx<target)nextmove(true);
 			while(moveidx>target)prevmove(true);
+			setselectedmovelistline(i+1);
 		};})(i+1));
 
 		movelisttbody.appendChild(tr);
@@ -116,6 +121,12 @@ function init(){
 	canclick=true;
 }
 
+function setselectedmovelistline(i){
+	var movelist=document.getElementById("movelist");
+	movelist.querySelectorAll("tr.selected")[0].classList.remove("selected");
+	document.getElementById("movelist").getElementsByTagName("tr")[i+1].classList.add("selected");
+}
+
 function arrowfor(dir){
 	return "&#x"+[2191,2197,2192,2198,2193,2199,2190,2196][dir]+";";
 }
@@ -166,10 +177,6 @@ function setprevenabled(en){
 	document.getElementById("prevmovebtn").disabled=!en;
 }
 
-function displaycurrentmove(){
-	
-}
-
 function nextmove(notimeout){
 	var newidx;
 	if(moveidx==MOVES.length||!canclick)return false;
@@ -208,6 +215,7 @@ function nextmove(notimeout){
 	moveidx++;
 	setprevenabled(true);
 	if(moveidx==MOVES.length)setnextenabled(false);
+	if(!notimeout)setselectedmovelistline(moveidx);
 	return true;
 }
 function prevmove(notimeout){
@@ -249,6 +257,7 @@ function prevmove(notimeout){
 
 	setnextenabled(true);
 	if(moveidx==0)setprevenabled(false);
+	if(!notimeout)setselectedmovelistline(moveidx);
 	return true;
 }