Saif

CHANGES

• Game results show at the end of the game!
• Fixed some player card issues, the client would recieve the full deck of all players
• Fixed some action card bugs

Goals for next devlog

• Fix card-back to show uno logo (not blank)
• Find some music to play
• Fix some animation bugs and transitions (add card animation)

CHANGES

• Home screen has been fixed: there was some animation glitches
• Join game button works: used to just rejoin into 1 room no matter what
• Can’t change name in-game now
• The colours would not updated for actions cards: fixed!
• Made README a bit more detailed to explain where some of the logic lies

Goals for next devlog

• Create the design for the back of the uno-cards
• Fix some inconsistencies in the sizing and placement of things
• Add an actual win/lost modal showing game results

I added a new “suggestions” box, shows the closest match for timezone. Fixed invalid city handling. Updaed the README with instructions for the widget

Try out the latest version: TimeZones - v1.1.1

Tried shipping and for some reason “New York” wasn’t working, I recompiled and edited the dictionary and it worked?!

Try it out! and I would love feedback!
TimeZones - v1.0.3

I styled the settings window, and it was dark mode ofc.
Replaced the “remove selected” with just a trash svg instead (a lot cleaner)

Try it out in the releases section on the repo. I would love feedback!

I went in and seperated the JS and HTML, so now all the JS sits in main.js
Originally I had a simple script tag, and didn’t realize I would need more JS

I also fixed up some inconsistencies with the class names and ids, so now everything is more uniform
The svg in the dark/light mode toggle broke so I had to fix that and I made the dark mode gradient less harsh

I believe it’s time to SHIPP!!!

Added the settings window. Fixed some grid bugs where the widget would be offscreen or somehow duplicate
The settings is barebones and looks bad but ill fix that next. I managed to get the cities to update correctly EVEN with mispellings!

Sometimes the widget bugs out and just doesn’t update so i’ll try to find the cause of that

I would LOVE feedback!!

Forgot to add more frequent devlogs but heres what I did.
Ran into a lotta issue with the speedtest results not being accurate at all (1900mbps).
I tried 100mb file so the site could repeatidtly request it but i couldn’t do the same for upload speed. Ping, jitter, and latency was fine but I needed a place to upload and test that speed.

I ended up with 2 cloudflare workers (free, which was nice), and made the tests much more accurate. I styled up the results, went back and forth a bunch of times with progress bars and loaders. Ran into issues with CSS and JS not cooperating at ALL.

In the end I managed to get it to work and it displays the speed of each value nicely. I’m sure it’s not 100% accurate and added a disclaimer at the bottom.

Added the core widget logic and use a timeAPI to grab timezones.
It organizes in a grid based on the number of cities. Max 9 cities (it becomes a 3x3 grid).
Created a timezones dictionary to make finding common cities faster.
Made a simple icon that I will use in the systray icon later and the settings window.

Next I’ll add the settings window to control adding the cities using RapidFuzzy (case-insentive searching). Then work towards adding a sysTray icon for quitting the widget or opening settings

Added the initial project structure and the API files, decided to go with Netlify edge functions.
Homepage has a playground using the API and lets the user customize the spinner then copy the URL to put into their projects.
Setup the default spinner with a required parameter being the size.
Other parameters include: speed, width, foreground and background colour

Added a dark mode toggle to see the spinner in dark mode apps, SVG int he playground is scaled regardless of size chosen for easier customization. Documentation was added to the README for anyone to try out and see examples

Later, based on feedback, I’ll try to add more customization, more loader types and make playground nicer.

Fixed up the home page to use nice cards instead of just text
Added a settings option to control sound volume (no music yet!) AND display name
Room creators have a crown icon and can:

• kick players
• start game
• leave and the admin gets passed to someone else

Updates the game UI to look nicer, added draw and discard piles and an indicator for what colour (will move the indicator though) Added a turn indicator

Ran into a lotta issues with draw rules and turn flow, and it broke like 4 times before I could progress

I’ll focus on refining some logic since sometimes it breaks, move around some things and maybe add a “results” div at the end of the game (haven’t figured out spectating options yet)

Later I plan to let you start a new game after one is done, and add some animations since it’s still kinda snappy

Added an executable in “SystemMonitor-1.0.0.zip”
Download and try it out from here:
https://github.com/Saif-Quazi/SystemMonitor/releases

Ran into issues with code certification. So instead i released .zip with instructions on the README.
I downloaded and tested it and it works!

Try it out and if possible, I would love some feedback!
https://github.com/Saif-Quazi/SystemMonitor/releases

Changes (what I did the last 2 hours):

• Fixed up the settings window. The layout looks A LOT NICER than before.
• Switched out the slider to a dropdown and make the show options cleaner.
• Saving doesn’t close the settings page

Ran into a lotta issues with styling, I’m used to CSS so this was quite a journey

Next I’ll compile using pipinstaller and add [v1.0.0] to the github page releases for anyone to try

I added a settings window that you can open from the system tray icon. Looks bad but is functional.

The settings options include:

• showing and hiding cpu/gpu/ram. (minimum 1 must be selected)
• Font-size 8-16px

Width of the widget changes based on if all 3 values are shown or not.

Next I’ll focus more on the actual styles of the widget and add more customization. Then after change the layout of the settings window since it’s still very simple.

I added a system tray icon but the icon changes dynamically based on CPU usage.
Cleaned up the widget a bit more and now it’s top-center of my screen.

Looks pretty bare-bones but the functionality is there. I’m going to focus on styling next.
I’ll make the tray icon simpler and later account for light-mode windows users.

I’m using Python’s tkinter for the widget and I’m using psutil and GPUtil for getting CPU, GPU, and RAM usage. The usage gets logged and updates on the window every second. I made it borderless, always-on-top, for now.
I also added a profile.json so maybe in the future there could be options instead of editing code manually/having limited presets.

Next I’m going to add system tray since the only way to exit is via terminal or task manager😂
After that I’ll probably look into python documentation for custom rounded windows

I was in the mindset of “making a website” and not “making a game”, and I ended up with a navbar lol. I removed it and added an animating UNO logo = MUCH BETTER.
I decided to remove the quick-play for now since I need to core game first, and I managed to setup the rooms system and joining/reconnecting. The UI shows the players discconected or when you reconnect and the room code aswell.
I also decided to setup a “Smoke Test”, since that would be very helpful and 10x faster than doing it manually.

Next I’m going to setup the game UI for real gameplay. Then after add some SVGs for the cards, they all look pretty bad.

I’ve worked on the backend for room creation/joining/leaving. Redirects to the game.html page with a URL param: “?code=”. So far the UI doesn’t update but I have html templates for the players list.
I’m going to add options to kick players or lock rooms so no one else can join. The options should only be visible to room creators though. I’ve also started to make SVGs for the UNO cards since changing colours and then just overlaying a value like “8” or “+4”.

Next I plan to connect the UI of the game-page, with the actual state instead of just logging to the terminal. After I’ll focus on verifying info with the server for player decks, and game state.

I’m kinda avoiding the card-fanning issue for now, but I promise I’ll fix it
:)

Added some play buttons to the main page, and gave them a nice transition. The card fans are still broken but I’ll probably make anchor points or find a solution with CSS. I created the UI for the lobby list and create lobby. I also changed the font to Poppins which I got from Google Fonts. I

Next I’m going to connect the buttons with the UI elements, and work on server-side to create “rooms” and validation code.

I created the entire repo structure, I worked on VERY basic WebSocket connection. So far it just logs a message saying “Client Connected/Disconnected”.
I started with the “game” page, I have the player deck and the opponent decks.
I’m having issues with the “card-fans” for the opponents they are not lined up properly and I need to add the “value” on the corner instead of only center.
I added some basic animation and a table wood texture I found (ignore the orange div).

Next I’m going to make a proper lobby area and try to fix that issue with the cards.

I fixed up the homepage by adding a gradient and particle effects and it looks much better.
Originally the gradient placement was off originally for the contact page so I did the same gradient and particles for the contact and project pages

I removed the placeholder projects and changed some of the styles to be more consistent across the site

Next I’ll go through the repo to remove anything unesesary, add more to the portfolio, and finalize this project

I styled up the contact page and added char limits and basic sanitization for the input fields.
I added responsive styling for all the pages so that mobile doesn’t look bad.
I blurred out the content with a small message for super small screens because the content becomes broken

Next I plan to work on the home page by making it responsive and adding some animations. Then I’ll remove the placeholder projects and add real projects to the projects page

I fixed up some styling issues, the cards weren’t scrolling and I didn’t like the design for the modal. I removed the image gallery for the project mockups and instead just make it 1 image.

I added small “tag-like” pill that shows “Real Client”/“Personal”. I worked on the contact page, turns out Netlify handles form submissions easily and so a lot of time was wasted. It still looks bad but atleast now it works and EmailJS was not nesesary.

I didn’t get much time today but tomorrow I’ll work on the contact page styling. After I’ll try to add some images, icons, and make the site more responsive.

I’ve added the modal and it looks broken. I’m trying to make a gallery with demo images of the project. I’ve added a barebones contact form with some basic styling

Tomorrow, I’m going to fix the modal, setup EmailJS account + template and clean up some styling. I also plan to add animations and transition soon

I updated the project page and contact page by adding all the main css files, the nav menu components and the SEO tags. 404 page actually has a 404 message now.
The projects page now has projects! (it’s all placeholder tho) I used Placehold.co for placeholder images, and the classic Lorem ipsum for the text. I focused on making it an easy process for adding projects. It’s all generated dynamically with JS from an array containing objects (JSON).

I plan to make the modals next and probably add a button so that anyone can see demos of the project. After that I’ll probably setup EmailJS for the contact page.

It’s all barebones and not a lotta styling but I hope to make it look a lot nicer later

The main content of the home page and the nav menu is done (the nav menu has buttons to other pages and also socials to reach me).
I’m using Font-Awesome for icons and Google Fonts for Open Sans/Poppins

The project structure is ready for when I start adding real projects to the portfolio. I have added some SEO tags like Social Open-Graph & Twitter card. I still have some SEO tags that have placeholders that I need to update

My focus now is to add something to the portfolio and contact pages. After that I’m going to add something to the 404 page