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         transform: rotateY(180deg); /* back */
  45         transform-style: preserve-3d;
  46         -float: left; /* ff workaround to prevent click selection */
  47 }
  48 figure.mirror img {
  49         transform: rotateY(180deg) scaleX(-1);
  50 }
  51
  52 /* turn results */
  53 figure.turn img {
  54         transform: rotateY(0deg);
  55 }
  56 figure.mirror.turn img {
  57         transform: rotateY(0deg) scaleX(-1);
  58 }
  59 figure.bad img {
  60         filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
  61 }
  62 figure.good {
  63         opacity: .8;
  64 }
  65
  66 .good figure {
  67         animation: celebration 7s linear infinite;
  68         background: none;
  69         border: 0;
  70         opacity: 1;
  71 }
  72 @keyframes celebration {
  73         0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
  74         33% { filter: hue-rotate(180deg); transform: rotate(180deg) }
  75         66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  76         100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  77 }
  78 </style>
  79 EOT
  80 });
  81 if (my $gridsize = $get{grid}) {
  82         printf "<style>#quiz {grid: repeat(%d, 1fr) / repeat(%d, 1fr)}</style>",
  83                 reverse split /\D+/, $gridsize;
  84         say '';
  85 }
  86 say '<h1>memory</h1><p id="quiz"></p>';
  87 say "<script>new WordMemory('/$wordlistbase.json')</script>";