today i worked mostly on fixing internal stuff so system dont break easily. before some things was not stable specially when handling files and memory, so i spent time cleaning that up and making it better

• removed login page (was not perfectly cooked as it should.)
• worked on optimization part like file handling and blob system so multiple files can work properly without causing issues, also did some memory cleanup so system dont lag or behave weird
• added persistent wallpaper system so once you set wallpaper it stays same and doesnt reset again and again
• added file size limit check so if someone tries to upload big file it just blocks it and shows proper message instead of breaking whole system and added zoom and pan in images using scroll and drag so now you can actually move around image and zoom inand out which feels much better than before

so yeah for now it feels enough from my side and i think its time to finally ship it 🙃

xoocies Extension

The project began as an attempt to track coding time locally, but it quickly became clear that local tracking wouldn’t stay in sync with the official Hackatime dashboard. To ensure the “Cookie” count was accurate, I pivoted to a server-side integration. The main challenge was identifying the correct endpoint; standard WakaTime paths didn’t return the specific data needed for the Hack Club environment. After debugging various 404 responses and analyzing the server’s JSON structure, I successfully mapped the status-bar endpoint to the extension. The result is a lightweight, real-time tracker that handles authentication and data parsing in the background, providing a seamless visual indicator of progress directly in the VS Code UI 🍪.

• Target Endpoint: Instead of a broad summary, the code hits a specific Hack Club endpoint: /api/hackatime/v1/users/current/statusbar/today. This ensures the data fetched is identical to what the official Hackatime extension displays.
• Cookie Calculation Formula: To stay consistent with the 10 cookies per hour rule, the logic applies this formula: Cookies = floor((Total_Seconds / 3600) * 10) This ensures the count increments exactly every 6 minutes of active coding.
• Error Handling: Implemented checks for HTTP status codes (like 404 or 401) and JSON parsing guards to prevent the extension from crashing if the server is offline or the data format changes.

Download Extesion

Setup⚙️

• Grab your API Key from here: Hackatime access
• In VS Code, open Settings (Ctrl+,) and search for “xoocies”
• Paste your key into the Xoocies: Api Key field and you’re good to go!

Once the key is saved, your cookie count will pop up in the status bar instantly. No need to restart or mess with anything else—just keep code

Fixes, Login Repair and Wallpaper Visual Upgrade

this part was mainly about fixing issues that were breaking the flow and making the systm feel more stable. the looney bar was behaving weird and shifting randomly when apps were opening, so i spent time fixing its alignment and making it stable. also there werw errors in the login file which were breaking google login, so that neded to be fixed properly. along with this i added a new wallpaper feature where any image automatically converts into a black and white sketch style🙃 which actually made the whole ui look more consistent and match the theme beter, so overall everything started feeling more clean and controlled

• fixed looney bar alignment issue which was causing layout shifts and unstable behaviour while opening or switching apps, adjusted positioning and layout logic multiple times to make it stable in all cases
• fixed google login errors coming from the login file which were breaking the authentication flow, corrected them so login now works properly without issues
• added wallpaper conversion feature where any image turns into black and white sketch style , this helped maintain visual consistency and prevented random colors from breaking the theme
• made multiple small ui fixes across different sections where spacing, alinment or elements were not looking right, so now everything feels more clean and properly arranged

Major Progress & Sidequests Done

so i thought of completing some sidequests and it turned into a full grind session 😭. this was one of the most intense updates because instead of just adding features, i focused on improving the core system and making everything feel more real and connected. also i kinda messed up a bit because i forgot to log devlogs in between and ended up doing all this together 😅

What i did ?

i worked on multiple parts together and tried to sync everything properly so it behaves smoother and more logical. at first things felt a bit messy, but after fixing and adjusting step by step it started coming together really well

• completed advanced window system sidequest with focus handling, layering and smoother app switching and completed desktop interaction sidequest with draggable, reorderable icons and persistent layout using localStorage
• completed system interaction sidequest by syncing taskbar with real-time app state updates
• completed control system sidequest by adding context menu for quick system actions
• designed and implemented login page UI and integrated Google Login with basic user handling
• added login guard to prevent direct OS access

spent a lot of time fixing small bugs and adjusting logic because many parts was affecting each other and needed proper tuning

Now next focus is to build a proper browser app so everything can be accessed in a more connected way

Created Games, added some basic Features & System Improvements

in this part i worked a lot on improving the os and ngl this felt like one of the best sessions til now. i mainly focused on fixing bugs and ading some new stuff, and slowly things started coming togeyher in a much better way. earlier many parts was feeling incomplete but now it’s starting to feel like a proper small system

What i did ?

• created 2 games (avoid blocks & snake classic) and made them properly playable
• added both games inside a separate folder so everything looks more organised
• added keyboard controls like space, arrows etc…. so interaction feels better
• improved recycle bin and fixed few bugs which was causing issues
• added system feature to detect user country and show local time in bottom bar

spent good amount of time fixing small issues and adjusting things bkzz some features was not working properly at first and needed few tries to get right

fun to use compared to before 😄

Improved System App and functionality

• made terminal working with basic commands like open, delete, restore & history
• added command history navigation and copy support
• improved files app with folders like uploads, recycle bin, pictures, music etc
• added select system with open, move, delete & recover
• improved file open for photos, videos and music

Doodle Pad App

a basic doodle pad app and made it working inside the os. it was simple at start but handling drawing smoothly took some time to make it feel right inside window

• created doodle pad ui and canvas area
• added drawing logic with mouse drag
• added clear option and fixed small drawing issues

overall doodle pad is working fine now and feels fun

Added Calculator App

a basic calculator app and made it working inside the os. it was simple at start but while fixing ui and behaviour it took some time to make it look and feel right inside window

• created calculator ui and basic layout
• added number and operator working logic
• keyboard input support so typing also works
• fixed display issue where numbers was getting cut in small window and improved alignment so everything stays visible and centered

in this part i worked on improving multiple things together like gestures, ui behaviour and some new features so overal os feels more real and usable. there were many small issues coming again and again so instead of just adding new things i focused more on fixing them properly and making system stable 😤

System Improvements & New Features

• improved taskbar (looney bar) interaction and added drag to close from taskbar & throw outside to close
• fixed wallpaper processing and improved sketch effect so background stays clean and text & shapes remain solid black
• files app with better folder navigation and new folder creation & drag drop upload
• in settings app and added audio section with volume control and sketch style slider
• improved window behaviour like resixing and drag & fixed screen related bugs
• removed some default items and cleaned overall ui

most of the time went in fixing bugs and adjusting logic because one small change was affecting other parts also so had to test things again and again 😮‍💨

closer to real os behaviour 😌

in this part i worked mainly on improving gesture system and making taskbar (looney bar) interaction more natural and smooth

What i did ?

Gestures Interaction Update

• improved window gesture system so actions feel more smooth and controlled

• added drag from taskbar to close feature (throw outside to close)

• also added basic indicator logic so user can understand where action will trigger

drag move = hold title bar and move

most of the time went in handling drag behaviour properly because sometimes it was not detecting correctly or triggering wrong action

now interaction feels more smooth and logical compared to before

in this part i worked mainly on building the base ui and setting up the main structure of the os screen

What i did ?

UI Start + Structure Work

• created main html layout for desktop screenand set up basic structure where apps and windows will run.

• started building window type ui for apps and arranged sections properly so layout dont look messy

• added some basic css so it starts looking clean and i have took little inspiration from pinterest for ui and applied it 🤡🤥

started building window system and basic interactions
added gesture based navigation for windows:

• minimize = drag window to looney bar (bottom)
• maximize = drag window to top edge
• restore = drag window down from top
• close = drag window to top right corner
• drag move = hold title bar and move

most of the time went in adjusting layout and fixing placements because things was breaking again and again when i change small parts now structure is more clear and base ui is ready to build further on it

Final Fixes and Stability Update

after getting feedback on my project, i realised there were few important issues which was affecting overall experience, like gears overlapping at start, wrong selection after delete and some unstable behaviour in edit mode. so i spent pro[er time fixing these things and making system more stable and logical. main focus was not adding new features but correcting what was already there and making it work in a better and more realistic way.

• fixed gear colision and overlap issue on adding new gear
  auto select now goes to last gear instead of resetting to first
• improved edit mode so gears dont behave randomly while moving
• added auto calibration so disconnected gears connect properly again
• fixed some minor bugs and improved pressure behaviour to feel more realistic

now system feels more stable, clean and usable, and behaviour is more close to what it should be.

I finally reached a point where i feel this version is complete

in starting everything was just working somehow but not looking good and not feeling proper, so i focused mainly on ui and started improving it step by step

What i did ?

• improved full ui layout and made it more structured
  fixed text visibility issues which was hard to read before
  adjusted spacing and alignment so everything looks more clean
• made info panel smaller and kept only main parameters
  removed few features which was not working properly and making things confusing
• added small button press animation so it feels little interactive

also did some small adjustments in controls so overall use feel better and smooth

• slowly while doing all this, i started noticing that small changes are actually making big difference in how the whole system looks in between i faced one main issue that whenever i fix one ui part, some other part was getting disturbed and i had to go back again and fix it again and again 😅,this loop happened many times and took some time to settle everything but finally things started coming in place and ui began to look clean and balanced

now overall it feels much better than before, simple, usable and not messy like earlier

maybe in future i will come back and improve more things or add better features, but for now this is the final version. overall this project was really fun to build and i learned many small things while making it step by step, specially about ui and handling logic together and one more thing, because of this project i also started understanding javascript little bit more, before it was confusing but now i can atleast understand how things are working and connect together

• so yeah for now i am considering this version done,good enough and working 🙂

What i did ?

• Parameter Fix & Info Labels Back

this time i worked on fixing the values and calculation part because before things was running but values was not feeling correct

like gears was rotating and all but rpm and relation was not matching properly so i decided to fix that part

first i thought its small thing but when i start checking it deeply then it took more time than expected

• worked on rpm and gear relation calculation tried to make values same and consistent between gears
• fixed how gears pass values to each other and added again those small info labels on gears but in better way
• did some small tuning so system feels more correct

this part was little confusing because when i fix one thing then other thing get affected 😅

Changes / tweaks

• now values looking more correct and nfo labels is showing proper data
• gear relation feels more real now
  overall system feels less random

Problems i faced

• calculation part was not easy to understand
• values was not matching at starting and when more gears connected it was giving wrong output
• i had to adjust many times to make it stable

overall this update is not very visible but internally it improved lot🙂

i wanted it to feel more automatic and less dependent on manual adjustments so i started tweaking the auto positioning because earlier it was working but not always giving correct alignment. It started as a small tweak but slowly turned into full trial and error mode, kept adjusting values again and again until it finally started behaving the way i wanted 😄

What i did

• worked mainly on auto positioning logic
• improvef how gears calculate and place themselves
• made it more stable so less manual fixing is needed also did some small ui adjustments around that section

tbh it;s not a very big update but it felt really satisfying when everything started aligning smoothly 🧩😊

As Result

• auto position now behaves more stable
• manual values dont mess things too much when auto is on
• overall placement feels more clean now

overall small update but system feels more controlled and better than before 👍

so i was thinking to improve the simulation more and make it feel more real and accurate, and while doing that i ended up fixing lot of things in this part.

What i did ?

• Worked on fixing errors in gear simulation
  improved physics so gears rotate and behave more correctly
• fixed some ui parts on simulation side
  made edit mode work smoother
  improved how system detects errors and shows them

ngl most of the time went in just adjusting physics values again and again until it started looking right 😭⚙️

Changes/tweaks

• so while working on this i realised some parts were not giving proper results, specially that info bar section which was showing parameters

• at first it looked fine but when i checked it properly values were not fully accurate and it felt little impractical so instead of keeping something half correct i removed that info bar for now

• also removed one more small feature because it was not behaving properly in simulation felt better to clean things first and then rebuild it in better way later

will add it again after improving logic and making it more accurate so it actually makes sense

Problems i faced

• physics part took most of the time
• values were not matching properly
• imulation was behaving weird at first and small ui issues were also coming again and again
• gear collision indication was also not clear before so fixed that too.

What I learned

understood more about how simulation works behind
learned better handling of canvas and ui updates
realised small logic mistakes can break whole system 💀

For next.

I am thinking to improve accuracy more
and also bring back removed features in better way
and make simulation more stable and smooth

implemented UI

so finally i completed the ui part and upgraded it properly from previous version
old one was looking very basic so i reworked it and made it more clean and usable

• What i did ?
  completed remaining html part
  improved full layout and structure
  fixed spacing and alignment issues
  adjusted small ui elements to make it look better
  made whole interface feel more like a proper web app

• ngl most of the time went in small small changes which dont look big but actually matter a lot 💀

**Time Breakdown **
around 2h+ went in this final part
but overall around 3hr+ went only in improving ui

Problems
layout was not looking balanced at first
spacing and alignment needed multiple fixes
sometimes after fixing one thing another part was breaking 😭
had to adjust things again and again

Final Result
now ui looks much better than before
it feels more clean and structured
overall this version feels complete for now

Next Step
for now nothing major
but i still have some ideas in mind which i will try later 👀

• today i worked on improving the ui because the old structure was not looking good

• What i did ?
  worked only on html today
  redesigned the layout from scratch
  changed sections and structure to make it better
  tried to make it feel more like a proper web
  around 55%to65% html done for new Ui

• —>Next Step
  -finish remaining html
  -then start css based on this structure
  -make it clean and simple

• ngl half of the time went in just thinking “should this go here or there” 💀
  that’s it for today👍.

• soo after spending around I was finally able to make a basic working web where sound input is taken from mic and shown on screen. starting me it was confusing but slowly things started making sense and it felt good when first time values actually changed with real sound 😭

What i did ?

• first i created full html layout and divided page into control panel and main sound display area
  then added css to make everything look little clean and not all messed up
• after that worked on javascript part and connected microphone input using browser audio features
  then got sound input and showed basic decibel value on screen
  also tested it irl with different sounds to check if values are actually changing

How i started ?

• I didnt know exact starting point so i checked some references and saw how mic input works from here
  👉 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
  from there got rough idea and started building step by step

In css ?

• I mainly worked on layout and positioning
  tried to align all sections properly and fix spacing so ui looks balanced
  but layout was breaking again and again
  elements were shifting from their place
  some parts were overlapping
  sizing was not behaving correctly
  this small thing took around 30-40 min to fix 😭 fr

**In javascript **

• I worked on microphone and sound processing
  used web audio api to access mic and tried getting live values
  then converted it into basic decibel number
  but understanding this part was little confusing
  didnt understand how mic permission and start works
  getting live sound values was new for me
  processing that data was not easy in starting
  took some time but once it worked it felt really good

Next Step Would be–>

• Improve ui because still looks basic
  make sound meter better and smoother
  improve noise logic
  maybe add history or more features later

What I worked on?

• Made a simple HTML layout and divided page into control panel side and 3D view area.

• Did little bit CSS so things dont look too messy and buttons stay in place.

• Also connected some basic JavaScript with inputs so later values can change.

Learned some basic JavaScript

• I dont know JavaScript very well so I tried to learn some basics first Saw how variables and small functions works in JS.

• Tried few small tests just to see how values update on screen.

Logic and formulas I looked into

• Started reading about few formulas used in gear systems. Looked at relation between number of teeth and pitch. Also saw pitch diameter formula (D = N / P).

• Tried understanding simple RPM ratio between two gears.