From c76e9cd9631bf3c909b88ff68ebc03d38d2fb5d4 Mon Sep 17 00:00:00 2001 From: mattkim Date: Tue, 16 Feb 2016 18:59:13 -0500 Subject: [PATCH 1/3] initial commit --- index.css | 71 +++++++++++++++++++++++++ index.html | 4 +- index.js | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 224 insertions(+), 1 deletion(-) create mode 100644 index.css create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..7044d92 --- /dev/null +++ b/index.css @@ -0,0 +1,71 @@ +.node { + width:50px; + height:50px; + display: inline-block; + margin: 10px; + padding:10px; + cursor:pointer; + background-color: #A0A0A0; +} + +.node span { + font-size:50px; + text-align: center; + visibility: hidden; + display: block; + text-align: center; +} + +.node:hover { + background-color: blue; +} + +.node.active { + background-color: blue; + cursor: default; +} + +.node.active span { + visibility: visible; +} + + +.shake { + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; +} + +@keyframes shake { + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, 60% { + transform: translate3d(4px, 0, 0); + } +} + +.flash { + -webkit-animation: flash linear .5s; + animation: flash linear .5s; +} +@-webkit-keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .1; } + 100% { opacity: 1; } +} +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .1; } + 100% { opacity: 1; } +} \ No newline at end of file diff --git a/index.html b/index.html index 4d20248..51bdb44 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,9 @@ - Memory exercise + Memory exercise + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..82a02f8 --- /dev/null +++ b/index.js @@ -0,0 +1,150 @@ +(function() { + + //helper functions. dont want to use jquery + + function hasClass(el, className) { + if (el.classList) + return el.classList.contains(className) + else + return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')) + } + + function addClass(el, className) { + if (el.classList) + el.classList.add(className) + else if (!hasClass(el, className)) el.className += " " + className + } + + function removeClass(el, className) { + if (el.classList) + el.classList.remove(className) + else if (hasClass(el, className)) { + var reg = new RegExp('(\\s|^)' + className + '(\\s|$)') + el.className=el.className.replace(reg, ' ') + } + } + + //board class + var Board = function(x,y) { + var self = this; + + if (x <= 0) { + throw new Error('Rows must be greater than 0'); + } + if (y <= 0) { + throw new Error('Columsn must be greater than 0'); + } + + if (x*y > 26) { + throw new Error('Currently you can not go higher than alphabet letters. 26 Boxes is Max'); + } + this.x = x; + this.y = y; + + + this.activeItems = []; + this.activeElements = []; + this.allowClick = true; + + //create pieces + this.items = this.randomizeBoardPieces(x,y); + + this.draw(); + + }; + + Board.prototype.draw = function() { + var self = this; + document.write('
'); + this.items.forEach(function(item, index) { + document.write('
' + self.items[index] + '
'); + if ((index+1) % self.y === 0) { + document.write('
'); //close row + document.write('
'); + } + }); + + document.write('
'); + + var memoryNodes = document.getElementsByClassName('node'); + for (var m = 0; m < memoryNodes.length; m++) { + memoryNodes[m].addEventListener('click', function() { + var id = Number.parseInt(this.getAttribute('data-id')); + if (self.allowClick && self.activeItems.indexOf(id) === -1) { + addClass(this, 'active'); + self.selectNode(id, this); + } + + }); + } + }; + + Board.prototype.selectNode = function(index, elem) { + this.activeItems.push(index); + this.activeElements.push(elem); + this.compare(); + }; + + Board.prototype.compare = function() { + var items = this.items, activeItems = this.activeItems, activeElements = this.activeElements; + if (activeItems.length === 2 && items[activeItems[0]] === items[activeItems[1]]) { + this.reset(false); + activeElements.forEach(function(elem) { + addClass(elem, 'flash'); + }); + } else if (activeItems.length == 2) { + + this.reset(true); + } + } + + Board.prototype.randomizeBoardPieces = function(x,y) { + var pieces = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; + var totalNodeSets = x*y/2; + var sets = pieces.splice(0,totalNodeSets); + var nodes = this.shuffleArray(sets.concat(sets)); + return nodes; + } + + Board.prototype.shuffleArray = function(array) { + var i = 0 + , j = 0 + , temp = null + + for (i = array.length - 1; i > 0; i -= 1) { + j = Math.floor(Math.random() * (i + 1)) + temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + return array; + }; + + Board.prototype.reset = function(removeActiveElements) { + var self = this; + self.activeItems = []; + + if (removeActiveElements) { + self.allowClick = false; + + self.activeElements.forEach(function(elem) { + addClass(elem, 'shake'); + console.log('in shake'); + }); + + setTimeout(function() { + self.activeElements.forEach(function(elem) { + removeClass(elem, 'active'); + removeClass(elem, 'shake'); + }); + self.activeElements = []; + self.allowClick = true; + }, 500); + } else { + self.activeElements = []; + } + }; + + var x = new Board(4,4); + +})(); \ No newline at end of file From 4f5afe64d4a33faefddd3c45d3c5f5c537a0f7f9 Mon Sep 17 00:00:00 2001 From: mattkim Date: Tue, 16 Feb 2016 20:17:32 -0500 Subject: [PATCH 2/3] split out display so you can use different displays --- index.css | 2 +- index.html | 6 +- index.js | 181 ++++++++++++++++++++++++++++++++++++++--------------- 3 files changed, 137 insertions(+), 52 deletions(-) diff --git a/index.css b/index.css index 7044d92..a312b39 100644 --- a/index.css +++ b/index.css @@ -68,4 +68,4 @@ 0% { opacity: 1; } 50% { opacity: .1; } 100% { opacity: 1; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 51bdb44..a25417f 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,12 @@ Memory exercise - + Grid: X + +
+ + diff --git a/index.js b/index.js index 82a02f8..0705a8d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,5 @@ (function() { - //helper functions. dont want to use jquery - function hasClass(el, className) { if (el.classList) return el.classList.contains(className) @@ -25,79 +23,58 @@ } //board class - var Board = function(x,y) { - var self = this; - + var Board = function(x,y, drawingBoard) { if (x <= 0) { throw new Error('Rows must be greater than 0'); } if (y <= 0) { throw new Error('Columsn must be greater than 0'); } - + if (x*y % 2 !== 0) { + throw new Error('You really should have an even number of pieces, or you will never win'); + } if (x*y > 26) { throw new Error('Currently you can not go higher than alphabet letters. 26 Boxes is Max'); - } + } + + var self = this; + this.drawingBoard = drawingBoard; + + this.x = x; this.y = y; this.activeItems = []; - this.activeElements = []; - this.allowClick = true; //create pieces - this.items = this.randomizeBoardPieces(x,y); + this.items = this.randomizeBoardPieces(x,y); - this.draw(); + //seaprate out display + drawingBoard.draw(this); }; - Board.prototype.draw = function() { - var self = this; - document.write('
'); - this.items.forEach(function(item, index) { - document.write('
' + self.items[index] + '
'); - if ((index+1) % self.y === 0) { - document.write('
'); //close row - document.write('
'); - } - }); - document.write('
'); - - var memoryNodes = document.getElementsByClassName('node'); - for (var m = 0; m < memoryNodes.length; m++) { - memoryNodes[m].addEventListener('click', function() { - var id = Number.parseInt(this.getAttribute('data-id')); - if (self.allowClick && self.activeItems.indexOf(id) === -1) { - addClass(this, 'active'); - self.selectNode(id, this); - } - - }); - } - }; - - Board.prototype.selectNode = function(index, elem) { + Board.prototype.selectNode = function(index) { this.activeItems.push(index); - this.activeElements.push(elem); this.compare(); }; Board.prototype.compare = function() { - var items = this.items, activeItems = this.activeItems, activeElements = this.activeElements; + var items = this.items, activeItems = this.activeItems; if (activeItems.length === 2 && items[activeItems[0]] === items[activeItems[1]]) { - this.reset(false); - activeElements.forEach(function(elem) { - addClass(elem, 'flash'); - }); - } else if (activeItems.length == 2) { - + this.matchSuccess(); + } else if (activeItems.length == 2) { this.reset(true); } } + Board.prototype.matchSuccess = function() { + this.drawingBoard.matchSuccess(); + this.reset(false); + } + Board.prototype.randomizeBoardPieces = function(x,y) { var pieces = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; var totalNodeSets = x*y/2; @@ -123,13 +100,22 @@ Board.prototype.reset = function(removeActiveElements) { var self = this; self.activeItems = []; + self.drawingBoard.reset(removeActiveElements); + }; + var HTMLBoard = function(boardId) { + this.id = boardId; + this.allowClick = true; + this.activeElements = []; + }; + + HTMLBoard.prototype.reset = function(removeActiveElements) { + var self = this; if (removeActiveElements) { self.allowClick = false; - self.activeElements.forEach(function(elem) { + addClass(elem, 'shake'); - console.log('in shake'); }); setTimeout(function() { @@ -142,9 +128,104 @@ }, 500); } else { self.activeElements = []; - } - }; + } + }; + + HTMLBoard.prototype.draw = function(board) { + var self = this; + var html = ''; + html += '
'; + board.items.forEach(function(item, index) { + html += '
' + board.items[index] + '
'; + if ((index+1) % board.y === 0) { + html += '
';//close row + html += '
'; + } + }); + + html += '
'; + document.getElementById(self.id).innerHTML = html; + + var memoryNodes = document.getElementsByClassName('node'); + for (var m = 0; m < memoryNodes.length; m++) { + memoryNodes[m].addEventListener('click', function() { + var id = Number.parseInt(this.getAttribute('data-id')); + if (self.allowClick && board.activeItems.indexOf(id) === -1) { + addClass(this, 'active'); + self.activeElements.push(this); + board.selectNode(id); + } + }); + } + }; + + HTMLBoard.prototype.matchSuccess = function() { + this.activeElements.forEach(function(elem) { + addClass(elem, 'flash'); + }); + } + + var CanvasBoard = function(boardId) { + this.id = boardId; + this.allowClick = true; + this.activeElements = []; + } - var x = new Board(4,4); + CanvasBoard.prototype.reset = function(removeActiveElements) { + var self = this; + if (removeActiveElements) { + self.allowClick = false; + setTimeout(function() { + self.activeElements.forEach(function(elem) { + //reset active leemnts here + }); + self.activeElements = []; + self.allowClick = true; + }, 500); + } else { + self.activeElements = []; + } + }; + + CanvasBoard.prototype.draw = function(board) { + var self = this; + var context = document.getElementById('canvasBoard').getContext("2d"); + + var x =50, y=50, width= 50, height= 50; + + board.items.forEach(function(item, index) { + context.rect(x,y,width,height); + context.stroke(); + //set click listeiner here + x+= 60; + if ((index+1) % board.y === 0) { + x =50; + y+= 60; + } + }); + + }; + + CanvasBoard.prototype.matchSuccess = function() { + this.activeElements.forEach(function(elem) { + //addClass(elem, 'flash'); + //set active style here + }); + } + + + document.getElementById('generate').addEventListener('click', function() { + var drawingBoard = new HTMLBoard('board'); + //var canvasBoard = new CanvasBoard('canvasBoard'); ability to swap diff displays for any memory grid + + var rows = document.getElementById('rows').value; + var columns = document.getElementById('columns').value; + try { + var board = new Board(rows,columns, drawingBoard); + } catch(err) { + alert(err); + } + + }); })(); \ No newline at end of file From 8ce436dc9906a4d3baf0621c8869835b227e4101 Mon Sep 17 00:00:00 2001 From: mattkim Date: Tue, 16 Feb 2016 20:29:45 -0500 Subject: [PATCH 3/3] fixing jshint errors --- index.js | 152 ++++++++++++++++++++++++++----------------------------- 1 file changed, 73 insertions(+), 79 deletions(-) diff --git a/index.js b/index.js index 0705a8d..5e3eec7 100644 --- a/index.js +++ b/index.js @@ -1,31 +1,44 @@ -(function() { - function hasClass(el, className) { - if (el.classList) - return el.classList.contains(className) - else - return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')) + if (el.classList) { + return el.classList.contains(className); + } else { + return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')); + } } function addClass(el, className) { - if (el.classList) - el.classList.add(className) - else if (!hasClass(el, className)) el.className += " " + className + if (el.classList) { + el.classList.add(className); + } + else if (!hasClass(el, className)) { + el.className += " " + className; + } } function removeClass(el, className) { - if (el.classList) - el.classList.remove(className) - else if (hasClass(el, className)) { - var reg = new RegExp('(\\s|^)' + className + '(\\s|$)') - el.className=el.className.replace(reg, ' ') + if (el.classList) { + el.classList.remove(className); + } else if (hasClass(el, className)) { + var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); + el.className=el.className.replace(reg, ' '); } } //board class var Board = function(x,y, drawingBoard) { + this.checkErrors(x,y,drawingBoard); + this.drawingBoard = drawingBoard; + this.x = x; + this.y = y; + this.activeItems = []; + this.items = this.randomizeBoardPieces(x,y); + drawingBoard.draw(this); + }; + + Board.prototype.checkErrors = function(x,y,drawingBoard) { if (x <= 0) { throw new Error('Rows must be greater than 0'); + } if (y <= 0) { throw new Error('Columsn must be greater than 0'); @@ -36,26 +49,8 @@ if (x*y > 26) { throw new Error('Currently you can not go higher than alphabet letters. 26 Boxes is Max'); } - - var self = this; - this.drawingBoard = drawingBoard; - - - this.x = x; - this.y = y; - - - this.activeItems = []; - - //create pieces - this.items = this.randomizeBoardPieces(x,y); - - //seaprate out display - drawingBoard.draw(this); - }; - Board.prototype.selectNode = function(index) { this.activeItems.push(index); this.compare(); @@ -65,15 +60,15 @@ var items = this.items, activeItems = this.activeItems; if (activeItems.length === 2 && items[activeItems[0]] === items[activeItems[1]]) { this.matchSuccess(); - } else if (activeItems.length == 2) { + } else if (activeItems.length === 2) { this.reset(true); } - } + }; Board.prototype.matchSuccess = function() { this.drawingBoard.matchSuccess(); this.reset(false); - } + }; Board.prototype.randomizeBoardPieces = function(x,y) { var pieces = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; @@ -81,15 +76,13 @@ var sets = pieces.splice(0,totalNodeSets); var nodes = this.shuffleArray(sets.concat(sets)); return nodes; - } + }; Board.prototype.shuffleArray = function(array) { - var i = 0 - , j = 0 - , temp = null + var i = 0, j = 0, temp = null; for (i = array.length - 1; i > 0; i -= 1) { - j = Math.floor(Math.random() * (i + 1)) + j = Math.floor(Math.random() * (i + 1)); temp = array[i]; array[i] = array[j]; array[j] = temp; @@ -132,44 +125,47 @@ }; HTMLBoard.prototype.draw = function(board) { - var self = this; - var html = ''; - html += '
'; - board.items.forEach(function(item, index) { - html += '
' + board.items[index] + '
'; - if ((index+1) % board.y === 0) { - html += '
';//close row - html += '
'; - } - }); - - html += '
'; - document.getElementById(self.id).innerHTML = html; - - var memoryNodes = document.getElementsByClassName('node'); - for (var m = 0; m < memoryNodes.length; m++) { - memoryNodes[m].addEventListener('click', function() { - var id = Number.parseInt(this.getAttribute('data-id')); - if (self.allowClick && board.activeItems.indexOf(id) === -1) { - addClass(this, 'active'); - self.activeElements.push(this); - board.selectNode(id); - } + var self = this; + var html = ''; + html += '
'; + board.items.forEach(function(item, index) { + html += '
' + board.items[index] + '
'; + if ((index+1) % board.y === 0) { + html += '
';//close row + html += '
'; + } }); - } + + html += '
'; + document.getElementById(self.id).innerHTML = html; + + + var clickEvent = function() { + var id = Number.parseInt(this.getAttribute('data-id')); + if (self.allowClick && board.activeItems.indexOf(id) === -1) { + addClass(this, 'active'); + self.activeElements.push(this); + board.selectNode(id); + } + }; + + var memoryNodes = document.getElementsByClassName('node'); + for (var m = 0; m < memoryNodes.length; m++) { + memoryNodes[m].addEventListener('click', clickEvent); + } }; HTMLBoard.prototype.matchSuccess = function() { - this.activeElements.forEach(function(elem) { - addClass(elem, 'flash'); - }); - } + this.activeElements.forEach(function(elem) { + addClass(elem, 'flash'); + }); + }; var CanvasBoard = function(boardId) { - this.id = boardId; - this.allowClick = true; - this.activeElements = []; - } + this.id = boardId; + this.allowClick = true; + this.activeElements = []; + }; CanvasBoard.prototype.reset = function(removeActiveElements) { var self = this; @@ -207,11 +203,11 @@ }; CanvasBoard.prototype.matchSuccess = function() { - this.activeElements.forEach(function(elem) { - //addClass(elem, 'flash'); - //set active style here - }); - } + this.activeElements.forEach(function(elem) { + //addClass(elem, 'flash'); + //set active style here + }); + }; document.getElementById('generate').addEventListener('click', function() { @@ -227,5 +223,3 @@ } }); - -})(); \ No newline at end of file