word/memory.plp

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