osu-Counter/script.js at main · justinli500/osu-Counter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
let zCounter = 0;
let xCounter = 0;
// let time = 10;

// startCountdown(10);

let timed = false;
let desiredTime = 10;

// - document.addEventListener("keydown", (event)) wasn't good

document.addEventListener("keydown", (event) => {
  if (event.key == "z" || event.key == "x") {
    if (event.key == "z") {
      zCounter++;
    } else if (event.key == "x") {
      xCounter++;
    }
    if (!timed) {
      startCountdown(10);
    }
  }
});

document.getElementById("reset").addEventListener("click", resetTimer);
document.getElementById("reset-osu").addEventListener("click", resetTimer);

// * Passing a function with a parameter into another function
// document.getElementById("reset-osu").addEventListener("mouseover", () => {
//   let timeout = setTimeout(() => {
//     enablePulseOut(500, "circle"); // - This can also be 1000
//   }, 195);
// });

// - Do a fade and stacking effect here
// document.getElementById("reset-osu").addEventListener("mouseover", () => {
//   let timeout = setTimeout(() => {
//     enablePulseOut(1000, "circle1");
//   }, 695);
// });

// document.getElementById("reset-osu").addEventListener("mouseover", () => {
//   let timeout = setTimeout(() => {
//     enablePulseOut(1000, "circle2");
//   }, 1195);
// });
// document.getElementById("reset-osu").addEventListener("mouseover", () => {
//   let timeout = setTimeout(() => {
//     enablePulseOut(1000);
//   }, 195);
// document.getElementById("reset-osu");
// .addEventListener("mouseleave", clearInterval(timeout));
// - Fix the delay duration
// enablePulseOut(500);
// });
// * Turning off the animation
// document
//   .getElementById("reset-osu")
//   .addEventListener("mouseleave", disablePulseOut);

// * Defining functions below

function enablePulseOut(animationDuration, id) {
  if (!animationDuration) {
    animationDuration = 500;
  }
  document.getElementById(
    id
  ).style.animation = `pulse-out ${animationDuration}ms infinite`;
}

function disablePulseOut() {
  document.getElementById("circle").style.animation = "";
  setTimeout(function () {
    document.getElementById("circle").style.animation = "";
  }, 196);
}

function resetTimer() {
  document.getElementById(
    "timer"
  ).innerHTML = `<b>Time left:</b> ${desiredTime}`;
  timed = false;
  zCounter = 0;
  xCounter = 0;
  document.getElementById("zCounter").innerHTML = `<b>z count:</b> ${zCounter}`;
  document.getElementById("xCounter").innerHTML = `<b>x count:</b> ${xCounter}`;
  document.getElementById(
    "timer"
  ).innerHTML = `<b>Time left:</b> ${desiredTime}`;
  // TODO: Also reset zCounter and xCounter
}

function startCountdown(givenTime) {
  // * If we've already timed, then don't start timer again until reset
  if (timed) {
    return;
  }
  desiredTime = givenTime;
  timed = true;
  //   let zCounter = 0;
  //   let xCounter = 0;
  let timeLeft = givenTime;
  let myInterval = setInterval(function () {
    // * What to do when timer hits 0
    if (timeLeft <= 0 || !timed) {
      // * Display end CPS
      document.getElementById("cps").innerHTML = `<b>Clicks per second:</b> ${
        (zCounter + xCounter) / desiredTime
      }`;

      // * Change timer because timer doesn't end up at 0 naturally
      document.getElementById("timer").innerHTML = `<b>Time left:</b> ${0}`;
      clearInterval(myInterval);
      return;
    }

    // * Display time left
    document.getElementById(
      "timer"
    ).innerHTML = `<b>Time left:</b> ${timeLeft}`;
    timeLeft = timeLeft - 0.1;
    // - Rounding a number here. Is this good?
    timeLeft = Math.round(timeLeft * 100) / 100;

    // * Display key counts
    document.getElementById(
      "zCounter"
    ).innerHTML = `<b>z count:</b> ${zCounter}`;
    document.getElementById(
      "xCounter"
    ).innerHTML = `<b>x count:</b> ${xCounter}`;

    // * Display CPS live ?
    document.getElementById("cps").innerHTML = `<b>Clicks per second:</b> ${
      Math.round(((zCounter + xCounter) / (desiredTime - timeLeft)) * 100) / 100
    }`;
  }, 100);
}

function countKeys() {
  document.addEventListener("keydown", (event) => {
    if (event.key == "z") {
      zCounter++;
    } else if (event.key == "x") {
      xCounter++;
    }
  });
}