tinmagpie / deepdev Goto Github PK

In Nightly, right-click inspect the dragonfish's photophore. Notice how the page jumps down, hiding the dragon fish when the devvtools pop up. Dragonfish's head should remain visible.

It's just done when I get there.

This challenge is won when:

For #creature_orange-roughy1

its filter is removed or no longer contains url("../img/blue-filter.svg#seafish")

Gonna have to demo for Greg Tarnoff.

Also, make a pretty button to turn them off with.

There's a UI component in the HTML, nav.progress.

Every time a person completes a task, its corresponding li should get a class of .completed.

When the inView function in main.js fires over the corresponding task, the li should get a class of .visited (this only needs to happen once per task, it makes its UI component show).

The side of the page should have a little task-line on it that indicates:

• What challenges have been discovered
• When challenges have been passed over (like you interacted with one then skipped to the next)
• When a challenge is completed
• Where the challenges are in relation to each other

Clicking on one of the challenge icons zips you to where that challenge is in the water column.

When the challenge icons change, there should be an animation that grabs some attention to indicate, "Hey, hi, this is changed. Look here for your status." I'm thinking a a radiating and fading circle ala sonar.

They're kinda big, filesize-wise. Hey, Jenn, you got those videos super small. Think you can help these? Also, check to make sure they look good, no glitches or weird or confusing transitions.

This challenge is won when:

#creature_flashlight-fish1’s animation-play-state goes from paused to running

OR

the first time animationiteration fires on the element.

(I think the latter is preferable.)

Similar to the above messaging (just replace with animation instead of performance), this should show up when someone is not on FF DE. It is open ended on whether you want to use the Firefox logo or whether you want it to point to the wordmark.

In nightly, navigate to shrimp. Open devtools. Shrimp is now completed. What's up, shrimpy?

Those toggle instructions on and off.

Use scroll listener to record current position, and restore %-wise position on resize event.

Needs a dismissable or fade-out-able "well done!" message.

Change challenge button and UI design to indicate as much

Ideas:

Dev Tool Challenger (riff on James Cameron’s Deepsea Challenger submersible)
Dev Tools Aquatic with FireFox

This change will restore video controls for the two initial right-aligned videos. I suggest we push this change for now, what do you think @rachelnabors ???

Need a "ping sound" like the one at 5 seconds here: https://www.youtube.com/watch?v=-pVo5OHswAw

Play it only the first time any challenge comes into view.

Handing to Edna for the sound.

She can pass to whomever for implementation.

SO!

We have 3 major components on that first screen:

1. the logo
2. the sub
3. the text

At a narrow viewport, they stack on top of one another. So far so good.

But when they go side to side at a wider viewport, there's an issue: sometimes they push the waves outside the viewport. The .segment they're in have a 100vh height: height of the screen. We want to keep everyone inside that 100vh, waves included.

The wildcard is the text: it's responsive, it's em-based. It could be any height!

But the logo and the sub are SVG: they could be any height--if it helps the text fit.

Use Flexbox, set the SVG components to percentages, use CSS's calc(), whatever it takes, to ensure that the contents never push the waves down in this double column layout.

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.

This challenge is won when:

Paths inside #d2600 (referenced via CSS as #d2600 path)

change their fill from transparent to #56fddb

Concern People using the eyedropper tool might not get an exact match if they pick a pixel bordering on another pixel. Is there a way to test for how bright it is? Other possibility: just look for the value to change to a hex value period.

each time a challenge is completed.

Folks were unsure that the videos were tutorials at first.

Perhaps adding "show me how" and the duration ("show me how in 9 seconds") to the play button would help.

Assigning to Jen because I'm not sure how to do that, and she rocked that video player.

Make folks change some keyframes to complete a task.

This inline stuff is bleh.

Rachel, you know how to make a single SVG sprite and use defs. See if you can do that and keep it all animated to reduce the HTML page's load times and allow for user caching.

But this is a nice to have. Those embedded SVGs work just fine the way they are.

.challenge is supposed to overlay .content when it's toggled on via "Start challenge!" Both have slightly different levels of content. Would be great to measure the heights of both, and set the shorter to the same height as the larger.

Of course, this must be recalculated on page and font resizes and such.

TENTACLES and logo, natch

Copy needs to be proofread, edited, trimmed and re-edited.

First step: I finish up the first draft and add it to the ocean.
Second step: I bring in my copy editor to have a go at it, the onboarding text, all of it.
Third step: Profit. No, wait, apply those changes.

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!

You know what to do: cute loading animation, fonts hidden, clamp on scrolling, and all that critical CSS upfront and center.

For people who aren't using FireFox Developer Edition.

Rachel: Add it to the design.

Developer: inject it conditionally.

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!

browsers.css and #for-browsers (in the HTML already) should only be injected for folks not using FF Dev Edition.

Considering making this a transition, not an animation.

#creature_vomiting-shrimp1's animation runs every time it’s scrolled into view thanks to the .in-view class added to its parent div via main.js.

The animation-name for this: escapingGloriously

Users are to "rewind" the animation to its starting point.

Patrick Brosset might have ideas on how to test for this.

It may be easier to use transitions. Or animations. Do tell.

It's done when I get there.

This one is difficult.

The goal is to use the animation panel to see things that are animating but might be obscured by other things on the page layered over them or opacity.

#creature_hagfish1 is hidden in the gross ooze at the bottom of the sea with positioning right now.

I have it set so that when you remove it's bottom sizing, it pops up on top of the ooze where you can see it.

Problem is, if people right click on the ooze, this fish won't show in the animation panel at all, because that panel shows children elements with animations. Ain't no way to layer the ooze over the hagfish and have it also be a child of that ooze.

So I'm considering setting the hagfish's opacity to 0. Then, when it's changed to 1 or the opacity property is removed, the challenge is won.

I'm open to other suggestions, too, of course. Really liked the idea of burying it in the ooze!

It needs a way to share it with your friends as requested by Arcadio.

Track how many exercises are complete. If more than half, AND the user is on FireFox, inject the bloop.css. This will start downloading the HUGE secret and won't burden casual challengers and other browsers with the file size :) This is related to the Colossal Squid Injection issue.

only play once on discovery, never again.

This challenge is won when:

For #creature_nautilus1

it's animation-timing-function

is cubic-bezier()

and at least one of cubic-bezier()'s four values is a negative value. That indicates a "bounce" easing/is close enough.