156 lines
3.4 KiB
Svelte
156 lines
3.4 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 { createEventDispatcher } from 'svelte';
|
|
const dispatch = createEventDispatcher<{ focus: void }>();
|
|
|
|
export let bg = false;
|
|
|
|
let sizes = {
|
|
blockSize: 64,
|
|
horizontalCount: 16,
|
|
verticalCount: 16,
|
|
horizontalMargin: 0,
|
|
verticalMargin: 0
|
|
};
|
|
|
|
$: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4;
|
|
$: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2);
|
|
$: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2;
|
|
$: circleBlocks =
|
|
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};"
|
|
on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
|
|
>
|
|
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
|
|
|
|
<div class="axes">
|
|
<Axes />
|
|
</div>
|
|
|
|
<div class="outer"></div>
|
|
<div class="inner"></div>
|
|
|
|
<div class="info">
|
|
<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: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
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;
|
|
}
|
|
|
|
.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>
|