Bunker 21 — Flicker
The game has been baptized “Bunker 21” specifically because it’s a bunker I started creating in 2021, duh. No puns this time.
The first real feature I designed is called “flicker,” any element that calls it gets to flicker at a certain rate, simulating a slight malfunction.
The Code
Let’s follow the steps of execution on one of the components using Flicker,
on this line
import { Flicker } from '../helpers/Flicker'The flicker function is imported from the ‘helpers’ directory I created to store all the helper functions, stuff I can reuse across components. I don’t know if that’s a common pattern but it works for me.
As soon as the functional component is rendered, the flicker function is called,
{Flicker('comp-sys-title-container')}It takes one argument, the id of the element that it flickers of course!
Inside helpers we find Flicker.js,
The flicker function is exported so other components can import it at will. Within the function there are another two functions that we’ll get to in a minute.
The first thing flicker does once it’s invoked is to set an interval that will call the quicklySwitchClass() function every randomInterval(7000, 50000)…
randomInterval takes two arguments, min and max,
Math.floor basically rounds the number random between min and max so you don’t end up with 7322.2. The return value of the function being a number between those two values.
with that in place quicklySwitchClass() is called at a random interval between 7 seconds and 50 seconds.
quicklySwitchClass()
When the block is executed, the first thing that happens is that using the id parameter passed when executing Flicker, we select the element to be flickered; next we set a counter equal to a random number between 2 and 8 using our randomInterval() function.
The switcharoo variable equals a setInterval that will run until the counter is 0; basically it will keep executing every 50 milliseconds and add the class to the element of solid or flicker depending on which one is currently active; after that 1 is substracted from counter so that when it’s 0 we use clearInterval on switcharoo to stop the flickering.
Summary
We have helper function that is called on any element and it makes it flicker randomly between 7 and 50 seconds for a random number of times between 2 and 8. It works great to give some elements that old school CRT television vibe.
The Future of Flicker
Now that the bones are set, I’ll be adding the ability for components to call the flicker function with extra parameters that will allow them to add extra “flickering” options; I could make something flicker like it’s about to break or have some things be almost gone only to flicker into existence once in a while. It definitely adds to the mood of my game and I’ll expand on functionality; anyways au revior, I’ll return in a week.
