Merge pull request #234 from FreddieN/dev

Add number of play in Flip activity

Author: llaske

activities/Flip.activity/css/activity.css

@@ -61,3 +61,10 @@ background-size: contain;
 border-radius: 5.5px;
 background-color: #C0C0C0;
 }
+#flip-count {
+  flex: 1;
+  text-align: center;
+  font-size: 8vh;
+  font-weight: 800;
+  padding-bottom: 2vh;
+}

activities/Flip.activity/index.html

@@ -32,6 +32,7 @@
 
 <!-- The content of your activity goes inside the canvas -->
 <div id="canvas" style="overflow-y: hidden;">
+  <div id='flip-count'><span id="fliptext"><span data-l10n-id="turntext"></span><span id="turnno"></span></span></div>
 <canvas id="actualcanvas"></canvas>
 </div>
 </body>

activities/Flip.activity/js/activity.js

@@ -1,4 +1,4 @@
-define(["sugar-web/activity/activity",'easeljs','tweenjs','activity/game','activity/flipdot'], function (act) {
+define(["sugar-web/activity/activity", "webL10n", 'easeljs','tweenjs','activity/game','activity/flipdot'], function (act, webL10n) {
 
 	// Manipulate the DOM only when it is ready.
 	requirejs(['domReady!'], function (doc) {
@@ -9,7 +9,15 @@ define(["sugar-web/activity/activity",'easeljs','tweenjs','activity/game','activ
 			act.getXOColor(function (error, colors) {
 				runactivity(act,doc,colors,env,datastore,sizepalette);
 			});
-		});
+			env.getEnvironment(function(err, environment) {
+				currentenv = environment;
+			
+				// Set current language to Sugarizer
+				var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language;
+				var language = environment.user ? environment.user.language : defaultLanguage;
+				webL10n.language.code = language;
+			});
+				});
 	});
 
 });
@@ -23,11 +31,14 @@ function runactivity(act,doc,colors,env,datastore,sizepalette){
 	function init(){
 		canvas = document.getElementById('actualcanvas');
 		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight-55;
+		canvas.height = window.innerHeight-200;
 		stage = new createjs.Stage(canvas);
 		stage.update();
 		stage.mouseEventsEnabled = true;
 
+		document.getElementById("flip-count").style.color = colors['stroke'];
+		document.getElementById("fliptext").style.borderBottom = "5px solid #00ff1b";
+
 		createjs.Ticker.setFPS(30);
 		createjs.Ticker.addEventListener("tick", handleTick);
 		function handleTick() {
@@ -39,7 +50,7 @@ function runactivity(act,doc,colors,env,datastore,sizepalette){
 		window.addEventListener('resize', resizeCanvas, false);
 		function resizeCanvas() {
 			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight-55;
+			canvas.height = window.innerHeight-200;
 			g.initialiseFromArray();
 		}
 

activities/Flip.activity/js/game.js

@@ -4,6 +4,8 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 	this.circleswidth = 0;
 	this.circlesheight = 0;
 	this.colours = [xocolor.stroke,xocolor.fill];
+	this.level = 4;
+	this.turns = 1;
 
 	this.gridwidth = 7;
 	this.gridheight = 7;
@@ -17,7 +19,6 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 	this.solveTimeout;
 	this.newGameTimeout;
 
-
 	//Helper functions
 	this.radiusFromX = function(){
 		this.margin = 1/50*stage.canvas.width;
@@ -64,8 +65,10 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 	}
 
 	//Flipping
-
 	this.flip = function(x,y,playing,stack){
+		this.turns = this.turns+1;
+		document.getElementById("turnno").innerHTML = " " + (this.turns);
+		this.drawIndicator();
 		if (playing===undefined){playing=true;}
 		if (stack===undefined){stack=true;}
 		if (stack){
@@ -91,6 +94,28 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 			}
 		}
 	}
+	this.drawIndicator = function() {
+		diffind = this.turns - this.level*3;
+		console.log(diffind);
+		switch(diffind){
+			case 40:
+				document.getElementById("fliptext").style.borderBottom = "5px solid #f00";
+				break;
+			case 30:
+				document.getElementById("fliptext").style.borderBottom = "5px solid #ff410b";
+				break;
+			case 20:
+				document.getElementById("fliptext").style.borderBottom = "5px solid #ff7e00";
+				break;
+			case 10:
+				document.getElementById("fliptext").style.borderBottom = "5px solid #c7ff00";
+				break;
+			case 5:
+				document.getElementById("fliptext").style.borderBottom = "5px solid #00ff1b";
+				console.log("12");
+				break;
+		}
+	}
 
 	this.getRandomInt = function(min, max) {
 		return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -143,6 +168,8 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 		arr.startgridwidth = this.startgridwidth;
 		arr.startgridheight = this.startgridheight;
 		arr.dots = [];
+		arr.turns = this.turns;
+		arr.indcolour = document.getElementById("fliptext").style.borderBottom;
 		for (var x = 0; x<this.startgridwidth; x++){
 			temparr = [];
 			for (var y = 0; y<this.startgridheight; y++){
@@ -232,19 +259,26 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 		for (var i = 0; i<14; i++){
 			this.flipRandomDot();
 		}
+		this.turns = 1;
+		document.getElementById("turnno").innerHTML = " " + (this.turns);
+		document.getElementById("fliptext").style.borderBottom = "5px solid #00ff1b";
 	}
 
 	this.setSize = function(size){
 		this.startgridwidth = size;
 		this.startgridheight = size;
 		this.newGame();
+		this.level = size;
 	}
 
 	this.init = function(){
 		//console.log("init");
 		//console.log(activity.getDatastoreObject());
 		this.palette = new sizepalette.SizePalette(this,doc.getElementById('size-button'),undefined);
 		activity.getDatastoreObject().getMetadata(this.init_canaccessdatastore.bind(this));
+		document.getElementById("turnno").innerHTML = " " + (this.turns);
+		this.drawIndicator();
+		this.palette.setUsed();
 	}
 
 	this.init_canaccessdatastore = function(error,mdata){
@@ -271,6 +305,8 @@ function Game(stage,xocolor,doc,datastore,activity,sizepalette){
 		this.stack = data.stack;
 		this.startgridwidth = data.startgridwidth;
 		this.startgridheight = data.startgridheight;
+		this.turns = data.turns;
+		document.getElementById("fliptext").style.borderBottom = data.indcolour;
 		clearTimeout(this.newGameTimeout);
 		clearTimeout(this.solveTimeout);
 		stage.removeAllChildren();

activities/Flip.activity/localization.ini

@@ -8,6 +8,7 @@ five-button.title = 5x5 grid
 six-button.title = 6x6 grid
 seven-button.title = 7x7 grid
 size-button.title = Change size of grid
+turntext = Turn
 
 [en]
 activity-button.title = Flip Activity
@@ -17,4 +18,8 @@ solve-button.title = Solve the puzzle
 four-button.title = 4x4 grid
 five-button.title = 5x5 grid
 six-button.title = 6x6 grid
-seven-button.title = 7x7 grid
+seven-button.title = 7x7 grid
+turntext = Turn
+
+[fr]
+turntext = Tour