Bunker 21 — Calendar
Slowly making progress, I’ve had a busy week so I didn’t get as far as I wanted to but the important thing is to keep pushing, even if it’s baby steps.
I worked on the recording the passing of time. Previously I created a counter that just kept track of time; now based off of that we can calculate how many days, months, and years our character has been locked in Bunker 21. The tricky part was that it happens on a different component, so I used Redux to keep track of that in the global state. It’s not the most DRY code, but for now I just want to make it work, once it’s running I can focus on optimizing.
Redux
Pretty simple really, we import Redux and create the Store with with the reducers. I added composeWithDevTools so I can track state in the browser and applyMiddleware to use Thunk, not really being used right now but it will be once things we a little more complex.
Reducers and Actions
Here we combine reducers, as more features are added those will go on reducers > index.js
Makes it simple to keep track of various reducers. We use combineReducers for that.
Right now we’re only worried about time being added to the global state, so I only have one action, ADD_TIME. It adds one hour to time when it’s invoked.
Back to Time.js
On the highlighted area we call addTime, imported from actions so that every time a game hour passes, one hour is added to the global state. At the bottom I’m using connect from Redux so I have full access to my actions and basically “connect” everything.
Time being tracked globally
Now that time is being tracked on the entire application (we can access it as needed) I focused on processing the TimeElapsed component.
Years, months, and days all call a function, Calendar() with two arguments, the first the hours we are tracking on state, second, the type of data we want to get back from the function, so ‘y’ ‘m’ ‘d’ respectively for years, months, and days.
Calendar.js
Within helpers we added Calendar.js, the function that will help me keep track of total time elapsed. Why a helper you ask? because the same function will be used to track other character attributes like thirst, hunger, etc, so that way we can access it from anywhere.
We use if/else conditionals to direct the process of my requested y-m-d time. Then it’s just a matter of dividing the hours to get the days, months, and years. Once that is done, it returns it back to TimeElapsed.js to be displayed. Easy peasy.
Conclusion
The game is heavily time based, where many actions and attributed depend on the passing of time, so it’s essential to get this right. It’ll probably go through many rounds of optimization until I’m happy with the results.
I’ll be back next week with the next chapter of my game! Have fun and enjoy 2022!!
