1 files changed, 24 insertions, 2 deletions
diff --git a/sketch.html b/sketch.html
index fe22e7a..c519820 100644
--- a/sketch.html
+++ b/sketch.html
@@ -58,6 +58,8 @@ user-select: none;
   <div id="brush" class="brush_tools">Brush</div>
   <div id="eraser" class="brush_tools">Eraser</div>
 </div>
+<input type="checkbox" id="show_grid" checked>Show grid?</input>
+<button id="drawing_finished">DONE</button>
 </body>
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
@@ -125,6 +127,8 @@ function BrushTools(){
 }
 
 
+
+
 function GridCanvas(){
   var gridcanvas = this;
   this.rows = 10;
@@ -174,6 +178,13 @@ function GridCanvas(){
       this.container.append(row)
     }
   }
+  this.toggleGrid = function(){
+    if ($("#show_grid").prop("checked")){
+      $(".canvas_cell").css("border","1px solid black");
+    }else{
+      $(".canvas_cell").css("border","none");
+    }
+  }
   this.serialize = function(){
     var matrix = [];
     for (var i = 0; i < this.rows; i++){
@@ -183,7 +194,11 @@ function GridCanvas(){
       });
       matrix.push(row_storage);
     }
-    return matrix;
+    return JSON.stringify({ 
+      "matrix" : matrix, 
+      "width" : this.cols, 
+      "height" : this.rows, 
+    })
   }
 }
 $("#cols").change(function(){
@@ -197,12 +212,19 @@ $("#rows").change(function(){
 
 
 
-
 $(document).ready(function(){
   
   c = new GridCanvas();
   brush_tools = new BrushTools();
   c.initialize($("#cols").val(), $("#rows").val());
+  $("#show_grid").change(function(){
+    c.toggleGrid();
+  });
+  $("#drawing_finished").click(function(){
+     
+    console.log(c.serialize());
+  });
+  
 });
 
 </script>