• Prime Mover (unregistered)

    Nope, sorry, can't get my head around this at all.

    Each of the sections depending on the count being 0, 1 and 2 appear to be toggling a selection of variables. Of course, on subsequent calls the count is incremented from the previous one, so different variables will be toggled. Unless I'm missing something. Oh, and don't forget that setIssquareleft is not toggling the value when isCountright equals 2, and assuming setIscountright sets isCountright, then the isCountright equals 0 branch will never be run. Unless isCountright starts at less than zero.

    Nope, sorry again, head gone bang.

  • megamit (unregistered)

    This looks like part of a react component that uses react hooks. Probably in some kind of intro overlay describing where things are in the rest of the ui. all of the variables and setters are probably setState values and setters and the variables are fed into some react components to toggle whether they display or not. This code isn't actually that bad but just horribly unreadable ( i guess that makes it bad), which is very common with react hook code.

  • Jaroslav (unregistered)

    Hey, maybe "gright" is just the Google definition of "right". Who knows?

  • WTFGuy (unregistered)

    Makes me imagine something like those repeating slide shows of 3 or 4 pix that are common as eye-catching intros on commercial webpages.

    There's some sort of "...." graphic thing where each dot is highlighted in turn and instead of just rotating graphics into a container, various other UI gizmos and explanatory text appear and disappear in sync. Of which the function we see is at most half of the implementation. As Prime Mover says, something somewhere has to reset Iscountright to -1 to cause the cycle to repeat.

    In other words, this is a simple finite state machine implemented by somebody who's never heard of the term "finite state machine."

  • Robin (unregistered)

    Agree with megamit, this is clearly some code from inside a React component, which explains all the setXxxx calls. But yes there's definitely some sort of WTF here, probably multiple ones, because this is a mess. At the very least this looks like a classic case for using a reducer to update state rather than updating a bunch of separate things individually. Without knowing the wider context it's hard to say how to improve this other than that, but I guarantee that this can be written 100 times more readable by someone who knows what they're doing.

  • Anon (unregistered)

    Why is it defined as a lambda? Is that some janky bit of Javascript that I've forgotten? It's not capturing any scope variables.

  • Barry Margolin (github) in reply to Anon

    It's just another style of function definition, equivalent to function gright() { ... }. I'm not sure why, but many programmers like to use this style instead.

  • Yikes (unregistered)

    So the "is" notation is used for both boolean style variables (isMapdot) and counters (isCountright). Wait - there's more - because they also have counter variable names for boolean variables... (setIsindicator, setIsindicator2, setIsindicator3)

  • Loren Pechtel (unregistered)

    The names make me think the author of this code does not speak English as a native language.

  • Jeremy (unregistered)

    This must be fun when setIsCountright(x) is called outside of this scope. Then you would probably get stuck in gwrong

  • Colin (unregistered)

    Very consistent spelling: setIsfourthdot(!isForthdot);

  • Staticsan (unregistered)

    Yep. Classic code trope: a state machine implemented less than well. I had to tidy up on of those just yesterday. Why do so many programmers forget that switch() exists? Also +1 to the abuse of React state, but that's less easy to clean up.

  • Staticsan (unregistered)

    Yep. Classic code trope: a state machine implemented less than well. I had to tidy up on of those just yesterday. Why do so many programmers forget that switch() exists? Also +1 to the abuse of React state, but that's less easy to clean up.

  • (nodebb)

    The typing on the setTimeout() lambda parameters are a nice touch...

  • Teodor Potancok (github) in reply to Barry Margolin

    It's because React uses a lot of anonymous, zero parameter functions for event handling. Writing out function() {...} every time is just visual clutter.

  • Ollie Jones (unregistered)

    Hey, setters are good! Am I gright? Am I?

  • malikaffan (unregistered)
    Comment held for moderation.
  • Robert'; DROP TABLE students;-- (unregistered)
    Comment held for moderation.
  • Robert'; DROP TABLE students;-- (unregistered)
    Comment held for moderation.
  • Robert'; DROP TABLE students;-- (unregistered)
    Comment held for moderation.

Leave a comment on “An Animated Block”

Log In or post as a guest

Replying to comment #:

Log Out

« Return to Article