Add vertical tabs + new styling for retry button + effects

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
     }
   ]
 }

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;
+  line-height: 1.2;
-  text-shadow: 0 0 0.5em white;
+  padding: 0.5em 1.25em;
-  padding: 0.125em 0.25em;
+  border-radius: 2em;
-  line-height: 1;
+  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;
 }

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
+          resetGame();
-          $wrapper[0].removeChild(this);
         });
+        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
       }

semantics.json

@@ -2,6 +2,12 @@
   {
     "name": "cards",
     "type": "list",
+    "widgets": [
+      {
+        "name": "VerticalTabs",
+        "label": "Default"
+      }
+    ],
     "label": "Cards",
     "importance": "high",
     "entity": "card",