From 3b1cf11fecf386ef02c309900a78763b73afd869 Mon Sep 17 00:00:00 2001
From: jcolebrand <jcolebrand@gmail.com>
Date: Thu, 26 Dec 2019 23:15:47 -0600
Subject: [PATCH] Closes #1 for clickable bingo

---
 clickable.css | 36 ++++++++++++++++++++++++++++++
 clickable.js  | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  7 +++++-
 phrases.css   | 11 +++++++++
 style.css     | 12 ----------
 5 files changed, 115 insertions(+), 13 deletions(-)
 create mode 100644 clickable.css
 create mode 100644 clickable.js
 create mode 100644 phrases.css

diff --git a/clickable.css b/clickable.css
new file mode 100644
index 0000000..edb3ae5
--- /dev/null
+++ b/clickable.css
@@ -0,0 +1,36 @@
+
+.card-column.toggled{
+    background: linear-gradient(-45deg, green, white, white, red)
+}
+
+.card-column.bingo{
+    background: linear-gradient(45deg, gray, white, white, gray)
+}
+
+/* https://jsfiddle.net/elin/7m3bL/ */
+.pyro {margin: 0;padding: 0;background: linear-gradient(45deg, green, transparent, white, transparent, red);overflow: hidden;z-index: 10; position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
+.pyro > .before, .pyro > .after {position: absolute;width: 5px;height: 5px;border-radius: 50%;box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }
+.pyro > .after {-moz-animation-delay: 1.25s, 1.25s, 1.25s;-webkit-animation-delay: 1.25s, 1.25s, 1.25s;-o-animation-delay: 1.25s, 1.25s, 1.25s;-ms-animation-delay: 1.25s, 1.25s, 1.25s;animation-delay: 1.25s, 1.25s, 1.25s;-moz-animation-duration: 1.25s, 1.25s, 6.25s;-webkit-animation-duration: 1.25s, 1.25s, 6.25s;-o-animation-duration: 1.25s, 1.25s, 6.25s;-ms-animation-duration: 1.25s, 1.25s, 6.25s;animation-duration: 1.25s, 1.25s, 6.25s;}
+@-webkit-keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
+@-moz-keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
+@-o-keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
+@-ms-keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
+@keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
+@-webkit-keyframes gravity { to { transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; } }
+@-moz-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0; } }
+@-o-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0; } }
+@-ms-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0; } }
+@keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0; } }
+@-webkit-keyframes position {0%, 19.9% {margin-top: 10%;margin-left: 40%; }20%, 39.9% {margin-top: 40%;margin-left: 30%; }40%, 59.9% {margin-top: 20%;margin-left: 70%; }60%, 79.9% {margin-top: 30%;margin-left: 20%; }80%, 99.9% {margin-top: 30%;margin-left: 80%; } }
+@-moz-keyframes position {0%, 19.9% {margin-top: 10%;margin-left: 40%; }20%, 39.9% {margin-top: 40%;margin-left: 30%; }40%, 59.9% {margin-top: 20%;margin-left: 70%; }60%, 79.9% {margin-top: 30%;margin-left: 20%; }80%, 99.9% {margin-top: 30%;margin-left: 80%; } }
+@-o-keyframes position {0%, 19.9% {margin-top: 10%;margin-left: 40%; }20%, 39.9% {margin-top: 40%;margin-left: 30%; }40%, 59.9% {margin-top: 20%;margin-left: 70%; }60%, 79.9% {margin-top: 30%;margin-left: 20%; }80%, 99.9% {margin-top: 30%;margin-left: 80%; } }
+@-ms-keyframes position {0%, 19.9% {margin-top: 10%;margin-left: 40%; }20%, 39.9% {margin-top: 40%;margin-left: 30%; }40%, 59.9% {margin-top: 20%;margin-left: 70%; }60%, 79.9% {margin-top: 30%;margin-left: 20%; }80%, 99.9% {margin-top: 30%;margin-left: 80%; } }
+@keyframes position {0%, 19.9% {margin-top: 10%;margin-left: 40%; }20%, 39.9% {margin-top: 40%;margin-left: 30%; }40%, 59.9% {margin-top: 20%;margin-left: 70%; }60%, 79.9% {margin-top: 30%;margin-left: 20%; }80%, 99.9% {margin-top: 30%;margin-left: 80%; } }  
+
+.modal {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
+.modal-content {position: relative;background-color: #fefefe;margin: auto;padding: 0;border: 1px solid #888;width: 40%;margin-top: 10%;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;}
+@-webkit-keyframes animatetop {from {top:-300px; opacity:0;} to {top:0; opacity:1;}}
+@keyframes animatetop {from {top:-300px; opacity:0;} to {top:0; opacity:1;}}
+.modal-header {padding: 2px 16px;background-color: #888;color: white;}
+.modal-body {padding: 2px 16px;}
+.modal-footer {padding: 2px 16px;background-color: #888;color: white;}
diff --git a/clickable.js b/clickable.js
new file mode 100644
index 0000000..9930e9c
--- /dev/null
+++ b/clickable.js
@@ -0,0 +1,62 @@
+const toggled = 'toggled';
+
+function handleClickableBoxes(evt) {
+    let me = evt.target;
+
+    if(me.classList.contains(toggled)) {
+        me.classList.remove(toggled)
+    } else {
+        me.classList.add(toggled)
+    }
+
+    var classToCheck = '';
+
+    me.classList.forEach(x => { if(x.startsWith('card-column-')) {classToCheck = `.${x}`}})
+    if (checkForBingo(classToCheck)) { return; }
+
+    me.parentElement.classList.forEach(x => { if(x.startsWith('card-row-')) {classToCheck = `.${x} .card-column`}})
+    if (checkForBingo(classToCheck)) { return; }
+
+    classToCheck = '.card-row-1 .card-column-1, .card-row-2 .card-column-2, .card-row-4 .card-column-4, .card-row-5 .card-column-5';
+    if (checkForBingo(classToCheck)) { return; }
+
+    classToCheck = '.card-row-1 .card-column-5, .card-row-2 .card-column-4, .card-row-4 .card-column-2, .card-row-5 .card-column-1';
+    if (checkForBingo(classToCheck)) { return; }
+}
+
+function checkForBingo(querySelector) {
+    var allHave = true;
+    Array.from(document.querySelectorAll(querySelector)).forEach(x => allHave = allHave && x.classList.contains(toggled))
+    if (allHave) {
+        makeBingo(querySelector)
+        return true;
+    }
+    return false;
+}
+
+function makeBingo(querySelector) {
+    let pyroContent = `<div class="pyro">
+    <!-- Modal content -->
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>You got Bingo!</h2>
+      </div>
+      <div class="modal-body">
+        <p>Congratulations on Bingo!</p>
+      </div>
+      <div class="modal-footer">
+        <h4>Refresh the page to play again!</h4>
+        <sub>This page will keep showing this on every click...</sub>
+      </div>
+    </div>
+    <div class="before"></div><div class="after"></div></div>`;
+    document.getElementById('pyrowrapper').innerHTML = pyroContent;
+    document.getElementById('pyrowrapper').addEventListener('click', hideBingo);
+    document.querySelectorAll(querySelector).forEach(x => {x.classList.add('bingo');})
+}
+
+function hideBingo() {
+    document.getElementById('pyrowrapper').innerHTML = '';
+}
+
+Array.from(document.getElementsByClassName('card-column')).forEach(e => e.addEventListener('click', handleClickableBoxes));
diff --git a/index.html b/index.html
index 6b8fee2..c87c72b 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,9 @@
-<html>
+<html>
     <head>
         <title>Christmas Lights Bingo Card</title>
         <link href="style.css" rel="stylesheet">
+        <link href="clickable.css" rel="stylesheet">
+        <link href="phrases.css" rel="stylesheet">
     </head>
     <body>
         <div class="card-background">
@@ -90,5 +92,8 @@
             </div>
         </div>
         <script src="phrases.js"></script>
+        <script src="clickable.js"></script>
+        <div id="pyrowrapper">
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/phrases.css b/phrases.css
new file mode 100644
index 0000000..0e84d5e
--- /dev/null
+++ b/phrases.css
@@ -0,0 +1,11 @@
+.card-column.rare { 
+    color: red;
+}
+
+.card-column.uncommon { 
+    color: green;
+}
+
+.card-column.common { 
+    color: unset;
+}
diff --git a/style.css b/style.css
index 370fd37..e0a2c98 100644
--- a/style.css
+++ b/style.css
@@ -49,15 +49,3 @@ hr {
     align-items: center;
     background-color: white;
 }
-
-.card-column.rare { 
-    color: red;
-}
-
-.card-column.uncommon { 
-    color: green;
-}
-
-.card-column.common { 
-    color: unset;
-}