Add behavioural settings for the game

Option to use grid (implemented earlier).
Option for picking a given number of images.
Option to retry (currently, not working).
Add upgrade script to preserve old behavior for old games.

library.json

@@ -2,8 +2,8 @@
   "title": "Memory Game",
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
-  "minorVersion": 1,
+  "minorVersion": 2,
-  "patchVersion": 11,
+  "patchVersion": 0,
   "runnable": 1,
   "author": "Amendor AS",
   "license": "MIT",

memory-game.js

@@ -53,6 +53,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
             if (finished) {
               // Game has finished
               $feedback.addClass('h5p-show');
+              if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
             }
             else {
               // Popup is closed, continue.
@@ -64,6 +65,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           // Game has finished
           timer.stop();
           $feedback.addClass('h5p-show');
+          if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
         }
       }
       else {
@@ -107,9 +109,39 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       cards.push(card);
     };
 
+    /**
+     * @private
+     */
+    var getCardsToUse = function () {
+      var numCardsToUse = (parameters.behaviour && parameters.behaviour.numCardsToUse ? parseInt(parameters.behaviour.numCardsToUse) : 0);
+      if (numCardsToUse <= 2 || numCardsToUse >= parameters.cards.length) {
+        // Use all cards
+        return parameters.cards;
+      }
+
+      // Pick random cards from pool
+      var cardsToUse = [];
+      var pickedCardsMap = {};
+
+      var numPicket = 0;
+      while (numPicket < numCardsToUse) {
+        var pickIndex = Math.floor(Math.random() * parameters.cards.length);
+        if (pickedCardsMap[pickIndex]) {
+          continue; // Already picked, try again!
+        }
+
+        cardsToUse.push(parameters.cards[pickIndex]);
+        pickedCardsMap[pickIndex] = true;
+        numPicket++;
+      }
+
+      return cardsToUse;
+    };
+
     // Initialize cards.
-    for (var i = 0; i < parameters.cards.length; i++) {
+    var cardsToUse = getCardsToUse();
-      var cardParams = parameters.cards[i];
+    for (var i = 0; i < cardsToUse.length; i++) {
+      var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
         var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description);
@@ -186,10 +218,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      *
      * @private
      */
-    function scaleGameSize() {
+    var scaleGameSize = function () {
 
       // Check how much space we have available
       var $list = $wrapper.children('ul');
+
       var newMaxWidth = parseFloat(window.getComputedStyle($list[0]).width);
       if (maxWidth === newMaxWidth) {
         return; // Same size, no need to recalculate
@@ -236,9 +269,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       // We use font size to evenly scale all parts of the cards.
       $list.css('font-size', fontSize + 'px');
       // due to rounding errors in browsers the margins may vary a bit…
-    }
+    };
 
-    self.on('resize', scaleGameSize);
+    if (parameters.behaviour && parameters.behaviour.useGrid && cardsToUse.length) {
+      self.on('resize', scaleGameSize);
+    }
   }
 
   // Extends the event dispatcher

semantics.json

@@ -5,7 +5,7 @@
     "label": "Cards",
     "importance": "high",
     "entity": "card",
-    "min": 1,
+    "min": 2,
     "max": 100,
     "field": {
       "type": "group",
@@ -41,6 +41,39 @@
       ]
     }
   },
+  {
+    "name": "behaviour",
+    "type": "group",
+    "label": "Behavioural settings",
+    "importance": "low",
+    "description": "These options will let you control how the game behaves.",
+    "optional": true,
+    "fields": [
+      {
+        "name": "useGrid",
+        "type": "boolean",
+        "label": "Put the cards in a grid layout",
+        "importance": "low",
+        "default": true
+      },
+      {
+        "name": "numCardsToUse",
+        "type": "number",
+        "label": "Number of cards to use",
+        "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+        "importance": "low",
+        "optional": true,
+        "min": 2
+      },
+      {
+        "name": "allowRetry",
+        "type": "boolean",
+        "label": "Add button for retrying when the game is over",
+        "importance": "low",
+        "default": true
+      }
+    ]
+  },
   {
     "label": "Localization",
     "importance": "low",

upgrades.js

@@ -3,17 +3,42 @@ var H5PUpgrades = H5PUpgrades || {};
 H5PUpgrades['H5P.MemoryGame'] = (function ($) {
   return {
     1: {
-      1: {
+      /**
-        contentUpgrade: function (parameters, finished) {
+       * Asynchronous content upgrade hook.
-          // Move card images into card objects, allows for additonal properties.
+       * Upgrades content parameters to support Memory Game 1.1.
-          for (var i = 0; i < parameters.cards.length; i++) {
+       *
-            parameters.cards[i] = {
+       * Move card images into card object as this allows for additonal
-              image: parameters.cards[i]
+       * properties for each card.
-            };
+       *
-          }
+       * @params {object} parameters
-
+       * @params {function} finished
-          finished(null, parameters);
+       */
+      1: function (parameters, finished) {
+        for (var i = 0; i < parameters.cards.length; i++) {
+          parameters.cards[i] = {
+            image: parameters.cards[i]
+          };
         }
+
+        finished(null, parameters);
+      },
+
+      /**
+       * Asynchronous content upgrade hook.
+       * Upgrades content parameters to support Memory Game 1.2.
+       *
+       * Add default behavioural settings for the new options.
+       *
+       * @params {object} parameters
+       * @params {function} finished
+       */
+      2: function (parameters, finished) {
+
+        parameters.behaviour = {};
+        parameters.behaviour.useGrid = false;
+        parameters.behaviour.allowRetry = false;
+
+        finished(null, parameters);
       }
     }
   };