Discord and Reddit fields, bug fix on drawing new entries, auto-resize text area

web/_css/style.css

@@ -114,6 +114,18 @@ textArea {
 	box-sizing: border-box;
 }
 
+textarea {
+	min-height: 35px;
+}
+
+#drawControlsContainer textarea {
+	overflow-y: hidden;
+	resize: none;
+	overflow-wrap: normal;
+	overflow-x: auto;
+	scrollbar-width: thin;
+}
+
 input[type="text"] {
 	height: 25px;
 }
@@ -622,26 +634,16 @@ #objectInfo input {
 	width: 100%;
 }
 
-#descriptionField {
-	width: 220px;
-	height: 70px;
+#drawControlsContainer #descriptionField {
+	min-height: 70px;
+	overflow-wrap: anywhere;
+	overflow-x: hidden;
 }
 
 #infoButtons {
-	display: flex;
 	margin-top: 10px;
 }
 
-#infoButtons button {
-	width: 50px;
-	flex-grow: 1;
-	margin-right: 10px;
-}
-
-#infoButtons button:last-child {
-	margin-right: 0;
-}
-
 .overlay {
 	position: absolute;
 	top: 0;

web/_js/draw.js

@@ -36,7 +36,7 @@ var exportCloseButton = document.getElementById("exportCloseButton");
 var exportBackButton = document.getElementById("exportBackButton")
 
 var path = [];
-var center = [];
+var center = [1000, 1000];
 
 var pathWithPeriods = []
 var periodGroupElements = []
@@ -44,6 +44,13 @@ var periodGroupElements = []
 var disableDrawingOverride = false
 var drawing = true;
 
+[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
+	el.addEventListener("input", function() {
+		this.style.height = "auto";
+		this.style.height = (this.scrollHeight) + "px"
+	})
+})
+
 function initDraw(){
 	
 	wrapper.classList.remove('listHidden')
@@ -188,17 +195,17 @@ function initDraw(){
 		}
 	});
 
-	document.getElementById("websiteField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			exportJson();
-		}
-	});
+	// document.getElementById("websiteField").addEventListener("keyup", function(e){
+	// 	if(e.key == "Enter"){
+	// 		exportJson();
+	// 	}
+	// });
 
-	document.getElementById("subredditField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			exportJson();
-		}
-	});
+	// document.getElementById("subredditField").addEventListener("keyup", function(e){
+	// 	if(e.key == "Enter"){
+	// 		exportJson();
+	// 	}
+	// });
 
 	exportButton.addEventListener("click", function(e){
 		exportJson();
@@ -292,13 +299,16 @@ function initDraw(){
 	}
 
 	function finish(){
+		if (objectInfoBox.style.display === "block") return
 		updatePath()
 		drawing = false;
 		disableDrawingOverride = true;
 		objectInfoBox.style.display = "block";
 		objectDraw.style.display = "none";
 		hintText.style.display = "none";
-		document.getElementById("nameField").focus();
+		[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
+			if (el.value) el.style.height = (el.scrollHeight) + "px"
+		})			
 		// if (isOnPeriod()) {
 		// 	periodVisbilityInfo.textContent = ""
 		// } else {
@@ -401,12 +411,11 @@ function initDraw(){
 			];
 			var coords_p = document.getElementById("coords_p");
 			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
-	
 		}
 	}
 
 	const getEntry = id => {
-		const entries = atlas.filter(entry => entry.id === id)
+		const entries = atlasAll.filter(entry => entry.id === id)
 		if (entries.length === 1) return entries[0]
 		return {}
 	}
@@ -419,7 +428,7 @@ function initDraw(){
 		document.getElementById("descriptionField").value = entry.description
 		document.getElementById("websiteField").value = entry.links.website.join('\n')
 		document.getElementById("subredditField").value = entry.links.subreddit.map(sub => '/r/' + sub).join('\n')
-		path = entry.path
+		pathWithPeriods = Object.entries(entry.path)
 		redoButton.disabled = true;
 		undoButton.disabled = false;
 		entryId = params.get('id')
@@ -436,12 +445,6 @@ function initDraw(){
             })
         }
 
-		if (Array.isArray(path)) {
-			pathWithPeriods.push([defaultPeriod, path])
-		} else if (typeof path === "object") {
-			pathWithPeriods = Object.entries(path)
-		}
-
 	} else {
 		pathWithPeriods.push([defaultPeriod, []])
 	}
@@ -562,11 +565,13 @@ function initPeriodGroups() {
 		})
 	})
 	// console.log(periodGroupTemplate)
+
 	updatePeriodGroups()
 
 }
 
 function updatePeriodGroups() {
+	// console.log('updatePeriodGroups')
 	var pathToActive = []
 	var lastActivePathIndex
 	var currentActivePathIndex 
@@ -601,6 +606,8 @@ function updatePeriodGroups() {
 		)
 	})
 
+	// console.log('updatePeriodGroups searcher', pathToActive, lastActivePathIndex, currentActivePathIndex, period)
+
 	periodsStatus.textContent = ""
 
 	// if (currentActivePathIndexes.length > 1) {
@@ -611,7 +618,7 @@ function updatePeriodGroups() {
 	// 	currentActivePathIndex = undefined
 	// } 
 	
-	console.log(lastActivePathIndex)
+	// console.log(lastActivePathIndex)
 	if (lastActivePathIndex !== undefined) {
 		if (lastActivePathIndex === currentActivePathIndex) {
 			// just update the path
@@ -633,6 +640,7 @@ function updatePeriodGroups() {
 
 		}
 	} else {
+		console.log('direct active', pathToActive)
 		updatePath(pathToActive)
 	}
 
@@ -657,14 +665,19 @@ function formatPeriod(start, end) {
 	else return start + "-" + end
 }
 
-function updatePath(newPath = path) {
-	console.log('updatePath')
-	path = newPath
-	center = calculateCenter(path)
+function updatePath(newPath) {
+	// console.log('updatePath', path, newPath)
+	if (newPath) path = newPath
+	// console.log('updatePath', path, newPath)
+	if (path.length > 3) center = calculateCenter(path)
 	render(path)
 	undoButton.disabled = path.length == 0; // Maybe make it undo the cancel action in the future
 	undoHistory = []
 
+	updateErrors()
+}
+
+function updateErrors() {
 	if (path.length === 0) {
 		periodsStatus.textContent = "No paths available on this period!"
 	}
@@ -673,12 +686,14 @@ function updatePath(newPath = path) {
 
 	if (allErrors.length > 0) {
 		periodsStatus.textContent = `Problems detected. Please check the groups indicated by red.`
-		if (conflicts.length > 0) periodsStatus.textContent += `\nConflicts on ${conflicts.join(', ')}.`
+		if (conflicts.length > 0) {
+			periodsStatus.textContent += `\nConflicts on ${conflicts.join(', ')}.`
+			currentActivePathIndex = undefined
+		}
 		if (invalidPaths.length > 0) periodsStatus.textContent += `\nInsufficient paths on ${invalidPaths.join(', ')}.`
 		allErrors.forEach(index => {
 			periodGroupElements[index].periodGroupEl.dataset.status = "error"
 		})
-		if (conflicts.length > 0) currentActivePathIndex = undefined
 		finishButton.disabled = true
 	} else {
 		periodsStatus.textContent = ``
@@ -694,9 +709,8 @@ function updatePath(newPath = path) {
 			else periodGroupEl.dataset.status = ""
 		})
 	}
-
 }
-
+ 
 function getConflicts() {
 
 	let conflicts = new Set()
@@ -731,8 +745,8 @@ function getErrors() {
 		if (path.length < 3) invalidPaths.push(i)
 	})
 	
-	console.log('conflicts', conflicts)
-	console.log('invalid paths', invalidPaths)
+	// console.info('conflicts', conflicts)
+	// console.info('invalid paths', invalidPaths)
 
 	return [conflicts, invalidPaths, [...new Set([...conflicts, ...invalidPaths])]]
 }

web/_js/infoblock.js

@@ -78,7 +78,7 @@ function createInfoBlock(entry) {
     entry.links.discord.forEach(link => {
         let websiteLinkElement = document.createElement("a");
         websiteLinkElement.target = "_blank";
-        websiteLinkElement.href = link;
+        websiteLinkElement.href = "https://discord.gg/" + link;
         websiteLinkElement.innerText = "Discord";
         element.appendChild(websiteLinkElement);
     })
@@ -86,7 +86,7 @@ function createInfoBlock(entry) {
     entry.links.wiki.forEach(link => {
         let websiteLinkElement = document.createElement("a");
         websiteLinkElement.target = "_blank";
-        websiteLinkElement.href = link;
+        websiteLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_');
         websiteLinkElement.innerText = "Wiki Article";
         element.appendChild(websiteLinkElement);
     })

web/_js/main.js

@@ -497,7 +497,7 @@ async function init(){
 
 		zoomOrigin[0] = scaleZoomOrigin[0]*zoom;
 		zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
-		
+
 		applyView();
 		updateLines();
 	}

web/index.html

@@ -209,7 +209,11 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 						<textarea id="websiteField" placeholder="https://example.com"></textarea>
 						<label for="subredditField">Subreddit</label>
 						<textarea id="subredditField" placeholder="/r/example"></textarea>
-						<div id="infoButtons">
+						<label for="discordField">Discord</label>
+						<textarea id="discordField" placeholder="pJkm23b2nA"></textarea>
+						<label for="wikiField">Wiki</label>
+						<textarea id="wikiField" placeholder="Page Title"></textarea>
+						<div class="inline">
 							<button id="cancelButton">Back</button>
 							<button id="exportButton">OK</button>
 						</div>