CodeSOD: An Animated Block

"There are a few more functions like this in the same file," writes Jenny, about today's submission. This is one which largely does speak for itself.

const gright = () => { setIscountright(isCountright + 1); if(isCountright === 0) { setIsleft(!isLeft); setIsfirstdot(!isFirstdot); setIssecdot(!isSecdot); setInfof('Once activated buttons on the right panel will appear'); setIssquareleft(!isSquareleft); setIsanimBottRightIn(!isAnimBottRightIn); } if(isCountright === 1) { setIssecdot(!isSecdot); setIsthirddot(!isThirdtdot); setInfof('Tap on them to change content of the projection on the wall'); setIselmscale(!isElmscale); setIssquareleft(!isSquareleft); setIsmap(!isMap); setIsmapdot(!isMapdot); setIsborderwhite(!isBorderwhite); } if(isCountright === 2) { setIsright(!isRight); setIsthirddot(!isThirdtdot); setIsfourthdot(!isForthdot); setInfof('Use the menu bar in top left corner to switch between pages'); setIssquareleft(isSquareleft); setIsanimBottRightIn(!isAnimBottRightIn); setIselmscale(!isElmscale); setIsmap(!isMap); setIsmapdot(!isMapdot); setIsborderwhite(!isBorderwhite); setIsindicator(!isIndicator); setTimeout(():void => { setAnimain(false); setMainsec(true); setIsindicator(false); setIsindicator2(true); }, 1000); setTimeout(():void => { setMainsec(false); setMainth(true); setIsindicator2(false); setIsindicator3(true); setShowdone(true); }, 2200); }}

Clearly, this is setting all sorts of display properties inside of a UI component. But it's also using its own internal conventions and namings that just make everything harder to understand. gright? setMainth? And those capitalizations. Plus, look at these giant piles of setters- it reads like someone created a bunch of global variables and ther wrapped them in setter functions to make them feel less global.

The logic here isn't that complicated, but because of the names, because of the spammed negations, because of the conventions, I still don't really have any good sense of what it does. Maybe if I knew more of the conventions, I think this code was all gright, but as it is, I'm pretty sure it's all gwrong.

[Advertisement] Continuously monitor your servers for configuration changes, and report when there's configuration drift. Get started with Otter today!