Merge branch 'pr/1501' into dev

llaske · Jan 30, 2024 · 95f3427 · 95f3427
2 parents 8fbd2c3 + dc7de76
commit 95f3427
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - XSS injections on Labyrinth JS and Paint Activity #787
 - Style for Planet Info in Planet Activity is Hard to See #1448
 - Misaligned button in Speak activity #1504
+- Added pause functionality to Blockrain activity #1501
 
 ## [1.7.0] - 2023-03-28
 ### Added

diff --git a/activities/Blockrain.activity/css/activity.css b/activities/Blockrain.activity/css/activity.css
@@ -12,6 +12,13 @@ body {
   background-image: url(../activity/activity-icon.svg);
 }
 
+#main-toolbar #play-button.play {
+  background-image: url(../icons/play.svg);
+}
+#main-toolbar #play-button.pause {
+  background-image: url(../icons/pause.svg);
+}
+
 #btn-next {
   background-image: url(../assets/themeChanger.svg);
 }

diff --git a/activities/Blockrain.activity/icons/pause.svg b/activities/Blockrain.activity/icons/pause.svg
diff --git a/activities/Blockrain.activity/icons/play.svg b/activities/Blockrain.activity/icons/play.svg
diff --git a/activities/Blockrain.activity/index.html b/activities/Blockrain.activity/index.html
@@ -30,6 +30,7 @@
 <body>
 <div id="main-toolbar" class="toolbar">
   	<button class="toolbutton" id="activity-button" title="My Activity"></button>
+	<button class="toolbutton play" id="play-button" title="Play/Pause"></button>
 	<button class="toolbutton" id="btn-next" title="Change theme"></button>
   	<button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
 	<button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>

diff --git a/activities/Blockrain.activity/js/activity.js b/activities/Blockrain.activity/js/activity.js
@@ -14,7 +14,8 @@ define(["sugar-web/activity/activity","sugar-web/env", "l10n", "tutorial"], func
 
 		//Loads highest score from Journal
 		loadHighScore();
-
+		var paused = true;
+		var gameStarted = false;
 		var $game = $('#canvas').blockrain({
       speed: 20,
       theme: 'candy',
@@ -24,12 +25,22 @@ define(["sugar-web/activity/activity","sugar-web/env", "l10n", "tutorial"], func
 		  autoBlockSize: 24,
 		  touchControls: true,
 			highestScore: myHighestScore,
-      onStart: function(){},
+		onStart: function(){			
+			gameStarted = true;
+			handlePausePlay();
+		},
 		  onRestart: function(){
 				loadHighScore(); // loads highscore when game is restarted.
+				gameStarted = true;
+				handlePausePlay();
 			},
 		  onGameOver: function(score){
 				saveHighestScore();
+				gameStarted=false;
+				paused=true;
+				var playPauseButton = document.getElementById('play-button');
+				playPauseButton.classList.remove('pause');
+				playPauseButton.classList.add('play');
 			},
 
 		  onLine: function(lines, scoreIncrement, score){
@@ -99,9 +110,34 @@ define(["sugar-web/activity/activity","sugar-web/env", "l10n", "tutorial"], func
       $game.blockrain('theme', themes[currentIx]);
     }
 
+	function handlePausePlay() {
+		var playPauseButton = document.getElementById('play-button');
+		if(!gameStarted){
+			$game.blockrain('start');
+		}
+		else{
+			if(paused) {
+				$game.blockrain('resume');
+				$game.blockrain('controls', true);
+				playPauseButton.classList.remove('play');
+				playPauseButton.classList.add('pause');
+			}
+			else {
+				$game.blockrain('pause');
+				$game.blockrain('controls', false);
+				playPauseButton.classList.remove('pause');
+				playPauseButton.classList.add('play');
+			}
+			paused = !paused;
+		}
+	}
+
     document.getElementById("btn-next").onclick = function() {
         switchTheme(true);
     };
+	document.getElementById('play-button').addEventListener('click', function () {
+		handlePausePlay();
+	});
 	document.getElementById("help-button").addEventListener('click', function(e) {
 		tutorial.start();
 	});

diff --git a/activities/Blockrain.activity/js/blockrain.jquery.src.js b/activities/Blockrain.activity/js/blockrain.jquery.src.js
@@ -77,9 +77,11 @@
 
     pause: function() {
       this._board.paused = true;
+      this._unbindButtons();
     },
 
     resume: function() {
+      if(this._board.paused) this._setupTouchControls(false);
       this._board.paused = false;
     },
 
@@ -1612,12 +1614,18 @@
         game._$touchRotateRight.hide();
         game._$touchDrop.hide();
       }
-	  $("#left-arrow").bind('touchstart click', function(event) {moveLeft(event); endMoveLeft(event)});
-	  $("#right-arrow").bind('touchstart click', function(event) {moveRight(event); endMoveRight(event)});
-	  $("#up-arrow").bind('touchstart click', rotateRight);
-	  $("#down-arrow").bind('touchstart click', function(event) {drop(event); endDrop(event)});
-    }
+      $("#left-arrow").bind('touchstart click', function(event) {moveLeft(event); endMoveLeft(event)});
+      $("#right-arrow").bind('touchstart click', function(event) {moveRight(event); endMoveRight(event)});
+      $("#up-arrow").bind('touchstart click', rotateRight);
+      $("#down-arrow").bind('touchstart click', function(event) {drop(event); endDrop(event)});
+    },
 
+    _unbindButtons: function(){
+      $("#left-arrow").unbind('touchstart click');
+      $("#right-arrow").unbind('touchstart click');
+      $("#up-arrow").unbind('touchstart click');
+      $("#down-arrow").unbind('touchstart click');
+    }
   });
 
 })(jQuery));
diff --git a/activities/Blockrain.activity/lib/tutorial.js b/activities/Blockrain.activity/lib/tutorial.js
@@ -37,6 +37,12 @@ define(["l10n"], function (l10n) {
 				title: l10n.get("TutoRightTitle"),
 				intro: l10n.get("TutoRightContent")
 			},
+			{
+				element: "#play-button",
+				position: "bottom",
+				title: l10n.get("TutoPlayTitle"),
+				intro: l10n.get("TutoPlayContent")
+			},
 			{
 				element: "#btn-next",
 				position: "bottom",

diff --git a/activities/Blockrain.activity/locales/en.json b/activities/Blockrain.activity/locales/en.json
@@ -6,6 +6,8 @@
     "TutoExplainContent": "Welcome into the Blockrain activity. Blockrain is a tile-matching puzzle video game inspired by the classic Tetris game",
     "TutoCanvasTitle": "Rules",
     "TutoCanvasContent": "The objective of the game is to manipulate blocks to create horizontal lines. You can only move the pieces in specific ways, your game is over if your pieces reach the top of the screen, and you can only remove pieces from the screen by filling all the blank space in a line (horizontally)",
+    "TutoPlayTitle": "Play/Pause",
+    "TutoPlayContent": "Use this button to play or pause your game",
     "TutoThemeTitle": "Theme",
     "TutoThemeContent": "Click here to change the theme of the game",
     "TutoRotateTitle": "Rotate",

diff --git a/activities/Blockrain.activity/locales/es.json b/activities/Blockrain.activity/locales/es.json
@@ -6,6 +6,8 @@
     "TutoExplainContent": "Bienvenido a la actividad \"Lluvia de bloques\". En \"Lluvia de bloques\", el alumno jugará a un puzzle en el que tendrá que encajar piezas y que está inspirado en el videojuego clásico Tetris",
     "TutoCanvasTitle": "Reglas",
     "TutoCanvasContent": "El objetivo del juego es manipular los bloques que aparezcan con una serie limitada de movimientos que te permitan crear líneas horizontales. Al rellenar espacios vacíos en horizontal, eliminarás la línea asociada. La partida se terminará si tus piezas alcanzan la parte superior de la pantalla",
+    "TutoPlayTitle": "Jugar/Pausar",
+    "TutoPlayContent": "Usa este botón para jugar o pausar tu partida",
     "TutoThemeTitle": "Temática",
     "TutoThemeContent": "Haz clic aquí para cambiar la temática del juego",
     "TutoRotateTitle": "Rotar",

diff --git a/activities/Blockrain.activity/locales/fr.json b/activities/Blockrain.activity/locales/fr.json
@@ -6,6 +6,8 @@
     "TutoExplainContent": "Bienvenue dans l'activité Blockrain. Blockrain est un puzzle avec des blocs, inspiré du grand classique Tetris",
     "TutoCanvasTitle": "Règles",
     "TutoCanvasContent": "L'objectif du jeu est de manipuler les blocs pour créer des lignes horizontales. Vous pouvez déplacer les pièces seulement d'une certaine manière. Le jeu se termine quand une pièce atteint le haut de l'écran et vous pouvez supprimer des pièces seulement en remplissant tous les espaces d'une ligne horizontale",
+    "TutoPlayTitle": "Play/Pause",
+    "TutoPlayContent": "Utilisez ce bouton pour lancer ou mettre en pause le jeu",
     "TutoThemeTitle": "Thème",
     "TutoThemeContent": "Cliquez ici pour change le thème du jeu",
     "TutoRotateTitle": "Rotation",

diff --git a/activities/Blockrain.activity/locales/pt.json b/activities/Blockrain.activity/locales/pt.json
@@ -6,6 +6,8 @@
     "TutoExplainContent": "Welcome into the Blockrain activity. Blockrain is a tile-matching puzzle video game inspired by the classic Tetris game",
     "TutoCanvasTitle": "Regras",
     "TutoCanvasContent": "The objective of the game is to manipulate blocks to create horizontal lines. You can only move the pieces in specific ways, your game is over if your pieces reach the top of the screen, and you can only remove pieces from the screen by filling all the blank space in a line (horizontally)",
+    "TutoPlayTitle": "Play/Pause",
+    "TutoPlayContent": "Use this button to play or pause your game",
     "TutoThemeTitle": "Theme",
     "TutoThemeContent": "Clique aqui para mudar o tema do jogo",
     "TutoRotateTitle": "Rotação",