End game screen styling & README

• I added some styling for the end game screen
• Made an actual README
  This will be my last devlog before I ship the project!

Changelog

• updated README
• added styling for end game screen

UNO Call button

After placing a card, if there is only one card left in a players hand, they will need to press the ‘Call UNO’ button within 5 seconds, otherwise 2 cards will be dealt to them and an alert will be shown.

Changelog

• added UNO calling button

Draw Card Stacking

I implemented draw card stacking, which was a very requested feature. +4 and +2 cards add up, so the player without any draw cards must pick up the stack. The button on the UI shows how many cards that will be picked up! This change also means that the game no longer draws cards for you, which was the previous behaviour.

Changelog

• added card stacking
• added console logs

Styling for the game page

I made the game page look good! I also added some wild colour choice logic. I am pretty pleased with the results. The player that is playing gets highlighted yellow.

Changelog

• styling for game page with colour picking logic

Changes

• The HTML for each page is now seperate, rather than being in one big file. This makes managing stuff easier as you only see the code related to the page.
• Tidied up file structure, with better naming and separated some code out to a helper file.

This was kinda challenging because there were so many bugs with state management, re-connections, etc. as pages redirect to others based on authentication and game state.

Changelog

• separate HTML pages for each view and tidied up file structure

Better error handling

Lots of miscellaneous improvements and bug fixes, including:

• Improved UI adaptability to different screen sizes
• Improved error hanling, with red text that appears below a menu rather than an alert box
• More descriptive errors vs. “Invalid input”

Changelog

• better error handling

Lobby UI design

I dis some styling for the lobby page! It is also quite adaptable to the window size.

Changelog

• lobby styling

More UI design: landing page -> game working

ngl I kind of forgot to devlog before, I literally typed it out and everything, just didn’t press create so there is a lot of stuff I did

Changes

• I improved the style of the site, it now has a dark-purple theme!
• You can now join games from the landing page
• The flow from the landing page into the game is working now
• I have added some styling for the lobby header (still needs some work)

Todo

• Fix the SVG text not displaying properly if the font is not installed on the computer
• Add more styling to lobby and game

Commits

• landing page to game flow working and some lobby styling
• landing page UI flow complete
• UI for entering player name
• frontend design for joining game

Card Carousel on landing page

I made an infinite scrolling carousel for the landing page, it looks so cool! The cards are randomly generated on page load.

Changelog

• added card carousel
• styling for landing page

I added some CSS for the landing page! I think it looks decent, but I have some plans for the future to improve it, such as making it more adaptable to different window sizes.

Changes:

• imroved end game experience, the back to lobby button works properly even after refreshes.
• I fixed the update handling, I simplified it and fixed an annoying bug where the wrong page was being loaded after a refresh, turns out the page was being loaded before the reconenct success was recieved, then when it was recieved, it had changed and loaded wrong. Simple fix, but took ages as it wasn’t what I was expecting and was working when i had the debugger open (because it was a race condition bug)

Changelog

• improved end of game logic and event handling
• update event handling for card placement

I added the card assets to the game! It makes it feel like you are actually playing now.
Next I am going to update the client updating system, it is getting a bit messy. I have been working on it before this devlog but I think I need to go back to the drawing board a bit because it is not going great.
Anyway, I will continue to make UI improvements

I designed some UNO game cards for the website! This was my first time using Adobe Illustrator so there were some hiccups here and there. But I am very happy wit the result!

BIG updates:

• Added bots!! - you can add bots to your room when in the lobby.
• New game updating system - clients are sent specific updates for each event e.g. on card place, which will be very useful once I made the actual UI (I’ll stop procrastinating and learn CSS at some point lol)

The updating system took forever because I was battling with typescript to get it to be happy, eventually I gave in and used ‘any’ type for the data (i know not great) but this is my first TS project so I can forgive myself.

Updates:

• Added reconnection logic, which allows users to refresh pages and carry on where they left off
• Added game end handling (shown in video) that also can reset the game for a rematch
• Improved some server-side code, such as input validation.

I added the game engine functionality to the site! It is now playable, albeit with a very basic UI. In the next updates, I will imrprove the UI from just raw HTML

I made several backend improvements, such as proper auth with tokens that are mapped to the websocket ID. Clients store their token in localStorage.
I also implemented the ability to start the game, which triggers a different page.
Next: I will implement more game functionality, such as placing and drawing cards!

Changes:

• I added room joining functionality, player list is updated in real time
• Made improvements to the website by making it a single page application (SPA)
• Improved robustness with input verification
  Next steps will be to get the game running on the browser!

Updates:

• Improved game engine with support for getting a public state of the game
• Added room functionality, so multiple games can be going at the same time
• Implemented websockets and a web interface that lets you create a room (see video)

I created a basic UNO game engine:

• supports multiple players
• checks if a card is valid
• deck and discard piles
• deals 7 cards to each player
• supports card effects (draw, reverse, wild etc.)

Did some final tidying of the code & made a demo video - watch it here: https://www.youtube.com/watch?v=X7_YcZsVsm8

First Devlog! To kick my project off, I made a function that generates a shuffled UNO deck.

The code and hardware are pretty much done! I made a proper README and imroved usability by making the config easier. A battery is no longer required, it can be specified in the config file. I will make a demo video and then the project will be ready to be shipped!

I made a better power button, It is flush with the case and fairly difficult to press unintentionally.
I also added a wiring diagram to the repo so you can see how everything is conencted.
Also a few bugfixes

I created a selection page for choosing the timetable file!
Files that are already downloaded are coloured in green. If the device is offline, only cached timetable files are shown. I am really pleased with how this turned out. I got to stretch my programming skills with this one

I moved the data for homeworks relating to lessons out of the timetable.json file as it made more sense to generate this when the timetable is viewed rather than when it is downloaded, to account for homeworks being marked as completed. I then decreased the complexity of the offline timetable storage as it no longer matters how old a timetable file is, if the contents will not change.

Multiple offline timetables can now be stored, I built a system for keeping track of how old each file is so they can be removed once the maximum count is reached. If there is already a timetable fie for the current date, then it will be loaded. If there are more than one, then the newest file will be loaded.

Hardware Changes:
I have almost completed the harware of my project! I just need to make a power button.

• I created a new back cover with a USB-C port and a hole for a power button (need to make a working one)
  Software Changes:
• Improved experience in offline mode (e.g. time and date still shown if the RTC was set on power up, auto reconnection if network was lost)
• Lessons that have homework due will show this on the timetable page - green if complete, red if incomplete
• The next lesson has a ‘Next’ badge on it

You can now select the date for the timetable! I created a menu where you can scroll through the days and select one to be displayed. A banner is shown to remind you that the timetable is not today.

Hardware Changes:

• I replaced the unused RTC module for an Adafruit LC709203F battery fuel guage, so I can get the charge percentage of the battery.
• I am using a different USB-C breakout board that works with modern chargers because it has some resistors on it that tells the charger it wants 5V.
• Updated design to accomodate these things and added screw holes. Put everything together and it is looking pretty cool! printed in black this time.

Software:

• made some improvements to homework page - tasks have coloured labels to show if they are unseen. completed homework is no longer displayed. unseen tasks will be marked as seen when they are viewed (did this with an API call so it will update on the website as well!)
• all data auto updates every 20 minutes if the device is sleeping.
• added support for Adafruit LC709203F

The timetable now auto updates, it checks every 2 minutes if the homework tasks were generated on the current day, and if they aren’t then new ones are downloaded.
Also, I added some coloured markers on the homework tasks to indicate if a task is complete or unseen.

I improved the timetable page by adding in period numbers and also break and lunch markers. These aren’t available in the API so they are defined in the config file, all that is needed is a name, and a start & end time in simple HH:MM form. the code does the hard work of converting these into numbers that can be sorted. You can also specify any number of breaks.

I refactored my UI code, this took a while as it is now 800 lines! anyway, I used some constants for drawing instead of random magic numbers everywhere. I also added more comments. Bit boring, but it had to be done to make the code more maintainable.

I have optimised the draw() functions in much of the UI code, previously I was reading from the JSON file with the data every draw() - this includes after something simple like a scroll. So I made the data handling more efficient by reading from the file once when the page is opened, then storing the contents in a variable self.data which draw() reads from.

Homework task descriptions can now be viewed! You can now scroll and select tasks to view their descriptions. I made a function that takes the HTML description from the API and converts it into raw text and newlines so it can be displayed on the Pico. I added another page that you are taken to when clicking on a homework that lets you view the description.
I also added a “Force Offline” option in the config, so I can easily make fake data for it to read and display, as you can see in the video!

Changes:

• added a homework checker function, so the LED on the front turns blue if there is unseen homework. Polled every 2 minutes.
• added a wifi connection tester function so offline mode will be activated if the wifi connection is lost.
• added info to README

Added homework page! Coding UI took a while because of an annoying ‘off by padding’ error. The due date turns red if the homework is late, which I have demonstrated in the video.

Changes made:

• added attendance! (demo video is not my actual attendance numbers lol, i just wanted to show off the colour coding)
• moved some code around for better structure

• Added support for having multiple available networks & connecting to each one if a connection fails
• Created a global state file for easier checking of system variables without unnecessary parameters or imports
• Warning message at the top if offline
• Other Miscellaneous improvements

I did a few things today:

• Fixed a bug where after a hard reset, the screen would go blank after booting up. This was caused by an issue where I was storing the last button press time before the RTC was set, so the code thought the last time the buttons were pressed was 5 years ago.
• Heavily improved WiFi connection logic, with connection tests to google and classcharts, handling no wifi connection, handling no networks being found, etc.
• Improved messaging logic by utilising return & yield in python to direct the logs to where I want them to go, instead of having multiple lines to log one event within the method.

I created a cool little bootscreen! You can see what the device is doing while powering up. Very useful for debugging without a computer attached. Took a bit of trial & error because of display update & async wierdness, but I am happy with the result.

Date range for behaviour can now be toggled.

Just added some functions to get dates (start of school year, this week, last week, this monday, one month in the future). These will be important for new pages - homework, attendance, etc. See github commit for full code. I try to avoid using AI when coding, for the sake of learning. But this commit was partially vibecoded because times and dates are HELL especially on micropython with basically 0 libraries for this stuff.

First devlog after adding my project to flavortown - Hi! I Added a student behaviour points page to PicoCharts. Uses ClassCharts API (Online school platform) for data.