<html>
<head>
<title>WebMinecraft</title>
<script src="app.js"></script>
<style>
body {
font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
}
.params {
background-color: cadetblue;
width: fit-content;
}
.collapsible {
padding: 8px;
cursor: pointer;
border: none;
text-align: left;
width: 100%;
font-size: medium;
}
.paramContent {
display: flex;
overflow-y: hidden;
height: 0px;
}
.paramPanel {
padding: 10px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<canvas id="game" width="1024" height="768"></canvas>
<div id="fps"></div>
<div class="params">
<button class="collapsible">Parameters</button>
<div class="paramContent">
<div class="paramPanel">
<h3>Light</h3>
<h4>Direction</h4>
<p>
x:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightx" />
</p>
<p>
y:
<input type="range" min="-100" max="100" value="50" class="slider" id="lighty" />
</p>
<p>
z:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightz" />
</p>
<p>
<div id="lightDirVec"></div>
</p>
<h4>Ambiant light amount</h4>
<p>
<input type="range" min="0" max="100" value="50" class="slider" id="ambiant" />
</p>
<h4>Sky color</h4>
<p>
r:
<input type="range" min="0" max="255" value="115" class="slider" id="skyr" />
</p>
<p>
g:
<input type="range" min="0" max="255" value="191" class="slider" id="skyg" />
</p>
<p>
b:
<input type="range" min="0" max="255" value="255" class="slider" id="skyb" />
</p>
<p>
<div id="skyColor"></div>
</div>
<div class="paramPanel">
<h3>Physics</h3>
<p>
Gravity: <span id="gravityValue"></span><input type="range" min="-100" max="100" value="-10" class="slider" id="gravity" />
</p>
<p>
Jump force: <span id="jumpForceValue"></span><input type="range" min="-100" max="100" value="10" class="slider" id="jumpForce" />
</p>
</div>
</div>
</div>
</body>
</html>