html-tower/static/index.html

110 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="transform.js" defer></script>
<script src="collision.js" defer></script>
<script src="input.js" defer></script>
<script src="player.js" defer></script>
<script src="environment.js" defer></script>
<script src="debug.js" defer></script>
<script src="engine.js" defer></script>
<style>
.debug[data-state="running"] {
background-color: rgb(30,200,30);
}
.debug[data-state="halted"] {
background-color: rgb(200,30,30);
}
</style>
</head>
<body
style="margin:0;"
>
<!-- DEBUG TOOLS -->
<div class="debug"
id="toggle-engine-container"
style="display:flex;border: 2px solid rgb(200,0,0);padding:2px;"
>
<label for="toggle-engine"
class="debug">
the engine's going to keep processing as long as this window is open,
unless you toggle it here. warning: the engine gets weird when woken
from complete halt.
</label>
<button class="debug"
id="toggle-engine"
data-description="the actual button that toggles the engine"
data-state="running"
type="button"
>toggle engine</button>
</div>
<div class="debug"
id="pointer"
data-description="pointer used for debugging positioning things"
style="position:absolute;width:5px;height:5px;top:50vh;left:50vw;
border: 5px solid rgb(127,0,0);
background-color:rgb(255,255,255);"
></div>
<!-- /DEBUG TOOLS -->
<div class="player"
data-description="this is the player character"
data-transform="[1,0,0,1,0,0]"
data-collision-layers="player"
data-collision-mask="environment"
id="player"
style="position:absolute;width:50px;height:50px;
background-color:rgba(50,0,127,0.7);"
></div>
<article
class="level"
id="test"
data-description="a test level for developing the engine"
>
<!-- testing collision -->
<div class="environment wall"
data-description="a wall"
data-collision-layers="environment"
data-collision-mask="player"
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);
background-color:rgba(127,100,0,0.7);"
>~~this is a wall~~ (no collision handling yet)
</div>
<!-- testing radio button: collision handling not implemented yet -->
<form
class=""
id="test-form"
data-description="testing using radio input to move around"
style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
>
<fieldset>
<legend>
try selecting a radio button to teleport
(not implemented yet)
</legend>
<div
style="display:flex;flex-direction:column;"
>
<input
type="radio" id="tut-rad-1" name="tut-rad"
value="tut-rad-1"
style="transform:matrix(1,0,0,1,100,200);"
></input>
<input
type="radio" id="tut-rad-2" name="tut-rad"
value="tut-rad-2" ></input>
<input
type="radio" id="tut-rad-3" name="tut-rad"
value="tut-rad-3" ></input>
<input
type="radio" id="tut-rad-4" name="tut-rad"
value="tut-rad-4" ></input>
</div>
</fieldset>
</form>
</article>
</body>
</html>