diff --git a/template/memory-cards.js b/template/memory-cards.js index fb8d536..319cb24 100644 --- a/template/memory-cards.js +++ b/template/memory-cards.js @@ -1,21 +1,33 @@ // See cardset-example.js for examples -var MemoryCards = (function() { - function Ctor() { - //... - this.values = function() { +var AlphabetCards = (function() { + // produces pairs 'a'=='A','b'=='B',... + var alphabet = ' abcdefghijklmnopqrstuvwxyz'; + + function Ctor(numPairs) { //numPairs is optional; defaults to 26 + if (numPairs < 1) numPairs = 1; + if (!numPairs || (numPairs > 26)) numPairs = 26; + // Generate subset of alphabet in pairs: + var _values = []; //private array + while (numPairs) { + _values.push(alphabet[numPairs]); //'a'... + _values.push(alphabet[numPairs].toUpperCase());//'A'... + --numPairs; } + // Instance methods: + this.values = function() { + return _values.slice(); + } this.match = function(a,b) { - + return a.toUpperCase() == b.toUpperCase(); } - this.display = function(val) { - + return val; } } - //... return Ctor; + })(); diff --git a/template/memory-game.js b/template/memory-game.js index ac0e3db..d942d07 100644 --- a/template/memory-game.js +++ b/template/memory-game.js @@ -20,7 +20,7 @@ var MemoryGame = (function() { reset();// reset now as part of init'ing var gui = function() {//accessor fn - if (arguments.length === 0) + if (arguments.length === 0) return _gui; //getter _gui = arguments[0]; //setter } @@ -49,6 +49,7 @@ var MemoryGame = (function() { } var lift = function(here) {//--> display string + //console.log(here,there); if (!isValid(here,length)) return false; if (!remainsAt(here)) return false; if (there===here) return false; @@ -78,7 +79,7 @@ var MemoryGame = (function() { } if (_gui) _gui.show(here,displayHere); - return displayHere; + return displayHere; } // Make some functions public as instance methods: diff --git a/template/memory-gui.css b/template/memory-gui.css index 51184ea..9ba5bd8 100644 --- a/template/memory-gui.css +++ b/template/memory-gui.css @@ -1,6 +1,38 @@ /* Whatever CSS you want for GUI...*/ #memorygame { - /* ... */ + width: 90%; } +.allCells { + height: 4em; + width: 4em; + margin: .25em; + float: left; +} + +.face_down { + background-color: blue; + color: transparent; + +} + +.face_up { + background-color: red; + font-size: 12pt; + color: white; + text-align: center; +} + +.matched { + visibility: hidden; + +} + +#resetBtn { + float: right; + +} + + + diff --git a/template/memory-gui.js b/template/memory-gui.js index 71435a0..15ced14 100644 --- a/template/memory-gui.js +++ b/template/memory-gui.js @@ -5,21 +5,89 @@ var MemoryGUI = (function () { function GuiCtor(container,game) { game.gui(this); // link game to this gui - //... + if (typeof container === 'string') { + container = document.getElementById(container); + } + + this.el = function() { + return container; + } + + var gameSize = game.size(); + + container.innerHTML = ""; + + var clickHandler = function(){ + var cellId = this.getAttribute('id'); + var cellNum = cellId.slice(4,6); + var idNum = parseInt(cellNum); + game.lift(idNum); + + } + + for (var i = 0; i