Skip to content

Commit fb69278

Browse files
reximrexim
committed
Ready. Set. Go!
0 parents  commit fb69278

File tree

8 files changed

+213
-0
lines changed

8 files changed

+213
-0
lines changed

‎CREDITS.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Fart sounds:
2+
- https://pixabay.com/sound-effects/search/fart/

‎fart-4-228244-fixed-crit.flac‎

50.7 KB
Binary file not shown.

‎fart-4-228244.mp3‎

58.8 KB
Binary file not shown.

‎fart-83471-fixed-regular.flac‎

8.61 KB
Binary file not shown.

‎fart-83471.mp3‎

12.7 KB
Binary file not shown.

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Click me!</title>
5+
<link rel="stylesheet" type="text/css" href="main.css">
6+
</head>
7+
<body>
8+
<div id="popup">
9+
<div id="popupText">
10+
0
11+
</div>
12+
</div>
13+
14+
<button class="center" id="clickMe"></button>
15+
<label id="clickMeWrapper" for="clickMe" class="center">
16+
<div id="clickMeText">
17+
Click me!
18+
</div>
19+
</label>
20+
<script src="index.js"></script>
21+
</body>
22+
</html>

‎index.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
const regularFart = new Audio("fart-83471-fixed-regular.flac");
2+
const critFart = new Audio("fart-4-228244-fixed-crit.flac");
3+
4+
const farts = [
5+
regularFart,
6+
critFart,
7+
];
8+
9+
function playFart(fart) {
10+
fart.currentTime = 0;
11+
fart.play();
12+
shaking = true;
13+
}
14+
15+
const eventsTable = [
16+
{
17+
onCount: 0,
18+
action: () => {
19+
clickMeText.innerText = "Click me!";
20+
}
21+
},
22+
{
23+
onCount: 1,
24+
action: () => {
25+
clickMeText.innerText = "Gotchu!!";
26+
playFart(regularFart);
27+
}
28+
},
29+
{
30+
onCount: 4,
31+
action: () => {
32+
clickMeText.innerText = "Oh, you're into that...";
33+
playFart(regularFart);
34+
},
35+
},
36+
{
37+
onCount: 6,
38+
action: () => {
39+
clickMeText.innerText = `Oh, you're into that...`;
40+
popupText.style.visibility = "visible";
41+
playFart(regularFart);
42+
},
43+
},
44+
{
45+
onCount: 10,
46+
action: () => {
47+
clickMeText.innerText = `You broke it`;
48+
playFart(critFart);
49+
},
50+
},
51+
{
52+
onCount: 11,
53+
action: () => {
54+
clickMeText.innerText = `jk keep going`;
55+
playFart(regularFart);
56+
}
57+
},
58+
{
59+
onCount: 15,
60+
action: () => {
61+
clickMeText.innerText = `having fun?`;
62+
playFart(regularFart);
63+
}
64+
},
65+
{
66+
onCount: 20,
67+
action: () => {
68+
clickMeText.innerText = `dude this is just a fart button`;
69+
playFart(regularFart);
70+
}
71+
},
72+
{
73+
onCount: 30,
74+
action: () => {
75+
clickMeText.innerText = `it doesn't do anything, but farts`;
76+
playFart(regularFart);
77+
}
78+
},
79+
{
80+
onCount: 40,
81+
action: () => {
82+
clickMeText.innerText = `you are not getting anything for clicking it`;
83+
playFart(regularFart);
84+
}
85+
},
86+
{
87+
onCount: 50,
88+
action: () => {
89+
clickMeText.innerText = `Congrats! You clicked it ${counter} times!`;
90+
playFart(regularFart);
91+
}
92+
},
93+
{
94+
onCount: 69,
95+
action: () => {
96+
clickMeText.innerText = `Nice!`;
97+
playFart(regularFart);
98+
}
99+
},
100+
{
101+
onCount: 70,
102+
action: () => {
103+
clickMeText.innerText = `Congrats! You clicked it ${counter} times!`;
104+
playFart(regularFart);
105+
}
106+
},
107+
];
108+
109+
eventsTable.sort((a, b) => b.onCount - a.onCount);
110+
111+
function fireEvents() {
112+
for (const event of eventsTable) {
113+
if (event.onCount <= counter) {
114+
event.action();
115+
break;
116+
}
117+
}
118+
}
119+
120+
let shaking = false;
121+
let counter = 0; // TODO: DONT FORGET TO SET TO 0 ON RELEASE!!!
122+
123+
function finishFart() {
124+
shaking = false;
125+
}
126+
127+
for (let fart of farts) {
128+
fart.onended = finishFart;
129+
}
130+
131+
// TODO: change it to onmousedown (it stopped working after separating button and label)
132+
clickMe.onclick = () => {
133+
counter += 1;
134+
popupText.innerText = counter;
135+
fireEvents();
136+
};
137+
138+
let prevTimestamp = 0;
139+
function frame(timestamp) {
140+
const deltaTime = (timestamp - prevTimestamp)/1000;
141+
prevTimestamp = timestamp;
142+
if (shaking) {
143+
const x = Math.random()*2 - 1 + 50;
144+
const y = Math.random()*2 - 1 + 50;
145+
clickMe.style.left = `${x}%`;
146+
clickMe.style.top = `${y}%`;
147+
} else {
148+
clickMe.style.left = "50%";
149+
clickMe.style.top = "50%";
150+
}
151+
window.requestAnimationFrame(frame);
152+
}
153+
window.requestAnimationFrame((timestamp) => {
154+
prevTimestamp = timestamp;
155+
window.requestAnimationFrame(frame);
156+
});
157+
158+
fireEvents();

‎main.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.center {
2+
position: absolute;
3+
left: 50%;
4+
top: 50%;
5+
transform: translate(-50%, -50%) scale(4, 4);
6+
width: 10%;
7+
height: 8%;
8+
}
9+
#clickMeText {
10+
position: absolute;
11+
left: 50%;
12+
top: 50%;
13+
transform: translate(-50%, -50%) scale(0.5, 0.5);
14+
pointer-events: none;
15+
text-wrap: nowrap;
16+
}
17+
#popup {
18+
visibility: hidden;
19+
position: absolute;
20+
left: 10px;
21+
top: 10px;
22+
width: 100px;
23+
height: 100px;
24+
}
25+
#popupText {
26+
position: absolute;
27+
left: 50%;
28+
top: 50%;
29+
transform: translate(-50%, -50%);
30+
font-size: 48px;
31+
}

0 commit comments

Comments
 (0)