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
|
<script>
import { coordinateLength } from '$lib/config';
import { sensor } from '$lib/stores/widgets';
import { maxSize } from '$lib/config';
const isActive = function isActive($s, x, y) {
const isXActive = $s.left > x * maxSize && $s.left < (x + 1) * maxSize;
const isYActive = $s.top > y * maxSize && $s.top < (y + 1) * maxSize;
return isXActive || isYActive;
}
</script>
<div class="minimap">
<table>
<tr>
<td class="{isActive($sensor, -1,-1) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 0,-1) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 1,-1) ? 'active' : ''}"></td>
</tr>
<tr>
<td class="{isActive($sensor, -1,0) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 0,0) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 1,0) ? 'active' : ''}"></td>
</tr>
<tr>
<td class="{isActive($sensor, -1,1) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 0,1) ? 'active' : ''}"></td>
<td class="{isActive($sensor, 1,1) ? 'active' : ''}"></td>
</tr>
</table>
</div>
<style>
.minimap {
background-color: #fff;
padding: 4px;
position: fixed;
top: 2px;
right: 2px;
font-smooth: never;
-webkit-font-smoothing : none;
}
td {
width: 10px;
height: 10px;
border: 1px solid black;
}
td.active {
background-color: magenta;
}
</style>
|
