diff --git a/package.json b/package.json
index d59724f..f11eb62 100644
--- 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
index 73f6f91..cdbd5d1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,9 +14,10 @@
- 
- Try clicking!
-
+
+
diff --git a/src/shatter.mp4 b/src/shatter.mp4
new file mode 100644
index 0000000..3bdaf5e
Binary files /dev/null and b/src/shatter.mp4 differ
diff --git a/src/tbh.css b/src/tbh.css
index 1382af5..ed8f4ce 100644
--- 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;}
- }
\ No newline at end of file
+#shattervid {
+ z-index: 2;
+ object-fit: contain;
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/src/tbh.js b/src/tbh.js
index 946b8ac..3d472a5 100644
--- 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;