blob: 0f823f48af91f8b6a9fe1bd4d76dbe01d75c8467 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<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>
|
