search

cse110-sp23-group3 / 8-ball

0 stars 0 forks source link

Animation of the ball #12

Closed lemangomeister closed 1 year ago

lemangomeister commented 1 year ago

The ball stops before the music stops playing. I have set the "setTimeout" from 3000 ms(?) to 6000 so that the response appears right after the tune is finished.

nsyousef commented 1 year ago

I guess that is fine as long as we don't think the user will get annoyed with it taking too long to come up with a response. I guess it is either that or we need to shorten the audio so it fits in the time frame the setTimeout() function allows for the animation.

lemangomeister commented 1 year ago

Which function dictates the animation ?

nsyousef commented 1 year ago

The shaking animation is started by the line document.getElementById("ball").classList.add("shake");. This line of code adds a class to the image of the 8-ball. The CSS is set up so that any element with the class shake does a shaking animation. To turn the shaking off, there is a function document.getElementById("ball").classList.remove("shake"); which removes the shake class, stopping the animation. The length of the animation is controlled by the setTimeout() function. The second parameter, 3000, which is the length of the delay in milliseconds. This parameter appears at the very bottom of the document since there is a whole function definition in the first parameter of setTimeout(), as opposed to the function being defined elsewhere and called in setTimeout() as you may be used to seeing. So to change the length of time of the animation, change the 3000 to the length of time you want the animation to play for in milliseconds.

lemangomeister commented 1 year ago

My JS knowledge is limited so I'm not sure how to lengthen the animation to 6000ms. The setTimeout is already set to 6000ms.

nsyousef commented 1 year ago

Oh whoops. You also probably need to go into the CSS and change animation: shake 3s; to animation: shake 6s;.

phuanh004 commented 1 year ago

I already change the code to async/ await since using setimeout the original code by itself will block the thread of the other code lines under it.

phuanh004 commented 1 year ago

Oh whoops. You also probably need to go into the CSS and change animation: shake 3s; to animation: shake 6s;.

Recommend using the animation with CSS as well