<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lampion — a night climb on the summer hills</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='%23191c38'/%3E%3Cellipse cx='16' cy='24' rx='11' ry='4' fill='%235d4a79'/%3E%3Cellipse cx='16' cy='20' rx='8' ry='3' fill='%23705a86'/%3E%3Cellipse cx='16' cy='16' rx='5' ry='2' fill='%238f74a0'/%3E%3Cellipse cx='16' cy='9' rx='3.4' ry='4.4' fill='%23ffb85c'/%3E%3Crect x='13.8' y='4' width='4.4' height='1.6' fill='%23c98736'/%3E%3C/svg%3E">
<style>
  :root {
    --bg1: #101331; --bg2: #2a2650; --panel: #221d40; --border: #453a66;
    --text: #e8e0f0; --muted: #9a8fb8; --accent: #ffb85c; --mint: #7fe3c9;
  }
  * { 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(--mint); }
  .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: #c9bfd9; }
  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: #2a2344; letter-spacing: 1.5px; font-size: 14px; font-weight: 600;
  }
  .btn.alt { background: var(--mint); }
  .btn:hover { filter: brightness(1.06); }
  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>LAMP<span class="p">ION</span></h1>
  <div class="tag">a night climb on the summer hills — serverless, p2p, end-to-end encrypted</div>

  <div class="btns">
    <a class="btn" href="https://game5.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>
    A festival hill of stacked stone rings under a night sky, in
    Monument-Valley purples. Up to 16 players carry paper lanterns from the
    campground at the base toward the stage at the summit. Each level of the
    hill turns on its own — slow clockwork, a fresh rhythm every round — and
    stairs connect rings only where their slots align. Time your climb, or
    crank the ring you stand on to force an alignment early, dragging every
    lantern on it along. Help or hinder. First
    lantern on the summit stage takes the round; if the last song ends with
    no summit, the highest lantern takes it. First to 3 rounds headlines the
    night, and the sky fills with fireworks and released lanterns. Built to
    be played one-handed, standing in a field, on the phone in your pocket.
  </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 climb; if it
    disappears, the hill quietly elects a new referee and strikes up the next
    song.
  </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/game5.git</code></pre>

  <h2>Run it yourself</h2>
  <pre><code>cd lampion/client
npm install
npm run dev        # http://localhost:4173 — 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 climbers (O(n²) connections).</li>
      <li><b>No history:</b> close the last tab and the hill 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 of the rotating rings, canvas night-hill renderer,
        pentatonic chimes and a low stone thunk</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 lanterns</footer>
</main>

<main data-lang-block lang="ro" hidden>
  <h1>LAMP<span class="p">ION</span></h1>
  <div class="tag">o urcare de noapte pe dealurile verii — fără server, p2p, criptată cap-la-cap</div>

  <div class="btns">
    <a class="btn" href="https://game5.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>
    Un deal de festival din inele de piatră suprapuse sub un cer de noapte, în
    violeturi à la Monument Valley. Până la 16 jucători duc lampioane de hârtie
    de la tabăra de la poale spre scena din vârf. Fiecare nivel al dealului se
    rotește singur — un mecanism lent, cu alt ritm în fiecare rundă — iar
    scările leagă inelele doar acolo unde li se aliniază locașurile. Prinde
    momentul urcării sau rotește tu inelul pe care stai, ca să forțezi o
    aliniere mai devreme — târând cu el toate lampioanele de pe el. Ajuți sau
    încurci. Primul lampion pe scena din vârf ia runda; dacă ultimul cântec se
    termină fără nimeni în vârf, o ia lampionul cel mai înalt. Primul la 3
    runde e cap de afiș al nopții, iar cerul se umple de artificii și de
    lampioane înălțate. Făcut să se joace cu o mână, în picioare pe un câmp,
    pe telefonul din buzunar.
  </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ă urcarea; dacă dispare, dealul alege în liniște un arbitru nou și
    pornește cântecul următor.
  </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/game5.git</code></pre>

  <h2>Rulează-l singur</h2>
  <pre><code>cd lampion/client
npm install
npm run dev        # http://localhost:4173 — 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
          cățărători simultani (conexiuni O(n²)).</li>
      <li><b>Fără istoric:</b> închizi ultimul tab și dealul 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 a inelelor rotitoare, renderer pe canvas cu
        dealul nopții, clinchete pentatonice și un buf jos de piatră</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 lampioane anonime</footer>
</main>

<main data-lang-block lang="hu" hidden>
  <h1>LAMP<span class="p">ION</span></h1>
  <div class="tag">éjszakai mászás a nyári dombokon — szerver nélkül, p2p, végponttól végpontig titkosítva</div>

  <div class="btns">
    <a class="btn" href="https://game5.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>
    Fesztiváldomb egymásra rakott kőgyűrűkből az éjszakai ég alatt, Monument
    Valley-lilákban. Akár 16 játékos visz papírlampiont az alsó táborhelytől a
    csúcson álló színpad felé. A domb minden szintje magától fordul — lassú
    óramű, körönként új ritmussal —, a lépcsők pedig csak ott kötik össze a
    gyűrűket, ahol a réseik egybeesnek. Időzítsd a mászást, vagy tekerd meg a
    gyűrűt, amin állsz, hogy korábban kényszeríts ki egy egybeesést — magaddal
    rántva a rajta álló összes lampiont. Segíts vagy keresztezz. Az első
    lampion a csúcsszínpadon viszi a kört; ha az utolsó dal csúcsraérés nélkül
    ér véget, a legmagasabb lampioné a kör. Aki előbb ér 3 körig, az az éjszaka
    főfellépője, az ég pedig megtelik tűzijátékkal és elengedett lampionokkal.
    Úgy készült, hogy fél kézzel is játszható legyen, egy mezőn állva, a
    zsebedben lapuló telefonon.
  </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 mászásban; ha eltűnik, a domb csendben új bírót választ,
    és rázendít a következő dalra.
  </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/game5.git</code></pre>

  <h2>Futtasd magad</h2>
  <pre><code>cd lampion/client
npm install
npm run dev        # http://localhost:4173 — 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ű mászó (O(n²) kapcsolat).</li>
      <li><b>Nincs előzmény:</b> zárd be az utolsó fület, és a domb 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, a forgó
        gyűrűk ülésindexelt hoszt-szimulációja, canvas éjszakai-domb renderer,
        pentaton csengettyűk és egy mély kő-koppanás</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 lampionok</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>