From 00c7273f1315a6b435749cb29d6d257160d38f35 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Mon, 20 Feb 2017 05:25:18 -0500
Subject: [PATCH 01/20] Update Crowdin configuration file

---
 crowdin.yml | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 crowdin.yml

diff --git a/crowdin.yml b/crowdin.yml
new file mode 100644
index 0000000..3b940b2
--- /dev/null
+++ b/crowdin.yml
@@ -0,0 +1,3 @@
+files:
+  - source: /language/source/en.json
+    translation: /language/%two_letters_code%.json

From ec76d44a2b07d0a697411e945d346946ca4f4968 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothy_lim@outlook.com>
Date: Mon, 20 Feb 2017 11:26:21 +0100
Subject: [PATCH 02/20] Set up crowdin translation service

---
 language/source/en.json | 62 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 language/source/en.json

diff --git a/language/source/en.json b/language/source/en.json
new file mode 100644
index 0000000..823589f
--- /dev/null
+++ b/language/source/en.json
@@ -0,0 +1,62 @@
+{
+  "semantics": [
+    {
+      "label": "Cards",
+      "entity": "card",
+      "field": {
+        "label": "Card",
+        "fields": [
+          {
+            "label": "Image"
+          },
+          {
+            "label": "Matching Image",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "label": "Behavioural settings",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "label": "Position the cards in a square",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
+        },
+        {
+          "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."
+        },
+        {
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
+    {
+      "label": "Localization",
+      "fields": [
+        {
+          "label": "Card turns text",
+          "default": "Card turns"
+        },
+        {
+          "label": "Time spent text",
+          "default": "Time spent"
+        },
+        {
+          "label": "Feedback text",
+          "default": "Good work!"
+        },
+        {
+          "label": "Try again button text",
+          "default": "Try again?"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From 9347b17279bb16bcf74bc63d4b2668bffaf49c3c Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Thu, 4 May 2017 14:20:20 +0200
Subject: [PATCH 03/20] Add options for custom card back and theme color

---
 card.js                 | 86 +++++++++++++++++++++++++++++++++++++++--
 language/ar.json        | 14 +++++++
 language/de.json        | 14 +++++++
 language/fr.json        | 14 +++++++
 language/it.json        | 14 +++++++
 language/nb.json        | 20 ++++++++++
 language/source/en.json | 62 -----------------------------
 library.json            |  9 ++++-
 memory-game.css         | 33 +++++++++++++---
 memory-game.js          | 31 +++++++++++++--
 semantics.json          | 32 +++++++++++++++
 11 files changed, 255 insertions(+), 74 deletions(-)
 delete mode 100644 language/source/en.json

diff --git a/card.js b/card.js
index 9b1aa90..0343f60 100644
--- a/card.js
+++ b/card.js
@@ -8,8 +8,9 @@
    * @param {Object} image
    * @param {number} id
    * @param {string} [description]
+   * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, description) {
+  MemoryGame.Card = function (image, id, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -88,8 +89,8 @@
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
       $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
-                  '<div class="h5p-front"></div>' +
-                  '<div class="h5p-back">' +
+                  '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles.backImage ? '' : '<span></span>') + '</div>' +
+                  '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
                     '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
                 '</div></li>')
@@ -141,4 +142,83 @@
             params.match.path !== undefined);
   };
 
+  /**
+   * Determines the theme for how the cards should look
+   *
+   * @param {string} color The base color selected
+   * @param {number} invertShades Factor used to invert shades in case of bad contrast
+   */
+  MemoryGame.Card.determineStyles = function (color, invertShades, backImage) {
+    var styles =  {
+      front: '',
+      back: '',
+      backImage: !!backImage
+    };
+
+    // Create color theme
+    if (color) {
+      var frontColor = shade(color, 43.75 * invertShades);
+      var backColor = shade(color, 56.25 * invertShades);
+
+      styles.front += 'color:' + color + ';' +
+                     'background-color:' + frontColor + ';' +
+                     'border-color:' + frontColor +';';
+      styles.back += 'color:' + color + ';' +
+                    'background-color:' + backColor + ';' +
+                    'border-color:' + frontColor +';';
+    }
+
+    // Add back image for card
+    if (backImage) {
+      var backgroundImage = 'background-image:url(' + backImage + ')';
+
+      styles.front += backgroundImage;
+      styles.back += backgroundImage;
+    }
+
+    // Prep style attribute
+    if (styles.front) {
+      styles.front = ' style="' + styles.front + '"';
+    }
+    if (styles.back) {
+      styles.back = ' style="' + styles.back + '"';
+    }
+
+    return styles;
+  };
+
+  /**
+   * Convert hex color into shade depending on given percent
+   *
+   * @private
+   * @param {string} color
+   * @param {number} percent
+   * @return {string} new color
+   */
+  var shade = function (color, percent) {
+    var newColor = '#';
+
+    // Determine if we should lighten or darken
+    var max = (percent < 0 ? 0 : 255);
+
+    // Always stay positive
+    if (percent < 0) {
+      percent *= -1;
+    }
+    percent /= 100;
+
+    for (var i = 1; i < 6; i += 2) {
+      // Grab channel and convert from hex to dec
+      var channel = parseInt(color.substr(i, 2), 16);
+
+      // Calculate new shade and convert back to hex
+      channel = (Math.round((max - channel) * percent) + channel).toString(16);
+
+      // Make sure to always use two digits
+      newColor += (channel.length < 2 ? '0' + channel : channel);
+    }
+
+    return newColor;
+  };
+
 })(H5P.MemoryGame, H5P.EventDispatcher, H5P.jQuery);
diff --git a/language/ar.json b/language/ar.json
index 3ef63b3..8e9e0a9 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "الأقلمة",
       "fields": [
diff --git a/language/de.json b/language/de.json
index d776e7c..2338693 100644
--- a/language/de.json
+++ b/language/de.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Übersetzung",
       "fields": [
diff --git a/language/fr.json b/language/fr.json
index 41f9217..619b64e 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Interface",
       "fields": [
diff --git a/language/it.json b/language/it.json
index 697442b..b0d1dbb 100644
--- a/language/it.json
+++ b/language/it.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Localizzazione",
       "fields": [
diff --git a/language/nb.json b/language/nb.json
index 5633b0d..38801d6 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -52,6 +52,26 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "label": "Tilpass utseende",
+      "englishDescription": "Control the visuals of the game.",
+      "description": "Kontroller de visuelle aspektene ved spillet.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "label": "Temafarge",
+          "englishDescription": "Choose a color to create a theme for your card game.",
+          "description": "Velg en farge for å skape et tema over kortspillet ditt."
+        },
+        {
+          "englishLabel": "Card Back",
+          "label": "Kortbaksiden",
+          "englishDescription": "Use a custom back for your cards.",
+          "description": "Bruk en tilpasset kortbakside for kortene dine."
+        }
+      ]
+    },
     {
       "englishLabel": "Localization",
       "label": "Oversettelser",
diff --git a/language/source/en.json b/language/source/en.json
deleted file mode 100644
index 823589f..0000000
--- a/language/source/en.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-  "semantics": [
-    {
-      "label": "Cards",
-      "entity": "card",
-      "field": {
-        "label": "Card",
-        "fields": [
-          {
-            "label": "Image"
-          },
-          {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
-          },
-          {
-            "label": "Description",
-            "description": "An optional short text that will pop up once the two matching cards are found."
-          }
-        ]
-      }
-    },
-    {
-      "label": "Behavioural settings",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
-        {
-          "label": "Position the cards in a square",
-          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
-        },
-        {
-          "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."
-        },
-        {
-          "label": "Add button for retrying when the game is over"
-        }
-      ]
-    },
-    {
-      "label": "Localization",
-      "fields": [
-        {
-          "label": "Card turns text",
-          "default": "Card turns"
-        },
-        {
-          "label": "Time spent text",
-          "default": "Time spent"
-        },
-        {
-          "label": "Feedback text",
-          "default": "Good work!"
-        },
-        {
-          "label": "Try again button text",
-          "default": "Try again?"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/library.json b/library.json
index bac360c..7aac140 100644
--- a/library.json
+++ b/library.json
@@ -36,5 +36,12 @@
       "majorVersion": 0,
       "minorVersion": 4
     }
+  ],
+  "editorDependencies": [
+    {
+      "machineName": "H5PEditor.ColorSelector",
+      "majorVersion": 1,
+      "minorVersion": 2
+    }
   ]
-}
\ No newline at end of file
+}
diff --git a/memory-game.css b/memory-game.css
index cb3f9ef..d1ef427 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -25,6 +25,7 @@
   display: inline-block !important;
   margin: auto !important;
   vertical-align: middle;
+  position: relative;
 }
 .h5p-memory-game .h5p-memory-wrap {
   float: left;
@@ -55,6 +56,7 @@
   width: 100%;
   height: 100%;
   background: #cfcfcf;
+  background-size: cover;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -75,14 +77,30 @@
 .h5p-memory-game .h5p-memory-card .h5p-front {
   cursor: pointer;
   text-align: center;
+  color: #909090;
 }
-.h5p-memory-game .h5p-memory-card .h5p-front:hover {
-  background: #dfdfdf;
+.h5p-memory-game .h5p-memory-card .h5p-front:before,
+.h5p-memory-game .h5p-memory-card .h5p-back:before {
+  position: absolute;
+  display: block;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0;
 }
-.h5p-memory-game .h5p-memory-card .h5p-front:before {
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before {
+  background: #000;
+}
+
+.h5p-memory-game .h5p-memory-card .h5p-front:hover:before {
+  opacity: 0.4;
+}
+.h5p-memory-game .h5p-memory-card .h5p-front > span:before {
+  position: relative;
   content: "?";
   font-size: 3.75em;
-  color: #909090;
   line-height: 1.67em;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:after {
@@ -102,13 +120,16 @@
 .h5p-memory-game .h5p-memory-card .h5p-back {
   line-height: 5.9em;
   text-align: center;
-  background: #f0f0f0;
+  background-color: #f0f0f0;
   -webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
   transform: rotateY(-180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -ms-transform: scale(0,1.1);
 }
+.h5p-memory-game .h5p-memory-card .h5p-back:before {
+  opacity: 0.5;
+}
 .h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
   -webkit-transform: rotateY(0deg);
   -moz-transform: rotateY(0deg);
@@ -124,6 +145,8 @@
 }
 .h5p-memory-game .h5p-memory-card.h5p-matched {
   opacity: 0.3;
+}
+.h5p-memory-game .h5p-memory-card.h5p-matched img {
   filter: grayscale(100%);
 }
 
diff --git a/memory-game.js b/memory-game.js
index 2e2cd2f..a0fd4b9 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -247,21 +247,30 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       return cardsToUse;
     };
 
+    var cardStyles, invertShades;
+    if (parameters.lookNFeel) {
+      // If the contrast between the chosen color and white is too low we invert the shades to create good contrast
+      invertShades = (parameters.lookNFeel.themeColor &&
+                      getContrast(parameters.lookNFeel.themeColor) < 1.7 ? -1 : 1);
+      var backImage = (parameters.lookNFeel.cardBack ? H5P.getPath(parameters.lookNFeel.cardBack.path, id) : null);
+      cardStyles = MemoryGame.Card.determineStyles(parameters.lookNFeel.themeColor, invertShades, backImage);
+    }
+
     // Initialize cards.
     var cardsToUse = getCardsToUse();
     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);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -280,6 +289,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       this.triggerXAPI('attempted');
       // TODO: Only create on first attach!
       $wrapper = $container.addClass('h5p-memory-game').html('');
+      if (invertShades === -1) {
+        $container.addClass('h5p-invert-shades');
+      }
 
       // Add cards to list
       var $list = $('<ul/>');
@@ -380,5 +392,18 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
   MemoryGame.prototype = Object.create(EventDispatcher.prototype);
   MemoryGame.prototype.constructor = MemoryGame;
 
+  /**
+   * Determine color contrast level compared to white(#fff)
+   *
+   * @private
+   * @param {string} color hex code
+   * @return {number} From 1 to Infinity.
+   */
+  var getContrast = function (color) {
+    return 255 / ((parseInt(color.substr(1, 2), 16) * 299 +
+                   parseInt(color.substr(3, 2), 16) * 587 +
+                   parseInt(color.substr(5, 2), 16) * 144) / 1000);
+  };
+
   return MemoryGame;
 })(H5P.EventDispatcher, H5P.jQuery);
diff --git a/semantics.json b/semantics.json
index b25e38c..ea1e290 100644
--- a/semantics.json
+++ b/semantics.json
@@ -75,6 +75,38 @@
       }
     ]
   },
+  {
+    "name": "lookNFeel",
+    "type": "group",
+    "label": "Look and feel",
+    "importance": "low",
+    "description": "Control the visuals of the game.",
+    "optional": true,
+    "fields": [
+      {
+        "name": "themeColor",
+        "type": "text",
+        "label": "Theme Color",
+        "importance": "low",
+        "description": "Choose a color to create a theme for your card game.",
+        "optional": true,
+        "default": "#909090",
+        "widget": "colorSelector",
+        "spectrum": {
+          "showInput": true
+        }
+      },
+      {
+        "name": "cardBack",
+        "type": "image",
+        "label": "Card Back",
+        "importance": "low",
+        "optional": true,
+        "description": "Use a custom back for your cards.",
+        "ratio": 1
+      }
+    ]
+  },
   {
     "label": "Localization",
     "importance": "low",

From c5ac5f876032e1372c23e073780df0ed0b837a14 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 8 May 2017 15:14:18 +0200
Subject: [PATCH 04/20] Improved description popup design

---
 card.js         | 15 +++++++++++----
 memory-game.css | 42 ++++++++++++++++++++++++++++++++++--------
 memory-game.js  |  9 +++++++--
 popup.js        | 20 +++++++++++---------
 4 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/card.js b/card.js
index 0343f60..f4ad3fe 100644
--- a/card.js
+++ b/card.js
@@ -152,6 +152,7 @@
     var styles =  {
       front: '',
       back: '',
+      popup: '',
       backImage: !!backImage
     };
 
@@ -161,11 +162,13 @@
       var backColor = shade(color, 56.25 * invertShades);
 
       styles.front += 'color:' + color + ';' +
-                     'background-color:' + frontColor + ';' +
-                     'border-color:' + frontColor +';';
+                      'background-color:' + frontColor + ';' +
+                      'border-color:' + frontColor +';';
       styles.back += 'color:' + color + ';' +
-                    'background-color:' + backColor + ';' +
-                    'border-color:' + frontColor +';';
+                     'background-color:' + backColor + ';' +
+                     'border-color:' + frontColor +';';
+      styles.popup += 'border-color:' + backColor + ';' +
+                      'background-color:' + shade(color, 90 * invertShades) + ';';
     }
 
     // Add back image for card
@@ -174,6 +177,7 @@
 
       styles.front += backgroundImage;
       styles.back += backgroundImage;
+      styles.popup += backgroundImage;
     }
 
     // Prep style attribute
@@ -183,6 +187,9 @@
     if (styles.back) {
       styles.back = ' style="' + styles.back + '"';
     }
+    if (styles.popup) {
+      styles.popup = ' style="' + styles.popup + '"';
+    }
 
     return styles;
   };
diff --git a/memory-game.css b/memory-game.css
index d1ef427..510444b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -80,7 +80,8 @@
   color: #909090;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:before,
-.h5p-memory-game .h5p-memory-card .h5p-back:before {
+.h5p-memory-game .h5p-memory-card .h5p-back:before,
+.h5p-memory-game .h5p-memory-image:before {
   position: absolute;
   display: block;
   content: "";
@@ -90,7 +91,8 @@
   opacity: 0;
 }
 .h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
-.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before {
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before,
+.h5p-memory-game.h5p-invert-shades .h5p-memory-image:before {
   background: #000;
 }
 
@@ -127,7 +129,8 @@
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -ms-transform: scale(0,1.1);
 }
-.h5p-memory-game .h5p-memory-card .h5p-back:before {
+.h5p-memory-game .h5p-memory-card .h5p-back:before,
+.h5p-memory-game .h5p-memory-image:before {
   opacity: 0.5;
 }
 .h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
@@ -193,19 +196,31 @@
 .h5p-memory-game .h5p-memory-pop {
   display: none;
   background: #fff;
-  padding: 1em;
-  width: 20em;
+  padding: 0.25em;
+  width: 24em;
   max-width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
-  box-shadow: 0 0 1em #666;
+  box-shadow: 0 0 2em #666;
+  border-radius: 0.25em;
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
 }
+.h5p-memory-game .h5p-memory-top {
+  padding: 0em 1em;
+  background-color: #f0f0f0;
+  background-size: cover;
+  text-align: center;
+  margin-bottom: 1.75em;
+  border-bottom: 1px solid #d0d0d0;
+}
 .h5p-memory-game .h5p-memory-image {
-  float: left;
+  display: inline-block;
+  position: relative;
+  top: 1.5em;
+  left: -0.5em;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -214,12 +229,23 @@
   width: 6.25em;
   height: 6.25em;
   text-align: center;
+  overflow: hidden;
+  box-shadow: 0 0 1em rgba(125,125,125,0.5);
+}
+.h5p-memory-game .h5p-memory-image:first-child {
+  top: 1em;
+  left: 0;
+}
+.h5p-memory-game .h5p-memory-two-images .h5p-memory-image:first-child {
+  left: 0.5em;
 }
 .h5p-memory-game .h5p-row-break {
   clear: left;
 }
 .h5p-memory-game .h5p-memory-desc {
-  margin-left: 7em;
+  padding: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
 }
 .h5p-memory-reset {
   position: absolute;
diff --git a/memory-game.js b/memory-game.js
index a0fd4b9..3933631 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -67,7 +67,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       if (desc !== undefined) {
         // Pause timer and show desciption.
         timer.pause();
-        popup.show(desc, card.getImage(), function () {
+        var imgs = [card.getImage()];
+        if (card.hasTwoImages) {
+          imgs.push(mate.getImage());
+        }
+        popup.show(desc, imgs, cardStyles.back, function () {
           if (isFinished) {
             // Game done
             finished();
@@ -267,6 +271,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
           cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
+          cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
@@ -314,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container);
+        popup = new MemoryGame.Popup($container, cardStyles.popup);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index bee3ceb..5f07339 100644
--- a/popup.js
+++ b/popup.js
@@ -6,26 +6,29 @@
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
    */
-  MemoryGame.Popup = function ($container) {
+  MemoryGame.Popup = function ($container, styles) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-image"></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + styles + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
-    var $image = $popup.find('.h5p-memory-image');
+    var $top = $popup.find('.h5p-memory-top');
 
     /**
      * Show the popup.
      *
      * @param {string} desc
-     * @param {H5P.jQuery} $img
+     * @param {H5P.jQuery[]} imgs
      * @param {function} done
      */
-    self.show = function (desc, $img, done) {
+    self.show = function (desc, imgs, styles, done) {
       $desc.html(desc);
-      $img.appendTo($image.html(''));
+      $top.html('').toggleClass('h5p-memory-two-images', imgs.length > 1);
+      for (var i = 0; i < imgs.length; i++) {
+        $('<div class="h5p-memory-image"' + styles + '></div>').append(imgs[i]).appendTo($top);
+      }
       $popup.show();
       closed = done;
     };
@@ -47,15 +50,14 @@
      */
     self.setSize = function (fontSize) {
       // Set image size
-      $image[0].style.fontSize = fontSize + 'px';
+      $top[0].style.fontSize = fontSize + 'px';
 
       // Determine card size
       var cardSize = fontSize * 6.25; // From CSS
 
       // Set popup size
-      $popup[0].style.minWidth = (cardSize * 2) + 'px';
+      $popup[0].style.minWidth = (cardSize * 2.5) + 'px';
       $popup[0].style.minHeight = cardSize + 'px';
-      $desc[0].style.marginLeft = (cardSize + 20) + 'px';
     };
   };
 

From 5583307cb640480ce72a746e48fa4d5691b8a532 Mon Sep 17 00:00:00 2001
From: sabahuddin <sabahuddin.s@gmail.com>
Date: Wed, 14 Jun 2017 05:58:27 +0200
Subject: [PATCH 05/20] (Bosnian) bs-BA.json

Bosnian translation
---
 language/bs-BA.json | 87 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 language/bs-BA.json

diff --git a/language/bs-BA.json b/language/bs-BA.json
new file mode 100644
index 0000000..872b720
--- /dev/null
+++ b/language/bs-BA.json
@@ -0,0 +1,87 @@
+{
+  "semantics": [
+    {
+      "label": "Karte",
+      "entity": "karte",
+      "field": {
+        "label": "Karte",
+        "fields": [
+          {
+            "label": "Slika"
+          },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Ista slika",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
+          },
+          {
+            "label": "Opis",
+            "description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
+          }
+        ]
+      }
+    },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Podešavanje ponašanja",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "englishLabel": "Position the cards in a square",
+          "label": "Poredaj karte u redove ",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Broj karata za upotrebu",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Poleđina karata",
+          "englishDescription": "Koristi standardnu pozadinu za karte."
+        }
+      ]
+    },
+    {
+      "label": "Prijevod",
+      "fields": [
+        {
+          "label": "Tekst kad se okrene karta ",
+          "default": "Okrenuta karta"
+        },
+        {
+          "label": "Tekst za provedeno vrijeme",
+          "default": "Provedeno vrijeme"
+        },
+        {
+          "label": "Feedback tekst",
+          "default": "BRAVO!"
+        },
+        {
+          "englishLabel": "Tekst na dugmetu pokušaj ponovo",
+          "label": "Tekst na dugmetu pokušaj ponovo",
+          "englishDefault": "Pokušaj ponovo?",
+          "default": "Pokušaj ponovo?"
+        }
+      ]
+    }
+  ]
+}

From fb65581a8c1ccf97e91781fc525c1a068820177a Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 16 Jun 2017 10:10:03 +0200
Subject: [PATCH 06/20] Rename bs-BA.json to bs.json

---
 language/{bs-BA.json => bs.json} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename language/{bs-BA.json => bs.json} (100%)

diff --git a/language/bs-BA.json b/language/bs.json
similarity index 100%
rename from language/bs-BA.json
rename to language/bs.json

From f99003cf4cf6f8ab8674d5f76dd7a96e1467b542 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:20:01 +0200
Subject: [PATCH 07/20] Fix image alignment in popup

---
 memory-game.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/memory-game.css b/memory-game.css
index 510444b..6a1ab7b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -218,6 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
+  line-height: 6;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From ce33c50ab9004cdb4b3a60c671e2f2c079528475 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:34:34 +0200
Subject: [PATCH 08/20] Fix image alignment again

---
 memory-game.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-game.css b/memory-game.css
index 6a1ab7b..b2aa5e3 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -218,7 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
-  line-height: 6;
+  line-height: 5.9;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From 2ac7ca6721cb04957e1d66a0bd59b9f0e2894985 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:37:55 +0200
Subject: [PATCH 09/20] Patch version bump

---
 library.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library.json b/library.json
index 7aac140..52a3496 100644
--- a/library.json
+++ b/library.json
@@ -3,7 +3,7 @@
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
   "minorVersion": 2,
-  "patchVersion": 2,
+  "patchVersion": 3,
   "runnable": 1,
   "author": "Joubel",
   "license": "MIT",

From 8289ff5f8cdfd4511227499d1c3c94866de2d411 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:58:13 +0200
Subject: [PATCH 10/20] Fix issues with old content

---
 card.js        | 2 +-
 memory-game.js | 4 ++--
 popup.js       | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/card.js b/card.js
index f4ad3fe..9543016 100644
--- a/card.js
+++ b/card.js
@@ -89,7 +89,7 @@
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
       $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
-                  '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles.backImage ? '' : '<span></span>') + '</div>' +
+                  '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
                   '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
                     '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
diff --git a/memory-game.js b/memory-game.js
index 3933631..99b9a14 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -71,7 +71,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (card.hasTwoImages) {
           imgs.push(mate.getImage());
         }
-        popup.show(desc, imgs, cardStyles.back, function () {
+        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
           if (isFinished) {
             // Game done
             finished();
@@ -319,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles.popup);
+        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index 5f07339..7bbcac6 100644
--- a/popup.js
+++ b/popup.js
@@ -5,6 +5,7 @@
    *
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
+   * @param {string} [styles]
    */
   MemoryGame.Popup = function ($container, styles) {
     /** @alias H5P.MemoryGame.Popup# */
@@ -12,7 +13,7 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + styles + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
@@ -27,7 +28,7 @@
       $desc.html(desc);
       $top.html('').toggleClass('h5p-memory-two-images', imgs.length > 1);
       for (var i = 0; i < imgs.length; i++) {
-        $('<div class="h5p-memory-image"' + styles + '></div>').append(imgs[i]).appendTo($top);
+        $('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
       }
       $popup.show();
       closed = done;

From 7dd0d60758e3a4ea68b91cd97675342d29d01392 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 11:25:04 +0200
Subject: [PATCH 11/20] Perfect image aligment

---
 memory-game.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/memory-game.css b/memory-game.css
index b2aa5e3..2015804 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -120,7 +120,7 @@
   background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
 }
 .h5p-memory-game .h5p-memory-card .h5p-back {
-  line-height: 5.9em;
+  line-height: 5.83em;
   text-align: center;
   background-color: #f0f0f0;
   -webkit-transform: rotateY(-180deg);
@@ -218,7 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
-  line-height: 5.9;
+  line-height: 5.83em;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From aa5cc002b398b4bba3b7ebdfa259964fd8b44500 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 11:52:30 +0200
Subject: [PATCH 12/20] Add close button to dialog

---
 language/ar.json |  8 +++++---
 language/bs.json |  8 ++++++--
 language/de.json |  8 +++++---
 language/fr.json |  8 +++++---
 language/it.json |  8 +++++---
 language/nb.json |  6 ++++++
 memory-game.css  | 20 ++++++++++++++++++++
 memory-game.js   |  2 +-
 popup.js         | 15 +++++++++++++--
 semantics.json   |  7 +++++++
 10 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/language/ar.json b/language/ar.json
index 8e9e0a9..0f2a1fa 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/bs.json b/language/bs.json
index 872b720..c97e6ca 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -76,10 +76,14 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Tekst na dugmetu pokušaj ponovo",
+          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Pokušaj ponovo?",
+          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/de.json b/language/de.json
index 2338693..9abf453 100644
--- a/language/de.json
+++ b/language/de.json
@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/fr.json b/language/fr.json
index 619b64e..204a6d9 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/it.json b/language/it.json
index b0d1dbb..1137a03 100644
--- a/language/it.json
+++ b/language/it.json
@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/nb.json b/language/nb.json
index 38801d6..53e6ccc 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -99,6 +99,12 @@
           "label": "Prøv på nytt-tekst",
           "englishDefault": "Try again?",
           "default": "Prøv på nytt?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "label": "Lukk knapp-merkelapp",
+          "englishDefault": "Close",
+          "default": "Lukk"
         }
       ]
     }
diff --git a/memory-game.css b/memory-game.css
index 2015804..e4140ed 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -248,6 +248,26 @@
   margin-bottom: 0.5em;
   text-align: center;
 }
+.h5p-memory-game .h5p-memory-close {
+  cursor: pointer;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 2em;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  color: #888;
+}
+.h5p-memory-game .h5p-memory-close:before {
+  content: "\00D7"
+}
+.h5p-memory-game .h5p-memory-close:hover {
+  color: #666;
+}
+.h5p-memory-game .h5p-memory-close:focus {
+  outline: 2px dashed pink;
+}
 .h5p-memory-reset {
   position: absolute;
   top: 50%;
diff --git a/memory-game.js b/memory-game.js
index 99b9a14..4ace9de 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -319,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined);
+        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined, parameters.l10n);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index 7bbcac6..ccebb6b 100644
--- a/popup.js
+++ b/popup.js
@@ -6,17 +6,28 @@
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
    * @param {string} [styles]
+   * @param {Object.<string, string>} l10n
    */
-  MemoryGame.Popup = function ($container, styles) {
+  MemoryGame.Popup = function ($container, styles, l10n) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
+    // Hook up the close button
+    $popup.find('.h5p-memory-close').on('click', function () {
+      self.close();
+    }).on('keypress', function (event) {
+      if (event.which === 13 || event.which === 32) {
+        self.close();
+        event.preventDefault();
+      }
+    });
+
     /**
      * Show the popup.
      *
diff --git a/semantics.json b/semantics.json
index ea1e290..67f7223 100644
--- a/semantics.json
+++ b/semantics.json
@@ -141,6 +141,13 @@
         "name": "tryAgain",
         "type": "text",
         "default": "Try again?"
+      },
+      {
+        "label": "Close button label",
+        "importance": "low",
+        "name": "closeLabel",
+        "type": "text",
+        "default": "Close"
       }
     ]
   }

From 11bc5fa2a2befba4b01d01815df52eded26993c9 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:17:49 +0200
Subject: [PATCH 13/20] Add duration, completion and success to xAPI completed
 event

---
 memory-game.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/memory-game.js b/memory-game.js
index 4ace9de..9a0e2da 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -60,10 +60,6 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var isFinished = (removed === cards.length);
       var desc = card.getDescription();
 
-      if (isFinished) {
-         self.triggerXAPIScored(1, 1, 'completed');
-      }
-
       if (desc !== undefined) {
         // Pause timer and show desciption.
         timer.pause();
@@ -95,6 +91,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     var finished = function () {
       timer.stop();
       $feedback.addClass('h5p-show');
+
+      // Create and trigger xAPI event 'completed'
+      var completedEvent = self.createXAPIEventTemplate('completed');
+      completedEvent.setScoredResult(1, 1, self, true, true);
+      completedEvent.data.statement.result.duration = 'PT' + (Math.round(timer.getTime() / 10) / 100) + 'S';
+      self.trigger(completedEvent);
+
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
         var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {

From 1ca7cc70f474dbd470641e719cf962e53f67868e Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:28:15 +0200
Subject: [PATCH 14/20] Remove theme styling of popup

---
 card.js        | 7 -------
 memory-game.js | 2 +-
 popup.js       | 5 ++---
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/card.js b/card.js
index 9543016..660a9bf 100644
--- a/card.js
+++ b/card.js
@@ -152,7 +152,6 @@
     var styles =  {
       front: '',
       back: '',
-      popup: '',
       backImage: !!backImage
     };
 
@@ -167,8 +166,6 @@
       styles.back += 'color:' + color + ';' +
                      'background-color:' + backColor + ';' +
                      'border-color:' + frontColor +';';
-      styles.popup += 'border-color:' + backColor + ';' +
-                      'background-color:' + shade(color, 90 * invertShades) + ';';
     }
 
     // Add back image for card
@@ -177,7 +174,6 @@
 
       styles.front += backgroundImage;
       styles.back += backgroundImage;
-      styles.popup += backgroundImage;
     }
 
     // Prep style attribute
@@ -187,9 +183,6 @@
     if (styles.back) {
       styles.back = ' style="' + styles.back + '"';
     }
-    if (styles.popup) {
-      styles.popup = ' style="' + styles.popup + '"';
-    }
 
     return styles;
   };
diff --git a/memory-game.js b/memory-game.js
index 9a0e2da..b60a575 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -322,7 +322,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined, parameters.l10n);
+        popup = new MemoryGame.Popup($container, parameters.l10n);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index ccebb6b..24b2b46 100644
--- a/popup.js
+++ b/popup.js
@@ -5,16 +5,15 @@
    *
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
-   * @param {string} [styles]
    * @param {Object.<string, string>} l10n
    */
-  MemoryGame.Popup = function ($container, styles, l10n) {
+  MemoryGame.Popup = function ($container, l10n) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 

From 857b5069b68dfc9f8a041d68ae03ffc85e8614fe Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:42:14 +0200
Subject: [PATCH 15/20] Make sure card back covers popup image

---
 memory-game.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/memory-game.css b/memory-game.css
index e4140ed..da2a72b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -232,6 +232,7 @@
   text-align: center;
   overflow: hidden;
   box-shadow: 0 0 1em rgba(125,125,125,0.5);
+  background-size: cover;
 }
 .h5p-memory-game .h5p-memory-image:first-child {
   top: 1em;

From 746e599208ddf932753dda19773e0e0e3934a637 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 14:25:31 +0200
Subject: [PATCH 16/20] Add vertical tabs + new styling for retry button +
 effects

---
 library.json    | 10 ++++++++++
 memory-game.css | 35 +++++++++++++++++++++++++++++------
 memory-game.js  | 18 +++++++++++++-----
 semantics.json  |  6 ++++++
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/library.json b/library.json
index 52a3496..a396e92 100644
--- a/library.json
+++ b/library.json
@@ -35,6 +35,11 @@
       "machineName": "H5P.Timer",
       "majorVersion": 0,
       "minorVersion": 4
+    },
+    {
+      "machineName": "FontAwesome",
+      "majorVersion": 4,
+      "minorVersion": 5
     }
   ],
   "editorDependencies": [
@@ -42,6 +47,11 @@
       "machineName": "H5PEditor.ColorSelector",
       "majorVersion": 1,
       "minorVersion": 2
+    },
+    {
+      "machineName": "H5PEditor.VerticalTabs",
+      "majorVersion": 1,
+      "minorVersion": 3
     }
   ]
 }
diff --git a/memory-game.css b/memory-game.css
index da2a72b..199a07b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -273,13 +273,36 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%) scale(1) rotate(0);
   cursor: pointer;
-  font-style: italic;
-  text-shadow: 0 0 0.5em white;
-  padding: 0.125em 0.25em;
-  line-height: 1;
+  line-height: 1.2;
+  padding: 0.5em 1.25em;
+  border-radius: 2em;
+  background: #1a73d9;
+  color: #ffffff;
+  box-shadow: 0 0.5em 1em #999;
+  opacity: 1;
+  transition: box-shadow 200ms linear, margin 200ms linear, transform 300ms ease-out, opacity 300ms ease-out;
+}
+.h5p-memory-reset:before {
+  font-family: 'H5PFontAwesome4';
+  content: "\f01e";
+  margin-right: 0.5em;
+}
+.h5p-memory-reset:hover,
+.h5p-memory-reset:focus {
+  background: #1356a3;
+  box-shadow: 0 1em 1.5em #999;
+  margin-top: -0.2em;
 }
 .h5p-memory-reset:focus {
-  outline: dashed pink;
+  outline: 2px dashed pink;
+}
+.h5p-memory-transin {
+  transform: translate(-50%,-50%) scale(0) rotate(180deg);
+  opacity: 0;
+}
+.h5p-memory-transout {
+  transform: translate(-50%,-450%) scale(0) rotate(360deg);
+  opacity: 0;
 }
diff --git a/memory-game.js b/memory-game.js
index b60a575..976d8d0 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -100,17 +100,25 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
-        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {
+        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Reset', function () {
           // Trigger handler (action)
 
-          resetGame();
+          retryButton.classList.add('h5p-memory-transout');
+          setTimeout(function () {
+            // Remove button on nextTick to get transition effect
+            $wrapper[0].removeChild(retryButton);
+          }, 300);
 
-          // Remove button from DOM
-          $wrapper[0].removeChild(this);
+          resetGame();
         });
+        retryButton.classList.add('h5p-memory-transin');
+        setTimeout(function () {
+          // Remove class on nextTick to get transition effect
+          retryButton.classList.remove('h5p-memory-transin');
+        }, 0);
 
         // Same size as cards
-        retryButton.style.fontSize = $wrapper.children('ul')[0].style.fontSize;
+        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.5) + 'px';
 
         $wrapper[0].appendChild(retryButton); // Add to DOM
       }
diff --git a/semantics.json b/semantics.json
index 67f7223..fd274e2 100644
--- a/semantics.json
+++ b/semantics.json
@@ -2,6 +2,12 @@
   {
     "name": "cards",
     "type": "list",
+    "widgets": [
+      {
+        "name": "VerticalTabs",
+        "label": "Default"
+      }
+    ],
     "label": "Cards",
     "importance": "high",
     "entity": "card",

From aead8728d8b1fc1a2b6c4a82d3e01c379898eb53 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 14:29:23 +0200
Subject: [PATCH 17/20] Adjust button size

---
 memory-game.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-game.js b/memory-game.js
index 976d8d0..a0029f6 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -118,7 +118,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         }, 0);
 
         // Same size as cards
-        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.5) + 'px';
+        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.75) + 'px';
 
         $wrapper[0].appendChild(retryButton); // Add to DOM
       }

From 4cedecf944ba15879ddd9f147f2c550c8a35314a Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 23 Jun 2017 14:13:15 +0200
Subject: [PATCH 18/20] HFP-1210 Set up Crowdin

---
 crowdin.yml       |  2 +-
 language/.en.json | 87 +++++++++++++++++++++++++++++++++++++++++++++++
 language/ar.json  | 33 +++---------------
 language/bs.json  | 30 +++-------------
 language/de.json  | 33 +++---------------
 language/fr.json  | 33 +++---------------
 language/it.json  | 33 +++---------------
 language/nb.json  | 34 +-----------------
 8 files changed, 113 insertions(+), 172 deletions(-)
 create mode 100644 language/.en.json

diff --git a/crowdin.yml b/crowdin.yml
index 3b940b2..48edea1 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,3 +1,3 @@
 files:
-  - source: /language/source/en.json
+  - source: /language/.en.json
     translation: /language/%two_letters_code%.json
diff --git a/language/.en.json b/language/.en.json
new file mode 100644
index 0000000..8f501f2
--- /dev/null
+++ b/language/.en.json
@@ -0,0 +1,87 @@
+{
+  "semantics": [
+    {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
+      "label": "Cards",
+      "entity": "card",
+      "field": {
+        "label": "Card",
+        "fields": [
+          {
+            "label": "Image"
+          },
+          {
+            "label": "Matching Image",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "label": "Behavioural settings",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "label": "Position the cards in a square",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
+        },
+        {
+          "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."
+        },
+        {
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
+    {
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
+      "fields": [
+        {
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090",
+          "spectrum": {}
+        },
+        {
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
+        }
+      ]
+    },
+    {
+      "label": "Localization",
+      "fields": [
+        {
+          "label": "Card turns text",
+          "default": "Card turns"
+        },
+        {
+          "label": "Time spent text",
+          "default": "Time spent"
+        },
+        {
+          "label": "Feedback text",
+          "default": "Good work!"
+        },
+        {
+          "label": "Try again button text",
+          "default": "Try again?"
+        },
+        {
+          "label": "Close button label",
+          "default": "Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ar.json b/language/ar.json
index 0f2a1fa..a61cb4e 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -10,9 +10,7 @@
             "label": "الصورة"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -72,15 +55,9 @@
         {
           "label": "نص الملاحظات"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/bs.json b/language/bs.json
index c97e6ca..9a6c016 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -10,9 +10,7 @@
             "label": "Slika"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Ista slika",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Podešavanje ponašanja",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Poredaj karte u redove ",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Broj karata za upotrebu",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Poleđina karata",
-          "englishDescription": "Koristi standardnu pozadinu za karte."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -76,16 +59,11 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
         },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/de.json b/language/de.json
index 9abf453..533d1d3 100644
--- a/language/de.json
+++ b/language/de.json
@@ -10,9 +10,7 @@
             "label": "Bild"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -75,15 +58,9 @@
           "label": "Text als Rückmeldung",
           "default": "Gute Arbeit!"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/fr.json b/language/fr.json
index 204a6d9..22313fc 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -10,9 +10,7 @@
             "label": "Image"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -75,15 +58,9 @@
           "label": "Texte de l'appréciation finale",
           "default": "Bien joué !"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/it.json b/language/it.json
index 1137a03..1484e25 100644
--- a/language/it.json
+++ b/language/it.json
@@ -10,9 +10,7 @@
             "label": "Immagine"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -72,15 +55,9 @@
         {
           "label": "Testo Feedback"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/nb.json b/language/nb.json
index 53e6ccc..5905bb6 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -1,112 +1,80 @@
 {
   "semantics": [
     {
-      "englishLabel": "Cards",
       "label": "Kort",
-      "englishEntity": "card",
       "entity": "kort",
       "field": {
-        "englishLabel": "Card",
         "label": "Kort",
         "fields": [
           {
-            "englishLabel": "Image",
             "label": "Bilde"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Tilhørende bilde",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
           },
           {
-            "englishLabel": "Description",
             "label": "Beskrivelse",
-            "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
             "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Innstillinger for oppførsel",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Plasser kortene i en firkant",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Vil forsøk å samsvare antall kolonner og rader når kortene legges ut. Etterpå vil kortene bli skalert til å passe beholderen."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Antall kort som skal brukes",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Legg til knapp for å prøve på nytt når spillet er over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
       "label": "Tilpass utseende",
-      "englishDescription": "Control the visuals of the game.",
       "description": "Kontroller de visuelle aspektene ved spillet.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
           "label": "Temafarge",
-          "englishDescription": "Choose a color to create a theme for your card game.",
           "description": "Velg en farge for å skape et tema over kortspillet ditt."
         },
         {
-          "englishLabel": "Card Back",
           "label": "Kortbaksiden",
-          "englishDescription": "Use a custom back for your cards.",
           "description": "Bruk en tilpasset kortbakside for kortene dine."
         }
       ]
     },
     {
-      "englishLabel": "Localization",
       "label": "Oversettelser",
       "fields": [
         {
-          "englishLabel": "Card turns text",
           "label": "Etikett for antall vendte kort",
-          "englishDefault": "Card turns",
           "default": "Kort vendt"
         },
         {
-          "englishLabel": "Time spent text",
           "label": "Etikett for tid brukt",
-          "englishDefault": "Time spent",
           "default": "Tid brukt"
         },
         {
-          "englishLabel": "Feedback text",
           "label": "Tilbakemeldingstekst",
-          "englishDefault": "Good work!",
           "default": "Godt jobbet!"
         },
         {
-          "englishLabel": "Try again button text",
           "label": "Prøv på nytt-tekst",
-          "englishDefault": "Try again?",
           "default": "Prøv på nytt?"
         },
         {
-          "englishLabel": "Close button label",
           "label": "Lukk knapp-merkelapp",
-          "englishDefault": "Close",
           "default": "Lukk"
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file

From f08b18bbaf8b74406e5f8d57a70cd454ca5bba89 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 23 Jun 2017 14:20:33 +0200
Subject: [PATCH 19/20] HFP-1210 Update english source file

---
 language/.en.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/language/.en.json b/language/.en.json
index 8f501f2..a5ecf4d 100644
--- a/language/.en.json
+++ b/language/.en.json
@@ -49,7 +49,6 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default": "#909090",
           "spectrum": {}
         },
         {
@@ -84,4 +83,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 26cccd6530652b183e5412a1dcc6dda6010e9d84 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Mon, 26 Jun 2017 14:29:52 +0200
Subject: [PATCH 20/20] HFP-1210 Update .en.json

---
 language/.en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/language/.en.json b/language/.en.json
index a5ecf4d..8f501f2 100644
--- a/language/.en.json
+++ b/language/.en.json
@@ -49,6 +49,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090",
           "spectrum": {}
         },
         {
@@ -83,4 +84,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file