now using klayers entirely. Scoreboard works. Reset button works

author: root <bryan@olenepal.org> 2009-09-06 11:43:41 (GMT)
committer: root <bryan@olenepal.org> 2009-09-06 11:43:41 (GMT)
commit: 9b7acd4d0ec468ac4fdba022ac8f022ffe778147 (patch)
tree: 4c77ebf78205fdb1b64724a9b271fe242659d4a2
parent: 5223368b79fab73714e92542a4685ad550e9b95f (diff)
5 files changed, 224 insertions, 88 deletions
diff --git a/examples/adding_up_to_10/assets/generic/images/ball.png b/examples/adding_up_to_10/assets/generic/images/old.png
index 522fb66..522fb66 100755
--- a/examples/adding_up_to_10/assets/generic/images/ball.png
+++ b/examples/adding_up_to_10/assets/generic/images/old.png
diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10/css/lesson.css
index e7714ea..a99ec17 100755
--- a/examples/adding_up_to_10/css/lesson.css
+++ b/examples/adding_up_to_10/css/lesson.css
@@ -1,14 +1,174 @@
-#karma-main { 
-	position: relative; 
-	background-image: url('../assets/generic/images/bg.png');
-	width: 1200px;
-	height: 800px;
+
+#main {
+width:800px;
+height:600px;
+position:absolute;
+}
+#action {
+float:left;
+position:relative;
+width: 650px;
+height: 600px;
+
+}
+#sidebar {
+background-image: url(../assets/generic/images/sidebar.png);
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:none none repeat scroll 0 0;
+float:left;
+height:600px;
+position:relative;
+width:150px;
+}
+#actionTop {
+width: 650px;
+height: 300px;
+position:relative;
+}
+#bottom {
+clear:both;
+float:left;
+width: 650px;
+height: 300px;
+position:relative;
+}
+#topLtSide {
+float:left;
+width: 300px;
+height: 300px;
+position:relative;
+}
+#topMd {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:none none repeat scroll 0 0;
+float:left;
+width: 50px;
+height: 300px;
+position:relative;
+}
+#topRtSide {
+float:left;
+width: 300px;
+height:300px;
+position:relative;
 }
-#karma-main canvas {
-	position: relative;
-	border: 2px solid #cccccc;
-	-moz-border-radius: 8px;
-	-webkit-border-radius: 8px;
+#topLtBox {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:none none repeat scroll 0 0;
+width: 200px;
+height: 200px;
+left: 75px;
+position:absolute;
+top:50px;
 }
 
+#topLtCanvas {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:none none repeat scroll 0 0;
+position:absolute;
+top: 50px;
+left: 75px;
+}
+#plussign {
+display: block;
+margin-left: auto;
+margin-right: auto;
+margin-top: 150px;
+}
+#topRtBox {
+background: none none repeat scroll 0 0;
+width: 200px;
+height: 200px;
+position:absolute;
+right: 50px;
+top: 50px;
+}
+#topRtCanvas {
+background:none none repeat scroll 0 0;
+position:absolute;
+left: 50px;
+right:50px;
+top:50px;
+}
+
+.bottom {
+-moz-background-clip:border;
+-moz-background-inline-policy:continuous;
+-moz-background-origin:padding;
+background:none none repeat scroll 0 0;
+float:left;
+width: 216.5px;
+height: 300px;
+position:relative;
+}
+
+.bottomBox {
+    left:25px;
+    position:absolute;
+    width: 200px;
+    height: 200px;
+    top: 20px;
+}
+
+.sidebarItem {
+    clear:both;
+    float:left;
+    width:150px;
+    height: 200px;
+    position: relative;
+}
+
+#timer {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
+#timerCanvas {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
+#scorebox {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
+#scoreboxCanvas {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
+
+#chimpCanvas {
+position:absolute;
+top:10px;
+left:25px;
+
+}
+
+#reset {
+position:absolute;
+top:40%;
+left:20%;
+}
 
diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10/index.html
index 23d0ab9..d7354c3 100755
--- a/examples/adding_up_to_10/index.html
+++ b/examples/adding_up_to_10/index.html
@@ -3,7 +3,7 @@
 <head>
 	<title>Karma - Adding Up to 10</title>
 	<meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal" />
-	<link type="text/css" rel="stylesheet" href="css/mytest.css" />
+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
 	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
@@ -20,15 +20,15 @@
     <div id="action">
       <div id="actionTop">
 
-	<div id="topLt">
-	  <img id="topLtBox" src="assets/generic/images/yellowBox.png" alt="" class="actionTopSide" />
+	<div id="topLtSide">
+	  <img id="topLtBox" src="assets/generic/images/yellowBox.png" alt="" />
 	  <canvas id="topLtCanvas" width="200px" height="200px"></canvas>
 
 	</div>
 	<div id="topMd">
 	  <img id="plussign" src="assets/generic/images/plussign.png" alt=""/>
 	</div>
-	<div id="topRt" class="actionTopSide">
+	<div id="topRtSide">
 	  <img id="topRtBox" src="assets/generic/images/yellowBox.png" alt=""/>
 	  <canvas id="topRtCanvas" width="200px" height="200px"></canvas>
 	</div>
@@ -64,7 +64,7 @@
       </div>
       <div class="sidebarItem">
 	<canvas id="chimpCanvas" width="120px" height="125px"> </canvas>
-	
+	<button id="reset">Start Over</button>
       </div>
 
 
diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10/js/lesson.js
index 4c1a546..b69cb9e 100755
--- a/examples/adding_up_to_10/js/lesson.js
+++ b/examples/adding_up_to_10/js/lesson.js
@@ -2,12 +2,12 @@ $(document).ready(function(){
 
     var k = $.karma ({container: "#karma-main", lang: "es-MX"});
     
-/*    k.layer( {id:"topLt", canvas:"topLtCanvas"} );
-    k.layer( {id:"topRt", canvas:"topRtCanvas"} );
-    k.layer( {id:"bottomLt", canvas:"bottomLtCanvas"} );
-    k.layer( {id:"bottomMd", canvas:"bottomMdCanvas"} );
-    k.layer( {id:"bottomRt", canvas:"bottomRtCanvas"} );*/
-    k.layer( {id:"timer", canvas:"timerCanvas", width:"100", height:"140"} );
+    k.layer( {id:"topLt", canvas:"topLtCanvas", width: 200, height: 200});
+    k.layer( {id:"topRt", canvas:"topRtCanvas", width: 200, height: 200} );
+    k.layer( {id:"bottomLt", canvas:"bottomLtCanvas", width: 200, height: 200} );
+    k.layer( {id:"bottomMd", canvas:"bottomMdCanvas", width: 200, height: 200} );
+    k.layer( {id:"bottomRt", canvas:"bottomRtCanvas", width: 200, height: 200} );
+    k.layer( {id:"timer", canvas:"timerCanvas", width: 100, height: 140} );
     k.layer( {id:"scorebox", canvas:"scoreboxCanvas"} );
     k.layer( {id:"chimp", canvas:"chimpCanvas"} );
 
@@ -32,26 +32,10 @@ k.init({
 });
 
 k.main(function() {
-	var topLtCanvas = document.getElementById("topLtCanvas")
-	var topLtCtx = topLtCanvas.getContext('2d');
-	var topRtCanvas = document.getElementById("topRtCanvas")
-	var topRtCtx = topRtCanvas.getContext('2d');
-
-	var bottomLtCanvas = document.getElementById("bottomLtCanvas")
-	var bottomLtCtx = bottomLtCanvas.getContext('2d');
-	var bottomMdCanvas = document.getElementById("bottomMdCanvas")
-	var bottomMdCtx = bottomMdCanvas.getContext('2d');
-    var bottomRtCanvas = document.getElementById("bottomRtCanvas")
-    var bottomRtCtx = bottomRtCanvas.getContext('2d');
-//    var scoreboxCanvas = document.getElementById('scoreboxCanvas');
-//    var scoreboxCtx = scoreboxCanvas.getContext('2d');
-//    var timerCanvas = document.getElementById('timerCanvas');
-//    var timerCtx = timerCanvas.getContext('2d');
-
-    var actionContexts = [ topLtCtx, topRtCtx, 
-	bottomLtCtx, bottomMdCtx, bottomRtCtx];
-    var actionCanvases = [ topLtCanvas, topRtCanvas, 
-	bottomLtCanvas, bottomMdCanvas, bottomRtCanvas];
+
+    var actionContexts = [ k.layers["topLt"].ctx, k.layers["topRt"].ctx, 
+	k.layers["bottomLt"].ctx, k.layers["bottomMd"].ctx, 
+	k.layers["bottomRt"].ctx];
 
 
     var imgNames = ["ball",  "banana", "balloon","chilli", "fish", "flower"];
@@ -70,33 +54,30 @@ k.main(function() {
     var timerFn = function () {
 	k.layers['timer'].clear();
 	k.layers['timer'].ctx.fillStyle = '#fff';
-	k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
-//	timerCanvas.setAttribute("width", "100%");
-//	timerCtx.fillStyle = "#fff";
-//      	timerCtx.fillRect(10, startTimerY, endTimerX, offsetTimerY); 
+	k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, endTimerY);
+
 	if ( startTimerY >= endTimerY ){
 	    //make trigger sound
 	    answer(false);
 	    game();
 	} 
 	else {
-//	    timerCanvas.setAttribute("width", "100%");
 	    k.layers['timer'].clear();
 	    startTimerY = startTimerY + offsetTimerY;
-	    //timerCtx.fillStyle = "#fff";
 	    k.layers['timer'].ctx.fillStyle = "#fff";
-    	    //timerCtx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
-	    k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
+	    k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, 20);
 	}
     };
 
 	
 	function game () {
-	    $.each(actionContexts, function () {
-		this.clearRect(0, 0, 200, 200);
-		this.fillStyle = "#fff";
+	    $.each(k.layers, function () {
+		this.clear();
+		this.ctx.fillStyle = "#fff";
 	    });
-
+	    
+	    
+	    writeScore();
 	    total = k.math.rand( 3, 9 ); //the total
 	    n0 = total - k.math.rand(1, total - 1 ); //first number
 	    n1 = total - n0; //second number
@@ -144,36 +125,31 @@ k.main(function() {
 		
 		ctx.restore();
 	    }
+
+
 	    //put the cards
+	    card(k.layers["topLt"].ctx, n0 , 0, 0, d);
+	    card(k.layers["topRt"].ctx, n1 , 0, 0, d);
+	    card(k.layers["bottomLt"].ctx, choices[ 0 ] ,  0, 0, d);
+	    card(k.layers["bottomMd"].ctx, choices[ 1 ] , 0, 0, d);
+	    card(k.layers["bottomRt"].ctx, choices[ 2 ] , 0, 0, d);
 	    
-	    card(topLtCtx, n0 , 0, 0, d);
-	    card(topRtCtx, n1 , 0, 0, d);
-	    card(bottomLtCtx, choices[ 0 ] ,  0, 0, d);
-	    card(bottomMdCtx, choices[ 1 ] , 0, 0, d);
-	    card(bottomRtCtx, choices[ 2 ] , 0, 0, d);
-	    timerId = setInterval (timerFn, 1200);
-		
     }
 
     var writeScore = function (){
-	//scoreboxCanvas.setAttribute("width", "100%");
-	//scoreboxCtx.font = "bold 50px sans-serif";
-	//scoreboxCtx.fillStyle = "#fff";
-	//scoreboxCtx.textBaseline = "middle";
-	//scoreboxCtx.fillText("" + score, 30, 100);
+	k.layers["scorebox"].ctx.save();
 	k.layers["scorebox"].clear();
-	k.layers["scorebox"].ctx.font = "bold 50px sans-serif";
-	k.layers["scorebox"].ctx.fillStyle = "#fff";
+	k.layers["scorebox"].ctx.font = "bold 50px sans-serif white";
+	k.layers["scorebox"].ctx.strokeStyle = "#fff";
 	k.layers["scorebox"].ctx.textBaseline = "middle";
 	k.layers["scorebox"].ctx.fillText("" + score, 30, 100);
-	
+	k.layers["scorebox"].ctx.restore();
     };
 
     var answer = function (correct) {
 
 	if ( correct === false) {
 	    //answer was incorrect or took too long
-	    clearInterval(timerId);
 	    startTimerY = 10;
 	    score = score - 1;
 	    writeScore();
@@ -181,45 +157,44 @@ k.main(function() {
 	    //animate sad monkey
 
 	} else {
-	    //answer was correct
-	    clearInterval(timerId);
 	    startTimerY = 10;
 	    score = score + 1;
 	    writeScore();
 	    k.library.sounds[ "correct" ].play();
 	    //animate happy monkey
 	    level = (level+1)% imgNames.length;
-	    
 	}
 
     };
 
-/*    var reset = function () {
-	score = 0;
+    var reset = function () {
+	score = level = 0;
 	startTimerY = 10;
-	$.each( );
-
+	$.each(k.layers, function () { this.clear();});
+	game();
 
     };
-*/
 
-    writeScore();
+    document.getElementById('reset').
+    addEventListener('click', reset, true);
+						      
+
 	//put the buttons
 	var buttons=[];
-	buttons[ 0 ] = { "canvas": bottomLtCanvas, "id": 0};
-	buttons[ 1 ] = { "canvas": bottomMdCanvas, "id": 1};
-	buttons[ 2 ] = { "canvas": bottomRtCanvas, "id": 2};
+	buttons[ 0 ] = { "canvas": k.layers["bottomLt"].canvas, "id": 0};
+	buttons[ 1 ] = { "canvas": k.layers["bottomMd"].canvas, "id": 1};
+	buttons[ 2 ] = { "canvas": k.layers["bottomRt"].canvas, "id": 2};
 	
 	$.each(buttons, function( key, item ) {
 		item.canvas.addEventListener('click',  function( ev ) {
 		   if ( choices[ item.id ] === total){
 		       answer(true);
 		   }else { answer(false);	   } 
-			
 		    game();
 		}, true);
 	});
-	game();
+    timerId = setInterval (timerFn, 1200);     
+    game();
 //end of Karma.main
 });
 //end of ready
diff --git a/js/jquery.karma.js b/js/jquery.karma.js
index 4d95acf..3e75669 100755
--- a/js/jquery.karma.js
+++ b/js/jquery.karma.js
@@ -587,7 +587,7 @@ var KLayer = Class(
 		init: function( options ){
 			
 			//fix the container
-			if ( valid( options.container, "string" ) && !valid( options.canvas)
+		    if ( valid( options.container, "string" ) && !valid( options.canvas)
 			) {
 				var name=options.container;
 				options.container = $( options.container )[ 0 ];
@@ -620,9 +620,11 @@ var KLayer = Class(
 			$.extend( this, defaultOptions, options);
 			
 			if ( !this.canvas ) {
-				this.canvas = document.createElement("canvas");
-				this.canvas.width  = this.width; 
-				this.canvas.height = this.height;
+			    this.canvas = document.createElement("canvas");
+			    this.canvas.width  = this.width; 
+			    this.canvas.height = this.height;
+			    this.canvas.id = this.id;
+			    
 			}else {
 				this.canvas = document.getElementById( options.canvas );
 				if ( !this.canvas )
@@ -630,7 +632,6 @@ var KLayer = Class(
 				this.width = this.canvas.width;
 				this.height = this.canvas.height;
 			}
-			this.canvas.id = this.id;
 			if ( this.canvas.getContext ) {
 				this.ctx = this.canvas.getContext("2d");
 				//this.container.appendChild( this.canvas );
author	root <bryan@olenepal.org>	2009-09-06 11:43:41 (GMT)
committer	root <bryan@olenepal.org>	2009-09-06 11:43:41 (GMT)
commit	9b7acd4d0ec468ac4fdba022ac8f022ffe778147 (patch)
tree	4c77ebf78205fdb1b64724a9b271fe242659d4a2
parent	5223368b79fab73714e92542a4685ad550e9b95f (diff)