andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add some UI

Browse source
This commit is contained in:
schmelczerandras 2020-09-18 15:25:34 +02:00
parent bda081b092
commit 90aa5f94e2
3 changed files with 63 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/index.html
View file

@ -3,12 +3,23 @@
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<noscript>
<h1>Javascript is required for this website.</h1>
</noscript>
<div id="info">
<h1>
<a href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">SDF-2D</a>
</h1>
</div>
<button id="remove-clutter">Hide text</button>
<div id="overlay"></div>
<canvas id="main"></canvas>
</body>
</html>

48
src/index.scss
View file

@ -3,17 +3,46 @@ body,
canvas#main {
height: 100%;
width: 100%;
overflow: hidden;
}
html {
@media (max-width: 800px) {
font-size: 0.7rem;
}
}
* {
margin: 0;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
color: white;
}
body {
position: relative;
margin: 0;
h1 {
font-size: 2.5rem;
}
button {
font-size: 1.25rem;
}
#info,
#overlay,
#remove-clutter {
margin: 1rem 1.25rem;
position: absolute;
}
#info {
left: 0;
}
#overlay {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.6em;
margin: 0.75em 1em;
position: absolute;
font-size: 0.7rem;
right: 0;
$outline-width: 0.5px;
@ -21,10 +50,17 @@ body {
$outline-width -$outline-width 0 #000, -$outline-width $outline-width 0 #000,
$outline-width $outline-width 0 #000;
color: white;
white-space: pre;
}
#remove-clutter {
bottom: 0;
border: 2px solid white;
border-radius: 6px;
padding: 0.2em 0.5rem;
background: none;
}
canvas#main {
background-color: hotpink;
}

13
src/index.ts
View file

@ -5,12 +5,21 @@ import { RainScene } from './scenes/rain/rain-scene';
import { Scene } from './scenes/scene';
import { TunnelScene } from './scenes/tunnel-scene';
const scenes = [RainScene, TunnelScene];
const sceneIntervalInSeconds = 8;
glMatrix.setMatrixArrayType(Array);
const deltaTimeCalculator = new DeltaTimeCalculator();
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const info = document.querySelector('#info');
const button = document.querySelector('#remove-clutter');
const overlay = document.querySelector('#overlay') as HTMLDivElement;
button.addEventListener('click', () =>
[info, button, overlay].forEach((e) => e.remove())
);
const handleScene = async (SceneConstructor: new () => Scene) => {
const scene = new SceneConstructor();
await scene.initialize(canvas, overlay);
@ -24,7 +33,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
scene.drawNextFrame(currentTime, deltaTime);
if ((timeSinceStart += deltaTime) > 8 * 1000) {
if ((timeSinceStart += deltaTime) > sceneIntervalInSeconds * 1000) {
triggerIsOver();
} else {
requestAnimationFrame(handleFrame);
@ -39,8 +48,6 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
const main = async () => {
try {
const scenes = [RainScene, TunnelScene];
let i = 0;
for (;;) {
await handleScene(scenes[i++ % scenes.length]);