initial demo game and library tweaks

author: bill-auger <mr.j.spam.me@gmail.com> 2019-07-29 19:56:52 -0400
committer: bill-auger <mr.j.spam.me@gmail.com> 2019-08-12 00:41:06 -0400
commit: 282d43a0a366dc756e1b324fcfe04b43f67a6450 (patch)
tree: e56f004e6ce09740e8d8ae5e84a947b6ad0d0273
parent: c74a138caa36062983cf1a04a957a798fc497b95 (diff)
8 files changed, 146 insertions, 164 deletions
diff --git a/cards.js b/cards.js
index 31189e5..570612c 100644
--- a/cards.js
+++ b/cards.js
@@ -1,9 +1,8 @@
-
-var cards = (function() {
+var cards = (function() {
 	//The global options
 	var opt = {
-		cardSize : {width:69,height:94, padding:18},
-		animationSpeed : 500,
+		cardSize : { width: CARD_W ,height: CARD_H , padding: CARD_PAD } ,
+		animationSpeed : ANIM_SPEED ,
 		table : 'body',
 		cardback : 'red',
 		acesHigh : false,
diff --git a/constants.js b/constants.js
new file mode 100644
index 0000000..6930c91
--- /dev/null
+++ b/constants.js
@@ -0,0 +1,12 @@
+const CARD_W   = 69 ;
+const CARD_H   = 94 ;
+const CARD_PAD = 18 ;
+
+const PLAYFIELD_W = 600 ;
+const PLAYFIELD_H = 450 ;
+const N_ROWS      = 3 ;
+const N_COLS      = 5 ;
+const ROW_PAD     = (PLAYFIELD_H - (CARD_H * N_ROWS)) / (N_ROWS + 1) ;
+const ROW_H       = CARD_H + ROW_PAD ;
+
+const ANIM_SPEED = 50 ;
diff --git a/example.css b/example.css
deleted file mode 100644
index 5596f77..0000000
--- a/example.css
+++ /dev/null
@@ -1,73 +0,0 @@
-html { 
-	background-color:#092E20; 
-}
-
-body { 
-	position:relative;
-	border-radius:8px; 
-	box-shadow:black 0px 0px 2px; 
-	width: 600px; 
-	background:#FFF; 
-	margin:20px auto; 
-	border:solid 1px black; 
-	font-family: arial, sans-serif; 
-	padding:50px;  
-}
-#buttons {
-	text-align:center;
-}
-
-a img {
-	position: absolute; 
-	top: 0; 
-	right: 0; 
-	border: 0;			
-}
-button {
-	height:30px;
-	width:100px;
-	margin:8px auto;
-}
-img.preload {
-	display:none;
-}
-h1 {
-	font-size:60px;
-	text-align:center;
-	padding:0px;
-	margin:10px auto;
-}
-
-#card-table {
-	background-color:green;
-	height:400px;
-	width:600px;
-	border:solid 6px brown;
-	border-radius:8px;
-	-webkit-border-radius:8px;
-	-moz-border-radius:8px;
-	-ms-border-radius:8px;
-	-o-border-radius:8px;
-	box-shadow:#111 1px 1px 2px;
-}
-a:visited {color:blue;}
-
-#deal {
-	position: absolute;
-	left:310px;
-	top:170px;
-}
-
-footer {
-	font-size : 12px;
-	color:grey;
-	margin:10px;
-}
-
-footer a, footer a:visited{
-	color:grey;
-}
-
-footer a:hover {
-	color:black;
-}
diff --git a/example.html b/example.html
deleted file mode 100644
index 6649e3d..0000000
--- a/example.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>cards.js - Example</title>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="example.css"/>
-		<script src="jquery-1.7.min.js"></script>
-	</head>
-	<body>
-		<h1>Cards.js - Example</h1>
-	
-		<img class="preload" src="img/cards.png"/>
-
-		<div id="card-table">
-			<button id="deal">DEAL</button>
-		</div>
-		<footer>
-			cards.js was created by <a href="http://einaregilsson.com">Einar Egilsson</a> and is licensed
-			under the MIT license. The card images were created by <a href="http://nicubunu.ro">Nicu Buculei</a> and are 
-			in the public domain. 
-		</footer>
-		<!-- load this at the bottom so the #card-table element exists -->
-		<script src="cards.js"></script>
-		<script src="example.js"></script>
-	</body>
-</html>
-\ No newline at end of file
diff --git a/example.js b/example.js
deleted file mode 100644
index ad71036..0000000
--- a/example.js
+++ /dev/null
@@ -1,61 +0,0 @@
-
-//Tell the library which element to use for the table
-cards.init({table:'#card-table'});
-
-//Create a new deck of cards
-deck = new cards.Deck(); 
-//By default it's in the middle of the container, put it slightly to the side
-deck.x -= 50;
-
-//cards.all contains all cards, put them all in the deck
-deck.addCards(cards.all); 
-//No animation here, just get the deck onto the table.
-deck.render({immediate:true});
-
-//Now lets create a couple of hands, one face down, one face up.
-upperhand = new cards.Hand({faceUp:false, y:60});
-lowerhand = new cards.Hand({faceUp:true, y:340});
-
-//Lets add a discard pile
-discardPile = new cards.Deck({faceUp:true});
-discardPile.x += 50;
-
-
-//Let's deal when the Deal button is pressed:
-$('#deal').click(function() {
-	//Deck has a built in method to deal to hands.
-	$('#deal').hide();
-	deck.deal(5, [upperhand, lowerhand], 50, function() {
-		//This is a callback function, called when the dealing
-		//is done.
-		discardPile.addCard(deck.topCard());
-		discardPile.render();
-	});
-});
-
-
-//When you click on the top card of a deck, a card is added
-//to your hand
-deck.click(function(card){
-	if (card === deck.topCard()) {
-		lowerhand.addCard(deck.topCard());
-		lowerhand.render();
-	}
-});
-
-//Finally, when you click a card in your hand, if it's
-//the same suit or rank as the top card of the discard pile
-//then it's added to it
-lowerhand.click(function(card){
-	if (card.suit == discardPile.topCard().suit 
-		|| card.rank == discardPile.topCard().rank) {
-		discardPile.addCard(card);
-		discardPile.render();
-		lowerhand.render();
-	}
-});
-
-
-//So, that should give you some idea about how to render a card game.
-//Now you just need to write some logic around who can play when etc...
-//Good luck :)
diff --git a/match_game.css b/match_game.css
new file mode 100644
index 0000000..c9ccff9
--- /dev/null
+++ b/match_game.css
@@ -0,0 +1,33 @@
+html
+{
+	background-color:#092E20; 
+}
+
+body
+{
+	position:relative;
+	border-radius:8px; 
+	box-shadow:black 0px 0px 2px; 
+	background:#FFF;
+	margin:20px auto; 
+	border:solid 1px black; 
+	font-family: arial, sans-serif; 
+	padding:50px;  
+}
+
+img.preload
+{
+	display:none;
+}
+
+#card-table
+{
+	background-color:green;
+	border:solid 6px brown;
+	border-radius:8px;
+	-webkit-border-radius:8px;
+	-moz-border-radius:8px;
+	-ms-border-radius:8px;
+	-o-border-radius:8px;
+	box-shadow:#111 1px 1px 2px;
+}
diff --git a/match_game.html b/match_game.html
new file mode 100644
index 0000000..eaf8f34
--- /dev/null
+++ b/match_game.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Parabola Match Game</title>
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="match_game.css"/>
+		<script src="jquery-1.7.min.js"></script>
+	</head>
+	<body>
+		<img class="preload" src="img/cards.png"/>
+
+		<div id="card-table">
+			<button id="start">Yay! Lets' play!</button>
+		</div>
+
+		<script src="constants.js"></script>
+		<script src="cards.js"    ></script>
+		<script src="match_game.js"  ></script>
+	</body>
+</html>
diff --git a/match_game.js b/match_game.js
new file mode 100644
index 0000000..a50ed39
--- /dev/null
+++ b/match_game.js
@@ -0,0 +1,78 @@
+$('body'       ).css('width'    , PLAYFIELD_W + 'px') ;
+$('#card-table').css('width'    , PLAYFIELD_W + 'px') ;
+$('#card-table').css('height'   , PLAYFIELD_H + 'px') ;
+$('#start'     ).css('width'    , '12em'            ) ;
+$('#start'     ).css('height'   , '4em'             ) ;
+$('#start'     ).css('position' , 'relative'        ) ;
+$('#start'     ).css('left'     , '50%'             ) ;
+$('#start'     ).css('top'      , '50%'             ) ;
+$('#start'     ).css('margin'   , '-2em -6em'       ) ;
+
+
+cards.init({ table: '#card-table' }) ;
+
+var deck = new cards.Deck() ;
+deck.y -= PLAYFIELD_H - CARD_H ;
+
+deck.addCards(cards.all) ;
+deck.render({ immediate: true }) ;
+
+var display_deck_1 = new cards.Deck({ faceUp: false }) ;
+var display_deck_2 = new cards.Deck({ faceUp: false }) ;
+display_deck_1.x += 250 ;
+display_deck_2.x += 250 ;
+display_deck_1.y += (-CARD_H / 2) + (-ROW_PAD / 2) ;
+display_deck_2.y += (CARD_H / 2) + (ROW_PAD / 2) ; ;
+
+var rows = [] ;
+for (var row_n = 0 ; row_n < N_ROWS ; ++row_n)
+{
+  var row_y = (CARD_H / 2) + ROW_PAD + (ROW_H * row_n) ;
+  var a_row = new cards.Hand({ faceUp: true , y: row_y }) ;
+
+  rows.push(a_row) ;
+}
+
+function VerifyMatch()
+{
+console.log("VerifyMatch()") ;
+
+  if (display_deck_1.topCard().rank == display_deck_2.topCard().rank)
+  {
+console.log("VerifyMatch() match") ;
+  }
+else console.log("VerifyMatch() match") ;
+
+  setTimeout(function()
+  {
+    display_deck_1.faceUp = false ; display_deck_1.render() ;
+    display_deck_2.faceUp = false ; display_deck_2.render() ;
+  } , 2000) ;
+}
+
+$('#start').click(function()
+{
+  $('#start').hide() ;
+  deck.deal(N_COLS , rows , ANIM_SPEED , function()
+  {
+    rows.forEach(function(a_row)
+    {
+      a_row.click(function(a_card)
+      {
+console.log("display_deck_1.length=" + display_deck_1.length +
+            "\ndisplay_deck_1.length=" + display_deck_1.length +
+            "\ndisplay_deck_1.faceUp=" + display_deck_1.faceUp +
+            "\ndisplay_deck_2.faceUp=" + display_deck_2.faceUp ) ;
+
+        var a_deck = (!display_deck_1.faceUp) ? display_deck_1 :
+                     (!display_deck_2.faceUp) ? display_deck_2 : undefined ;
+
+        if (a_deck === undefined) return ;
+
+        a_deck.faceUp = true ; a_deck.addCard(a_card) ; a_deck.render() ;
+        a_row.render() ;
+        if (display_deck_1.faceUp && display_deck_2.faceUp) VerifyMatch() ;
+      }) ;
+    }) ;
+  }) ;
+}) ;
author	bill-auger <mr.j.spam.me@gmail.com>	2019-07-29 19:56:52 -0400
committer	bill-auger <mr.j.spam.me@gmail.com>	2019-08-12 00:41:06 -0400
commit	282d43a0a366dc756e1b324fcfe04b43f67a6450 (patch)
tree	e56f004e6ce09740e8d8ae5e84a947b6ad0d0273
parent	c74a138caa36062983cf1a04a957a798fc497b95 (diff)