myungwoo / react-domjudge

DOMJudge with react
15 stars 4 forks source link

Display problem's balloon color somewhere. #5

Open myungwoo opened 6 years ago

saubanbinusman commented 6 years ago

How about you render a stripe above the problem's name on scoreboard that is colored accordingly.

Something like this: example

myungwoo commented 6 years ago

😮 Pretty good idea, I'd never thought. Thank you. I'll try and take a look!

And @saubanbinusman may I ask you how did you find this repo? I've just published last night.

saubanbinusman commented 6 years ago

There's an intra college coding contest coming up in my university. I am in the organizing team. We used to use the PC^2 automatic judging system before, but it was buggy and cluttered. I searched for automatic judges and found DOMJudge on ICPC' site. I installed the latest version and had the same error as you had (codeguard error). I found this repo in your profile after I was going through the DOMJudge's issue you opened.

I hope you don't mind me having a look at your work. :) And hopefully, I will be using it next week.

myungwoo commented 6 years ago

I've made and tested with "2017 Asia Daejeon National First Round Programming Contest" data.

And got: image

I think this method needs a better color selection. My other idea is using this balloon images above the problem's shortname. I always use Spotboard for external scoreboard and for award ceremony. For smooth converting from DOMjudge to Spotboard I need to write balloon color as its file name (eg. blue.png -> type "blue").

It's very welcome to see and comment my work. Thank you 😄

saubanbinusman commented 6 years ago

Wow.. it looks awesome.

Regarding the balloon images, I would suggest against them, unless you flatten the images and remove the shine from the balloon. Otherwise, it will look odd in this material design setup.

I have another idea. How about you render a (black?) stripe behind the colors. It will act as a separator between Final Scoreboard heading and the actual scoreboard, while solving the problem of light colors not being visible on white background.

myungwoo commented 6 years ago

How about you render a (black?) stripe behind the colors.

Did you mean keep small & wide color rectangle and (black?) stripe background?

saubanbinusman commented 6 years ago

I meant the following: example

But the black stripe isn't looking very nice. Maybe you need to think of something else.

myungwoo commented 6 years ago

How about this? I add thin border to color box.

image

Balloon color still breaks the material design. I'm wondering it is necessary to show ballon color 😢

myungwoo commented 6 years ago

This is whole view: image

saubanbinusman commented 6 years ago

Outline looks ugly to be honest. Another idea is to draw a rounded square behind the problem name like you are doing for problem submissions for individual teams in the scoreboard.

myungwoo commented 6 years ago

Agree.

Balloon colored background is not a good idea because text color of problem name depends on its background. I'm thinking about hover-popup stuff now.

memo: reference css