test-card/src/lib/TestCard.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 { onMount } from 'svelte';

	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);

	onMount(() => {
		window.addEventListener('dblclick', () => {
			document.body.requestFullscreen();
		});
	});
</script>

<div
	class="test-card"
	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};"
>
	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
	<Axes />

	<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;
	}

	.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;
		}
	}
</style>