Improved description popup design

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

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;

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();

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';
     };
   };