// Use JS to write whatever HTML and data you want to the page
// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
document.write ( `
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack It!</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="game-menu" class="game-screen">
<h1>Stack It!</h1>
<p>< Tap to play ></p>
</div>
<div id="game-over-menu" class="game-screen">
<h1>Game Over!</h1>
<p>< Tap to continue ></p>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"
integrity="sha512-U4J4PbEJ2TMjFqPUSiKq7LLTHuEkPZVo0jl2fomi9pT7UAExh4xVi8KmoR7EfmyigH95aA68zpW7y3XzuoSurQ=="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"
integrity="sha512-avLcnGxl5mqAX/wIKERdb1gFNkOLHh2W5JNCfJm5OugpEPBz7LNXJJ3BDjjwO00AxEY1MqdNjtEmiYhKC0ld7g=="
crossorigin="anonymous"
></script>
<script src="scripts/main.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
body {
margin: 0;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
cursor: pointer;
}
canvas {
width: 100%;
height: 100%;
}
#instructions {
display: none;
}
#results,
body:hover #instructions {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: rgba(20, 20, 20, 0.75);
}
a:visited {
color: inherit;
}
#results {
display: none;
cursor: default;
}
#results .content,
#instructions .content {
max-width: 300px;
padding: 50px;
border-radius: 20px;
}
#results {
}
#score {
position: absolute;
color: white;
font-size: 3em;
font-weight: bold;
top: 30px;
right: 30px;
}
` );