issue#9 load functionality

canvasgo.html

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     <script src="goui.js" type="text/javascript"></script>
     <script src="goboard.js" type="text/javascript"></script>
+    <script src="gameStateStorage.js" type="text/javascript"></script>
     <link rel="stylesheet" href="go.css" type="text/css"></link>
     <title>Play Go!</title>
 </head>
@@ -20,6 +21,8 @@
       <input class="command-options" type="radio" name="status" value="white">White</input><br />
       <input class="command-options" type="radio" name="status" value="cap">Capture</input><br />
       <input type="button" value="Pass" name="passBtn" onClick="on_pass()"> 
+      <input type="button" value="Save" name="saveBtn" onClick="saveGame()">
+      <input type="button" value="Load" name="loadBtn" onClick="loadGame()">
     </form>
   </div>
   <canvas id="gocanvas" width="700" height="700"></canvas>

gameStateStorage.js

@@ -0,0 +1,57 @@
+var dataBase;
+var gameState;
+function setupDataBase(){
+    // Create a database open request, named "dataBase", version 1
+    var request = indexedDB.open("dataBase", 1);
+    // Database did NOT already exist, but now created
+    request.onupgradeneeded = function() {
+        console.log("Database needs update");
+        // Save database reference
+        dataBase = request.result;
+        // Check database to see if objectStore exists. if not, create one
+        if (!dataBase.objectStoreNames.contains("gameStateObjectStore")) {
+            console.log("Creating ObjectStore")
+            dataBase.createObjectStore("gameStateObjectStore",{autoIncrement:true});
+        } ;
+    };
+    request.onsuccess = function() {
+        console.log("Successfully opened database")
+        // Save database reference
+        dataBase = request.result;
+    };
+    request.onerror = function(){
+        console.log("ERROR: could not open database")
+    };
+};
+
+function saveGame(){
+    if(confirm("Any previous game saves will be overwritten")){
+        // Make a transaction object that has "read and write" access to the gameStateObjectStore
+        let transaction = dataBase.transaction("gameStateObjectStore", "readwrite");
+        // Make a reference to the gameStateObjectStore
+        let gameStateObjectStore = transaction.objectStore("gameStateObjectStore");
+        // Store the board in gameStateObjectStore for long term storage, with key 1
+        gameStateObjectStore.put(board, 1).onsuccess = (event) => {
+            console.log("successfully saved game state");
+        };
+    }
+};
+
+function loadGame(){
+    // Make a transaction object that has "read" access to the gameStateObjectStore
+    let transaction = dataBase.transaction("gameStateObjectStore", "readonly");
+    // Make a reference to the gameStateObjectStore
+    let gameStateObjectStore = transaction.objectStore("gameStateObjectStore");
+    // Make a get request to the objectStore, to get the gameState using key 1
+    gameStateObjectStore.get(1).onsuccess = (event) => {
+        if(event.target.result){
+            gameState = event.target.result;
+            draw();
+        }else{
+            alert("No game saves were found")
+        }
+    }
+    gameStateObjectStore.onerror = (event) => {
+        console.log("ERROR: Unable to load game");
+    }
+}

goboard.js

@@ -1,12 +1,17 @@
 // Initialize a size by size board with all zeroes, meaning empty.
 function initBoard() {
-  board = new Array(gameSize);
-  for (var i = 0; i < board.length; i++) {
-    board[i] = new Array(gameSize);
-    for (var j = 0; j < board[i].length; j++) {
-      board[i][j] = "cap";
+    // If a gameState was loaded successfully, initilize board with that data. else, initilize an empty board
+    if(gameState){
+        board = gameState;
+    }else{
+        board = new Array(gameSize);
+        for (var i = 0; i < board.length; i++) {
+            board[i] = new Array(gameSize);
+            for (var j = 0; j < board[i].length; j++) {
+            board[i][j] = "cap";
+            }
+        }
     }
-  }
 }
 
 // Set up the board with empty data and refresh the ui.
@@ -29,7 +34,12 @@ function setPositionState(x, y, color) {
 function draw() {
   canv = $("#gocanvas")[0];
   context = canv.getContext("2d");
-  gameSize = parseInt(gup("size")) || 19;
+  // If a gameState has been loaded, set the board size based on the board size of the saved gameState
+  if(gameState){
+      gameSize = gameState[0].length
+  }else{
+    gameSize = parseInt(gup("size")) || 19;
+  }
   cellSize = gameSize > 13 ? 20 : gameSize > 9 ? 30 : 40;
   stoneSize = (cellSize-2)/2;
   borderSize = cellSize;
@@ -38,6 +48,8 @@ function draw() {
   window.addEventListener("mouseup", on_mouseup, false);
 
   clearBoard();
+  // setup database only if it has NOT been initilized already
+  if(!dataBase) setupDataBase();
 }
 
 function gup( name )