120 lines
2.1 KiB
Svelte
120 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import '@fontsource/b612';
|
|
import '@fontsource/b612/700.css';
|
|
import 'normalize.css/normalize.css';
|
|
|
|
import { onMount, tick } from 'svelte';
|
|
import SectorIndicator from './components/SectorIndicator.svelte';
|
|
import FlashIndicator from './components/FlashIndicator.svelte';
|
|
import Scale from './components/Scale.svelte';
|
|
|
|
export let frame = 0;
|
|
export let fps = 60;
|
|
export let debug = false;
|
|
|
|
onMount(() => {
|
|
window.setFps = async (newFps: number) => {
|
|
fps = newFps;
|
|
await tick();
|
|
};
|
|
|
|
window.setFrame = async (frameNumber: number) => {
|
|
frame = frameNumber;
|
|
await tick();
|
|
};
|
|
|
|
if (window.location.search.includes('debug')) {
|
|
debug = true;
|
|
}
|
|
|
|
if (window.location.search.includes('play')) {
|
|
setInterval(() => {
|
|
frame++;
|
|
frame %= fps * 4;
|
|
}, 1000 / fps);
|
|
}
|
|
|
|
if (window.location.search.includes('frame')) {
|
|
const frameNumber = parseInt(window.location.search.split('frame=')[1]);
|
|
if (!isNaN(frameNumber)) {
|
|
frame = frameNumber;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<main class:debug>
|
|
<div class="cyclic">
|
|
<div class="circular sector">
|
|
<SectorIndicator {frame} {fps} />
|
|
</div>
|
|
|
|
<div class="circular flash">
|
|
<FlashIndicator {frame} {fps} />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scale">
|
|
<Scale {frame} {fps} />
|
|
</div>
|
|
|
|
{#if debug}
|
|
<div class="controls">
|
|
<input type="range" min="0" max={fps * 4} bind:value={frame} />
|
|
<div class="label">{frame} ({frame % fps}) / {Math.round((frame / fps) * 100) / 100} s)</div>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
color: white;
|
|
--color-active: red;
|
|
--color-inactive: white;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
.circular {
|
|
width: 25vw;
|
|
height: 25vw;
|
|
}
|
|
|
|
.cyclic {
|
|
width: 100vw;
|
|
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.scale {
|
|
width: 80vw;
|
|
}
|
|
|
|
main.debug {
|
|
background: black;
|
|
}
|
|
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80vw;
|
|
|
|
text-align: center;
|
|
|
|
& input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|