<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tessera — a quiet race of mosaics</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23f3ddc4'/%3E%3Cpath d='M16 8 26 14 16 20 6 14Z' fill='%23e8927c'/%3E%3Cpath d='M6 14v4l10 6v-4Z' fill='%23c26e5b'/%3E%3Cpath d='M26 14v4l-10 6v-4Z' fill='%23a35233'/%3E%3C/svg%3E">
<style>
  :root {
    --bg1: #f3ddc4; --bg2: #e2b49b; --panel: #fbf3e4; --border: #d9c0a2;
    --text: #5c4636; --muted: #a08468; --accent: #c96f4a; --teal: #5fb3a1;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: linear-gradient(180deg, var(--bg1), var(--bg2));
    color: var(--text); min-height: 100vh;
    font: 16px/1.65 "Avenir Next", "Avenir", "Trebuchet MS", "Segoe UI", sans-serif;
    padding: 48px 20px 80px;
  }
  main { max-width: 780px; margin: 0 auto; }
  h1 { font-size: 34px; font-weight: 600; letter-spacing: 10px; color: var(--accent); }
  h1 .p { color: var(--teal); }
  .tag { color: var(--muted); margin: 6px 0 30px; font-size: 17px; letter-spacing: 2px; }
  h2 { margin: 44px 0 12px; font-size: 21px; font-weight: 600; color: var(--accent); }
  p, li { color: #6d5847; }
  ul { padding-left: 22px; margin: 10px 0; }
  li { margin: 5px 0; }
  a { color: var(--accent); }
  pre {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; overflow-x: auto; margin: 12px 0;
    font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
  }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
  pre code { background: none; border: none; padding: 0; }
  .card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 20px; margin: 14px 0;
  }
  .btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
  .btn {
    display: inline-block; padding: 11px 20px; border-radius: 22px; text-decoration: none;
    background: var(--accent); color: #fffdf7; letter-spacing: 1.5px; font-size: 14px;
  }
  .btn.alt { background: var(--teal); }
  .btn:hover { filter: brightness(0.94); }
  footer { margin-top: 60px; color: var(--muted); font-size: 13px; }
  .langs {
    position: fixed; top: 12px; right: 14px; color: var(--muted); font-size: 13px;
    letter-spacing: .06em; user-select: none;
  }
  .langs button {
    font: inherit; color: inherit; background: none; border: 0; padding: 3px 4px;
    cursor: pointer; opacity: .55;
  }
  .langs button.on { color: var(--accent); opacity: 1; }
</style>
</head>
<body>
<nav class="langs" id="langs"></nav>

<main data-lang-block lang="en">
  <h1>TESS<span class="p">ERA</span></h1>
  <div class="tag">a quiet race of mosaics — serverless, p2p, end-to-end encrypted</div>

  <div class="btns">
    <a class="btn" href="https://game3.ardegazu.ro">▶ play</a>
    <a class="btn alt" href="browse/index.html">browse the code</a>
    <a class="btn alt" href="https://git.ardegazu.ro/chat/">the p2p core it builds on</a>
  </div>

  <h2>What it is</h2>
  <p>
    Up to 16 pilgrims glide across a floating terrace, painting every tile they
    cross in soft Monument-Valley pastels. Step on a white bloom and a whole
    patch blossoms in your colour. When the sun sets — 45 seconds — the largest
    mosaic takes the round; first to 3 rounds keeps the terrace. The edges fold
    back on themselves: walk off one side, appear on the other.
  </p>
  <p>
    There is no game server. Your browser and your friends' browsers are
    <a href="https://libp2p.io">js-libp2p</a> peers: they meet through a
    circuit-relay on <code>signal.ardegazu.ro</code>, prove room membership
    with a sealed hello derived from the invite link's secret, then upgrade to
    direct WebRTC. libp2p's noise layer encrypts every pair end-to-end — even
    the relay only ever routes ciphertext. The room key lives in the URL
    fragment and never leaves your browser. One peer referees the round; if it
    disappears, the terrace quietly elects a new referee and starts the next
    sunrise.
  </p>

  <h2>This page is also the repository</h2>
  <p>The site you're reading is a static snapshot that doubles as a
     git remote (dumb-HTTP protocol, loose objects):</p>
  <pre><code>git clone https://git.ardegazu.ro/game3.git</code></pre>

  <h2>Run it yourself</h2>
  <pre><code>cd tessera/client
npm install
npm run dev        # http://localhost:5173 — open two tabs on the same #room URL</code></pre>

  <h2>Honest guarantees &amp; limits</h2>
  <div class="card">
    <ul>
      <li><b>End-to-end encrypted:</b> every peer pair is noise-encrypted
          (relay included); room membership is proven by an AES-256-GCM hello
          keyed from the room secret, which the relay never sees.</li>
      <li><b>No accounts, no database, no telemetry.</b> Static files + WebRTC.</li>
      <li><b>Host-authoritative:</b> the referee peer could cheat in its own
          favour — play with people you like.</li>
      <li><b>Full mesh:</b> rooms allow 16, but a practical ceiling is ~12
          simultaneous players (O(n²) connections).</li>
      <li><b>No history:</b> close the last tab and the terrace is gone;
          the room key in the link is the only state.</li>
      <li>If direct connection fails, traffic falls back to the circuit relay
          or TURN — rate-limited, and still unreadable to either.</li>
    </ul>
  </div>

  <h2>Anatomy</h2>
  <ul>
    <li><code>client/src/net/</code> — the js-libp2p layer (bootstrap, room
        crypto, peer manager), vendored from
        <a href="https://git.ardegazu.ro/game1/">neon-grid</a>; only the
        protocol id is game-specific</li>
    <li><code>client/src/game/</code> — the game: typed wire protocol, seat-indexed
        host simulation, isometric canvas renderer, pentatonic chimes</li>
    <li><code>deploy/publish-repo.sh</code> — builds this very page + bare mirror</li>
  </ul>

  <footer>MIT licensed · built in the open · the authors are anonymous pilgrims</footer>
</main>

<main data-lang-block lang="ro" hidden>
  <h1>TESS<span class="p">ERA</span></h1>
  <div class="tag">o cursă liniștită de mozaicuri — fără server, p2p, criptată cap-la-cap</div>

  <div class="btns">
    <a class="btn" href="https://game3.ardegazu.ro">▶ joacă</a>
    <a class="btn alt" href="browse/index.html">răsfoiește codul</a>
    <a class="btn alt" href="https://git.ardegazu.ro/chat/">nucleul p2p pe care e construit</a>
  </div>

  <h2>Ce este</h2>
  <p>
    Până la 16 pelerini alunecă pe o terasă plutitoare, pictând fiecare plăcuță
    pe care o traversează în pasteluri blânde, à la Monument Valley. Calci pe o
    floare albă și un petic întreg înflorește în culoarea ta. Când soarele
    apune — 45 de secunde — cel mai mare mozaic ia runda; primul la 3 runde
    păstrează terasa. Marginile se îndoaie una în alta: ieși pe o parte, apari
    pe cealaltă.
  </p>
  <p>
    Nu există server de joc. Browserul tău și browserele prietenilor tăi sunt
    peers <a href="https://libp2p.io">js-libp2p</a>: se întâlnesc printr-un
    circuit-relay pe <code>signal.ardegazu.ro</code>, dovedesc apartenența la
    cameră cu un hello sigilat derivat din secretul linkului de invitație, apoi
    trec pe WebRTC direct. Stratul noise al lui libp2p criptează fiecare
    pereche cap-la-cap — până și releul rutează doar ciphertext. Cheia camerei
    stă în fragmentul URL-ului și nu pleacă niciodată din browser. Un peer
    arbitrează runda; dacă dispare, terasa alege în liniște un arbitru nou și
    pornește următorul răsărit.
  </p>

  <h2>Pagina asta e și repository-ul</h2>
  <p>Situl pe care îl citești e un snapshot static care e totodată un git
     remote (protocolul dumb-HTTP, loose objects):</p>
  <pre><code>git clone https://git.ardegazu.ro/game3.git</code></pre>

  <h2>Rulează-l singur</h2>
  <pre><code>cd tessera/client
npm install
npm run dev        # http://localhost:5173 — deschide două taburi pe același URL #cameră</code></pre>

  <h2>Garanții și limite, pe bune</h2>
  <div class="card">
    <ul>
      <li><b>Criptat cap-la-cap:</b> fiecare pereche de peers e criptată noise
          (releu inclus); apartenența la cameră se dovedește cu un hello
          AES-256-GCM derivat din secretul camerei, pe care releul nu-l vede
          niciodată.</li>
      <li><b>Fără conturi, fără bază de date, fără telemetrie.</b> Fișiere
          statice + WebRTC.</li>
      <li><b>Autoritate la gazdă:</b> peer-ul arbitru ar putea trișa în
          favoarea lui — joacă cu oameni care îți plac.</li>
      <li><b>Mesh complet:</b> camerele permit 16, dar plafonul practic e ~12
          jucători simultani (conexiuni O(n²)).</li>
      <li><b>Fără istoric:</b> închizi ultimul tab și terasa dispare; cheia
          camerei din link e singura stare.</li>
      <li>Dacă conexiunea directă eșuează, traficul cade pe circuit relay sau
          TURN — cu limită de debit, și tot ilizibil pentru amândouă.</li>
    </ul>
  </div>

  <h2>Anatomie</h2>
  <ul>
    <li><code>client/src/net/</code> — stratul js-libp2p (bootstrap, cripto de
        cameră, manager de peers), preluat din
        <a href="https://git.ardegazu.ro/game1/">neon-grid</a>; doar id-ul de
        protocol ține de joc</li>
    <li><code>client/src/game/</code> — jocul: protocol de rețea tipat, simulare
        la gazdă indexată pe locuri, renderer izometric pe canvas, clinchete
        pentatonice</li>
    <li><code>deploy/publish-repo.sh</code> — construiește chiar pagina asta +
        oglinda bare</li>
  </ul>

  <footer>licență MIT · construit la vedere · autorii sunt pelerini anonimi</footer>
</main>

<main data-lang-block lang="hu" hidden>
  <h1>TESS<span class="p">ERA</span></h1>
  <div class="tag">mozaikok csendes versenye — szerver nélkül, p2p, végponttól végpontig titkosítva</div>

  <div class="btns">
    <a class="btn" href="https://game3.ardegazu.ro">▶ játék</a>
    <a class="btn alt" href="browse/index.html">böngészd a kódot</a>
    <a class="btn alt" href="https://git.ardegazu.ro/chat/">a p2p mag, amire épül</a>
  </div>

  <h2>Mi ez</h2>
  <p>
    Akár 16 zarándok siklik egy lebegő teraszon, és minden lapot, amin áthalad,
    lágy Monument Valley-pasztellre fest. Lépj egy fehér virágra, és egy egész
    folt virágzik ki a színedben. Amikor lemegy a nap — 45 másodperc —, a
    legnagyobb mozaik viszi a kört; aki előbb ér 3 körig, azé marad a terasz.
    A szélek önmagukba hajlanak: az egyik oldalon kilépsz, a másikon
    megjelensz.
  </p>
  <p>
    Nincs játékszerver. A te böngésződ és a barátaid böngészői
    <a href="https://libp2p.io">js-libp2p</a> peerek: egy circuit-relay-en át
    találkoznak a <code>signal.ardegazu.ro</code>-n, a szobatagságot a
    meghívólink titkából származtatott lepecsételt hellóval bizonyítják, majd
    közvetlen WebRTC-re váltanak. A libp2p noise rétege minden párt végponttól
    végpontig titkosít — még a relé is csak ciphertextet továbbít. A szoba
    kulcsa az URL fragmentben él, és soha nem hagyja el a böngésződet. Az egyik
    peer bíráskodik a körben; ha eltűnik, a terasz csendben új bírót választ,
    és indítja a következő napkeltét.
  </p>

  <h2>Ez az oldal egyben a repó is</h2>
  <p>Az oldal, amit olvasol, statikus pillanatkép, amely egyben git remote is
     (dumb-HTTP protokoll, loose objectek):</p>
  <pre><code>git clone https://git.ardegazu.ro/game3.git</code></pre>

  <h2>Futtasd magad</h2>
  <pre><code>cd tessera/client
npm install
npm run dev        # http://localhost:5173 — nyiss két fület ugyanarra a #szoba URL-re</code></pre>

  <h2>Garanciák és korlátok, őszintén</h2>
  <div class="card">
    <ul>
      <li><b>Végponttól végpontig titkosítva:</b> minden peer-pár
          noise-titkosított (a relét is beleértve); a szobatagságot a szoba
          titkából kulcsolt AES-256-GCM hello bizonyítja, amit a relé soha nem
          lát.</li>
      <li><b>Nincs fiók, nincs adatbázis, nincs telemetria.</b> Statikus
          fájlok + WebRTC.</li>
      <li><b>Hoszt-mérvadó:</b> a bíró peer a saját javára csalhatna — olyanokkal
          játssz, akiket kedvelsz.</li>
      <li><b>Teljes mesh:</b> a szobák 16 főt engednek, de a gyakorlati plafon
          ~12 egyidejű játékos (O(n²) kapcsolat).</li>
      <li><b>Nincs előzmény:</b> zárd be az utolsó fület, és a terasz eltűnik;
          a linkben lévő szobakulcs az egyetlen állapot.</li>
      <li>Ha a közvetlen kapcsolat nem jön össze, a forgalom a circuit relay-re
          vagy TURN-re esik vissza — sebességkorlátosan, és mindkettő számára
          olvashatatlanul.</li>
    </ul>
  </div>

  <h2>Bonctan</h2>
  <ul>
    <li><code>client/src/net/</code> — a js-libp2p réteg (bootstrap,
        szoba-kripto, peer-kezelő), a
        <a href="https://git.ardegazu.ro/game1/">neon-grid</a>-ből átvéve; csak
        a protokoll-id játékfüggő</li>
    <li><code>client/src/game/</code> — a játék: típusos wire-protokoll,
        ülésindexelt hoszt-szimuláció, izometrikus canvas renderer, pentaton
        csengettyűk</li>
    <li><code>deploy/publish-repo.sh</code> — ez építi ezt az oldalt + a bare
        tükröt</li>
  </ul>

  <footer>MIT licenc · a nyíltban épült · a szerzők névtelen zarándokok</footer>
</main>

<script>
(function () {
  var LANGS = ["en", "ro", "hu"];
  var KEY = "ardegazu-site:lang";
  var lang = null;
  try { lang = localStorage.getItem(KEY); } catch (e) {}
  if (LANGS.indexOf(lang) < 0) {
    var cands = navigator.languages || [navigator.language];
    for (var i = 0; i < cands.length; i++) {
      var p = (cands[i] || "").slice(0, 2).toLowerCase();
      if (LANGS.indexOf(p) >= 0) { lang = p; break; }
    }
  }
  if (LANGS.indexOf(lang) < 0) lang = "en";

  var nav = document.getElementById("langs");
  function apply(l) {
    lang = l;
    document.documentElement.lang = l;
    try { localStorage.setItem(KEY, l); } catch (e) {}
    var blocks = document.querySelectorAll("[data-lang-block]");
    for (var i = 0; i < blocks.length; i++) blocks[i].hidden = blocks[i].getAttribute("lang") !== l;
    var btns = nav.querySelectorAll("button");
    for (var j = 0; j < btns.length; j++) btns[j].className = btns[j].textContent === l ? "on" : "";
  }
  LANGS.forEach(function (l, i) {
    if (i) nav.appendChild(document.createTextNode(" · "));
    var b = document.createElement("button");
    b.type = "button";
    b.textContent = l;
    b.addEventListener("click", function () { apply(l); });
    nav.appendChild(b);
  });
  apply(lang);
})();
</script>
</body>
</html>