Music game.

Credit to Maggie Johnson for initial mock, and Thao Tran for early
development.

Makefile

@@ -2,8 +2,8 @@
 # Definitions
 ##############################
 
-USER_APPS = {index,puzzle,maze,bird,turtle,movie,pond/docs,pond/tutor,pond/duck}
-ALL_JSON = {./,index,puzzle,maze,bird,turtle,movie,pond/docs,pond,pond/tutor,pond/duck}
+USER_APPS = {index,puzzle,maze,bird,turtle,movie,music,pond/docs,pond/tutor,pond/duck}
+ALL_JSON = {./,index,puzzle,maze,bird,turtle,movie,music,pond/docs,pond,pond/tutor,pond/duck}
 ALL_TEMPLATES = appengine/template.soy,appengine/index/template.soy,appengine/puzzle/template.soy,appengine/maze/template.soy,appengine/bird/template.soy,appengine/turtle/template.soy,appengine/movie/template.soy,appengine/pond/docs/template.soy,appengine/pond/template.soy,appengine/pond/tutor/template.soy,appengine/pond/duck/template.soy
 
 APP_ENGINE_THIRD_PARTY = appengine/third-party
@@ -41,6 +41,10 @@ movie-en: common-en
 	$(SOY_COMPILER) --outputPathFormat appengine/movie/generated/en/soy.js --srcs appengine/movie/template.soy
 	python build-app.py movie en
 
+music-en: common-en
+	$(SOY_COMPILER) --outputPathFormat appengine/music/generated/en/soy.js --srcs appengine/music/template.soy
+	python build-app.py music en
+
 pond-docs-en:
 	mkdir -p appengine/pond/generated/en/
 	$(SOY_COMPILER) --outputPathFormat appengine/pond/docs/generated/en/soy.js --srcs appengine/pond/docs/template.soy
@@ -64,7 +68,7 @@ pond-common-en: common-en
 common-en:
 	$(SOY_COMPILER) --outputPathFormat appengine/generated/en/soy.js --srcs appengine/template.soy
 
-en: index-en puzzle-en maze-en bird-en turtle-en movie-en pond-docs-en pond-tutor-en pond-duck-en genetics-en
+en: index-en puzzle-en maze-en bird-en turtle-en movie-en music-en pond-docs-en pond-tutor-en pond-duck-en genetics-en
 
 languages:
 	$(SOY_EXTRACTOR) --outputFile extracted_msgs.xlf --srcs $(ALL_TEMPLATES)
@@ -101,6 +105,7 @@ deps:
 	svn checkout https://github.com/google/closure-library/trunk/third_party/closure/goog/ $(APP_ENGINE_THIRD_PARTY)/third_party_goog
 	svn checkout https://github.com/ajaxorg/ace-builds/trunk/src-min-noconflict/ $(APP_ENGINE_THIRD_PARTY)/ace
 	svn checkout https://github.com/google/blockly/branches/develop/ $(APP_ENGINE_THIRD_PARTY)/blockly
+	svn checkout https://github.com/mudcube/MIDI.js/trunk/@365 $(APP_ENGINE_THIRD_PARTY)/midi-js
 	svn checkout https://github.com/CreateJS/SoundJS/trunk/lib/ $(APP_ENGINE_THIRD_PARTY)/SoundJS
 	svn checkout https://github.com/gleitz/midi-js-soundfonts/trunk/FluidR3_GM/acoustic_guitar_nylon-mp3/ $(APP_ENGINE_THIRD_PARTY)/midi-js-soundfonts/guitar
 	svn checkout https://github.com/gleitz/midi-js-soundfonts/trunk/FluidR3_GM/acoustic_grand_piano-mp3/ $(APP_ENGINE_THIRD_PARTY)/midi-js-soundfonts/piano

appengine/about.html

@@ -69,6 +69,16 @@ <h1><a id="back" href="/">Blockly Games</a> : About</h1>
 movie. Then publish your movie to Reddit for the world to see.</p>
     </td>
   </tr>
+
+  <tr>
+    <td>
+      <img src="index/music.png" height=100 width=100>
+    </td>
+    <td>
+<p>Music is an introduction to functions. Use functions to compose music.
+Then publish your music to Reddit for the world to see.</p>
+    </td>
+  </tr>
 
   <tr>
     <td>

appengine/app.yaml

@@ -1,5 +1,5 @@
 application: blockly-games
-version: 1
+version: beta
 runtime: python27
 api_version: 1
 threadsafe: no
@@ -66,6 +66,18 @@ handlers:
 - url: /movie-reddit
   script: reddit.py
   secure: always
+
+# Music app.
+- url: /music
+  static_files: music.html
+  upload: music\.html
+  secure: always
+- url: /music/
+  static_dir: music
+  secure: always
+- url: /music-reddit
+  script: reddit.py
+  secure: always
 
 # Puzzle app.
 - url: /puzzle
@@ -151,6 +163,7 @@ skip_files:
 - ^(.*/)?\..*$
 # Custom skip patterns.
 - ^\w+/sources/.*$
+- ^third-party/ace/snippets/.*$
 - ^third-party/blockly/appengine/.*$
 - ^third-party/blockly/demos/.*$
 - ^third-party/blockly/generators/dart.*$
@@ -160,7 +173,10 @@ skip_files:
 - ^third-party/blockly/i18n/.*$
 - ^third-party/blockly/msg/json/.*$
 - ^third-party/blockly/tests/.*$
+- ^third-party/midi-js/.*$
+- ^third-party/midi-js-soundfonts/.+[012567]\.mp3*$
+- ^third-party/midi-js-soundfonts/.+b[34]\.mp3*$
 - ^third-party/third_party_goog/.*$
-- ^third-party/ace/snippets/.*$
 - ^third-party/JS-Interpreter/[^c].*$  # Only serve compiled.js.
 - ^.+\.soy$
+- ^.+\.md$

appengine/bird/js/bird.js

@@ -445,7 +445,7 @@ Bird.levelHelp = function() {
     }
     if (userBlocks.indexOf('mutation else') == -1) {
       var blocks = BlocklyGames.workspace.getTopBlocks(false);
-      for (var i = 0, block; block = blocks[i]; i++) {
+      for (var i = 0, block; (block = blocks[i]); i++) {
         if (block.type == 'controls_if') {
           break;
         }
@@ -468,7 +468,7 @@ Bird.levelHelp = function() {
   } else if (BlocklyGames.LEVEL == 6) {
     if (userBlocks.indexOf('mutation') == -1) {
       var blocks = BlocklyGames.workspace.getTopBlocks(false);
-      for (var i = 0, block; block = blocks[i]; i++) {
+      for (var i = 0, block; (block = blocks[i]); i++) {
         if (block.type == 'controls_if') {
           break;
         }
@@ -500,8 +500,8 @@ Bird.levelHelp = function() {
  */
 Bird.reset = function(first) {
   // Kill all tasks.
-  for (var x = 0; x < Bird.pidList.length; x++) {
-    window.clearTimeout(Bird.pidList[x]);
+  for (var i = 0; i < Bird.pidList.length; i++) {
+    window.clearTimeout(Bird.pidList[i]);
   }
   Bird.pidList = [];
 
@@ -782,7 +782,7 @@ Bird.intersectWorm = function() {
  */
 Bird.intersectWall = function() {
   var accuracy = 0.2 * Bird.BIRD_ICON_SIZE / Bird.MAP_SIZE * 100;
-  for (var i = 0, wall; wall = Bird.MAP.walls[i]; i++) {
+  for (var i = 0, wall; (wall = Bird.MAP.walls[i]); i++) {
     var wallPoint = wall.getClosestSegmentPoint(Bird.pos);
     if (goog.math.Coordinate.distance(wallPoint, Bird.pos) < accuracy) {
       return true;

appengine/common/common.css

@@ -53,10 +53,6 @@ img[src$="help.png"] {
 
 html[dir="RTL"] .mirrorImg {
   transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
 }
 
 #languageMenu {

appengine/common/storage.js

@@ -142,10 +142,10 @@ BlocklyStorage.monitorChanges_ = function() {
   function change() {
     if (startCode != BlocklyInterface.getCode()) {
       window.location.hash = '';
-      Blockly.removeChangeListener(bindData);
+      BlocklyInterface.getWorkspace().removeChangeListener(bindData);
     }
   }
-  var bindData = BlocklyGames.workspace.addChangeListener(change);
+  var bindData = BlocklyInterface.getWorkspace().addChangeListener(change);
 };
 
 /**

appengine/index/js/index.js

@@ -32,7 +32,7 @@ goog.require('Index.soy');
 /**
  * Array of application names.
  */
-Index.APPS = ['puzzle', 'maze', 'bird', 'turtle', 'movie',
+Index.APPS = ['puzzle', 'maze', 'bird', 'turtle', 'movie', 'music',
               'pond-tutor', 'pond-duck'];
 
 /**

appengine/index/style.css

@@ -59,7 +59,7 @@ a {
   fill: none;
   stroke-dasharray: 180;
   stroke-dashoffset: 180;
-  animation: dash .6s linear forwards;
+  animation: dash .7s linear forwards;
 }
 
 @keyframes dash {
@@ -116,14 +116,18 @@ a:hover > text {
   animation-delay: 0.4s;
 }
 
-#icon-pond-tutor {
+#icon-music {
   animation-delay: 0.5s;
 }
 
-#icon-pond-duck {
+#icon-pond-tutor {
   animation-delay: 0.6s;
 }
 
+#icon-pond-duck {
+  animation-delay: 0.7s;
+}
+
 #back-puzzle {
   animation-delay: 0.3s;
 }
@@ -144,14 +148,18 @@ a:hover > text {
   animation-delay: 0.7s;
 }
 
-#back-pond-tutor {
+#back-music {
   animation-delay: 0.8s;
 }
 
-#back-pond-duck {
+#back-pond-tutor {
   animation-delay: 0.9s;
 }
 
+#back-pond-duck {
+  animation-delay: 1.0s;
+}
+
 @keyframes pop {
   from {
     transform: translate(80px, 50px) scale(0);

appengine/index/template.soy

@@ -65,39 +65,47 @@
       {call .appLink}
         {param app: 'maze' /}
         {param x: 16 /}
-        {param y: 47 /}
+        {param y: 45 /}
         {param contentText}
           {msg meaning="Games.maze" desc="IBID"}Maze{/msg}
         {/param}
       {/call}
       {call .appLink}
         {param app: 'bird' /}
-        {param x: 29 /}
-        {param y: 75 /}
+        {param x: 26 /}
+        {param y: 69 /}
         {param contentText}
           {msg meaning="Games.bird" desc="IBID"}Bird{/msg}
         {/param}
       {/call}
       {call .appLink}
         {param app: 'turtle' /}
-        {param x: 49 /}
-        {param y: 72 /}
+        {param x: 41 /}
+        {param y: 80 /}
         {param contentText}
           {msg meaning="Games.turtle" desc="IBID"}Turtle{/msg}
         {/param}
       {/call}
       {call .appLink}
         {param app: 'movie' /}
-        {param x: 64 /}
-        {param y: 48 /}
+        {param x: 55 /}
+        {param y: 61 /}
         {param contentText}
           {msg meaning="Games.movie" desc="IBID"}Movie{/msg}
         {/param}
       {/call}
+      {call .appLink}
+        {param app: 'music' /}
+        {param x: 69 /}
+        {param y: 43 /}
+        {param contentText}
+          {msg meaning="Games.music" desc="IBID"}Music{/msg}
+        {/param}
+      {/call}
       {call .appLink}
         {param app: 'pond-tutor' /}
         {param x: 83 /}
-        {param y: 53 /}
+        {param y: 55 /}
         {param contentText}
           {msg meaning="Games.pondTutor" desc="IBID"}Pond Tutor{/msg}
         {/param}
@@ -110,6 +118,7 @@
           {msg meaning="Games.pond" desc="IBID"}Pond{/msg}
         {/param}
       {/call}
+
     </g>
   </svg>
   <select id="languageMenu"></select>

appengine/js/lib-interface.js

@@ -101,7 +101,7 @@ BlocklyInterface.loadBlocks = function(defaultXml, inherit) {
   var inherited = inherit &&
       BlocklyGames.loadFromLocalStorage(BlocklyGames.NAME,
                                         BlocklyGames.LEVEL - 1);
-  if (typeof inherit == 'function') {
+  if (inherited && typeof inherit == 'function') {
     inherited = inherit(inherited);
   }
 
@@ -145,6 +145,14 @@ BlocklyInterface.getCode = function() {
   return text;
 };
 
+/**
+ * Return the main workspace.
+ * @return {Blockly.WorkspaceSvg}
+ */
+BlocklyInterface.getWorkspace = function() {
+  return BlocklyGames.workspace;
+};
+
 /**
  * Save the blocks for this level to persistent client-side storage.
  */
@@ -200,15 +208,18 @@ BlocklyInterface.nextLevel = function() {
 /**
  * Highlight the block (or clear highlighting).
  * @param {?string} id ID of block that triggered this action.
+ * @param {boolean=} opt_state If undefined, highlight specified block and
+ * automatically unhighlight all others.  If true or false, manually
+ * highlight/unhighlight the specified block.
  */
-BlocklyInterface.highlight = function(id) {
+BlocklyInterface.highlight = function(id, opt_state) {
   if (id) {
     var m = id.match(/^block_id_([^']+)$/);
     if (m) {
       id = m[1];
     }
   }
-  BlocklyGames.workspace.highlightBlock(id);
+  BlocklyGames.workspace.highlightBlock(id, opt_state);
 };
 
 /**
@@ -302,7 +313,8 @@ BlocklyInterface.importPrettify = function() {
 };
 
 // Export symbols that would otherwise be renamed by Closure compiler.
-// storage.js is not compiled and calls setCode and getCode.
+// storage.js is not compiled and calls setCode, getCode, and getWorkspace.
 window['BlocklyInterface'] = BlocklyInterface;
 BlocklyInterface['setCode'] = BlocklyInterface.setCode;
 BlocklyInterface['getCode'] = BlocklyInterface.getCode;
+BlocklyInterface['getWorkspace'] = BlocklyInterface.getWorkspace;

appengine/turtle/js/slider.js → appengine/js/slider.js

@@ -34,7 +34,7 @@ goog.require('goog.math');
  * @param {number} y The vertical offset of the slider.
  * @param {number} width The total width of the slider.
  * @param {!Element} svgParent The SVG element to append the slider to.
- * @param {Function} opt_changeFunc Optional callback function that will be
+ * @param {Function=} opt_changeFunc Optional callback function that will be
  *     called when the slider is moved.  The current value is passed.
  * @constructor
  */

appengine/maze/js/maze.js

@@ -35,7 +35,7 @@ goog.require('Maze.soy');
 BlocklyGames.NAME = 'maze';
 
 /**
- * Go to the next level.
+ * Go to the next level.  Add skin parameter.
  * @suppress {duplicate}
  */
 BlocklyInterface.nextLevel = function() {
@@ -509,6 +509,7 @@ Maze.init = function() {
   onresize(null);
 
   var toolbox = document.getElementById('toolbox');
+  // Scale the workspace so level 1 = 1.3, and level 10 = 1.0.
   var scale = 1 + (1 - (BlocklyGames.LEVEL / BlocklyGames.MAX_LEVEL)) / 3;
   BlocklyGames.workspace = Blockly.inject('blockly',
       {'media': 'third-party/blockly/media/',
@@ -853,8 +854,8 @@ Maze.hidePegmanMenu = function(e) {
  */
 Maze.reset = function(first) {
   // Kill all tasks.
-  for (var x = 0; x < Maze.pidList.length; x++) {
-    window.clearTimeout(Maze.pidList[x]);
+  for (var i = 0; i < Maze.pidList.length; i++) {
+    window.clearTimeout(Maze.pidList[i]);
   }
   Maze.pidList = [];
 
@@ -888,7 +889,7 @@ Maze.reset = function(first) {
   lookIcon.style.display = 'none';
   lookIcon.parentNode.appendChild(lookIcon);
   var paths = lookIcon.getElementsByTagName('path');
-  for (var i = 0, path; path = paths[i]; i++) {
+  for (var i = 0, path; (path = paths[i]); i++) {
     path.setAttribute('stroke', Maze.SKIN.look);
   }
 };
@@ -1386,7 +1387,7 @@ Maze.scheduleLook = function(d) {
       'rotate(' + deg + ' 0 0) scale(.4)');
   var paths = lookIcon.getElementsByTagName('path');
   lookIcon.style.display = 'inline';
-  for (var i = 0, path; path = paths[i]; i++) {
+  for (var i = 0, path; (path = paths[i]); i++) {
     Maze.scheduleLookStep(path, Maze.stepSpeed * i);
   }
 };