Leaderboard for CyberMatch
- 4 Devlogs
- 8 Total hours
A leaderboard for players to add their high scores for Scratch game “CyberMatch”.
A leaderboard for players to add their high scores for Scratch game “CyberMatch”.
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.
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:
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.
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.
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! :)
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!