<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="preload" as="image" href="/Tiles/dirt.png" />
<link rel="preload" as="image" href="/Tiles/dirt_grass.png" />
<link rel="preload" as="image" href="/Tiles/gravel_dirt.png" />
<link rel="preload" as="image" href="/Tiles/gravel_stone.png" />
<link rel="preload" as="image" href="/Tiles/stone.png" />
<link rel="preload" as="image" href="/Tiles/stone_dirt.png" />
<link rel="preload" as="image" href="/Tiles/sand.png" />
<link rel="preload" as="image" href="/Tiles/stone_sand.png" />
<link rel="preload" as="image" href="/Tiles/stone_grass.png" />
<link rel="preload" as="image" href="/Tiles/trunk_mid.png" />
<link rel="preload" as="image" href="/Tiles/trunk_bottom.png" />
<link rel="preload" as="image" href="/Tiles/leaves_transparent.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dig!</title>
<style>
:root {
--block-size: 64px;
--blocks-x: 20;
--blocks-y: 12;
--spare-blocks: 2;
--field-width: calc(var(--block-size) * var(--blocks-x));
--field-height: calc(var(--block-size) * var(--blocks-y));
}
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;
}
.screen {
position: absolute;
top: 0;
left: 0;
height: calc(100% - 2em);
padding: 1em;
background: transparent;
color: white;
backdrop-filter: blur(5px) sepia(.8) brightness(0.4);
}
h2 {
font-size: 1rem;
font-weight: bold;
}
p {
line-height: 2;
margin: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>