word/memory: card game to find matching pairs

[sheet.git] / word / memory.plp

diff --git a/word/memory.plp b/word/memory.plp
new file mode 100644 (file)
index 0000000..d12cc75
--- /dev/null
+++ b/word/memory.plp
@@ -0,0 +1,48 @@
+<(../common.inc.plp)><:
+
+Html({
+       raw => <<'EOT',
+<script src="/word/put.js"></script>
+<script src="/word/memory.js"></script>
+<style>
+/* cards */
+figure {
+       display: inline-block;
+       background: #224;
+       border: 1px solid #888;
+       margin: 2px;
+       perspective: 100em;
+       height: 300px;
+       position: relative;
+}
+figure:not(.turn):hover {
+       cursor: pointer;
+}
+figure, img {
+       transition: all .5s ease-in;
+}
+
+/* card faces */
+figure img {
+       height: 100%;
+       width: auto;
+       backface-visibility: hidden;
+       transform: rotateY(180deg); /* back */
+       transform-style: preserve-3d;
+       float: left; /* ff workaround to prevent click selection */
+}
+
+/* turn results */
+figure.turn img {
+       transform: rotateY(0deg);
+}
+figure.bad img {
+       filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
+}
+figure.good {
+       opacity: .8;
+}
+</style>
+EOT
+});
+say '<h1>memory</h1><p id="quiz"></p>';