MyHeats v0.4

I was hacking on a new version of the “live-updating leaderboard” with some bug fixes and a fresh new design (CHANGELOG.md).

#coding #sports #myheats

I took advantage of the CSS flexbox layout to improve the design on mobile devices. The main idea was to reduce the table size to a minimum on small screen sizes. The individual cells of the table are shown as small boxes, with labels to indicate the content type.

myheats leaderboard mobile layout

On larger displays, for instance, a big screen at the finish line of a sport event/run, the table is displayed in a traditional fashion.

myheats leaderboard large display

Here some more screenshots of the admin section with the new design.

The live-updating leaderboard: myheats leaderboard mobile view

The scoring section where judges can enter the scores. In this section, I found it important to indicate the loading status whenever the score is changed and to make the input field big enough for usage on small smartphone screens: myheats leaderboard mobile view scoring

Friends told me that similar software has a feature to “lock” the scores once the scoring is done. Currently, there exists no such feature in MyHeats, but that's a good idea for my next hacking sess.

The section where event admins can create heats and manage the startlists for each run: myheats leaderboard mobile view startlist

The administration of the athletes: myheats leaderboard mobile view athletes

Athletes are not required to have a lastname. In this way, the leaderboard can equally well be used to score entire teams.

And last but not least, if you are reading until down here and you are interested in the technical implementation and the arrangement of the data in the database, here the database schema: myheats leaderboard supabase database schema

Interested in test-driving the scoring backend for judges and event admins? Drop me a line on IRC #p0c or on Mastodon.

🛜 RSS | 🐘 Mastodon | 💬 IRC