-
Notifications
You must be signed in to change notification settings - Fork 1
/
+page.svelte
73 lines (59 loc) · 2.17 KB
/
+page.svelte
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script lang='ts'>
import type { PageData } from './$types';
import type { Pair } from '$lib/types';
import Draggable from '$lib/draggable.svelte';
import ReturnModal from '$lib/returnModal.svelte';
export let data: PageData;
let won: bool = false;
let draggables = []
function collisionCheck(thisdom, thispair) {
if (won) return;
const rect1 = thisdom.getBoundingClientRect();
draggables.forEach((otherDraggable) => {
// can't collide with ourselves
if (otherDraggable.dom === thisdom) return;
const rect2 = otherDraggable.dom.getBoundingClientRect();
if (
rect2.right > rect1.left &&
rect2.left < rect1.right &&
rect2.top < rect1.bottom &&
rect2.bottom > rect1.top
) {
thisdom.style.transition = 'opacity 1s';
otherDraggable.dom.style.transition = 'opacity 1s';
// correct match
if (otherDraggable.pair.id == thispair.id) {
thisdom.style.opacity = '0';
otherDraggable.dom.style.opacity = '0';
setTimeout(() => {
thisdom.remove();
otherDraggable.dom.remove();
// if for every draggable, its dom is undefined or has been removed
if (draggables.every((d) => d.dom === undefined || !d.dom.checkVisibility())) {
won = true;
}
}, 1000);
}
// incorrect match
else {
thisdom.style.opacity = '1';
otherDraggable.dom.style.opacity = '1';
thisdom.style.backgroundColor = 'red';
otherDraggable.dom.style.backgroundColor = 'red';
// revert white background color back to red after a delay
setTimeout(() => {
thisdom.style.backgroundColor = 'white';
otherDraggable.dom.style.backgroundColor = 'white';
}, 1000);
}
}
});
}
</script>
{#each data.pairs as pair, i}
<Draggable {pair} {collisionCheck} one_or_two={1} bind:this={draggables[2*i]} />
<Draggable {pair} {collisionCheck} one_or_two={2} bind:this={draggables[2*i+1]} />
{:else}
<p>No pairs detected for this patient</p>
{/each}
<ReturnModal open={won} route={"matching"} />