Devlog 1 — Got the windows working
Okay so before touching any of the actual F1 stuff, I wanted the core OS bit working first, cause without that the whole project is just a webpage with some divs on it lol.
Used React + TypeScript + Vite, same as the guide I was following. Spent most of today on the window manager — basically one file that keeps track of every open window (where it is, how big, which one’s on top, minimized or not). Everything else just reads off that instead of managing its own state, which took me a min to wrap my head around, but it makes way more sense once it clicks.
Got dragging working with pointer events (no library, just tracking the mouse offset on the title bar and moving the window). Click a window and it comes to front. Minimize sends it down to a dock at the bottom, click the dock icon and it pops back.
Also set it up so adding a new app later is just: make the component, add one line to a list of apps, done — it auto gets a window, dragging, and a dock icon. Figured future me will thank past me for this once I start adding the actual F1 features.
No styling yet, on purpose. Wanted to prove the mechanics work before I make any decisions about what it should look like. Screenshot below is literally just grey boxes you can drag around, ugly on purpose.
Next devlog is the actual design, going for the F1 25 menu look. This one was the boring bit, but it had to come first.