uploading work

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;
+
 })();

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:

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;
+
+}
+
+
+

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<gameSize; i++){
+			var cell = document.createElement('div');
+			container.appendChild(cell);
+			cell.setAttribute('id', 'cell'+i);
+			cell.classList.add('allCells','face_down');
+			cell.onclick = clickHandler;
+		}
+
 
 		// public instance methods
 		// (you may instead attach these to a prototype if you prefer)
-		this.reset = function() {
-			//...
-		}
+
+
+		// this.reset = function() {
+		// 	//container.childNodes.classList.remove('face_up');
+		// 	//container.childNodes.classList.add('face_down');
+		// 	game.reset();
+		// }
 		this.show = function(where,displayString) {
-			//...
+			//console.log(game.faceupValue(where));
+			var whereValId = document.getElementById('cell'+where);
+			whereValId.classList.add('face_up');
+			whereValId.innerHTML = displayString;
+			return (game.faceupValue(where));
+
 		}
+
+		var resetBtn = document.createElement('button');
+		//resetBtn.setAttribute('id', 'reset');
+		//document.getElementById('reset').onclick = function(){console.log('hello')};
+		resetBtn.innerHTML='RESET';
+		resetBtn.addEventListener('click', game.reset);
+		//try console logging something instead of game.reset
+		container.appendChild(resetBtn);
+
 		this.removeSoon = function(whereArr) {
-			//...
+			var arrVal1 = whereArr[0];
+			var arrVal2 = whereArr[1];
+			var cellId1 = document.getElementById('cell'+arrVal1);
+			var cellId2 = document.getElementById('cell'+arrVal2);
+
+			function classChange(){
+				cellId1.classList.add('matched');
+				cellId2.classList.add('matched');
+			}
+			var tID = window.setTimeout(classChange, 1000);
+
 		}
+
 		this.hideSoon = function(whereArr) {
-			//...
+			var arrVal3 = whereArr[0];
+			var arrVal4 = whereArr[1];
+			var cellId3 = document.getElementById('cell'+arrVal3);
+			var cellId4 = document.getElementById('cell'+arrVal4);
+
+			function classChange2(){
+				cellId3.classList.remove('face_up');
+				cellId3.classList.add('face_down');
+				cellId4.classList.remove('face_up');
+				cellId4.classList.add('face_down');
+			}
+
+			var tID = window.setTimeout(classChange2, 1000);
 		}
 
 		// Do some initial setup and rendering...

template/memory-main.js

@@ -2,8 +2,8 @@
 var cards,game,gui; //global vars can been inspected in console, making debugging easier
 function go() {
 	// you'll need to study the modules to understand how to plug them in...
-	cards = //??????
-	game  = //??????
+	cards = new AlphabetCards(26);
+	game  = new MemoryGame(cards);
 	gui   = new MemoryGUI('memorygame',game); //'memorygame' is the id of div where gui should be inserted'
 }