kcapp / frontend

Dart Scoring application
17 stars 11 forks source link

Alternative button layout for inputting throws for devices with smaller screens #121

Closed lluni closed 2 years ago

lluni commented 2 years ago

I find the the current button layout to input throws in X01 (I have not tested other game modes besides Tic-Tac-Toe) very practical but you need to be pretty accurate to press the correct button. Especially on mobile but even on a tablet the buttons can be relatively small so you can miss them pretty easily and need to re-input throws. A possible solution could be to have a second alternative (and more compact) button layout in which the double/triple scores are not separate buttons. Here you would need to click a double/triple button first and then the corresponding single score to input a double/triple throw but you could also deselect it if you pressed it accidentally.

For reference: kcapp_buttons

In the alternative layout the buttons would need to be wider to fill the screen width.

thordy commented 2 years ago

Hi @lluni, that should be possible to add. For reference, could you let me know what kind of device you are normally using?

I guess adding a button for single, double and triple makes sense though, in case you click something incorrect, and want to switch modifier after the fact. This would also be similar to what we do when scoring via numpad.

We also probably want a undo/backspace button to remove input or last throw.

Would you still prefer to have buttons as a new row above as shown, with Single,Double,Triple,Backspace? Or would another column on the right (after 17,13,9,5,1) with the buttons vertically be fine?

lluni commented 2 years ago

I usually use a Samsung Galaxy Tab A (2016), 10,1".

I think only double, triple and undo buttons would be enough if the double/triple buttons and/or the score buttons themselves could "light up" (e.g. the buttons get the same background-color as the double/triple scores in the existing layout) if the double/triple button is selected and return to their "normal look" if it is deselected. But having a separate single button would not be a problem.

I think I would prefer having the (single,) double, triple and undo buttons vertically because they could become too wide if they are in a new row above.

thordy commented 2 years ago

I did a quick attempt at adding a more compact button input like you suggested. I realized we don't need the double bull button, and made the double and triple toggle the state of all buttons like you suggested!

simplified_buttons

Let me know if this is what you had in mind

lluni commented 2 years ago

Yeah, this looks nice! Thank you very much for doing this so quickly!

thordy commented 2 years ago

To allow switching between the old (wide) and new (compact) button input mode, I added a configure button to the menue, which brings up a modal dialog where you can choose which layout you prefer. This is stored onto the localstorage of your device, so it will persist, so no need to set it more than once image

Done in develop (1396001100172f79e823e2b91e31be235a7748e4) and available in latest docker image