Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 2 commits
  • 4 files changed
  • 0 commit comments
  • 1 contributor
Showing with 312 additions and 0 deletions.
  1. +35 −0 canvas.js
  2. +92 −0 index.html
  3. +68 −0 models.js
  4. +117 −0 mouseTracks.js
View
35 canvas.js
@@ -0,0 +1,35 @@
+function Canvas (width, height){
+ this.width = width;
+ this.height = height;
+ this.el = document.createElement('canvas');
+ this.el.setAttribute('width', width);
+ this.el.setAttribute('height',height);
+}
+
+Canvas.prototype.addToDom = function(id){
+ document.getElementById(id).appendChild(this.el);
+};
+
+Canvas.prototype.drawLine = function (x1,y1,x2,y2,color,radius){
+ if (typeof color == "number"){
+ radius = color;
+ color = null;
+ }
+ if (this.el.getContext){
+ var ctx = this.el.getContext('2d');
+ ctx.lineWidth = radius || 2;
+ ctx.strokeStyle=color || "black";
+ ctx.lineCap = "round";
+ ctx.beginPath();
+ ctx.moveTo(x1,y1);
+ ctx.lineTo(x2,y2);
+ ctx.stroke();
+ }
+};
+
+Canvas.prototype.clear = function (){
+ if (this.el.getContext){
+ var ctx = canvas.getContext('2d');
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+};
View
92 index.html
@@ -0,0 +1,92 @@
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ <title>hello-backbonejs</title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="node_modules/backbone/node_modules/underscore/underscore.js"></script>
+ <script type="text/javascript" src="node_modules/backbone/backbone.js"></script>
+ <script type="text/javascript" src="node_modules/mustache/mustache.js"></script>
+ </head>
+ <body>
+<div class="left">
+<div id="gameNotifications"></div>
+<div id="gameContainer"></div>
+<div class="right">
+ <div id="scoreBoard"></div>
+ <div id="gameButtons"></div>
+</div>
+
+
+ <form method="post" action="/">
+ <input type="text" name="name1" />
+ <input type="text" name="name2" />
+ <input type="submit" value="Submit" />
+ </form>
+
+
+ <div id='canContainer'></div>
+ <div id='canToo'></div>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script src="./canvas.js"></script>
+ <script src="./mouseTracks.js"></script>
+ <script src="./models.js"></script>
+
+<!--
+ <script src="/socket.io/socket.io.js"></script>
+ <script>
+ var socket = io.connect('http://localhost');
+ socket.on('news', function (data) {
+ console.log(data);
+ socket.emit('my other event', { my: 'data' });
+ });
+ </script>
+ -->
+ <script type="text/javascript">
+
+ var can = new Canvas(500,500);
+ can.addToDom('canContainer');
+ can.drawLine(10,10,400,400,10);
+ can.drawLine(300,10,200,450,'red');
+ can.drawLine(100,10,10,100,'violet',40);
+ can.addToDom('canContainer');
+
+
+ var canToo = new Canvas(1000,1000);
+ canToo.addToDom('canToo');
+ canToo.drawLine(0,0,1000,0);
+ canToo.drawLine(0,0,0,1000);
+ canToo.drawLine(1000,0,1000,1000);
+ canToo.drawLine(0,1000,1000,1000);
+
+ tracker = new MouseTracks('canContainer');
+ trackerToo = new MouseTracks('canToo');
+
+ reporterFunction = function(line){
+ console.log('aLine:',line);
+ can.drawLine(line.x1,line.y1,line.x2,line.y2);
+ };
+
+ reporterFunctionToo = function(line){
+ console.log('bLine:',line);
+ canToo.drawLine(line.x1,line.y1,line.x2,line.y2);
+ };
+
+
+ var game = new Game({playerType: "mazeMaker",player1UserName:'greg',player2UserName:"Scott"});
+ var gameView = new GameView({model:game});
+ gameView.render();
+
+ var notificationView = new NotificationView({model:game, el:"#gameNotifications"});
+ notificationView.render();
+
+
+ var deInit = tracker.initMode("dragOnClick",reporterFunction);
+ var deInitoo = trackerToo.initMode("line",reporterFunctionToo);
+
+
+
+
+ </script>
+ </body>
+ </html>
View
68 models.js
@@ -0,0 +1,68 @@
+reporterFunction = function(line){
+ console.log('Line:',line);
+ can.drawLine(line.x1,line.y1,line.x2,line.y2);
+};
+
+var Game = Backbone.Model.extend({
+ initialize: function(params){
+ this.points = {pathFinder: 0, mazeMaker: 0};
+ this.mazePath = [];
+ this.trailPath = [];
+ this.playerType = params.playerType; //'mazeMaker', 'pathFinder', 'watcher'
+ //this.inputMode;
+ this.player1UserName = params.player1UserName;
+ this.player2UserName = params.player2UserName;
+ this.gameNumber = 1;
+ }
+});
+
+var GameView = Backbone.View.extend({
+ //model: Game, // this seems to not be the common way to bind model and view
+ el: $("#gameContainer"),
+ initialize: function(){
+ this.canvas = new Canvas(700,400);
+ this.tracker = new MouseTracks('gameContainer');
+ },
+ render: function(){
+ var self = this;
+ this.reportLine = function(line){
+ console.log('cLine:',line);
+ self.canvas.drawLine(line.x1,line.y1,line.x2,line.y2);
+ };
+ this.canvas.addToDom('gameContainer');
+ this.tracker.initMode("drag", this.reportLine);
+ }
+});
+
+var NotificationView = Backbone.View.extend({
+ initialize: function(){
+ this.boo = "boo";
+ },
+ render: function() {
+ var template = '<h2>Match: {{player1UserName}} VS. {{player2UserName}}</h2> <h3>Game: {{gameNumber}}4 </h3> <h3>State: {{playerType}}</h3> ';
+ //var context = _.extend(this.model.toJSON()));
+ console.log('model',this.model);
+ //console.log('context',context);
+ console.log("toJSON",this.model.toJSON());
+ $(this.el).html(Mustache.to_html(template, this.model.toJSON()));
+ return this;
+ }
+});
+
+// var ButtonView = Backbone.View.extend({
+// initialize:function(){
+// //bindings
+
+// } ,
+// events:{
+// 'click selector' : 'func'
+// },
+// render: function() {
+// var template = '\
+// <li id="movie_{{ cid }}"><span class="title">{{ title }}</span> <span>{{ format }}</span> <a href="#movies/remove/{{ cid }}">x</a></li>\
+// ';
+// var context = _.extend(this.model.toJSON(), {cid: this.model.cid});
+// $(this.el).html(Mustache.to_html(template, context));
+// return this;
+// }
+// })
View
117 mouseTracks.js
@@ -0,0 +1,117 @@
+//START: from quirksmode.org/js/findpos.html
+function findPos(obj) {
+ var curleft = 0,
+ curtop = 0;
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while (obj = obj.offsetParent);
+ }
+ return {x:curleft,y:curtop};
+}
+//END: from quirksmode.org/js/findpos.html
+
+function addEvent(element,e,foo){
+ if ( element.addEventListener ) {
+ element.addEventListener( e, foo, false );
+ // If IE event model is used
+ }else if ( element.attachEvent ) {
+ element.attachEvent( e, foo );
+ }
+}
+
+function removeEvent(element,e,foo){
+ if ( element.removeEventListener ) {
+ element.removeEventListener( e, foo, false );
+ // If IE event model is used
+ }else if ( element.detachEvent ) {
+ element.detachEvent( e, foo );
+ }
+}
+
+function MouseTracks (el){
+ this.el = document.getElementById(el); //jQuery Identifier, string
+}
+
+MouseTracks.prototype.onUp = function (e){
+ if(this.prev)
+ console.log(this.reporterFunction);
+
+ this.reporterFunction({ x1:this.prev.x - this.offSet.x,
+ y1:this.prev.y - this.offSet.y,
+ x2:e.pageX - this.offSet.x,
+ y2:e.pageY - this.offSet.y
+ });
+ removeEvent(this.el, "mousemove", this.onDragFun);
+ removeEvent(document, "mouseup", this.onUpFun);
+};
+
+MouseTracks.prototype.onDown = function(e){
+ var thisMouseTrack = this;
+ this.prev = null;
+ if(this.mode == "line"){
+ this.prev = {x:e.pageX, y:e.pageY};
+ }else{
+ //We are in onDrag mode, every movement of the mouse will be reported untill mouseup
+ addEvent(thisMouseTrack.el , 'mousemove', thisMouseTrack.onDragFun);
+ }
+ addEvent(document , 'mouseup', thisMouseTrack.onUpFun);
+};
+
+MouseTracks.prototype.onDrag = function(e){
+ if (this.prev === null){
+ this.prev = {x:e.pageX, y:e.pageY};
+ return;
+ }
+ console.log(this.reporterFunction);
+
+ this.reporterFunction({ x1:this.prev.x - this.offSet.x,
+ y1:this.prev.y - this.offSet.y,
+ x2:e.pageX - this.offSet.x,
+ y2:e.pageY - this.offSet.y
+ });
+ this.prev = {x:e.pageX, y:e.pageY};
+};
+
+MouseTracks.prototype.initFunctions = function (){
+ var thisMouseTrack = this;
+ this.onDragFun = function(e){
+ thisMouseTrack.onDrag(e);
+ };
+
+ this.onDownFun = function(e){
+ thisMouseTrack.onDown(e);
+ };
+
+ this.onUpFun = function(e){
+ thisMouseTrack.onUp(e);
+ };
+};
+
+MouseTracks.prototype.initMode = function (mode, reporterFunction){
+ this.offSet = findPos(this.el) ;
+ this.initFunctions();
+ this.prev = null;
+ var thisMouseTrack = this;
+ this.mode = mode;
+ this.reporterFunction = reporterFunction;
+
+ console.log(this.reporterFunction);
+
+ if(mode=='drag'){
+ addEvent(thisMouseTrack.el , 'mousemove', thisMouseTrack.onDragFun);
+ }else if (mode == 'line' || mode == 'dragOnClick'){
+ addEvent(thisMouseTrack.el , 'mousedown', thisMouseTrack.onDownFun);
+ }
+ else{
+ console.log("MODE NOT FOUND. You entered the mode: '"+mode+"'. \nAccepted modes are: drag', 'dragOnClick' and 'line'");
+ }
+
+ return function (){
+ //De-Initialization function for MouseTracks;
+ removeEvent(thisMouseTrack.el , 'mousemove', thisMouseTrack.onDragFun);
+ removeEvent(thisMouseTrack.el , 'mousedown', thisMouseTrack.onDownFun);
+ removeEvent(document , 'mouseup', thisMouseTrack.onUpFun);
+ };
+};

No commit comments for this range

Something went wrong with that request. Please try again.