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