stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

Leaderboard for CyberMatch

  • 4 Devlogs
  • 8 Total hours

A leaderboard for players to add their high scores for Scratch game “CyberMatch”.

Open comments for this post

17m 3s logged

Just wanted to address some feedback a shipwright gave me: some of the buttons not working on the site is an INTENTIONAL choice.

Let me explain: me and two other friends made an original site where we ‘advertised’ our games as one bundle, but I have only included the pages that I made entirely myself. So the only two pages that should load is the Leaderboard page (https://tennislegend.pythonanywhere.com/leaderboard) and the Original i guess ‘general’ CyberMatch page (https://tennislegend.pythonanywhere.cm/cybermatch). I decided to keep the buttons, and make them seem like clickable by having the cursor change to a pointer, yet lead nowhere, as you can see in an examples pictured below. Every other functionality like entering a value in the leaderboard, the Easter Eggs (like the cat), etc, should work perfectly.

0
0
13
Ship #1 Changes requested

I made a leaderboard system for CyberMatch using HTML, CSS, Python and Flask. The project allows users to submit their details and time, then view the results on a separate leaderboard page that can be sorted in different ways. Along the way I added a dedicated leaderboard layout, a dark theme, hover effects, responsive design for phones and laptops, and links between the original page and the leaderboard page.

One of the bigger challenges was getting the sorting system to work properly. At one point names with capital letters would sort differently to names with lowercase letters, which caused some entries to appear in the wrong order. I also had to make sure users could only enter appropriate values into each field so that invalid data wouldn’t affect the leaderboard. After making a few backend changes, the sorting became much more reliable and the input fields behaved as expected.

I’m most proud of how the leaderboard ended up looking. The dark theme, green accents and rank highlighting make it feel much better than a plain table. When hovering over an entry, the row changes to a grey background and the text colour changes depending on position, with gold for first, silver for second, bronze for third and green for everyone else.

To see the project, click the “Try project” button or go to https://cybermatch.onrender.com/leaderboard. To test it out, try adding a few entries with different names and times, then use the sorting options to make sure everything updates correctly. It is also worth testing on both a laptop and a phone, as the layout was adjusted to work properly on different screen sizes.

  • 3 devlogs
  • 7h
Try project → See source code →
Open comments for this post

3h 2m 52s logged

Since exams picked up, I got the chance to add to this throughout the last few weeks, but didn’t get a chance to write a devlog as consistently as I wanted to, so I have decided to make one big one with each devlog that I would’ve liked to make below:

Devlog 3 - 9/9/2026

I mainly worked on the CSS for the Leaderboard page. I gave it a dark theme, added a box around the table and added hover effects for each entry. When hovering over a row, the background changes from black to grey, and the text becomes gold for first place, silver for second, bronze for third and green for all other positions. One thing I had to watch out for was making sure the silver text was still easy to read against the grey background. I also made sure that the new styling didn’t interfere with any of the styling on the Original page.

Devlog 4 - 10/9/2026 to 14/9/2026

I finished off most of the Leaderboard page. I added a background, more borders and boxes, and adjusted the styling so it matched the Original page more closely. I also improved the sorting system by stopping users from entering numbers into the name fields and letters into the time field. Another thing I fixed was the sorting of names, because capital letters were being sorted differently to lowercase ones, which meant names were sometimes appearing in the wrong order. After adjusting the backend code, names would sort properly regardless of how they were entered. I also added a link to the Leaderboard page from the Original page, removed old links that were no longer used, and made sure both pages displayed properly on phones as well as laptops.

0
0
30
Open comments for this post

3h 10m 30s logged

Took me ages to combine the CSS into one file without any errors, but I finally did it :) [took like 1 1/2 hrs btw 😭]
Oh, I added a sort function to it, as seen below in the image, and when you hover over an entry it changes the background colour to a bit more grey. Also the leaderboard is finally a table! :)

0
0
32
Open comments for this post

1h 4m logged

I started the Leaderboard’s back- and front-end, with the footer from my Original page added to the Leaderboard page. I also added a first and last name function, with placeholder text in the boxes too.
Looking a bit dull right now, but will improve soon enough!

0
0
9

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…