Save puzzles with a cookie.

Added sidebar for saving options.

Author: intrepidcoder

Encoding.js

@@ -36,8 +36,6 @@ function encode(input) {
 		}
 
 		result += str;
-		// console.log(result);
-		// 
 	}
 	return result;
 
@@ -51,35 +49,30 @@ function decode(input) {
 	var num;
 	var factor;
 
+	if (input.length !== 243) {
+		return;
+	}
+	
+	submitGivens();
+	
 	for (var i = 0; i < 81; i++) {
 		currentCell = cells[i];
 
 		factor = 1;
 		num = parseInt(input.slice(i * 3, i * 3 + 3), 36);
-		// num = 35;
-		
-		
-		
-		// console.log(num);
-		
-		
 
 		for (var j = 0; j < 9; j++) {
 			factor = 2;
 			currentCell.pencilmarks[j] = !!(num % factor);
 
-			// console.log(num + " " + num % factor);
-			
 			num = (num / factor) | 0;
 
 		}
 
 		factor = 10;
 		currentCell.setValue(num % factor);
-		// console.log(num + " " + currentCell.value + " " + currentCell.candidatesElement.innerHTML);
 		num = (num / factor) | 0;
 
-		// console.log(num);
 		factor = 2;
 		currentCell.isGiven = !!(num % factor);
 		num = (num / factor) | 0;
@@ -94,26 +87,29 @@ function decode(input) {
 
 			}
 		}
-		// currentCell.value = num % factor;
-		// num -= factor * ;
-		
-		// console.log(num);
-		
 
 		// Update pencilmarks display.
 		currentCell.candidatesElement.innerHTML = currentCell.getPencilmarkString();
 	}
 
 }
 
-// window.onmousewheel = function() {
-	// var testStr = "01j00x01j6rk01m01m77k0187pc0136rk01300e7pc04q01b5xs01b08m0bk5jc00m04y4ch02u02s01203d55003500q00r7pc02y06g04q03c4qq7pc77k00o55002w4ch01477k00901t6cg00b0225xs09800e08e5xs0124ch04q04q08c0bw6rk08d08901107s6rk05408d4qq0590a308977k07u55001m08908801l";
-	// var testStr = "5jc5xs01s4qq01007809w4ch77k5500764ch08g04w5jc09u08w09u6cg07603k0746rk4ch07a07g5xs5xs77k4qq0940e96cg09009008w7pc4ch6cg55000i01u02877k5jc2tc00c00c77k00g07408l4qq08139c6rk00k00x7pc0065jc00g0034qq00c7pc01t03o5xs05d6cg01t4ch6cg00g01s5jc05e0cy09c550";
+function loadFromCookie() {
+	var values = document.cookie.replace(/(?:(?:^|.*;\s*)state\s*\=\s*((?:[^;](?!;))*[^;]?).*)|.*/, '$1');
+	
+	if (values) {
+		decode(values);
+	} else {
+		alert("No current save exists.");
+	}
+}
 
-	// console.log(encode());
-	// decode(testStr);
+function saveToCookie() {
+	var values = document.cookie.replace(/(?:(?:^|.*;\s*)state\s*\=\s*((?:[^;](?!;))*[^;]?).*)|.*/, '$1');
 
-	// console.log(cells[0].pencilmarks);
 
+	if (values && confirm("A save already exists. Are you sure you want to overwrite it?")) {
+		document.cookie = 'state=' + encode() + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
+	}
 
-// }
+}

Puzzle.js

@@ -676,3 +676,6 @@ function Puzzle(givens) {
 	}
 	// Initialize cells.
 } */
+
+
+// d.cookie = 'labelWidth=' + w + '; expires=Fri, 31 Dec 9999 23:59:59 GMT"'

Sudoku.css

@@ -32,6 +32,7 @@ a:active {
 	position: absolute;
 	top: 0px;
 	width: 100%;
+	min-width: 675px;
 }
 
 #top_bar ul {
@@ -69,7 +70,7 @@ a:active {
 	margin-right: 0px;
 	margin-bottom: 0px;
 	margin-left: 8px;
-	width: 400px;
+	width: 425px;
 }
 
 #begin_solving {
@@ -116,6 +117,27 @@ a:active {
 	padding: 0px;
 }
 
+#side_bar {
+	width: 450px;
+	z-index: 2;
+	position: fixed;
+	top: 0px;
+	right: -450px;
+	height: 100%;
+	background-color: #AAA;
+	/* cursor: w-resize; */
+	overflow: auto;
+}
+
+#side_bar_close {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	font-weight: bold;
+	font-family: Arial, sans-serif;
+	font-size: 10pt;
+}
+
 .cell {
 	border-bottom-style: none;
 	border-color: black;

Sudoku.js

@@ -220,8 +220,12 @@ function clearCells() {
 }
 
 function pastePuzzle() {
-	var values = window.prompt("Enter a sudoku puzzle. Use \"0\", \".\", \"*\", or \"_\" for empty cells.\nAll other characters are ignored.\nAlternatively, load a previously saved puzzle.");
+	// var values = window.prompt("Enter a sudoku puzzle. Use \"0\", \".\", \"*\", or \"_\" for empty cells.\nAll other characters are ignored.\nAlternatively, load a previously saved puzzle.");
+	var values = document.getElementById("paste_puzzle").value;
 
+	if (!values) {
+		return;
+	}
 
 	if (values.length === 81) {
 		values = values.replace(/[.*_]/g, "0");
@@ -261,6 +265,13 @@ function savePuzzle() {
 
 }
 
+function saveLoadPuzzle() {
+	document.getElementById('side_bar').style.right='0px';
+	
+	document.getElementById("copy_puzzle").value = cells.toString().replace(/[^0-9]/g, "");
+	document.getElementById("export_save").value = encode();
+}
+
 function highlight(value) {
 	if (value === 0) {
 		for (var i = 0; i < 81; i++) {
@@ -311,6 +322,14 @@ function submitGivens() {
 		document.getElementById("grid_table").style.position = "static";
 		document.getElementById("grid_table").style.marginTop = "8px";
 		document.getElementById("grid_table").style.marginLeft = "8px";
+		document.getElementById("side_bar").style.right = "-450px";
+		
+		document.getElementById("import_save_button").title = "This option is disabled when a sudoku puzzle is in progress.";
+		document.getElementById("import_save_button").disabled = true;
+		document.getElementById("paste_puzzle_button").title = "This option is disabled when a sudoku puzzle is in progress.";
+		document.getElementById("paste_puzzle_button").disabled = true;
+		document.getElementById("load_cookie").title = "This option is disabled when a sudoku puzzle is in progress.";
+		document.getElementById("load_cookie").disabled = true;
 
 		cells.solution = puzzle.toString();
 		for (var i = 0; i < 81; i++) {
@@ -628,5 +647,37 @@ window.onload = function() {
 	}
 
 	updatePencilmarks();
-
+	
+	
+	// var sideBar = document.body.appendChild(document.createElement("div"));
+	// var sideBarDragPos = 0;
+	
+	// sideBar.id = "side_bar";
+	// sideBar.style.width = "450px";
+	
+	// sideBar.onmousedown = function() {
+		// sideBarDragPos = window.event.clientX;
+	// }
+	
+	// sideBar.onmousemove = function() {
+		// if (sideBarDragPos) {
+			// if (sideBarDragPos - window.event.clientX < 0) {
+				// sideBar.style.right = (sideBarDragPos - window.event.clientX) + "px";
+			// }
+		// }
+	// }
+	
+	// sideBar.onmouseup = function() {
+		// sideBar.style.right = -parseInt(sideBar.style.width) + "px";
+		// sideBarDragPos = 0;
+	// }
+	
+	// var currentElement = sideBar.appendChild(document.createElement("div"));
+	
+	// currentElement.className = "small_header";
+	// currentElement.textContent = "Paste Puzzle:";
+	
+	// currentElement = sideBar.appendChild(document.createElement("input"));
+	// currentElement.type = "text";
+	// currentElement.id = "paste_puzzle";
 };

index.html

@@ -12,21 +12,23 @@
 			<ul>
 				<li>To begin, find a sudoku puzzle and input its values below.</li>
 				<li style="float: right;"><a href="help.html" target="_blank" title="Open the documentation page.">Help/About</a></li>
-				<li style="float: right;" id="paste_puzzle"><a href="javascript:void(0);" onclick="pastePuzzle();" title="Paste values to place into the puzzle. Note: this overwrites existing values.">Paste puzzle</a></li>
-				<li style="float: right;" id="save_puzzle"><a href="javascript:void(0);" onclick="savePuzzle();" title="Generate a text string that stores the current clues, values, and pencilmarks.">Save</a></li>
+				<!-- <li style="float: right;"><a href="javascript:void(0);" onclick="pastePuzzle();" title="Paste values to place into the puzzle. Note: this overwrites existing values.">Paste puzzle</a></li> -->
+				<!-- <li style="float: right;" id="save_puzzle"><a href="javascript:void(0);" onclick="savePuzzle();" title="Generate a text string that stores the current clues, values, and pencilmarks.">Save</a></li> -->
+				<li style="float: right;" id="load_puzzle"><a href="javascript:void(0);" onclick="saveLoadPuzzle();" title="View options to save or load a sudoku puzzle.">Save/Load</a></li>
 			</ul>
 		</div>
-		
+
 		<table id="grid_table">
 			<tbody></tbody>
 		</table>
-		
+
 		<div id="controls">
 			<form name="controls_form">
 				<!-- <div class="small_header" id="solving_status" title="Enter the sudoku puzzle's clues and click SUBMIT CLUES to begin solving.">Entering Clues...</div> -->
 				<div class="small_header"><a href="help.html" target="_blank" title="Open the documentation page.">Help/About</a></div>
 				<div class="small_header"><a href="javascript:void(0);" title="Delete all cell values, reset pencil marks, and remove highlighting." onclick="clearCells();">Clear Cells</a></div>
-				<div class="small_header"><a href="javascript:void(0);" title="Generate a text string that stores the current clues, values, and pencilmarks." onclick="savePuzzle();">Save</a></div>
+				<!-- <div class="small_header"><a href="javascript:void(0);" title="Generate a text string that stores the current clues, values, and pencilmarks." onclick="savePuzzle();">Save</a></div> -->
+				<div class="small_header"><a href="javascript:void(0);" title="View options to save or load a sudoku puzzle." onclick="saveLoadPuzzle();">Save/Load</a></div>
 				<!-- <ul>
 					<li>
 						<input type="button" name="clear_cells" value="Clear cells" title="Delete all clues and values, reset pencil marks, and remove highlighting." onclick="clearCells();" />
@@ -36,7 +38,7 @@
 						<input type="button" name="paste_puzzle" id="paste_puzzle" value="Paste puzzle" title="Paste values to place into the puzzle. Note: this overwrites existing values." onclick="pastePuzzle();" />
 					</li>
 				</ul> -->
-				
+
 				<div class="small_header">Cell Highlighting:</div>
 				<ul>
 					<li>
@@ -52,7 +54,7 @@
 						<input type="button" name="highlight_none" value="Clear" class="highlight_button" title="Clear all highlighting." onclick="highlight(0);" />
 					</li>
 				</ul>
-				
+
 				<div class="small_header">Pencil Marks:</div>
 				<ul>
 					<li>
@@ -69,7 +71,7 @@
 						<input type="button" name="reset_pencilmarks" value="Reset" title="Add all pencil marks to empty cells." onclick="clearPencilmarks();" />
 					</li>
 				</ul>
-				
+
 				<div class="small_header">Validation:</div>
 				<ul>
 					<li>
@@ -78,7 +80,7 @@
 					</li>
 					<li></li>
 				</ul>
-				
+
 				<div class="small_header">Guessing tools:</div>
 <!-- 				<ul>
 					<li>
@@ -121,7 +123,7 @@
 						</tr>
 					</tbody>
 				</table>
-				
+
 				<div class="small_header">Solution/Hints:</div>
 				<ul>
 					<li>
@@ -134,9 +136,55 @@
 
 			</form>
 		</div>
-		
+
 		<div id="begin_solving">
 			<input type="button" value="Begin Solving" id="begin_solving_button" class="large_button" title="Submit the entered numbers as clues and begin solving the sudoku puzzle." onclick="submitGivens();" onmouseover="this.classList.add('large_button_hover'); this.classList.remove('large_button');" onmousedown="this.classList.add('large_button_hover'); this.classList.remove('large_button');" onmouseout="this.classList.add('large_button'); this.classList.remove('large_button_hover');" />
 		</div>
+		
+		<div id="side_bar">
+			<div id="side_bar_close"><a href="javascript:void(0);" onclick="document.getElementById('side_bar').style.right='-450px';">Close</a></div>
+			
+			<div class="small_header">Paste Puzzle:</div>
+			<ul>
+				<li>Enter a sudoku puzzle. Use &quot;0&quot;, &quot;.&quot;, &quot;*&quot;, or &quot;_&quot; for empty cells. All other characters are ignored. This overwrites existing values.</li>
+				<li>
+					<input type="text" id="paste_puzzle" style="width: 300px;" title="Paste values to place into the puzzle. Note: this overwrites existing values."/>
+					<input type="button" id="paste_puzzle_button" value="Paste Puzzle" onclick="pastePuzzle();" title="Paste values to place into the puzzle. Note: this overwrites existing values." />
+				</li>
+			</ul>
+			
+			<div class="small_header">Copy Puzzle:</div>
+			<ul>
+				<li>Copy the current values of the sudoku puzzle as an 81 digit text string.</li>
+				<li>
+				<input type="text" id="copy_puzzle" style="width: 300px;" title="Copy the current values of the sudoku puzzle." onclick="this.value = cells.toString().replace(/[^0-9]/g, ''); javascript:select();" />
+				</li>
+			</ul>
+
+			<div class="small_header">Export State:</div>
+			<ul>
+				<li>Copy this text string and paste it into a new text file to store the current state of the clues, values, and pencilmarks.</li>
+				<li>
+				<input type="text" id="export_save" style="width: 300px;" title="This text string stores the current state of the clues, values, and pencilmarks." onclick="this.value = encode(); javascript:select();" />
+				</li>
+			</ul>
+			
+			<div class="small_header">Import State:</div>
+			<ul>
+				<li>Reload a saved sudoku puzzle by pasting the text string below.</li>
+				<li>
+					<input type="text" id="import_save" style="width: 300px;" title="Reload an previous save. Note: this overwrites existing values."/>
+					<input type="button" value="Import Save" id="import_save_button" onclick="decode(document.getElementById('import_save').value);" title="Reload an previous save. Note: this overwrites existing values." />
+				</li>
+			</ul>
+			
+			<div class="small_header">Save/Load Cookie:</div>
+			<ul>
+				<li>
+					<input type="button" value="Save to Cookie" id="save_cookie" onclick="saveToCookie();" title="Save the current state of the clues, values, and pencilmarks to a cookie."/>
+					<input type="button" value="Load from Cookie" id="load_cookie" onclick="loadFromCookie();" title="Load the sudoku puzzle saved to a cookie if one is present." />
+				</li>
+			</ul>
+		</div>
 	</body>
 </html>