Save WIP

[rbdr/canvas] / src / lib / components / minimap.svelte

<script>
	import { topLeft, bottomRight } from '$lib/stores/canvas';
	import { modulo } from '$lib/math';
	import { maxSize } from '$lib/config';
	import MinimapSector from '$lib/components/minimap_sector.svelte';

	const gridSize = 24;
	const sectors = Array(gridSize).fill(Array(gridSize).fill());
	const size = maxSize / gridSize;

	const isActive = function isActive(x, y, $topLeft) {
		const pCanvas = modulo($topLeft.x, maxSize);
		const qCanvas = modulo($topLeft.y, maxSize);
		const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
		const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);

		const sectorLeft = size * x;
		const sectorTop = size * y;
		const sectorRight = sectorLeft + size;
		const sectorBottom = sectorTop + size;
		return (
			sectorRight >= pCanvas &&
			pBoundary >= sectorLeft &&
			sectorBottom >= qCanvas &&
			qBoundary >= sectorTop
		);
	};
</script>

<div class="minimap">
	<table>
		{#each sectors as _, y}
			<tr>
				{#each sectors[y] as _, x}
					<MinimapSector x="{x}," y="{y}," {size} isActive={isActive(x, y, $topLeft)} />
				{/each}
			</tr>
		{/each}
	</table>
</div>

<style>
	.minimap {
		background-color: #fff;
		padding: 4px;
		position: fixed;
		top: 2px;
		right: 2px;
		font-smooth: never;
		-webkit-font-smoothing: none;
	}
	table {
		border-collapse: collapse;
	}
</style>