Style font size for times

[bryanlundberg]

Looks better making decimals smaller.

1. Update main timer (Not statistics)
2. Solves page grid
3. Solve modal

[idrak888]

Hi I am interested in working on this

[bryanlundberg]

Thanks, you can work on it 👌 @idrak888

[idrak888]

So far I've located the finishing time in 2 locations, '/components/timer/Timer.tsx -> line 54' and '/components/solves/ModalSolve.tsx -> line 78'.

Are these the correct outputs to be styling? And is there one more that I am missing?

[bryanlundberg]

yes, there is 1 missing.

normal grid of solves

SingleSolveItem.tsx

[bryanlundberg]

The current time conversion process is complex, but a simpler visual effect can be achieved easily by formatting it into two separate <div> with customizable class to change font size. The formatTime function returns a string, allowing for a two-step split.

On the left side, splice from the start to the end with 3-length segments.

On the right side, splice from the end to the start with 3-length segments.

For example: 1:02.23, 49.34, 1.32, 0.35

This always results in a 3-length segment at the end.

The output format would be: time.00

splice1: splice2

[idrak888]

I see, so you want me to use the .slice() method twice? I was thinking something like .split(".") and then take the right-most section which should be the decimal values and then just style that separately

[bryanlundberg]

That approach looks better 😅

[idrak888]

Sounds good, I'm just trying to manually change the states somehow to temporarily show the time on the screen. Once I'm done styling I'll change it back, how can I achieve that?

[bryanlundberg]

Hmm i'm not sure at all, what do you mean?

[idrak888]

No problem, I will figure it out : )