Further improvements

web/_css/style.css

@@ -565,12 +565,16 @@ #drawControls > div > * {
 	margin-bottom: 5px;
 }
 
-#drawControls > div > * > * {
+#drawControls .inline {
+	display: flex
+}
+
+#drawControls .inline > * {
 	flex-grow: 1;
 	margin-right: 5px;
 }
 
-#drawControls > div > * > *:last-child {
+#drawControls .inline > *:last-child {
 	margin-right: 0;
 }
 
@@ -1327,7 +1331,8 @@ #periods {
 .period-group {
 	background-color: #888;
 	border: 1px black solid;
-	padding: .5em
+	padding: 0.5em;
+	margin-bottom: 0.5em
 }
 
 .period-group[data-active="true"] {
@@ -1343,6 +1348,14 @@ #periods .period-visible {
 	margin-bottom: 0;
 }
 
+#periods #periodsStatus:empty {
+	display: none
+}
+
+#periods #periodsStatus {
+	font-size: 0.8em
+}
+
 #drawControls p {
 	margin-bottom: 0.5em;
 }

web/_js/draw.js

@@ -23,9 +23,11 @@ var entryId = 0
 var objectInfoBox = document.getElementById("objectInfo");
 var hintText = document.getElementById("hint");
 
+var periodsStatus = document.getElementById('periodsStatus')
 var periodGroups = document.getElementById('periodGroups')
 var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
-	
+var periodsAdd = document.getElementById('periodsAdd')	
+
 var exportButton = document.getElementById("exportButton");
 var cancelButton = document.getElementById("cancelButton");
 
@@ -276,10 +278,7 @@ function initDraw(){
 		if(path.length > 0 && drawing){
 			undoHistory.push(path.pop());
 			redoButton.disabled = false;
-			if(path.length == 0){
-				undoButton.disabled = true;
-			}
-			render(path);
+			updatePath()
 		}
 	}
 
@@ -287,16 +286,13 @@ function initDraw(){
 		if(undoHistory.length > 0 && drawing){
 			path.push(undoHistory.pop());
 			undoButton.disabled = false;
-			if(undoHistory.length == 0){
-				redoButton.disabled = true;
-			}
-			render(path);
+			updatePath()
 		}
 	}
 
 	function finish(){
 		drawing = false;
-		render(path);
+		updatePath()
 		objectInfoBox.style.display = "block";
 		objectDraw.style.display = "none";
 		hintText.style.display = "none";
@@ -311,9 +307,6 @@ function initDraw(){
 	function reset(){
 		updatePath([])
 		undoHistory = [];
-		finishButton.disabled = true;
-		undoButton.disabled = true; // Maybe make it undo the cancel action in the future
-		redoButton.disabled = true;
 		drawing = true;
 		objectInfoBox.style.display = "none";
 		objectDraw.style.display = "block";
@@ -327,7 +320,7 @@ function initDraw(){
 
 	function back(){
 		drawing = true;
-		render(path);
+		updatePath()
 		objectInfoBox.style.display = "none";
 		objectDraw.style.display = "block";
 		hintText.style.display = "block";
@@ -470,6 +463,11 @@ function initDraw(){
 		updatePeriodGroups()
 	})
 
+	periodsAdd.addEventListener('click', () => {
+		pathWithPeriods.push([defaultPeriod, []])
+		initPeriodGroups()
+	})
+
 }
 
 function isOnPeriod(start = parseInt(startPeriodField.value), end = parseInt(endPeriodField.value), current = period) {
@@ -480,6 +478,7 @@ function isOnPeriod(start = parseInt(startPeriodField.value), end = parseInt(end
 function initPeriodGroups() {
 
 	periodGroupElements = []
+	periodGroups.textContent = ''
 
 	console.log(pathWithPeriods)
 
@@ -490,6 +489,8 @@ function initPeriodGroups() {
 		let startPeriodEl = periodGroupEl.querySelector('.period-start')
 		let endPeriodEl = periodGroupEl.querySelector('.period-end')
 		let periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
+		let periodDeleteEl = periodGroupEl.querySelector('.period-delete')
+		let periodDuplicateEl = periodGroupEl.querySelector('.period-duplicate')
 
 		let [start, end] = parsePeriod(period)
 
@@ -510,6 +511,15 @@ function initPeriodGroups() {
 		endPeriodEl.addEventListener('input', () => {
 			updatePeriodGroups()
 		})
+		periodDeleteEl.addEventListener('click', () => {
+			if (pathWithPeriods.length === 1) return
+			pathWithPeriods = pathWithPeriods.filter((_, i) => i !== index)
+			initPeriodGroups()
+		})
+		periodDuplicateEl.addEventListener('click', () => {
+			pathWithPeriods.push([pathWithPeriods[index][0], [...pathWithPeriods[index][1]]])
+			initPeriodGroups()
+		})
 
 		periodGroups.appendChild(periodGroupEl)
 		periodGroupElements.push({
@@ -558,9 +568,7 @@ function updatePeriodGroups() {
 		)
 	})
 
-	console.log('lastActivePathIndex: ' + lastActivePathIndex)
-	console.log('currentActivePathIndex: ' + currentActivePathIndex)
-
+	periodsStatus.textContent = ""
 	if (lastActivePathIndex !== undefined) {
 		if (lastActivePathIndex === currentActivePathIndex) {
 			// just update the path
@@ -573,10 +581,13 @@ function updatePeriodGroups() {
 			]
 			console.log(pathWithPeriods[currentActivePathIndex])
 		} else if (currentActivePathIndex === undefined) {
+			pathWithPeriods[lastActivePathIndex][1] = path
 			updatePath([])
-			console.log(path + 'empty!')
+			periodsStatus.textContent = "No paths available on this period!"
 		} else {
 			// switch the path
+			pathWithPeriods[lastActivePathIndex][1] = path
+			updatePath(pathToActive)
 
 		}
 	} else {
@@ -588,13 +599,14 @@ function updatePeriodGroups() {
 }
 
 function parsePeriod(periodString) {
+	periodString = periodString + ""
 	// TODO: Support for multiple/alternative types of canvas
-	if (period.search('-') + 1) {
-		var [start, end] = period.split('-').map(i => parseInt(i))
+	if (periodString.search('-') + 1) {
+		var [start, end] = periodString.split('-').map(i => parseInt(i))
 		return [start, end]
 	} else {
-		let period = parseInt(periodString)
-		return [period, period]
+		let periodNew = parseInt(periodString)
+		return [periodNew, periodNew]
 	}
 }
 
@@ -603,10 +615,11 @@ function formatPeriod(start, end) {
 	else return start + "-" + end
 }
 
-function updatePath(newPath) {
+function updatePath(newPath = path) {
 	path = newPath
 	render(path)
-	if(path.length >= 3){
-		finishButton.disabled = false;
-	}
+	finishButton.disabled = path.length;
+	undoButton.disabled = path.length == 1; // Maybe make it undo the cancel action in the future
+	// TODO: Able to click finish when one period has it.
+	finishButton.disabled = path.length < 3;
 }

web/index.html

@@ -184,7 +184,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 				<a id="drawBackButton" class="button" href="./">&lt; Back to the Atlas</a>
 				<div id="drawControls">
 					<div id="objectDraw">
-						<div>
+						<div class="inline">
 							<button id="undoButton" disabled>Undo</button>
 							<button disabled id="redoButton">Redo</button>
 						</div>
@@ -195,8 +195,9 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 						</label>
 						<div id="periods">
 							<p>Periods</p>
-							<div id="periodGroups">
-							</div>	
+							<p id="periodsStatus"></p>
+							<div id="periodGroups"></div>
+							<button id="periodsAdd">Add Period</button>	
 						</div>
 					</div>
 					<div id="objectInfo">
@@ -284,7 +285,11 @@ <h2>Donation Links</h2>
 				<input class="period-start" type="range" min="0">
 				<label for="period-end">End Period</label>
 				<input class="period-end" type="range" min="0">
-				<p class="period-visible"></p>	
+				<p class="period-visible"></p>
+				<div class="inline">
+					<button class="period-delete">Delete</button>	
+					<button class="period-duplicate">Duplicate</button>	
+				</div>
 			</div>
 		</template>