169 lines
3.6 KiB
Svelte
169 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import BackgroundGrid from '$lib/BackgroundGrid.svelte';
|
|
import ScreenInfo from '$lib/ScreenInfo.svelte';
|
|
import Axes from '$lib/Axes.svelte';
|
|
import ColorGradient from '$lib/ColorGradient.svelte';
|
|
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
|
import Clock from '$lib/Clock.svelte';
|
|
|
|
interface Props {
|
|
bg?: boolean;
|
|
onfocus?: () => void;
|
|
}
|
|
|
|
let { bg = false, onfocus }: Props = $props();
|
|
|
|
let sizes = $state({
|
|
blockSize: 64,
|
|
horizontalCount: 16,
|
|
verticalCount: 16,
|
|
horizontalMargin: 0,
|
|
verticalMargin: 0
|
|
});
|
|
|
|
let columnWidth = $derived(sizes.horizontalCount % 2 === 0 ? 3 : 4);
|
|
let columnHeight = $derived(
|
|
2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2)
|
|
);
|
|
let leftColumn = $derived(sizes.horizontalCount / 4 - columnWidth / 2);
|
|
let circleBlocks = $derived(
|
|
2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
|
|
(sizes.horizontalCount % 2)
|
|
);
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="test-card"
|
|
class:bg
|
|
style="--block-size: {sizes.blockSize}px;
|
|
--horizontal-margin: {sizes.horizontalMargin}px;
|
|
--vertical-margin: {sizes.verticalMargin}px;
|
|
--circle-blocks: {circleBlocks};
|
|
--column-width: {columnWidth};
|
|
--column-height: {columnHeight};
|
|
--left-column: {leftColumn};"
|
|
ondblclick={() => onfocus?.() && document.body.requestFullscreen()}
|
|
>
|
|
<BackgroundGrid onchange={(detail) => (sizes = detail)} subdued={bg} />
|
|
|
|
<div class="axes">
|
|
<Axes />
|
|
</div>
|
|
|
|
<div class="outer"></div>
|
|
<div class="inner"></div>
|
|
|
|
<div class="info">
|
|
<Clock />
|
|
<ScreenInfo />
|
|
</div>
|
|
|
|
<div class="column left">
|
|
<div class="gradient">
|
|
<ColorGradient />
|
|
</div>
|
|
<div class="gradient">
|
|
<BrightnessGradient />
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="gradient">
|
|
<ColorGradient />
|
|
</div>
|
|
<div class="gradient">
|
|
<BrightnessGradient />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.test-card {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: min(4vw, 4vh);
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: calc(var(--block-size) * var(--circle-blocks));
|
|
height: calc(var(--block-size) * var(--circle-blocks));
|
|
|
|
border: 1px solid white;
|
|
background: rgba(0, 0, 0, 0.66);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.outer {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
|
|
height: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
|
|
|
|
border: 2px dashed white;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
.column {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
width: calc(var(--block-size) * var(--column-width));
|
|
height: calc(var(--block-size) * var(--column-height));
|
|
z-index: 9;
|
|
|
|
display: flex;
|
|
|
|
&.left {
|
|
left: calc(var(--horizontal-margin) + var(--block-size) * 3);
|
|
}
|
|
|
|
&.right {
|
|
right: calc(var(--horizontal-margin) + var(--block-size) * 3);
|
|
transform: translateY(-50%) rotate(180deg);
|
|
}
|
|
|
|
& .gradient {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.test-card.bg {
|
|
& .info,
|
|
& .column,
|
|
& .axes,
|
|
& .inner {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|