finished homework 7

template/memory-cards.js

@@ -1,21 +1,31 @@
-// See cardset-example.js for examples
-
 var MemoryCards = (function() {
-	function Ctor() {
-		//...
-		this.values = function() {
-
-		}
 
-		this.match = function(a,b) {
-
-		}
+	var dragons = [
+    ['shadow', 1], ['shadow', 2],
+    ['horned', 1], ['horned', 2],
+    ['black', 1], ['black', 2],
+    ['blue', 1], ['blue', 2],
+    ['green', 1], ['green', 2],
+    ['red', 1], ['red', 2],
+    ['white', 1], ['white', 2],
+    ['brass', 1], ['brass', 2],
+    ['bronze', 1], ['bronze', 2],
+    ['copper', 1], ['copper', 2],
+    ['gold', 1], ['gold', 2],
+    ['silver', 1], ['silver', 2]
+  ];
 
+	function CardsCtor() {
+		this.values = function() {
+			return dragons.slice();
+		};
+		this.match = function(card1,card2) {
+			return card1[0] === card2[0];
+		};
 		this.display = function(val) {
-
-		}
+			return val;
+		};
 	}
-	//...
 
-	return Ctor;
+	return CardsCtor;
 })();

template/memory-game.js

@@ -1,8 +1,6 @@
-// This module is completely finished!  You just need to understand how it works, then integrate it.
-
 var MemoryGame = (function() {
 
-	function Ctor(cardset) {
+	function GameCtor(cardset) {
 		var slots, //values of shuffled cards;
 				//sparse array: will have elements deleted as cards are removed
 			length,//total slots, including gaps
@@ -20,8 +18,9 @@ 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
 		}
 
@@ -30,7 +29,7 @@ var MemoryGame = (function() {
 		}
 
 		var remainsAt = function(where) {//--> boolean
-			return slots[where]!==undefined;
+			return slots[where] !== undefined;
 		}
 		var valueAt = function(where) {//--> card val
 			return slots[where];
@@ -49,9 +48,9 @@ var MemoryGame = (function() {
 		}
 
 		var lift = function(here) {//--> display string
-			if (!isValid(here,length)) return false;
-			if (!remainsAt(here)) return false;
-			if (there===here) return false;
+			if (!isValid(here,length)) { return false; }
+			if (!remainsAt(here)) { return false; }
+			if (there===here) { return false; }
 
 			// must be a face-down card here; proceed...
 			var valHere = valueAt(here),
@@ -65,20 +64,23 @@ var MemoryGame = (function() {
 					// match; remove both:
 					removeAt(here);
 					removeAt(there);
-					if (_gui)
+					if (_gui) {
 						_gui.removeSoon([here,there]);
+          }
 					//optional: report match
 					console.log("Match!")
 				} else {
-					if (_gui)
+					if (_gui) {
 						_gui.hideSoon([here,there]);
+          }
 				}
 				//either way, turn face-up to face-down:
 				there = false;
 			}
-			if (_gui)
+			if (_gui) {
 				_gui.show(here,displayHere);
-			return displayHere; 
+      }
+			return displayHere;
 		}
 
 		// Make some functions public as instance methods:
@@ -95,11 +97,11 @@ var MemoryGame = (function() {
 	// these could be placed inside ctor,
 	// but then they would be rebuilt for each instance
 	function isValid(where,length) {
-			return (typeof where === 'number')
-				&& (where%1 === 0)
-				&& (where>=0)
-				&& (where<length)
-		}
+		return (typeof where === 'number')
+			&& (where%1 === 0)
+			&& (where>=0)
+			&& (where<length)
+	}
 
 	function shuffle(array) {
 	// Knuth-Fisher-Yates, modified from http://bost.ocks.org/mike/shuffle/
@@ -115,7 +117,5 @@ var MemoryGame = (function() {
  		}
 	}
 
-	return Ctor;
+	return GameCtor;
 })();
-
-

template/memory-gui.css

@@ -1,6 +1,16 @@
 /* Whatever CSS you want for GUI...*/
 
-#memorygame {
-	/* ... */
+td {
+	width: 50px;
+	height: 50px;
+	background-color: #999;
+	text-align: center;
 }
 
+.white {
+	background-color: #fff;
+}
+
+.grey {
+	background-color: #999;
+}

template/memory-gui.js

@@ -1,28 +1,55 @@
-var MemoryGUI = (function () {
+var MemoryGui = (function () {
 
 	//...
 
 	function GuiCtor(container,game) {
-		game.gui(this); // link game to this gui
+		game.gui(this);
 
-		//...
-
-		// public instance methods
-		// (you may instead attach these to a prototype if you prefer)
 		this.reset = function() {
-			//...
+			game.reset();
+			var tds = document.getElementsByTagName('td');
+			for (var i = 0; i < tds.length; i++) {
+				tds[i].setAttribute('class', 'grey');
+				tds[i].innerHTML = '';
+			}
 		}
 		this.show = function(where,displayString) {
-			//...
+			document.getElementById(where).innerHTML = displayString[0];
 		}
 		this.removeSoon = function(whereArr) {
-			//...
+			setTimeout(function() {
+				whereArr.forEach(function(n) {
+					var card = document.getElementById(n)
+					card.innerHTML = '';
+					card.setAttribute('class','white');
+				})
+			},500)
 		}
 		this.hideSoon = function(whereArr) {
-			//...
+			setTimeout(function() {
+				whereArr.forEach(function(n) {
+					document.getElementById(n).innerHTML = '';
+				})
+			},500)
+		}
+
+		var container = document.getElementById(container);
+		var grid = document.createElement('table');
+		var cellId = 0;
+		for (var r = 0; r < game.size()/4; r++) {
+			var row = grid.insertRow(r)
+			for (var c = 0; c < 4; c++) {
+				var cell = row.insertCell(c);
+				cell.addEventListener('click', function(event) {
+					var id = this.getAttribute('id');
+					game.lift(parseInt(id));
+				})
+				cell.setAttribute('id', cellId);
+				cellId++;
+			}
 		}
+		container.appendChild(grid);
 
-		// Do some initial setup and rendering...
 	}
 
 	return GuiCtor;

template/memory-main.js

@@ -1,10 +1,12 @@
-
-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  = //??????
-	gui   = new MemoryGUI('memorygame',game); //'memorygame' is the id of div where gui should be inserted'
+	var cards = new MemoryCards();
+	var cardGame = new MemoryGame(cards);
+	var cardGui = new MemoryGui('board', cardGame);
+
+	var button = document.createElement('button');
+	button.addEventListener('click', cardGui.reset)
+	button.innerHTML = 'reset';
+	document.getElementById('board').appendChild(button);
 }
 
 window.addEventListener("load",go);

template/memory.html

@@ -8,5 +8,5 @@
 <link rel='stylesheet' type='text/css' href='memory-gui.css'>
 <script type="text/javascript" src="memory-main.js"></script>
 </head><body>
-<div id='memorygame'></div>
+<div id='board'></div>
 </body></html>