BapsOS: Windows 98 rakennettuna uudelleen selainvälilehteen

Taustaa

BapsOS on Windows 98 -simulaattori joka pyörii selainvälilehdessä. Siinä on nimetty kuori, Fen98, kokonainen käynnistyssekvenssi, sammutussekvenssi ja 27 sovellusta jotka oikeasti toimivat sen sijaan että avaisivat kuvan itsestään.

Järjestelmän ominaisuudet -ikkuna ilmoittaa Patil Pentium II:n taajuudella 400 MHz ja 128.0 MB RAM-muistia. Mitään tuosta raudasta ei ole olemassa. Ikkuna on asiasta hyvin varma.

Ongelma

Verkon retrotyöpöydät ovat lähes aina kuvakaappauksia joihin on lisätty hover-tilat. Klikkaat Käynnistä, valikko aukeaa, klikkaat Miinaharavaa ja saat paikanpitäjän tai linkin jonkun toisen Miinaharavaan. Illuusio romahtaa toisella klikkauksella, koska ensimmäinen klikkaus on ainoa jota kukaan on testannut.

Se mikä sai työpöytäkäyttöjärjestelmän tuntumaan paikalta ei ollut taustakuva. Se oli se että kaikki oli elossa yhtä aikaa. Dokumentti saattoi olla auki pelin takana ja peli ohjauspaneelin takana, ikkunan saattoi raahata puoliksi ulos ruudulta, pienentää sen ja löytää sen tehtäväpalkista sieltä minne sen jätti. Syvyys oli tuote.

Kysymys oli siis se, pystyisinkö rakentamaan syvyyden kuvakaappauksen sijaan, yksin, selaimeen.

Oma roolini

Yksin. Tuotesuunnittelu ja tekninen toteutus, kaikki 27 sovellusta, kuori, ikkunanhallinta, äänisuunnittelu ja valheelliset laitteistotiedot.

Suunnittelupuoli ei ole ikkunakehysten pikselintarkkaa jäljittelyä, vaikka sitäkin on. Se on alla oleva järjestelmäsuunnittelu: mikä on ikkuna, mikä on sovellus, miten kuori käynnistää sellaisen, miten tila säilyy ja miten kaikki tuo pysyy johdonmukaisena kuukausien aikana rakennetun 27 asian yli. Mene siinä metsään, ja kahdeskymmenes sovellus on ensimmäisen uudelleenkirjoitus.

Lähestymistapa

Rakensin ikkunanhallinnan ennen yhtäkään sovellusta, enkä suostunut kirjoittamaan sovellusta ennen kuin ikkunan pystyi avaamaan, kohdistamaan, raahaamaan, muuttamaan kokoa, pienentämään, suurentamaan, palauttamaan ja sulkemaan oikein. Se on glamouritonta työtä josta ei viikkoihin ole mitään näytettävää, ja se on koko syy siihen että projekti valmistui.

Kun ikkuna on ratkaistu primitiivi, sovellus on vain sisältöä ja manifesti. Miinaharava, Tetris, Snake, TipTapiin rakennettu tekstieditori, taulukkolaskenta toimivilla kaavoilla, tekoälychat, Paint, webkamerasovellus, Tehtävienhallinta, Ohjauspaneeli ja loput kytkeytyvät kaikki samaan sopimukseen. Sovellus numero 27 syntyi yhdessä iltapäivässä. Ensimmäiseen meni kuukausi.

Valheellinen rauta ja käynnistyssekvenssi ovat sama päätös kuin ikkunanhallinta, vain sävyn tasolla. Simulaattori joka käynnistyy hetkessä on verkkosivu. Simulaattori joka käyttää muutaman sekunnin kuvitteellisen muistin laskemiseen on kone.

Toteutus

TanStack Start ja React 19, käännettynä Vitellä, julkaistuna Cloudflareen. Kaikki pyörii selainpäässä. Palvelinta, tiliä tai tietokantaa ei ole, ja juuri siksi ylläpito ei maksa mitään ja sivu latautuu nopeasti reunalta.

Zustand pitää koko järjestelmän tilan ja tallentaa sen localStorageen. Se on se osa joka saa tämän tuntumaan käyttöjärjestelmältä eikä sivulta. Avoimet ikkunat, niiden sijainnit, niiden z-järjestys, Paint-kankaasi, dokumenttisi, Ohjauspaneelin asetuksesi ja taustakuvasi selviävät kaikki sivun päivityksestä. Sulje välilehti kesken Tetriksen ja palaa samaan lautaan. Tallennuskerros on versioitu, koska muuten skeemamuutos purkautuisi roskaksi jokaisella palaavalla kävijällä.

Ikkunanhallinta on yksi z-järjestyspino, jossa kohdistus on johdettua tilaa eikä ikkunakohtainen lippu, mikä poisti kokonaisen bugiluokan jossa kaksi ikkunaa uskoi molemmat olevansa kohdistettuja. Raahaus ja koon muuttaminen kulkevat @use-gesturen kautta, pointer-tapahtumilla eikä hiiritapahtumilla, jotta puhelinkin toimii. Framer Motion animoi ikkunasiirtymät, pienennyksen ja palautuksen. Radix UI tarjoaa valikot ja dialogit retroskinin alla, mikä on projektin vähiten aikakaudelle uskollinen päätös ja syy siihen että Käynnistä-valikossa voi liikkua näppäimistöllä ja ruudunlukija tulee siitä järkevästi selville. Vuoden 1998 käyttöliittymä vuoden 2026 saavutettavuusprimitiiveillä on vaihtokauppa jonka tekisin uudelleen.

Sovellukset kantavat oman painonsa. TipTap on editori. Taulukkolaskennassa on oikea kaavajäsennin soluviittauksineen ja riippuvuusjärjestyksessä tapahtuvine uudelleenlaskentoineen, koska taulukkolaskenta joka ei laske on taulukko. Tekoälychat suoltaa tokeneita aikakaudelle uskolliseen tekstiruutuun ja sen pyyntötiheyttä rajoitetaan, koska tunnistautumaton julkinen chat-ikkuna on lasku joka odottaa vuoroaan. Webkamerasovellus käyttää getUserMediaa paikallisesti eikä lähetä mitään mihinkään. Tehtävienhallinta näyttää prosesseja jotka vastaavat avoimia ikkunoita, joten prosessin tappaminen sulkee ikkunan.

use-sound hoitaa äänet: käynnistys, sammutus, virheäänet, klikkaukset. Lucide kattaa ne ikonit joille ei ole aikakauden vastinetta. Microsoft Clarity on ainoa analytiikka, ja siinä on miellyttävä symmetria että Microsoft kertoo minulle miten ihmiset käyttävät minun Windows 98:aani.

Lopputulos

Se on julkaistu osoitteessa os.bapspatil.com, ja kaikki 27 sovellusta toimivat. Ihmiset löytävät sen, hukkaavat tunnin ja kertovat minulle että heillä oli täsmälleen tuo kone.

Siitä tuli myös uudelleenkäytetyin tekninen palanen mitä olen tehnyt. Ikkunanhallinta, tallennuskerros ja sovellussopimus ovat osia joihin palaan yhä uudelleen.

Mitä tekisin toisin

Julkaisin Zustandin tallennuksen ilman migraatiopolkua ja jouduin lisäämään versioinnin vasta kun oikeilla ihmisillä oli oikeaa tilaa tallessa. Sen olisi pitänyt olla ensimmäisessä commitissa.

Olisin myös kirjoittanut sovellusmanifestin sopimuksen tyypiksi ennen sovellusta numero kaksi sen sijaan että irrotin sen vasta sovelluksen numero kahdeksan tienoilla. Väliin jääneet sovellukset kantavat yhä tuon siirtymän muotoa.