Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added pause functionality to Blockrain activity #1501

Merged
merged 5 commits into from
Jan 30, 2024
Merged

Added pause functionality to Blockrain activity #1501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8bad012
Add pause functionality
VishnuVardhanBR Jan 19, 2024
ea79c30
Fix pause button
VishnuVardhanBR Jan 20, 2024
b35658c
Fixed Touch buttons behaviour when paused and added tutorial
VishnuVardhanBR Jan 24, 2024
8e0b08f
Changed indentation
VishnuVardhanBR Jan 24, 2024
5969eb8
Fixed restart behaviour
VishnuVardhanBR Jan 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions activities/Blockrain.activity/css/activity.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
9 changes: 9 additions & 0 deletions activities/Blockrain.activity/icons/pause.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions activities/Blockrain.activity/icons/play.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions activities/Blockrain.activity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
40 changes: 38 additions & 2 deletions activities/Blockrain.activity/js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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){
Expand Down Expand Up @@ -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();
});
Expand Down
18 changes: 13 additions & 5 deletions activities/Blockrain.activity/js/blockrain.jquery.src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},

Expand Down Expand Up @@ -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));
6 changes: 6 additions & 0 deletions activities/Blockrain.activity/lib/tutorial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions activities/Blockrain.activity/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions activities/Blockrain.activity/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions activities/Blockrain.activity/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions activities/Blockrain.activity/locales/pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down