Bunker 21 — Time

I decided to go native and do my own time counting.

The idea is simple, Time.js processes time with setInterval() and every (game) hour it uses redux to make time accessible to any component that has access tot the global state.

Time.js

Here’s the entire component, we’ll take it one step at a time.

As soon as the component mounts

the first thing that happens when componentDidMount() runs is set an interval, for now it’s set super low just for testing, but once the game is ready to roll, I’ll adjust it appropriately.

Inside the interval I set the seconds to the state, adding one second every cycle, if the seconds are at 59 then it resets the seconds to 0 and adds one minute, when the minutes reach 59 it resets them to 0 and add one hour, you get the idea. The state is constantly updated with the time.

render() returns a <div> where we call a function in JSX, processTime()

processTime()

processTime() makes the state legible for display.

Three variables are declared, h, m, and s; they stand for for hours, minutes and seconds respectively.

If any of the variables are single digit in length, we add a zero as the first character, then with string interpolation we create a string ‘clock,’ which is the return of the function.

Bunker 21’s lookahead

The next step is to update redux every hour with the time, so the other components can do their thing, and pretty much most components depend on time to process info.