finishing mode

3 files changed, 188 insertions, 0 deletions

diff --git a/js/display_result.js b/js/display_result.js
new file mode 100644
index 0000000..48e0d94
--- /dev/null
+++ b/js/display_result.js
@@ -0,0 +1,3 @@
+$("#display_result").show();
+$("#display_result").hide();
+
diff --git a/js/overlay.js b/js/overlay.js
new file mode 100644
index 0000000..809b69b
--- /dev/null
+++ b/js/overlay.js
@@ -0,0 +1,3 @@
+$("#overlay > .close").click(function(){
+  $("#overlay").hide();
+});
diff --git a/js/sketch.js b/js/sketch.js
new file mode 100644
index 0000000..f341d00
--- /dev/null
+++ b/js/sketch.js
@@ -0,0 +1,182 @@
+//dragging event 
+
+var COLUMNS_MAX = 20;
+var ROWS_MAX = 20;
+var isDragging = false;
+$("body").mousedown(function() {
+    $(window).mousemove(function() {
+        isDragging = true;
+        $(window).unbind("mousemove");
+    });
+}).mouseup(function() {
+    var wasDragging = isDragging;
+    isDragging = false;
+    $(window).unbind("mousemove");
+    if (!wasDragging) { //was clicking
+    }
+});
+
+var c;
+
+window.active_tool = "brush";
+var brush_tools; 
+
+
+
+function BrushTools(){
+  var brushtools = this;
+  this.brush = $("#brush");
+  this.eraser = $("#eraser");
+  this.brush_tools = $(".brush_tools");
+  this.active_css = {
+    "border" : "1px solid black",
+    "background" : "gray",
+    "color" : "white",
+  },
+  this.inactive_css = {
+    "border" : "1px solid gray",
+    "background" : "whitesmoke",
+    "color" : "black",
+  };
+  this.activate = function(elem){
+    $(elem).css(this.active_css);
+    window.active_tool = $(elem).attr("id");
+  };
+  this.deactivate = function(elem){
+    $(elem).css(this.inactive_css);
+  };
+//  this.cursors = {
+//    "brush" : "img/brush.png",
+//    "eraser" : "img/eraser.png",
+//  };
+  this.brush_tools.click(function(){
+    var that = this;
+    window.active_tool = $(this).attr("id");
+    brushtools.activate(that);
+    brushtools.brush_tools.each(function(){
+      if(this != that){
+        brushtools.deactivate(this);
+      }
+    }); 
+//   $("#canvas_wrapper").css(
+//     "cursor" , "url("+brushtools.cursors[window.active_tool]+")"
+//   ) 
+  });
+}
+
+
+
+
+function GridCanvas(){
+  var gridcanvas = this;
+  this.rows = 10;
+  this.cols = 10;
+  this.current_rows = [];
+  this.container = $("#canvas_wrapper");
+  this.paint = function(elem){
+    $(elem).attr("painted", "1");
+    $(elem).css("background", "black");
+  };
+  this.erase = function(elem){
+    $(elem).attr("painted", "0");
+    $(elem).css("background", "white");
+  };
+  this.initialize = function(cols, rows){
+    this.container.html("");
+    this.rows = (rows > 0) ? rows : 1;
+    this.cols = (cols > 0) ? cols : 1;
+    if (this.rows > ROWS_MAX){
+      this.rows = ROWS_MAX;
+    }
+    if (this.cols > COLUMNS_MAX){
+      this.cols = COLUMNS_MAX;
+    }
+    this.cols = cols;
+    for (var i = 0; i< this.rows; i++){
+      var row = document.createElement("div");
+      $(row).attr("id", "row_"+i)
+      $(row).addClass("canvas_row")
+      for (var j = 0; j< this.cols; j++){
+        var cell = document.createElement("span");
+        $(cell).addClass("canvas_cell")
+        $(cell).attr("painted", "0")
+        $(cell).addClass("column_"+j)
+        $(cell).html("&nbsp;")
+        $(cell).click(function(){
+          if (window.active_tool == 'brush'){
+            gridcanvas.paint(this);
+          }else if(window.active_tool == 'eraser'){
+            gridcanvas.erase(this);
+          }
+        });
+        $(cell).mouseover(function(){
+          if (isDragging){
+            if (window.active_tool == 'brush'){
+              gridcanvas.paint(this);
+            }else if(window.active_tool == 'eraser'){
+              gridcanvas.erase(this);
+            }
+          }
+        });
+        $(row).append(cell)
+      }
+      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++){
+      var row_storage = [];
+      $("#row_"+i+"> span").each(function(){
+         row_storage.push($(this).attr("painted"));
+      });
+      matrix.push(row_storage);
+    }
+    return JSON.stringify({ 
+      "matrix" : matrix, 
+      "width" : this.cols, 
+      "height" : this.rows, 
+    })
+  }
+}
+$("#cols").change(function(){
+  var cols = $(this).val()
+  c.initialize(cols, c.rows);
+});
+$("#rows").change(function(){
+  var rows = $(this).val()
+  c.initialize(c.cols, rows);
+});
+
+
+
+$(document).ready(function(){
+$("#create_your_own").click(function(){
+  $("#overlay > .close").html("CANCEL");
+  $("#draw").show();
+ 
+});
+$("#overlay > .close").click(function(){
+  console.log("hello");
+  $("#draw").hide();
+});
+  
+  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());
+  });
+  
+});