Added Speed Control for Bird and Maze Games

.git-hooks/commit-msg

@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+
+commit_message="$1"
+# exit with a non zero exit code incase of an invalid commit message
+
+# use git-conventional-commits, see https://github.com/qoomon/git-conventional-commits
+git-conventional-commits commit-msg-hook "$commit_message"
+
+# or verify $commit_message with your own tooling
+# ...

Makefile

@@ -2,7 +2,7 @@
 # Definitions
 ##############################
 
-REQUIRED_BINS = svn wget java python
+REQUIRED_BINS = svn wget java python3
 
 ##############################
 # Rules
@@ -11,42 +11,42 @@ REQUIRED_BINS = svn wget java python
 all: deps games
 
 index: common
-	python build/compress.py index
+	python3 build/compress.py index
 
 puzzle: common
-	python build/compress.py puzzle
+	python3 build/compress.py puzzle
 
 maze: common
-	python build/compress.py maze
+	python3 build/compress.py maze
 
 bird: common
-	python build/compress.py bird
+	python3 build/compress.py bird
 
 turtle: common
-	python build/compress.py turtle
+	python3 build/compress.py turtle
 
 movie: common
-	python build/compress.py movie
+	python3 build/compress.py movie
 
 music: common
-	python build/compress.py music
+	python3 build/compress.py music
 
 pond-tutor: common
-	python build/compress.py pond/tutor
+	python3 build/compress.py pond/tutor
 
 pond-duck: common
-	python build/compress.py pond/duck
+	python3 build/compress.py pond/duck
 
 gallery: common
-	python build/compress.py gallery
+	python3 build/compress.py gallery
 
 games: index puzzle maze bird turtle movie music pond-tutor pond-duck gallery
 
 common:
 	@echo "Converting messages.js to JSON for Translatewiki."
-	python build/messages_to_json.py
+	python3 build/messages_to_json.py
 	@echo "Converting JSON from Translatewiki to message files."
-	python build/json_to_js.py
+	python3 build/json_to_js.py
 	@echo
 
 deps:

README.md

@@ -7,3 +7,40 @@ All code is free and open source.
 **The games are available at https://blockly.games/**
 
 **The developer's site is at https://github.com/google/blockly-games/wiki**
+
+## Steps
+
+### 1. Installation
+1. Forking the `Blockly Games` repository into the user's GitHub account.
+2. Installing `Blockly Games` from the GitHub repository.
+3. Setting up game dependencies on macOS using `Homebrew` and `MacPorts`.
+4. Installing game dependencies using `make deps` and running the `make games` command.
+5. Checked, revised, and updated each sample to use "python3" initially using "python" in `./Makefile` file.
+6. Installing the `git-conventional-commits` package to the repository and included the `git-conventional-commits.yaml` file.
+
+### 2. Coding
+1. Add the following CSS3 styles to the end of the files `./appengine/bird/style.css` and `./appengine/maze/style.css`, insert the code below:
+
+```css
+.sliderTrack {
+  stroke: #aaa;
+  stroke-width: 6px;
+  stroke-linecap: round;
+}
+
+.sliderKnob {
+  fill: #ddd;
+  stroke: #bbc;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+```
+2. Add new variable into the `./appengine/bird/main.js`, `speedSlider`, and implemented the `calculateSpeed` function. This function `calculateSpeed` computes a value using specific calculations and assigns it to the `stepSpeed` variable.
+3. Add the Slider SVG icon into the `./appengine/bird/html.js` file.
+4. Require Slider into the `bird` and `maze`.
+5. Add new variable into the `./appengine/maze/main.js`, `speedSlider`, and implemented the `calculateSpeed` function. This function `calculateSpeed` computes a value using specific calculations and assigns it to the `stepSpeed` variable.
+6. Add the Slider SVG icon into the `./appengine/maze/html.js` file.
+
+### 3. Execute Game
+![bird game](screenshots/bird.png)
+![bird game](screenshots/maze.png)

appengine/bird/src/html.js

@@ -21,7 +21,7 @@ goog.require('BlocklyGames.html');
  * @param {!Object} ij Injected options.
  * @returns {string} HTML.
  */
-Bird.html.start = function(ij) {
+Bird.html.start = function (ij) {
   return `
 ${BlocklyGames.html.headerBar(ij, BlocklyGames.getMsg('Games.bird', true), '', true, false, '')}
 
@@ -32,7 +32,30 @@ ${BlocklyGames.html.headerBar(ij, BlocklyGames.getMsg('Games.bird', true), '', t
 
 <table width=400>
   <tr>
-    <td style="width: 190px;">
+  <td style="width: 190px; text-align: center; vertical-align: top;">
+    <svg
+        id="slider"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        width=150
+        height=50>
+        <!-- Slow icon. -->
+        <clipPath id="slowClipPath">
+          <rect width=26 height=12 x=5 y=14 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=-21 y=-10
+            clip-path="url(#slowClipPath)" />
+        <!-- Fast icon. -->
+        <clipPath id="fastClipPath">
+          <rect width=26 height=16 x=120 y=10 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=120 y=-11
+            clip-path="url(#fastClipPath)" />
+      </svg>
+    </td>
+    <td style="width: 15px;">
     </td>
     <td>
       <button id="runButton" class="primary" title="${BlocklyGames.getMsg('Games.runTooltip', true)}">
@@ -63,7 +86,7 @@ ${Bird.html.helpDialogs_()}
  * @returns {string} HTML.
  * @private
  */
-Bird.html.toolbox_ = function(level) {
+Bird.html.toolbox_ = function (level) {
   let xml = '<block type="bird_heading"></block>\n';
   if (level >= 2) {
     xml += `<block type="bird_noWorm" disabled="${level === 4 || level === 5}"></block>\n`;
@@ -113,8 +136,8 @@ Bird.html.toolbox_ = function(level) {
  * @returns {string} HTML.
  * @private
  */
-Bird.html.helpDialogs_ = function() {
-    return `
+Bird.html.helpDialogs_ = function () {
+  return `
 <div id="dialogHelp1" class="dialogHiddenContent">
   <table><tr><td rowspan=2>
     <img src="common/help.png">

appengine/bird/src/main.js

@@ -26,6 +26,7 @@ goog.require('BlocklyCode');
 goog.require('BlocklyDialogs');
 goog.require('BlocklyGames');
 goog.require('BlocklyInterface');
+goog.require('Slider');
 
 
 BlocklyGames.storageName = 'bird';
@@ -45,6 +46,7 @@ let pos;
 let angle;
 let currentAngle;
 let hasWorm;
+let speedSlider;
 
 /**
  * Log of duck's moves.  Recorded during execution, played back for animation.
@@ -401,6 +403,11 @@ function init() {
   if (BlocklyGames.LEVEL > 1) {
     BlocklyInterface.workspace.addChangeListener(Blockly.Events.disableOrphans);
   }
+
+  // Initialize the slider.
+  const sliderSvg = BlocklyGames.getElementById('slider');
+  speedSlider = new Slider(10, 35, 130, sliderSvg);
+
   // Not really needed, there are no user-defined functions or variables.
   Blockly.JavaScript.addReservedWords('noWorm,heading,getX,getY');
 
@@ -543,6 +550,16 @@ function levelHelp() {
   }
 }
 
+/**
+ * Calculate adjusted speed based on the speed value provided.
+ * @param {number} speed - The initial speed value.
+ * @returns {number} - The adjusted speed value.
+ */
+function calculateSpeed(speed) {
+  speed = speed * (-speedSlider.value_ + 1);
+  return speed;
+}
+
 /**
  * Reset the bird to the start position and kill any pending animation tasks.
  * @param {boolean} first True if an opening animation is to be played.
@@ -726,7 +743,7 @@ function execute() {
   }
 
   // Fast animation if execution is successful.  Slow otherwise.
-  stepSpeed = (result === ResultType.SUCCESS) ? 10 : 15;
+  stepSpeed = (result === ResultType.SUCCESS) ? calculateSpeed(10) : calculateSpeed(15);
 
   // log now contains a transcript of all the user's actions.
   // Reset the bird and animate the transcript.

appengine/bird/style.css

@@ -49,3 +49,15 @@ button.primary {
 html[dir="RTL"] button.primary {
   text-align: right;
 }
+.sliderTrack {
+  stroke: #aaa;
+  stroke-width: 6px;
+  stroke-linecap: round;
+}
+
+.sliderKnob {
+  fill: #ddd;
+  stroke: #bbc;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}

appengine/maze/src/html.js

@@ -43,7 +43,31 @@ ${BlocklyGames.html.headerBar(ij, BlocklyGames.getMsg('Games.maze', true),
 
 <table width=400>
   <tr>
-    <td style="width: 190px; text-align: center; vertical-align: top;">
+    <td>
+      <svg
+        id="slider"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        width=150
+        height=50>
+        <!-- Slow icon. -->
+        <clipPath id="slowClipPath">
+          <rect width=26 height=12 x=5 y=14 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=-21 y=-10
+            clip-path="url(#slowClipPath)" />
+        <!-- Fast icon. -->
+        <clipPath id="fastClipPath">
+          <rect width=26 height=16 x=120 y=10 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=120 y=-11
+            clip-path="url(#fastClipPath)" />
+    </svg>
+  </td>
+  <td style="width: 15px;">
+  </td>
     <td>
       <button id="runButton" class="primary" title="${BlocklyGames.getMsg('Maze.runTooltip', true)}">
         <img src="common/1x1.gif" class="run icon21"> ${BlocklyGames.getMsg('Games.runProgram', true)}

appengine/maze/src/main.js

@@ -26,6 +26,7 @@ goog.require('BlocklyCode');
 goog.require('BlocklyDialogs');
 goog.require('BlocklyGames');
 goog.require('BlocklyInterface');
+goog.require('Slider');
 goog.require('Maze.Blocks');
 goog.require('Maze.html');
 
@@ -285,6 +286,7 @@ let finish_;
 let pegmanX;
 let pegmanY;
 let pegmanD;
+let speedSlider;
 
 /**
  * Log of Pegman's moves.  Recorded during execution, played back for animation.
@@ -480,6 +482,11 @@ function init() {
        'zoom': {'startScale': scale}});
   BlocklyInterface.workspace.getAudioManager().load(SKIN.winSound, 'win');
   BlocklyInterface.workspace.getAudioManager().load(SKIN.crashSound, 'fail');
+
+  // Initialize the slider.
+  const sliderSvg = BlocklyGames.getElementById('slider');
+  speedSlider = new Slider(10, 35, 130, sliderSvg);
+
   // Not really needed, there are no user-defined functions or variables.
   Blockly.JavaScript.addReservedWords('moveForward,moveBackward,' +
       'turnRight,turnLeft,isPathForward,isPathRight,isPathBackward,isPathLeft');
@@ -738,6 +745,16 @@ function levelHelp(opt_event) {
   }
 }
 
+/**
+ * Calculate adjusted speed based on the speed value provided.
+ * @param {number} speed - The initial speed value.
+ * @returns {number} - The adjusted speed value.
+ */
+function calculateSpeed(speed) {
+    speed = speed * (-speedSlider.value_ + 1);
+    return speed;
+}
+
 /**
  * Reload with a different Pegman skin.
  * @param {number} newSkin ID of new skin.
@@ -816,7 +833,7 @@ function reset(first) {
     pegmanD = startDirection + 1;
     scheduleFinish(false);
     pidList.push(setTimeout(function() {
-      stepSpeed = 100;
+      stepSpeed = calculateSpeed(100);
       schedule([pegmanX, pegmanY, pegmanD * 4],
                [pegmanX, pegmanY, pegmanD * 4 - 4]);
       pegmanD++;
@@ -1035,10 +1052,10 @@ function execute() {
 
   // Fast animation if execution is successful.  Slow otherwise.
   if (result === ResultType.SUCCESS) {
-    stepSpeed = 100;
+    stepSpeed = calculateSpeed(100);
     log.push(['finish', null]);
   } else {
-    stepSpeed = 150;
+    stepSpeed = calculateSpeed(150);
   }
 
   // log now contains a transcript of all the user's actions.
@@ -1260,7 +1277,7 @@ function scheduleFinish(sound) {
   if (sound) {
     BlocklyInterface.workspace.getAudioManager().play('win', 0.5);
   }
-  stepSpeed = 150;  // Slow down victory animation a bit.
+  stepSpeed = calculateSpeed(150);  // Slow down victory animation a bit.
   pidList.push(setTimeout(function() {
       displayPegman(pegmanX, pegmanY, 18);
     }, stepSpeed));

appengine/maze/style.css

@@ -127,3 +127,15 @@ html[dir="RTL"] #pegmanButton>span {
   width: 49px;
   background-position: -980px 0;
 }
+.sliderTrack {
+  stroke: #aaa;
+  stroke-width: 6px;
+  stroke-linecap: round;
+}
+
+.sliderKnob {
+  fill: #ddd;
+  stroke: #bbc;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}