display FPS

This commit is contained in:
Gavin McDonald
2018-09-24 21:31:13 -04:00
parent b77e9b6a40
commit 9fc0ca46c5
4 changed files with 75 additions and 3 deletions

View File

@@ -101,6 +101,7 @@ body {
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: sans-serif;
}
#container {
@@ -109,6 +110,42 @@ body {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: 1;
}
.overlay > * {
pointer-events: auto;
}
#fps {
position: absolute;
top: 5px;
right: 5px;
display: flex;
content-align: center;
justify-content: space-around;
color: white;
background: rgba(0,0,0, 0.9);
height: 20px;
width: 30px;
border-radius: 3px;
}
/* ==========================================================================
Helper classes
========================================================================== */

View File

@@ -8,7 +8,11 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container" style="width: 100vw; height: 100vh;"></div>
<div id="container"></div>
<div class="overlay">
<div id="fps"></div>
</div>
<script src="js/tessellate.js"></script>
<script src="js/main.js"></script>