-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch.js
127 lines (100 loc) · 3.19 KB
/
sketch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var gridCols;
var gridRows;
function drawGrid( cols, rows ) {
gridCols = cols;
gridRows = rows;
var totWidth = $("#canvas").width();
var cellSize = totWidth / gridCols;
var numCells = gridCols * gridRows;
for ( var i = 0; i < numCells; i++ ) {
var col = i % gridCols + 1;
var row = Math.floor( i/gridCols + 1 );
$("#canvas .container").append('<div class="cell" id="cell-'+col+'-'+row+'"><div></div></div>');
}
$(".cell").css({
"width": cellSize+"px",
"height": cellSize+"px"
});
if ($("input#ctrl-mouse").prop('checked')) {
enableMouse();
} else {
$("body").off( "keydown" );
enableKeys();
}
}
function clearGrid() {
$(".cell").css({ "background-color":"white"});
}
function defineGrid() {
var gridX = prompt("Grid Width:");
if( gridX != null && gridX != "" & gridX != 0) {
var gridY = prompt("Grid Height:");
}
if( gridY != null && gridY != "" && gridY != 0 ) {
$("#canvas .container").empty();
drawGrid(gridX,gridY);
}
}
function enableMouse() {
$("body").off( "keydown" );
$(".cell.active").removeClass("active");
$(".cell").hover(function(){
$(this).css({ "background-color":"black"});
});
}
function enableKeys() {
$(".cell").off("mouseenter mouseleave");
var midX = Math.floor(gridCols/2);
var midY = Math.floor(gridRows/2);
$("#cell-"+midX+"-"+midY).addClass("active");
$("body").keydown(function(event) {
var key = event.keyCode;
var active = $(".cell.active").attr("id").match(/^cell-(\d+)-(\d+)$/);
switch (key) {
case 37: //left
console.log( active[1] +" > 1", parseInt(active[1]) > 1 );
if( parseInt(active[1]) > 1 ){
console.log("left to "+"#cell-"+(parseInt(active[1])-1)+"-"+active[2]);
$(".cell.active").css({"background-color":"black"}).removeClass("active");
$("#cell-"+(parseInt(active[1])-1)+"-"+active[2]).addClass("active");
}
break;
case 38: //up
console.log( active[2] +" > 1", parseInt(active[2]) > 1 );
if( parseInt(active[2]) > 1 ){
console.log("up to "+"#cell-"+active[1]+"-"+(parseInt(active[2])-1));
$(".cell.active").css({"background-color":"black"}).removeClass("active");
$("#cell-"+active[1]+"-"+(parseInt(active[2])-1)).addClass("active");
}
break;
case 39: //right
console.log( active[1] +" < "+ gridCols, parseInt(active[1]) < gridCols );
if( parseInt(active[1]) < gridCols ){
console.log("right to "+"#cell-"+(parseInt(active[1])+1)+"-"+active[2]);
$(".cell.active").css({"background-color":"black"}).removeClass("active");
$("#cell-"+(parseInt(active[1])+1)+"-"+active[2]).addClass("active");
}
break;
case 40: //down
console.log( active[2] +" < "+ gridRows, parseInt(active[2]) < gridRows );
if( parseInt(active[2]) < gridRows ){
console.log("down to "+"#cell-"+active[1]+"-"+(parseInt(active[2])+1));
$(".cell.active").css({"background-color":"black"}).removeClass("active");
$("#cell-"+active[1]+"-"+(parseInt(active[2])+1)).addClass("active");
}
break;
}
});
}
function gridInit() {
drawGrid(64,32);
$("input[name='controls']").change(function(e){
console.log($(this).val());
if ( $(this).val() == "mouse") {
enableMouse();
} else {
enableKeys();
}
$(e.target).blur();
});
}