h-yung / deliver-on-time

A game to make waiting less painful. Similar philosophy as the Google t-rex.

Deliver On Time

Small game based on a stopwatch to make waiting less painful. Similar philosophy as the Google t-rex.

Simple responsive layout.

Google font for headings may not display properly in Firefox depending on local sandbox security settings.

Player can do three things:

1. Set a target time.
2. Start and then stop the stopwatch to try to match the target time within a margin of error (currently given as 0.5sec).
3. Page will display whether player succeeded or failed, then allow player to go again by setting new target time.

Changes from 'baseline' stopwatch:

Original stopwatch exercise had conditionals that threw errors for:

• consecutive call on start() function
• consecutive call on stop() function

Gameplay removes the above error/alert need by disabling buttons after one click and also signals through CSS styling what is a valid action or not.

CSS is used to provide additional visual cues by switching out imagery.

Some console-only notes (such as tied to Set Time/reset) remain for those who bother opening the console.

CSS issue to resolve: understanding why Stop button remains red despite other button:disabled styling applied. Currently patched over temporarily.

Walkthrough:

1. When player clicks Set Time, the only functional button,
   1. A random number between 0 and 1 is generated, multipied by 10 for a max 10sec target time, which is displayed onscreen.
   2. Player can no longer click Set Time but Start becomes clickable.
2. When player clicks Start,
   1. the current date/time is set (new Date).
   2. Start becomes disabled; Stop is enabled.
   3. Image for "start" is hidden; image for "enroute" is made visible.
3. When player clicks Stop,
   1. the current date/time is set (new Date).
   2. Stop becomes disabled; Set Time is enabled.
   3. Image for "enroute" is hidden.
   4. The duration elapsed between click of Start and Stop is calculated and compared to target time (absolute value).
   5. Conditionally, if it's within the allowable margin, SUCCESS is signaled through announcement and image reveal, and time achieved is also reported. If not, FAILURE is signaled in same form, with different imagery. Time achieved is still reported.
4. When player next clicks Set Time,
   1. duration, start time, end time, are all zeroed out,
   2. announcement area is cleared/made empty,
   3. and image visibilities changed back to show only starting image for a fresh start.

Live

https://h-yung.github.io/deliver-on-time/