add shatter on right click, cleanup unused code

artifishvr · Oct 30, 2023 · 7fc8005 · 7fc8005
1 parent 75098e0
commit 7fc8005
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tbh",
   "productName": "tbh",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "the autism creature",
   "main": "index.js",
   "repository": "https://github.com/artificialbutter/tbhdesktop",

diff --git a/src/index.html b/src/index.html
@@ -14,9 +14,10 @@
 
 <body ondragstart="return false">
 
-    <img src="tbh.png" id="tbh" alt="tbh" onclick="tbh(); clicked();">
-    <div class="" id="snackbar">Try clicking!</div>
-
+    <video id="shattervid" style="display: none;">
+        <source src="shatter.mp4" type="video/mp4">
+    </video>
+    <img src="tbh.png" id="tbh" alt="tbh" onclick="yippee();">
 
     <script src="jquery-3.6.1.min.js"></script>
     <script src="confetti.browser.min.js"></script>

diff --git a/src/shatter.mp4 b/src/shatter.mp4
diff --git a/src/tbh.css b/src/tbh.css
@@ -1,61 +1,23 @@
 body {
-    overflow: hidden;
-    background-color: white;
+  overflow: hidden;
+  background-color: white;
 }
 
 #tbh {
-    object-fit: contain;
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
+  object-fit: contain;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
-/* The snackbar - position it at the bottom and in the middle of the screen */
-#snackbar {
-    visibility: hidden; /* Hidden by default. Visible on click */
-    font-family: Arial, Helvetica, sans-serif;
-    min-width: 250px; /* Set a default minimum width */
-    margin-left: -125px; /* Divide value of min-width by 2 */
-    background-color: #333; /* Black background color */
-    color: #fff; /* White text color */
-    text-align: center; /* Centered text */
-    border-radius: 30px; /* Rounded borders */
-    padding: 10px; /* Padding */
-    position: fixed; /* Sit on top of the screen */
-    z-index: 1; /* Add a z-index if needed */
-    left: 50%; /* Center the snackbar */
-    bottom: 30px; /* 30px from the bottom */
-    font-size: large;
-  }
-
-  /* Show the snackbar when clicking on a button (class added with JavaScript) */
-  #snackbar.show {
-    visibility: visible; /* Show the snackbar */
-    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
-    However, delay the fade out process for 2.5 seconds */
-    -webkit-animation: fadein 0.5s;
-    animation: fadein 0.5s;
-  }
-
-  /* Animations to fade the snackbar in and out */
-  @-webkit-keyframes fadein {
-    from {bottom: 0; opacity: 0;}
-    to {bottom: 30px; opacity: 1;}
-  }
-
-  @keyframes fadein {
-    from {bottom: 0; opacity: 0;}
-    to {bottom: 30px; opacity: 1;}
-  }
-
-  @-webkit-keyframes fadeout {
-    from {bottom: 30px; opacity: 1;}
-    to {bottom: 0; opacity: 0;}
-  }
-
-  @keyframes fadeout {
-    from {bottom: 30px; opacity: 1;}
-    to {bottom: 0; opacity: 0;}
-  }
+#shattervid {
+  z-index: 2;
+  object-fit: contain;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
diff --git a/src/tbh.js b/src/tbh.js
@@ -1,14 +1,14 @@
-function tbh() {
-    console.log("the creature")
-    // TODO: add right click to shatter
-    yippee();
-}
+document.addEventListener('contextmenu', function (ev) {
+    ev.preventDefault();
+    shatter();
+    return false;
+}, false);
 
 function yippee() {
     for (let i = 0; i < 50; i++) {
         confetti({
             particleCount: 10,
-            spread: 50,            
+            spread: 50,
             startVelocity: 100,
             decay: 0.8,
             origin: { y: 1.2 },
@@ -23,7 +23,7 @@ function yippee() {
         });
         confetti({
             particleCount: 10,
-            spread: 50,            
+            spread: 50,
             angle: 120,
             startVelocity: 100,
             decay: 0.8,
@@ -41,11 +41,17 @@ function yippee() {
     }
 }
 
-let clickedonce = false;
-let x = document.getElementById("snackbar");
-function clicked() {
-    clickedonce = true;
-    x.className = x.className.replace("show", "");
+function shatter() {
+    let shatter = document.getElementById("shattervid");
+    shatter.volume = 0.5;
+    confetti.reset();
+    shatter.style.display = "block";
+    shatter.play();
+    confetti.reset();
+
+    shatter.onended = function () {
+        shatter.style.display = "none";
+    }
 }
 
 let count = 0;