report: celebrate your all 100's

[paulirish]

It's come up before. But it came up today: https://twitter.com/RobertJGabriel/status/1004604294102945793

The logic is, reward within the report if all the categories in your report have a 100. This can trigger even if you're only testing a single category. I considered enforcing that 2 or more categories are present, but that seems arbitrary.

(A further thing to explore: add additional fireworks per each included category. From a trickle up to a finale.)

example report:

• https://ripe-church.surge.sh/score100.html
• https://ripe-church.surge.sh/solocat100.html

[JoelEinbinder]

.score100 .lh-lighthouse {
    animation: 4s linear infinite party-lighthouse;
}

@keyframes party-lighthouse {
    from{
        filter: hue-rotate(0deg);
    }
    to{
        filter: hue-rotate(360deg);
    }
}

[patrickhulce]

Ha, this is awesome!!! ❤️

[patrickhulce]

@hwikyounglee and I were just thinking it might be cool to go all out and replace the dark gray background and do a animation through the rainbow :D

.score100 .lh-header-bg {
  background: #f00;
  animation: 4s linear infinite party-background;
}

@keyframes party-background {
    from{
        filter: hue-rotate(0deg);
    }
    to{
        filter: hue-rotate(360deg);
    }
}

[hwikyounglee]

A suggestion to the excitement: shall we have a way to stop the animation to provide a control?
Options might be: play only once on load, stop when click the sky, stop on scrolling, or a combination of those.

[paulirish]

see commits for changes

• https://ripe-church.surge.sh/score100.html
• https://ripe-church.surge.sh/solocat100.html

[benschwarz]

My vote is for lights coming out of he ligthouse as if there’s an epic party going on inside 👏

[hwikyounglee]

• For the collapsed header, either the text might need to be inverted or go back to the regular gray bar?
  
• I feel we should go with all category 100's for fireworks. For a solo cat 100, we could consider a confetti in each gauge in the future perhaps?
• Also, wondering about the battery usage of the animation: if it consumes battery, I suggest the animation repeats x times (x=3~5?).
• (added this comment later) It might feel a bit smoother if the fireworks start after the gauge svg animation completes.

Thanks Paul!

[ebidel]

Lighthouse blue!? It's safer to sail in the day time.

Also noticed a few scroll bugs.

Background area shows through header:

Is the share icon meant to be see through?

As @hwikyounglee pointed this out too. The text is hard to see:

[paulirish]

examples are updated:

• https://ripe-church.surge.sh/score100.html
• https://ripe-church.surge.sh/solocat100.html

[exterkamp]

Took @JoelEinbinder's amazing party CSS and applied it to just the lighthouse light:

Yes? or very yes?

[patrickhulce]

oh VERY yes!

[paulirish]

thx for bringing this back to life, @exterkamp

one nit, but this LGTM.

[paulirish]

I think we don't need this try/catch any longer.. pretty sure it was resolved somewhere else.. but IIRC it only applied in the single-category case.

[exterkamp]

I think we still need it. Even on master it throws errors when scrolling in single category reports. I can split this into another PR if it doesn't belong here, but I think this is still a bug.
master:

[paulirish]

lets just move a few lines inside of a

const scoreScale = this._dom.find('.lh-scorescale', scoresContainer);
if (scoreScale) { ... }

[exterkamp]

The error is on the find itself. This still throws, no?

[paulirish]

what i meant to say is.. "what a beautiful try/catch! let's keep it just like it is."

[exterkamp]

Updated examples:

• full
• one category

[connorjclark]

Super fun I want this yesterday.

just gonna bring up @hwikyounglee's concerns about how this could be distracting.

A suggestion to the excitement: shall we have a way to stop the animation to provide a control?
Options might be: play only once on load, stop when click the sky, stop on scrolling, or a combination of those.

WDYT of stopping when clicking? (or better, some text somewhere saying Congrats on :100:! (click to disable animations) (disable forever)

This is under the assumption that a report of 100s still has useful information that developers might spent non trivial amounts of time reviewing the report.

[paulirish]

Personally, I dont think it's worth adding user control to stop the animation. But Shane already did it so whatever. :)

[brendankenny]

yeah, agree about the interaction controls being unnecessary. Seeing the animation without cheating is going to be incredible rare in the first place, and you wouldn't have that report open for that long anyways because there's nothing much to look at in a perfect report but this new thing :)

[exterkamp]

examples:

• http://unable-fruit.surge.sh/one_category
• http://unable-fruit.surge.sh/all_categories

[egsweeny]

I dig it.

[paulirish]

🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆 🎆