Add injection for Colossal Squid

[rachelnabors]

When people complete all challenges, if they use FireFox, a bonus challenge occurs: the chance to see a Colossal Squid if they rise to a set distance from the top of the water column. They can use FF's rulers to figure out where that is.

• Use JS to measure the pixel distance of the squid's segment from the top. Re-take this measurement if the page resizes.
• Inject the squid there with JS. Don't want people discovering squiddy while they're mucking around in dev tools.

If the person is using anything but FireFox, they get a, "Congratulations on making it to the bottom of the ocean: you have traveled deeper than any browser has been before. Try FireFox Developer Edition and uncover even more mysteries of the deep!"

This will require browser sniffing. And swapping those two bits of content. I'm not sure how to handle those so... POTCH!

[rachelnabors]

There's a debounce function in main.js for remeasuring the pixel distance.

The squid lives in the HTML right now in .one-off. That's the HTML you'll need to inject.

It uses bloop.css, which should only be loaded after FF users have completed four challenges.

bloop.css calls some rather large sprites. Would be best to quietly load these in the background when we're sure FF users are nearing completion. If you've got a better way to lazy load this for FF users, I'm all about it!

[rachelnabors]

#bonus-challenge should be injected for FF users on win state. Inside it,

#bloop-depth gets updated with the distance #the-bloop is from the top of the page.

Otherwise, for everyone else, #ending should be injected when they complete all their tasks.

[mythmon]

Debounce doesn't do anything about measuring pixel distance. It is a rate limiter for function calls. I'll just use jQuery to get the position of the bloop.

[mythmon]

Ok, there is a problem with this. The bloop is about 17,000 pixels down the page. The page is about 50,000 pixels. The rulers stop after 15,000 pixels. This challenge highlights that limitations quite nicely, and the rulers can't actually help you find the bloop.

[mythmon]

This is bug 1144575. It seems @potch already noticed the problem, and we aren't going to be using rulers anymore?

We also nicely show off bug 1200114, where rulers are in the relative position at first, which is pretty confusing. Scrolling just a bit fixes that issue at least.

[operatorjen]

@rachelnabors would it make sense to reuse one of the existing lessons to find this squid and just reword the challenge?

[rachelnabors]

Bleh. The height is dynamic, too. Not sure how to make this show off tools sans rulers. :/ Let me think. On Wed, Oct 14, 2015 at 4:14 PM the brain that died < notifications@github.com> wrote:

@rachelnabors https://github.com/rachelnabors would it make sense to reuse one of the existing lessons to find this squid and just reword the challenge?

— Reply to this email directly or view it on GitHub https://github.com/tinmagpie/deepdev/issues/6#issuecomment-148229899.

[rachelnabors]

So the issue is: The squid is high up on the DOM and not animating until you scroll it into view. Most of these lessons require an animating thing.

Options:

1) Just offer them a jump link to take them to it. No challenge. Just, hey, here's your reward. 2) Make them search the DOM in the devtools to find it. (I find this frustrating, since you have to use the exact name of the element AND its CSS notation, that is "the-bloop" won't work but "#the-bloop" will.) 3) We bang on fixing this ruler issue pre-44.

What'll it be?

[operatorjen]

I think 1) is probably the best option for now. @mythmon @potch ?

[rachelnabors]

Arcadio is going to be so sad. On Thu, Oct 15, 2015 at 8:20 AM the brain that died < notifications@github.com> wrote:

I think #1 https://github.com/tinmagpie/deepdev/issues/1 is probably the best option for now. @mythmon https://github.com/mythmon @potch https://github.com/potch ?

— Reply to this email directly or view it on GitHub https://github.com/tinmagpie/deepdev/issues/6#issuecomment-148419766.

[rachelnabors]

Ok. I'm SO NOT HAPPY with not being able to use the rulers :(

At the beginning of the project, someone mentioned that the rulers could probably be extended further. Can that be done? Who can we get on that?

We can measure to see if the squid is above or below the ruler's limit. If above, leave it where it is.

If below, we could add a class to the page to absolutely position #the_bloop at it's further depth. Colossal Squid can be caught at a number of depths, so as long as it's not at the top of the page, we're within the realm of realism.

AGH. DANGIT. It occurs to me that the rulers do not extend that deep. People won't see rulers when they turn them on.

We'd have to give people an excuse to go back to the top of the page to investigate a signal on the ship.

Oy vey. It's sounding really complicated now.

The rulers could have been cool if we were able to use them early on.

Maybe for Part 2: Electric Coral Boogaloo?

[mythmon]

Bug 1200114 also kind of hurts us here, if it doesn't get fixed. When we turn on rulers, they are always positioned "relatively" so 0 is at the top left of the viewport. Once you scroll the snap to absolute things.

The squid shows up (currently) at ~17500 pixels down. The rulers go to 15000.

If we want to show off rulers without highlighting any of their problems, we'd have to send users to the very tip-top of the page (to "see a signal from the ship"), and then tell them to turn on the rulers and scroll down do some point less that 15000 deep.

PS: Should the bloop be at a random depth? Or is a constant depth fine?

[mythmon]

In bug 1144575 it was said we can increase the size of the rulers to another finite size. They suggested 20000 as a reference to Twenty Thousand Leagues Under the Sea.

[rachelnabors]

So how the height of the experience works now is each segment has a minimum height 100vh (the full height of the browser window).

Your screen is "200 meters deep"; the Bloop appears in segment #d2200, or 2200 meters (11 screen heights) down. (The whole experience goes down to #d6000, or 30 screens, for reference.)

This height mechanic gives the project a real sense of scale and depth, like you ARE in a submersible.

Still, I've considered scrapping it in favor of a more straightforward approach, like just stacking the fish on top of each other.

But everyone who has played with it so far has been, "NO, keep the deep!"

[rachelnabors]

To document: it was decided that the squid is the reward. Here's how it goes:

After hagfish completes, #bonus-challenge is inserted if FF (#ending if not.) And at the same time #bonus-challenge is inserted, squid should be inserted at #d2200. There'll be a link in #bonus-challenge that goes there. After the squid's animation completes, #d2200 should get a .completed class. And the squid li should be added to the progress bar.

Then assign to me :)

[rachelnabors]

Hey Potch. I took care of all this over the weekend.

But there's some cleanup I need your help with. To get my changes in ending.js to work, I had to move the following outside the IFFE statement in main.js:

`var dashboardOpen = false; // opening and closing panels in the dashboard // track open or closed

var moveDashboard = function(panel) { var $dashBoardHeight = $("#menu_options").outerHeight() + panel.outerHeight(); $("#control-panel").css({ transform: 'translateY(calc(100% - ' + $dashBoardHeight + 'px))'}); }`

Could you make that less gross: move it back into the IFFE or at least to the top of main.js. And tell me how/why so I can do it better next time!

Thanks!

[rachelnabors]

Hey Potch. I took care of all this over the weekend.

But there's some cleanup I need your help with. To get my changes in ending.js to work, I had to move the following outside the IFFE statement in main.js:

`var dashboardOpen = false; // opening and closing panels in the dashboard // track open or closed

var moveDashboard = function(panel) { var $dashBoardHeight = $("#menu_options").outerHeight() + panel.outerHeight(); $("#control-panel").css({ transform: 'translateY(calc(100% - ' + $dashBoardHeight + 'px))'}); }`

Could you make that less gross: move it back into the IFFE or at least to the top of main.js. And tell me how/why so I can do it better next time!

Thanks!