clone

a browser grid puzzle game where you push words around to rewrite the rules of each level

main
miau-is-true / index.html
index.html 4.6K
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <meta name="theme-color" content="#0F0E0D" />7 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />8 <link rel="alternate icon" type="image/png" sizes="32x32" href="/favicon-32.png" />9 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />10 <title>Miau Is True — rule engine</title>11 </head>12 <body>13 <main class="app-shell">14 <header class="topbar">15 <div class="brand-mark" aria-label="Miau Is True"><span>✳</span><div><strong>MIAU IS TRUE</strong><small>rule engine / 01</small></div></div>16 <div class="top-actions"><span class="status-dot" id="status-dot"></span><span id="status-label" role="status" aria-live="polite">READY TO EXPLORE</span><button class="icon-button" id="sound-btn" title="Toggle sound" aria-label="Toggle sound">◖</button><button class="icon-button" id="fullscreen-btn" title="Fullscreen (F)" aria-label="Toggle fullscreen">⛶</button></div>17 </header>18 <div class="app-layout">19 <section class="play-column">20 <div class="level-strip"><div><span class="eyebrow">CURRENT PROOF</span><h1 id="level-title">Loading…</h1></div><div class="level-nav"><button class="soft-button" id="prev-level" aria-label="Previous level">←</button><span id="level-index">01 / 03</span><button class="soft-button" id="next-level" aria-label="Next level">→</button></div></div>21 <div class="board-wrap"><canvas id="game-canvas" width="960" height="720" tabindex="0" aria-label="Puzzle board" aria-describedby="board-description"></canvas><pre id="board-description" class="sr-only"></pre><div class="win-toast" id="win-toast" hidden><span>✦</span><strong>RULES ALIGNED</strong><small>the proof is complete</small><button class="toast-button" id="continue-btn">CONTINUE →</button></div></div>22 <div class="under-board"><div class="legend"><span><i class="legend-swatch you"></i> YOU</span><span><i class="legend-swatch word"></i> WORD</span><span><i class="legend-swatch object"></i> OBJECT</span></div><div class="move-counter"><span>STEPS</span><strong id="move-count">0</strong><button class="action-button" id="undo-btn" disabled>UNDO <kbd>Z</kbd></button><button class="action-button" id="restart-btn">RESTART <kbd>R</kbd></button></div></div>23 <div class="mobile-controls" aria-label="Directional controls"><button data-dir="up">↑</button><div><button data-dir="left">←</button><button data-dir="down">↓</button><button data-dir="right">→</button></div></div>24 </section>25 <aside class="sidebar">26 <section class="panel rules-panel"><div class="panel-heading"><div><span class="eyebrow">ACTIVE SYSTEM</span><h2>Rules in play</h2></div><span class="pulse"></span></div><div id="rules-list" class="rules-list"></div><p class="panel-note" id="hint-copy"></p></section>27 <section class="panel controls-panel"><div class="panel-heading"><div><span class="eyebrow">FIELD NOTES</span><h2>Controls</h2></div></div><div class="key-row"><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd><span>or arrow keys <em>move</em></span></div><div class="key-row"><kbd>Z</kbd><span>undo last step</span><kbd>R</kbd><span>restart proof</span></div></section>28 <section class="panel levels-panel"><div class="panel-heading"><div><span class="eyebrow">CHOOSE A PATH</span><h2>Proofs</h2></div></div><div id="level-list" class="level-list"></div></section>29 <section class="panel mod-panel"><div class="panel-heading"><div><span class="eyebrow">MAKE IT YOURS</span><h2>Level packs</h2></div><span class="mod-badge">CJS</span></div><p>Chosen CommonJS files run JavaScript in this browser. Import only files you trust. Share URLs carry data only.</p><label class="file-button">Import trusted module<input id="mod-input" type="file" accept=".js,.cjs" /></label><div id="mod-status" class="mod-status" role="status">Bundled packs ready</div><div id="pack-list" class="pack-list" aria-label="Loaded packs"></div><div class="mod-actions"><button class="file-button" id="export-pack">Download .cjs</button><button class="file-button" id="copy-share">Copy share URL</button></div><input id="share-url-input" class="share-url-input" data-share-url aria-label="Share URL" readonly placeholder="Share URL appears here" /></section>30 </aside>31 </div>32 <footer><span>move words to rewrite the world</span><span>© 2026 / open proofs</span></footer>33 </main>34 <script type="module" src="/src/main.js"></script>35 </body>36</html>