diff --git a/src/index.html b/src/index.html index ad4e325..371a58d 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,23 @@ Test + + +
+

+ SDF-2D +

+
+ + +
+ diff --git a/src/index.scss b/src/index.scss index bc0da88..0ca3fb1 100644 --- a/src/index.scss +++ b/src/index.scss @@ -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; } diff --git a/src/index.ts b/src/index.ts index 36e37a7..6931846 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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]);