// lock both as correct
this.turned.forEach(card => put(card, '.good![onclick]'));
this.turned = [];
+ if (Array.from(this.form.children).every(card => card.classList.contains('good'))) {
+ put(this.form, '.good');
+ }
return;
}
<script src="/word/memory.js"></script>
<style>
/* cards */
+html {
+ overflow: hidden; /* rotation overflow on celebration */
+}
+
figure {
display: inline-block;
background: #224;
figure.good {
opacity: .8;
}
+
+.good figure {
+ animation: celebration 5s linear infinite;
+ background: none;
+ border: 0;
+}
+@keyframes celebration {
+ 0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
+ 50% { filter: hue-rotate(180deg); transform: rotate(180deg) }
+ 100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
+}
</style>
EOT
});