Add a way to distinguish solves in the freeze on the jury scoreboard

[nickygerritsen]

Either always or with some flag show submissions that are accepted in the freeze differently on the jury scoreboard, so that you know what 'the action' will be.

[meisterT]

What about something like this?

[nickygerritsen]

👀 fancyyyy. Would using a glow that has the same blue color as pending be ugly?

We also need to add it to the legend of course.

[meisterT]

I like the current effect more than the blue I tried, but I created a PR so you can play around with it yourself, perhaps you find a better color.

[nickygerritsen]

Thanks, will try it on a screen that has better colors than the TV I am currently using

[mpsijm]

I feel like the orange glowy effect is not very visible against the green cells, but I have a slight green-deficiency so I'm not sure if it's just me :stuck_out_tongue:

Maybe a suggestion: would it help to also (slightly) change the tint of the green background? :slightly_smiling_face:

[nickygerritsen]

It seems like you like to do frontend stuff 😛. Want to give it a try?

[meisterT]

Is this too much?

[mpsijm]

@nickygerritsen Sorry, didn't find the time last week :see_no_evil:

@meisterT That is a bit intense :joy: Especially when the jury has the scoreboard open on some external screen for monitoring...

But, this did give me another idea. Does it have to be an animation? We could also do something with multi-coloured cells, which may be easier on the eyes / less distracting:

This uses the following extra CSS rules:

I manually added the `score_pending` class to these multi-coloured cells and added these rules: ```css .score_correct.score_pending { background: linear-gradient(45deg, #60E760, #6666FF); } .score_correct.score_first.score_pending { background: linear-gradient(45deg, #1DAA1E, #6666FF) !important; } .score_incorrect.score_pending { background: linear-gradient(45deg, #E87272, #6666FF); } ``` By the way, `!important` would probably not be needed if the already existing `.score_first` rule would be selected using `.score_correct.score_first`, because that selector is more [specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) :slightly_smiling_face:

The 45deg of the linear-gradient has been arbitrarily chosen by Chrome DevTools' tab completion :joy: I'm also fine with any other multiple of 45 degrees, whatever people like best :slightly_smiling_face:

A similar idea could be to "tag" the corner with blue:	Using linear-gradient(45deg, <basecolour> 80%, #6666ff 80%)	Using linear-gradient(45deg, <basecolour> 75%, #6666ff)

Additionally, we could use the "x+y tries" sub-text for these partly-pending-partly-resolved submissions. This makes the jury scoreboard look even closer to the public scoreboard :smile:

[eldering]

But, this did give me another idea. Does it have to be an animation? We could also do something with multi-coloured cells, which may be easier on the eyes / less distracting:

I like the bottom left the best: big enough to be obvious, small enough to not be in the way.

[meisterT]

Me too, I was trying to put a snowflake in that corner of the box but failed miserably with my CSS skills. @mpsijm Will you open a PR for it?