Merge pull request #13 from uross-11/main

rexim · web-flow · commit 6452e80ed44a · 2025-09-22T20:40:42.000+07:00
Added thunder on critical strike
diff --git a/crit.webp b/crit.webp
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" type="text/css" href="main.css">
   </head>
   <body>
+    <img src="crit.webp" id="critImg">
     <div id="popup">
       <div id="popupText">
         0
diff --git a/index.js b/index.js
@@ -70,6 +70,14 @@ const eventsTable = [
             clickMe.disabled = true;
             clickMeText.innerText = `You broke it`;
             playFart(critFart);
+            critImg.animate([
+                { opacity: 0 },
+                { opacity: 1 },
+                { opacity: 0 }
+            ], {
+                duration: 1000,
+                fill: "forwards"
+            });
         },
     },
     {
@@ -116,6 +124,7 @@ const eventsTable = [
     {
         onCount: 69,
         action: () => {
+            // TODO: add this sound here https://www.youtube.com/watch?v=3WAOxKOmR90
             clickMe.disabled = true;
             clickMeText.innerText = `Nice!`;
             playFart(critFart);
@@ -129,7 +138,17 @@ const eventsTable = [
         onCount: 100,
         action: () => {
             clickMe.disabled = true;
-            setTimeout(() => clickMe.disabled = false, 3000);
+            setTimeout(() => {
+                clickMe.disabled = false;
+                critImg.animate([
+                    { opacity: 0 },
+                    { opacity: 1 },
+                    { opacity: 0 }
+                ], {
+                    duration: 1000,
+                    fill: "forwards"
+                });
+            }, 3000);
             clickMeText.innerText = `HERE COMES THE BIG ONE`;
             playFart(bigoneFart);
         }
diff --git a/main.css b/main.css
@@ -1,3 +1,6 @@
+body {
+  margin: 0;
+}
 .center {
     position: absolute;
     left: 50%;
@@ -16,6 +19,13 @@
     user-select: none;
     -webkit-user-select: none;
 }
+#critImg {
+  opacity: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
 #popup {
     visibility: hidden;
     position: absolute;
@@ -35,4 +45,4 @@
 }
 .customCursor {
     cursor: url("peach-emoji.png"), auto;
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`<link rel="stylesheet" type="text/css" href="main.css">`
`9`	`9`	`</head>`
`10`	`10`	`<body>`
	`11`	`+ <img src="crit.webp" id="critImg">`
`11`	`12`	`<div id="popup">`
`12`	`13`	`<div id="popupText">`
`13`	`14`	`0`