Merge pull request #242 from MichaelEbert/miscFixes

separate map links
MichaelEbert · Nov 30, 2022 · b659000 · b659000
2 parents 59b4719 + e0d2bf7
commit b659000
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 30 deletions.
diff --git a/guide.js b/guide.js
@@ -17,23 +17,14 @@ function init(){
 		loadProgressFromCookie();
 		if(settings.remoteShareCode){
 			if(!document.getElementById("spectateBanner")){
-				let spectateBanner = document.createElement("SPAN");
-				spectateBanner.innerText = "Spectating ⟳";
-				spectateBanner.id = "spectateBanner";
-				spectateBanner.style.backgroundColor = "#90FF90";
-				spectateBanner.title = "last updated "+settings.shareDownloadTime+". Click to refresh."
-				spectateBanner.addEventListener("click", function(){
-					spectateBanner.innerText = "Reloading...";
-					sharing.startSpectating(false, true).then(()=>{
-						spectateBanner.innerText = "Spectating ⟳";
-						spectateBanner.title = "last updated "+settings.shareDownloadTime+". Click to refresh.";
-					});
-				})
+				let spectateBanner = sharing.createSpectateBanner();
 				document.getElementById("topbar").appendChild(spectateBanner);
-
 			}
 		}
 		replaceElements();
+		if(settings.spectateAutoRefresh == true){
+			sharing.startSpectating(false, true);
+		}
 	});
 }
 

diff --git a/js/cellGenerator.mjs b/js/cellGenerator.mjs
@@ -115,7 +115,13 @@ function createLinkElement(cell, linkName, format){
 
     //construct link name
     if(format & CELL_FORMAT_NAMELINK_CHECK_OFF){
-        linky.innerText = "❔";
+        if(!(format & CELL_FORMAT_NAMELINK_LINK_MAP)){
+            //TODO: move this to outer function, pass in display name + link instead of using display name to create link
+            linky.innerText = "❔";
+        }
+        else{
+            linky.innerText = linkName;
+        }
         linky.classList.add("itemHelp");
     }
     else{
@@ -316,7 +322,8 @@ function initSingleCell(cell, extraColumnName, format = CELL_FORMAT_CHECKLIST){
     //help icon
     if((format & CELL_FORMAT_NAMELINK_CHECK_OFF) && (format & CELL_FORMAT_NAMELINK_ENABLE)){
         let htmlHelp;
-        let linky = createLinkElement(cell, usableName, format);
+
+        let linky = createLinkElement(cell, usableName, format & ~CELL_FORMAT_NAMELINK_LINK_MAP);
         if(!COPYING){
             rowhtml.appendChild(linky);
         }
@@ -327,6 +334,23 @@ function initSingleCell(cell, extraColumnName, format = CELL_FORMAT_CHECKLIST){
             }
             htmlHelp.replaceWith(linky);
         }
+        if(cell.x != null && cell.y != null){
+            let mapLink = createLinkElement(cell, "🗺️", format | CELL_FORMAT_NAMELINK_LINK_MAP);
+            if(!COPYING){
+                rowhtml.appendChild(mapLink);
+            }
+            else if(rowhtml.children[indices.MAP] == null){
+                rowhtml.appendChild(mapLink);
+            }
+            else{
+                rowhtml.children[indices.MAP].replaceWith(mapLink);
+            }
+        }
+        else{
+            if(rowhtml.children[indices.MAP] != null){
+                rowhtml.children[indices.MAP].remove();
+            }
+        }
     }
 
     // update data tree
@@ -475,5 +499,7 @@ function Indices(format){
     if((format & CELL_FORMAT_NAMELINK_CHECK_OFF) && (format & CELL_FORMAT_NAMELINK_ENABLE)){
         this.HELP = index;
         index++;
+        this.MAP = index;
+        index++;
     }
 }
diff --git a/js/obliviondata.mjs b/js/obliviondata.mjs
@@ -323,3 +323,5 @@ function findCell(formId, classHint = null){
 	}
 	return cell;
 }
+
+window.findCell = findCell;
diff --git a/js/sharing.mjs b/js/sharing.mjs
@@ -7,7 +7,7 @@ import { decompressSaveData } from "./userdata.mjs";
 import { loadProgressFromCookie, saveCookie, loadCookie } from "./userdata.mjs";
 
 // ==============
-export {initShareSettings, generateSaveKey, uploadSave, downloadSave, uploadCurrentSave, startSpectating, stopSpectating, setRemoteUrl};
+export {initShareSettings, generateSaveKey, uploadSave, downloadSave, uploadCurrentSave, startSpectating, stopSpectating, setRemoteUrl, createSpectateBanner};
 
 /**
  * checks to make sure that the global settings object has required properties for sharing.
@@ -210,7 +210,7 @@ async function startSpectating(notifyOnUpdate = true, updateGlobalSaveData = tru
 		return downloadSave(downloadUrl)
 		.then((dl)=>{
 			if(dl){
-				//we can't save teh date object so we convert it to a pretty print string here
+				//we can't serialize the date object so we convert it to a pretty print string here
 				let dlTime = new Date();
 				settings.shareDownloadTime = dlTime.toDateString() + " " + dlTime.toTimeString().substring(0,8);
 				saveCookie("settings",settings);
@@ -253,4 +253,34 @@ function setRemoteUrl(event)
 	startSpectating();
 }
 
+/**
+ * Create a "spectating" banner element
+ * @returns html element to control spectating.
+ */
+function createSpectateBanner(){
+	let spectateBanner = document.createElement("SPAN");
+	spectateBanner.innerText = "Spectating ⟳";
+	spectateBanner.id = "spectateBanner";
+	spectateBanner.style.backgroundColor = "#90FF90";
+	spectateBanner.title = "Last updated "+settings.shareDownloadTime+". Click to refresh."
+	spectateBanner.addEventListener("click", function(){
+		// childNodes[0] because that's the #text fragment. can't do innerText because the cancel button is there as well.
+		spectateBanner.childNodes[0].nodeValue = "Reloading...";
+		startSpectating(false, true).then(()=>{
+			spectateBanner.childNodes[0].nodeValue = "Spectating ⟳";
+			spectateBanner.title = "Last updated "+settings.shareDownloadTime+". Click to refresh.";
+		});
+	});
+
+	let spectateCancelButton = document.createElement("SPAN");
+	spectateCancelButton.innerText = "🗙";
+	spectateCancelButton.title = "Cancel spectating";
+	spectateCancelButton.addEventListener("click", function(){
+		stopSpectating();
+		spectateBanner.remove();
+	});
+	spectateBanner.appendChild(spectateCancelButton);
+
+	return spectateBanner;
+}
 
diff --git a/main.js b/main.js
@@ -28,20 +28,8 @@ function init(){
 		}
 		if(settings.remoteShareCode){
 			if(!document.getElementById("spectateBanner")){
-				let spectateBanner = document.createElement("SPAN");
-				spectateBanner.innerText = "Spectating ⟳";
-				spectateBanner.id = "spectateBanner";
-				spectateBanner.style.backgroundColor = "#90FF90";
-				spectateBanner.title = "last updated "+settings.shareDownloadTime+". Click to refresh."
-				spectateBanner.addEventListener("click", function(){
-					spectateBanner.innerText = "Reloading...";
-					sharing.startSpectating(false, true).then(()=>{
-						spectateBanner.innerText = "Spectating ⟳";
-						spectateBanner.title = "last updated "+settings.shareDownloadTime+". Click to refresh.";
-					});
-				});
+				let spectateBanner = sharing.createSpectateBanner();
 				document.getElementById("topbar").appendChild(spectateBanner);
-
 			}
 			if(settings.spectateAutoRefresh == true){
 				sharing.startSpectating(false, true);

diff --git a/map.html b/map.html
@@ -180,6 +180,13 @@ <h3>How do random gates work?</h3>
 			//TODO fix. or move all this stuff into another js file.  or something.
 			document.getElementById("mapShowPrediscovered").addEventListener('change',()=>{map.draw();});
 			progress.recalculateProgress();
+
+			if(settings.remoteShareCode){
+				if(!document.getElementById("spectateBanner") && document.getElementById("topbar") != null){
+					let spectateBanner = sharing.createSpectateBanner();
+					document.getElementById("topbar")?.appendChild(spectateBanner);
+				}
+			}
 		});
 	}).call(window);
-Original file line number
+Diff line change
@@ Expand Up / @@ -323,3 +323,5 @@ function findCell(formId, classHint = null){ @@
     	}
     	return cell;
     }
+    window.findCell = findCell;