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