From aab961011d2b9bfdc094d491c4a6ac65beb61c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 1 Feb 2024 12:40:55 +0100
Subject: [PATCH] margins & squares

---
 src/lib/BackgroundCorners.svelte |  48 ++++++++
 src/lib/BackgroundGrid.svelte    | 170 +++++++++++++++++++++++-----
 src/lib/TestCard.svelte          | 186 +++++++++++++++++--------------
 src/routes/+layout.ts            |   1 +
 4 files changed, 294 insertions(+), 111 deletions(-)
 create mode 100644 src/lib/BackgroundCorners.svelte
 create mode 100644 src/routes/+layout.ts

diff --git a/src/lib/BackgroundCorners.svelte b/src/lib/BackgroundCorners.svelte
new file mode 100644
index 0000000..3bcfe17
--- /dev/null
+++ b/src/lib/BackgroundCorners.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    let count = 12;
+    $: realCount = count + 2;
+
+    onMount(() => {
+
+    })
+</script>
+
+<div class="grid" style='--count: {realCount}'>
+  {#each [...Array(realCount).keys()] as x}
+    <div class="row">
+      {#each [...Array(realCount).keys()] as y}
+        <div class="block" data-block-x={x} data-block-y={y}></div>
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(var(--count), 40px);
+    grid-template-rows: repeat(var(--count), 40px);
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+  }
+
+  .row {
+    display: contents;
+  }
+
+  .block {
+    background-color: gray;
+  }
+
+  .row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
+    background-color: darkgray;
+  }
+
+  .block[data-block-x="0"][data-block-y="0"] {
+    background-color: red;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte
index fb5d3b0..00718d4 100644
--- a/src/lib/BackgroundGrid.svelte
+++ b/src/lib/BackgroundGrid.svelte
@@ -1,39 +1,153 @@
 <script lang="ts">
-    let count = 12;
-    $: realCount = count + 2;
+	import { onMount } from 'svelte';
+
+	const START_COUNT = 13;
+	const MAX_COUNT = 50;
+
+	let count = START_COUNT;
+	let horizontalCount = count;
+	let verticalCount = count;
+
+	$: count && updateCounts();
+	function updateCounts() {
+		function discrepancy(count: number) {
+			const blockSize = window.innerWidth / count;
+			return window.innerHeight / blockSize - Math.floor(window.innerHeight / blockSize);
+		}
+		let finalCount = count;
+
+		count = START_COUNT;
+		let bestDiscrepancy = discrepancy(count);
+		while (count < MAX_COUNT) {
+			count++;
+			const currentDiscrepancy = discrepancy(count);
+			console.log({ currentDiscrepancy, count });
+			const workingDiscrepancy = currentDiscrepancy;
+			if (workingDiscrepancy < bestDiscrepancy) {
+				bestDiscrepancy = workingDiscrepancy;
+				finalCount = count;
+				console.log('New best discrepancy', bestDiscrepancy, 'at', finalCount);
+			}
+		}
+
+		count = finalCount;
+		horizontalCount = count;
+		verticalCount = Math.round(horizontalCount * (window.innerHeight / window.innerWidth));
+	}
+
+	onMount(() => {
+		// window.addEventListener('resize', updateCounts);
+		updateCounts();
+	});
+
+	function isEdge(x: number, y: number) {
+		return x === 0 || y === 0 || x === verticalCount - 1 || y === horizontalCount - 1;
+	}
+
+	const CORNER_SIZE = 3;
+	function isCorner(x: number, y: number) {
+		// Top left
+		if ((x < CORNER_SIZE && y === 0) || (y < CORNER_SIZE && x === 0)) {
+			return true;
+		}
+
+		// Top right
+		if (
+			(x < CORNER_SIZE && y === horizontalCount - 1) ||
+			(y > horizontalCount - CORNER_SIZE - 1 && x === 0)
+		) {
+			return true;
+		}
+
+		// Bottom left
+		if (
+			(x > verticalCount - CORNER_SIZE - 1 && y === 0) ||
+			(y < CORNER_SIZE && x === verticalCount - 1)
+		) {
+			return true;
+		}
+		// Bottom right
+		// noinspection RedundantIfStatementJS
+		if (
+			(x > verticalCount - CORNER_SIZE - 1 && y === horizontalCount - 1) ||
+			(y > horizontalCount - CORNER_SIZE - 1 && x === verticalCount - 1)
+		) {
+			return true;
+		}
+
+		return false;
+	}
 </script>
 
-<div class="grid" style="--count: {realCount}">
-  {#each Array.from({length: realCount}) as _}
-    <div class="row">
-      {#each Array.from({length: realCount}) as _}
-        <div class="block"></div>
-      {/each}
-    </div>
-  {/each}
+<div class="background">
+	<div
+		class="grid"
+		style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
+	>
+		{#each [...Array(verticalCount).keys()] as x}
+			<div class="row">
+				{#each [...Array(horizontalCount).keys()] as y}
+					<div class="block" class:edge={isEdge(x, y)} class:corner={isCorner(x, y)}></div>
+				{/each}
+			</div>
+		{/each}
+	</div>
 </div>
 
 <style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(var(--count), 20px);
-    grid-template-rows: repeat(var(--count), 20px);
-    width: 100%;
-    height: 100%;
+	.background {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 
-    position: relative;
-  }
+		--grid-color-dark: #666;
+		--grid-color-light: #888;
+		--corner-color: white;
 
-  .row {
-    display: contents;
-  }
+		pointer-events: none;
+	}
 
-  .block {
+	.grid {
+		display: grid;
+		--margin: calc(100vw / var(--count) / 2);
+		--block-size: calc(100vw / (var(--count)) - (var(--margin) / (var(--count))));
+		grid-template-columns: repeat(var(--horizontal-count), var(--block-size));
+		grid-template-rows: repeat(var(--vertical-count), var(--block-size));
+		position: absolute;
+		/*top: calc(50% - (var(--block-size) * var(--vertical-count) / 2));*/
+		/*left: calc(50% - (var(--block-size) * var(--horizontal-count) / 2));*/
+	}
 
-    background-color: gray;
-  }
+	.row {
+		display: contents;
+	}
 
-  .row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
-    background-color: darkgray;
-  }
-</style>
\ No newline at end of file
+	.block {
+		width: 100%;
+		height: 100%;
+		background-color: var(--grid-color-light);
+
+		&.edge {
+			background-color: white;
+		}
+
+		&.corner {
+			background-color: var(--corner-color);
+		}
+	}
+
+	.row:nth-child(even) .block:nth-child(odd),
+	.row:nth-child(odd) .block:nth-child(even) {
+		background-color: var(--grid-color-dark);
+
+		&.edge {
+			background-color: black;
+		}
+
+		&.corner {
+			background-color: var(--corner-color);
+		}
+	}
+</style>
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index e3a7be2..770b110 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -1,107 +1,127 @@
 <script lang="ts">
-
-import BackgroundGrid from "$lib/BackgroundGrid.svelte";
-import ScreenInfo from "$lib/ScreenInfo.svelte";
+	import BackgroundGrid from '$lib/BackgroundGrid.svelte';
+	import ScreenInfo from '$lib/ScreenInfo.svelte';
 </script>
 
 <div class="test-card">
-  <div class="background">
-    <BackgroundGrid />
-  </div>
-  <ScreenInfo />
+	<div class="background">
+		<BackgroundGrid />
+	</div>
 
-  <div class="inner">
-  <div class="color-bars">
-    <div class="color-bar red"></div>
-    <div class="color-bar green"></div>
-    <div class="color-bar blue"></div>
-    <div class="color-bar black"></div>
-  </div>
-  <div class="grayscale-gradient"></div>
-  <div class="color-gradient-background"></div>
-  </div>
+	<div class="inner">
+		<ScreenInfo />
+
+		<div class="color-bars">
+			<div class="color-bar red"></div>
+			<div class="color-bar green"></div>
+			<div class="color-bar blue"></div>
+			<div class="color-bar black"></div>
+		</div>
+		<div class="grayscale-gradient"></div>
+		<div class="color-gradient-background"></div>
+	</div>
 </div>
 
 <style>
-  .test-card {
-    width: 100vw;
-    height: 100vh;
-  }
+	.test-card {
+		position: absolute;
+		top: 0;
+		left: 0;
 
-  .inner {
-    width: 80%;
-    height: 80%;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 2fr 1fr 1fr 1fr;
-    gap: 10px;
-    display: none;
-  }
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+	}
 
-  .background {
-    position: absolute;
-  }
+	.background {
+		width: 100%;
+		height: 100%;
+		z-index: -9;
+	}
 
+	.inner {
+		width: 80%;
+		height: 80%;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-template-rows: 2fr 1fr 1fr 1fr;
+		gap: 10px;
+	}
 
+	.background {
+		position: absolute;
+	}
 
+	.color-bars {
+		display: flex;
+		grid-column: 1 / 5;
+	}
 
-  .color-bars {
-    display: flex;
-    grid-column: 1 / 5;
-  }
+	.color-bar {
+		flex-grow: 1;
+		height: 100%;
+	}
 
-  .color-bar {
-    flex-grow: 1;
-    height: 100%;
-  }
+	.red {
+		background-color: #ff0000;
+	}
 
-  .red { background-color: #ff0000; }
-  .green { background-color: #00ff00; }
-  .blue { background-color: #0000ff; }
-  .black { background-color: #000; }
+	.green {
+		background-color: #00ff00;
+	}
 
-  .grayscale-gradient {
-    grid-column: 1 / 5;
-    background: linear-gradient(to right, #000, #fff);
-  }
+	.blue {
+		background-color: #0000ff;
+	}
 
-  .sharpness-pattern {
-    grid-column: 1 / 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #eee;
-    font-size: 2vw;
-  }
+	.black {
+		background-color: #000;
+	}
 
-  .geometry-pattern {
-    grid-column: 3 / 5;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
+	.grayscale-gradient {
+		grid-column: 1 / 5;
+		background: linear-gradient(to right, #000, #fff);
+	}
 
-  .circle, .square {
-    background-color: #888;
-    aspect-ratio: 1 / 1;
-  }
+	.sharpness-pattern {
+		grid-column: 1 / 3;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #eee;
+		font-size: 2vw;
+	}
 
-  .circle {
-    width: 10vw;
-    border-radius: 50%;
-  }
+	.geometry-pattern {
+		grid-column: 3 / 5;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
 
-  .square {
-    width: 10vw;
-  }
+	.circle,
+	.square {
+		background-color: #888;
+		aspect-ratio: 1 / 1;
+	}
 
-  @media (max-width: 600px) {
-    .sharpness-pattern span {
-      font-size: 5vw;
-    }
+	.circle {
+		width: 10vw;
+		border-radius: 50%;
+	}
 
-    .circle, .square {
-      width: 20vw;
-    }
-  }
-</style>
\ No newline at end of file
+	.square {
+		width: 10vw;
+	}
+
+	@media (max-width: 600px) {
+		.sharpness-pattern span {
+			font-size: 5vw;
+		}
+
+		.circle,
+		.square {
+			width: 20vw;
+		}
+	}
+</style>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;