<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/png" href="/favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dig!</title> <style> :root { --block-size: 32px; --blocks-x: 32; --blocks-y: 18; --spare-blocks: 2; --field-width: calc(var(--block-size) * var(--blocks-x)); --field-height: calc(var(--block-size) * var(--blocks-y)); --spare-blocks: 2; } html,body,#app { display: flex; flex-flow: column nowrap; justify-content: center; width: 100vw; height: 100vh; background: black; margin: 0; padding: 0; overflow: hidden; } #field { position: relative; width: var(--field-width); height: var(--field-height); margin: auto; overflow: hidden; background-color: #56F; } #input { position: absolute; opacity: 0; display: block; width: 1px; height: 1px; top: 0; left: 0; } #level-indicator { position: absolute; top: 0; right: 0; color: white; } </style> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>