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",