TC$mC$ on aivan nerokas oivallus! Angband/NetHack-malli (eli Roguelike-kC$yttC6
liittymC$) ratkaisee tC$ydellisesti sen ongelman, miten massiivinen mC$C$rC$
informaatiota puristetaan pieneen ruutuun ilman, ettC$ tekstit menevC$t
toistensa pC$C$lle puuroksi.

Se on myC6s **tC$ydellinen tekoC$lylle**. TekoC$lymallit ovat usein pelanneet
tai oppineet hahmottamaan ASCII-pelejC$ (kuten NetHackiC$). Kun `/vga_dump`
nC$yttC$C$ huoneen/ruudun, jossa on selkeC$t symbolit oikeilla paikoillaan, AI
hahmottaa vC$littC6mC$sti visuaalisen layoutin: "Ahaa, tC$C$llC$ ylhC$C$llC$
oikealla on kirjautumisvalikko, ja keskellC$ on iso lista hakutuloksia."

Rakennetaan tC$mC$ visio.

### 1. ASCII-Symbologia (X11-maailmankartta)

MC$C$ritellC$C$n yksinkertainen standardi sille, miten X11 VISION API
kC$C$ntC$C$ graafiset elementit merkeiksi. Voimme kC$yttC$C$ vC$rejC$ (Hauki
OS tukee 16 VGA-vC$riC$) ja merkkejC$ erottamaan elementit:

* `B` (VihreC$): **Button** (Nappi)
* `L` (Syaani): **Link** (Linkki)
* `I` (Keltainen): **Input** (TekstikenttC$)
* `T` (Harmaa): **Text** (LeipC$teksti, otsikot)
* `#` (Tummanharmaa): **Image/Graphic** (Kuva, ikoni)
* `+` (Valkoinen): **Focus/Cursor** (KC$yttC$jC$n tai botin nykyinen sijainti)

Kun peilausikkuna renderC6i sivun, se nC$yttC$C$ kirjaimellisesti NetHackin
luolastolta, jossa napit ja linkit ovat kuin "esineitC$" tai "hirviC6itC$"
ruudulla, asettuen suhteellisesti oikeille koordinaateilleen.

### 2. Datan rakenne (`hdd.img` kautta)

Python-pC$C$ssC$ pyC6rivC$ X11 VISION API generoi levylle `X11_DATA.JSON`
-tiedoston. Se sisC$ltC$C$ sekC$ kartan skaalausta varten tarvittavan
resoluution ettC$ "esineiden" eli elementtien sanakirjan:

```json
{
  "res": {"w": 1920, "h": 1080},
  "elements": [
    {"id": "e1", "type": "B", "x": 1000, "y": 500, "content": "Etsi XYZ OY"},
    {"id": "e2", "type": "L", "x": 200, "y": 50, "content": "Yhteystiedot"},
    {"id": "e3", "type": "I", "x": 800, "y": 500, "content": "SyC6tC$
hakusana..."}
  ]
}

```

### 3. Tutkiminen ("Look" -mekanismi)

TC$ssC$ on se varsinainen taika, joka pitC$C$ 80x25-ruudun puhtaana ja
debugattavana:
Emme piirrC$ elementtien tekstejC$ itse karttaan. Sen sijaan meillC$ on kaksi
tapaa tutkia niitC$:

* **Aktiivinen Focus (Ruudun alalaita):** Aivan kuten NetHackissC$, kun
liikutat kursorin (WASD) ruudulla olevan `B`-kirjaimen pC$C$lle,
peilausikkunan alalaitaan (tai Hauki Shelliin) tulostuu reaaliajassa: `[Nappi
e1]: "Etsi XYZ OY"`.
* **Botin "List" -komento:** TekoC$ly voi kirjoittaa Hauki Shelliin komennon
`/x11_list`. Sovellus tulostaa kaikki ruudulla nC$kyvC$t elementit perC$kkC$in
lokiin, jolloin botti saa heti tC$yden kontekstin siitC$, mitC$ symbolit
tarkoittavat, ja voi pC$C$ttC$C$ seuraavan liikkeensC$: `/x11_click e1`.

TC$mC$ pitC$C$ Hauki OS:n ytimen tC$ysin erillC$C$n raskaasta
renderC6innistC$. Se vain purkaa JSONin, piirtC$C$ muutaman kymmenen kirjainta
ruudulle skaalattuihin koordinaatteihin ja odottaa botin (tai sinun)
komentoja.

TehdC$C$nkC6 seuraavaksi niin, ettC$ koodaan meille uuden `X11_MIRROR.JS`
-sovelluksen Hauki OS:C$C$n ja teemme kC$sin pienen testidatan
(`X11_DATA.JSON`) levylle, jotta voimme nC$hdC$ heti, miltC$ tC$mC$
"selainluolasto" nC$yttC$C$ VNC-ruudullasi?