word/memory.plp

   1 <(../common.inc.plp)><:
   2
   3 Html({
   4         raw => <<'EOT',
   5 <script src="/word/put.min.js"></script>
   6 <script src="/word/memory.js"></script>
   7 <style>
   8 /* cards */
   9 html {
  10         overflow: hidden; /* rotation overflow on celebration */
  11 }
  12
  13 figure {
  14         display: inline-block;
  15         background: #224;
  16         border: 1px solid #888;
  17         margin: 2px;
  18         perspective: 100em;
  19         height: 300px;
  20         position: relative;
  21 }
  22 figure:not(.turn):hover {
  23         cursor: pointer;
  24 }
  25 figure, img {
  26         transition: all .5s ease-in;
  27 }
  28
  29 /* card faces */
  30 figure img {
  31         height: 100%;
  32         width: auto;
  33         backface-visibility: hidden;
  34         transform: rotateY(180deg); /* back */
  35         transform-style: preserve-3d;
  36         float: left; /* ff workaround to prevent click selection */
  37 }
  38
  39 /* turn results */
  40 figure.turn img {
  41         transform: rotateY(0deg);
  42 }
  43 figure.bad img {
  44         filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
  45 }
  46 figure.good {
  47         opacity: .8;
  48 }
  49
  50 .good figure {
  51         animation: celebration 5s linear infinite;
  52         background: none;
  53         border: 0;
  54 }
  55 @keyframes celebration {
  56         0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
  57         50% { filter: hue-rotate(180deg); transform: rotate(180deg) }
  58         100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  59 }
  60 </style>
  61 EOT
  62 });
  63 say '<h1>memory</h1><p id="quiz"></p>';