myungwoo / react-domjudge

DOMJudge with react
15 stars 4 forks source link

Short problem names with more than 3 characters break the scoreboard #4

Closed saubanbinusman closed 6 years ago

saubanbinusman commented 6 years ago

Hi, I was just testing out your code with DOMJudge's test database and found this issue. A screenshot is attached below:

image

myungwoo commented 6 years ago

Hi, and thank you for your testing. I already knew that issue, but have no idea to handle it. The reason is every ICPC regional (at least I know) use single letter shortname like A, B, C, ... So I decide to support only single letter shortname on scoreboard unlike DOMjudge. 😢 I want to know an opinion of other people about non-single letter shortname. How do you think about it? It is not difficult to implement horizontally wide scoreboard, but it breaks the ratio, or whole view. Please tell me your opinion! Thank you very much. 😄

saubanbinusman commented 6 years ago

Well. I agree with the fact that problem names like A, B, C or P1, P2, P3 are more prevalent. I don't have much idea about web-development (especially using fancy frameworks like react and node). So I am dumbfounded here, but is it possible that you measure the size of the problem name string and render the boxes of the score accordingly. I tried to take a look at your code and found some stuff that was measuring strings. Couldn't really make much of it as I am not very good at this.

BTW, the UI is pretty well made.

myungwoo commented 6 years ago

Hi again. Yeas, of course, I made the code to measure the string width. However, there's still one more thing to decide.

Do problem columns' size to be identical? Or each column can be a different size?

I'm asking because I'm not sure which is the better idea ...

saubanbinusman commented 6 years ago

When in doubt, best idea is to build something that will work without breaking.

I would go with identical column sizes to give a more uniform and calculated look. I have two ideas in mind, choosing between them is your call.

1) Set a threshold value, if a string's width exceeds that, you cut off the string with ellipsis (...) or something like that. You will have to increase the default width of the column for this to work properly.

2) Calculate the widths of all the strings and store the max string width. Then render all columns with the same size based on max string width.

Best regards

myungwoo commented 6 years ago

Thank you, I prefer the first idea. Set current width to a threshold and cut off the string with ellipsis. The reason why I don't want to increase default width is because I think it's better to keep condensed look in scoreboard.

finally, image