saving help

creator/index.php

@@ -173,7 +173,7 @@
 								<input id='art-artist' type='text' class='input' oninput='artistEdited(this.value);' placeholder='Artist'>
 							</div>
 						</div>
-						<div class='readable-background padding'>
+						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale)</h5>
 							<div class='input-grid margin-bottom'>
 								<input id='art-x' type='number' class='input' oninput='artEdited();' value=0>
@@ -184,6 +184,10 @@
 								<button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
 							</div>
 						</div>
+						<div class='readable-background padding'>
+							<h5 class='padding margin-bottom input-description'>Clears the art, making it blank</h5>
+							<button class='input margin-bottom' onclick='uploadArt(blank.src);'>Remove Art</button>
+						</div>
 					</div>
 					<div id='creator-menu-setSymbol' class='hidden'>
 						<div class='readable-background padding margin-bottom'>
@@ -208,7 +212,7 @@
 								<p class='padding'>Generally, however, the set codes used by <a class='underline' href='https://scryfall.com/sets' target='_blank'>Scryfall</a> are accurate.</p>
 							</div>
 						</div>
-						<div class='readable-background padding'>
+						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Position/scale your Set Symbol (X, Y, Scale)</h5>
 							<div class='input-grid margin-bottom'>
 								<input id='setSymbol-x' type='number' class='input' oninput='setSymbolEdited();' value=0>
@@ -219,6 +223,10 @@
 								<button class='input' onclick='resetSetSymbol();'>Reset Set Symbol</button>
 							</div>
 						</div>
+						<div class='readable-background padding'>
+							<h5 class='padding margin-bottom input-description'>Clears the Set Symbol, making it blank</h5>
+							<button class='input margin-bottom' onclick='uploadSetSymbol(blank.src);'>Remove Set Symbol</button>
+						</div>
 					</div>
 					<div id='creator-menu-watermark' class='hidden'>
 					<div class='readable-background padding margin-bottom'>
@@ -276,7 +284,7 @@
 								<input id='watermark-opacity' type='number' class='input' oninput='watermarkEdited();' value=40 step=1 min=0 max=100>
 							</div>
 						</div>
-						<div class='readable-background padding'>
+						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Position/scale your watermark (X, Y, Scale)</h5>
 							<div class='input-grid margin-bottom'>
 								<input id='watermark-x' type='number' class='input' oninput='watermarkEdited();' value=0>
@@ -287,6 +295,10 @@
 								<button class='input' onclick='resetWatermark();'>Reset Watermark</button>
 							</div>
 						</div>
+						<div class='readable-background padding'>
+							<h5 class='padding margin-bottom input-description'>Clears the watermark, making it blank</h5>
+							<button class='input margin-bottom' onclick='uploadWatermark(blank.src);'>Remove Watermark</button>
+						</div>
 					</div>
 					<div id='creator-menu-bottomInfo' class='hidden'>
 						<div class='readable-background padding'>
@@ -314,10 +326,14 @@
 							<select id='load-card-options' class='input margin-bottom' type='text' onchange='loadCard(this.value);'></select>
 							<button class='input' onclick='deleteCard();'>Delete selected card</button>
 						</div>
-						<div class='readable-background padding'>
+						<div class='readable-background padding margin-bottom'>
 							<h5 class='padding margin-bottom input-description'>Download/upload lists of saved cards</h5>
 							<button class='input margin-bottom' onclick='downloadSavedCards();'>Download all saved cards</button>
-							<input type='file' accept='.cardconjurer' class='input' oninput='uploadSavedCards(event);'>
+							<input type='file' accept='.cardconjurer,.txt' class='input' oninput='uploadSavedCards(event);'>
+						</div>
+						<div class='readable-background padding'>
+							<h5 class='padding margin-bottom input-description'>Deletes ALL saved cards</h5>
+							<button class='input margin-bottom' onclick='deleteSavedCards();'>Delete all saved cards</button>
 						</div>
 					</div>
 					<div id='creator-menu-tutorial' class='hidden'>
@@ -353,5 +369,5 @@
 			</h4>
 		</div>
 	</div>
-	<script defer src='/js/creator.js'></script>
+	<script defer src='/js/creator-1.js'></script>
 <?php include('../globalHTML/footer.php'); ?>

js/creator-1.js

@@ -233,7 +233,6 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) {
 			manaSymbol.backs = item[2];
 			for (var i = 0; i < item[2]; i ++) {
 				loadManaSymbols([manaSymbol.path.replace(manaSymbol.name, 'back' + i + item[1])])
-				// console.log(manaSymbol.path.replace(manaSymbol.name, 'back' + i + item[1]))
 			}
 		}
 		manaSymbol.width = size[0];
@@ -1195,12 +1194,6 @@ function saveCard(saveFromFile) {
 			}
 		}
 	}
-	if (!cardKeys.includes(cardKey)) {
-		cardKeys.push(cardKey);
-		cardKeys.sort();
-		localStorage.setItem('cardKeys', JSON.stringify(cardKeys));
-		loadAvailableCards(cardKeys);
-	}
 	if (saveFromFile) {
 		cardToSave = saveFromFile.data;
 	} else {
@@ -1210,12 +1203,23 @@ function saveCard(saveFromFile) {
 			frame.masks.forEach(mask => delete mask.image);
 		});
 	}
+	try {
 		localStorage.setItem(cardKey, JSON.stringify(cardToSave));
+		if (!cardKeys.includes(cardKey)) {
+			cardKeys.push(cardKey);
+			cardKeys.sort();
+			localStorage.setItem('cardKeys', JSON.stringify(cardKeys));
+			loadAvailableCards(cardKeys);
+		}
+	} catch (error) {
+		notify('You have exceeded your 5MB of local storage, and your card has failed to save. If you would like to continue saving cards, please download all saved cards, then delete all saved cards to free up space.<br><br>Local storage is most often exceeded by uploading large images directly from your computer. If possible/convenient, using a URL avoids the need to save these large images.<br><br>Apologies for the inconvenience.');
+	}
 }
 async function loadCard(selectedCardKey) {
 	document.querySelector('#frame-list').innerHTML = null;
 	card = {};
 	card = JSON.parse(localStorage.getItem(selectedCardKey));
+	if (card) {
 		document.querySelector('#info-number').value = card.infoNumber;
 		document.querySelector('#info-rarity').value = card.infoRarity;
 		document.querySelector('#info-set').value = card.infoSet;
@@ -1264,6 +1268,9 @@ async function loadCard(selectedCardKey) {
 			bottomInfoEdited();
 			watermarkEdited();
 		}
+	} else {
+		notify(selectedCardKey + ' failed to load.')
+	}
 }
 function deleteCard() {
 	var keyToDelete = document.querySelector('#load-card-options').value;
@@ -1276,6 +1283,14 @@ function deleteCard() {
 		loadAvailableCards(cardKeys);
 	}
 }
+function deleteSavedCards() {
+	if (confirm('WARNING:\n\nALL of your saved cards will be deleted! If you would like to save these cards, please make sure you have downloaded them first. There is no way to undo this.')) {
+		var cardKeys = JSON.parse(localStorage.getItem('cardKeys'));
+		cardKeys.forEach(key => localStorage.removeItem(key));
+		localStorage.setItem('cardKeys', JSON.stringify([]));
+		loadAvailableCards([]);
+	}
+}
 async function downloadSavedCards() {
 	var cardKeys = JSON.parse(localStorage.getItem('cardKeys'));
 	if (cardKeys) {