Calculate Win: Bloop

[rachelnabors]

Background:

After the hagfish challenge is completed, FireFox users are shown a #bonus-challenge wherein #bloop-depth must contain the current coordinates of #the-bloop (not #d2200, which is its containing segment, but literally #the-bloop). #bloop-depth must update with window resizes and font size changes, etc. This is detailed in another ticket, but explained here for background.

To win:

The browser must be scrolled so #bloop-depth + #the-bloop's current height (check for resizes, use debouncing function in main.js) is within the screen. (inview functions might be useful for testing for this.)

(This could get a little tricky with location. We want to make sure it fires when the squid is fully visible, not just a tentacle dangling from above. Waypoint.js's inview functions may provide utilities that could help.)

And then:

The squid has two animations: swimIn and swimOut. This allows the squid to swim in, pause to look at the user, then swim out.

The winning event HTML from snippets/alternate-ending.html should be shown after swimOut ends, perhaps using the event listener animationend. Whether that's injecting the HTML on that event or adding a class to show it, is up for debate.

AND! #challenge_bloop gets a class of .visited and .completed

When done, assign it back to me, and I'll add a toggle to show or hide the congratulations so people can scoot around an inspect the rest of the game again.

[mythmon]

Oh. I thought the content of snippets/alternate-ending.html was for non-Firefox browsers, in place of the bloop. Reading more carefully, that isn't the case and we can probably put that all in one file.

[rachelnabors]

I advise putting some text in those snippets. Like "I show when..." to help clarify those things! I left some in those divs, but it seems to have gone MIA in the transition to this snippet ;)

[rachelnabors]

Potch: new direction. Look at ending.js, where the wins are calculated. You can see how the win is calculated for non-FF browsers. We need the same set of JS to run AFTER the #the-bloop's last animation (swimOut) has finished (that is to say, it's swum by).

Can only once, as people might come by to watch the bloop a dozen times afterwards.

$("#congrats-tab, #congrats-panel").removeClass("shh"); $("#congrats-tab").addClass("active"); $("#congrats-panel").addClass("in-focus"); var dashboardOpen = true; moveDashboard($("#dashboard").find(".in-focus"));

Plus this to get rid of the sonar panel:

$("#bonus-challenge, #bonus-challenge-tab").remove();

Ba-boom!

[potch]

Bloop has landed!

One concern- the swimout animation seems to go on for a while after bloop leaves the screen. Is it possible to shorten it so the congrats panel comes up sooner?

[rachelnabors]

Taken care of. It fires at the beginning of swimOut now. Looks tight.