Strider4444_dndMap.github.io/script.js at main · Strider4444/Strider4444_dndMap.github.io · GitHub

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
const map = document.querySelector("video");
const party = document.querySelector("#party");
const circusInside = document.querySelector("#circusInside");
const tavernInside = document.querySelector("#tavernInside");
const debug = document.querySelector("#debug");

setInterval(()=> {
    if (window.innerHeight / 1439 * 2559 > window.innerWidth){
        map.style.width = window.innerWidth + "px";
        map.style.height = window.innerWidth / 2559 * 1439 + "px";
    }else {
        map.style.height = window.innerHeight + "px";
        map.style.width = window.innerHeight / 1439 * 2559 + "px";
    }
    party.style.width = map.clientWidth / 35 + "px";
    party.style.height = map.clientWidth / 35 + "px";
    circusInside.style.width = map.clientWidth / 20 + "px";
    circusInside.style.left = map.clientWidth / 3.38 + "px";
    circusInside.style.top = map.clientHeight / 1.74 + "px";
    tavernInside.style.width = map.clientWidth / 8 + "px";
    tavernInside.style.left = map.clientWidth / 2.41 + "px";
    tavernInside.style.top = map.clientHeight / 2.05 + "px";
}, 100)

party.addEventListener("dragend",(x)=> {
    console.log(x);
    party.style.left = x.x - (party.width / 2) + "px";
    party.style.top = x.y - (party.width / 2) + "px";
})

party.addEventListener("touchmove",(x)=> {
    console.log(x);
    debug.textContent = x.changedTouches[0].pageX + ", " + x.changedTouches[0].pageY + ", " + x.changedTouches;
    party.style.left = x.changedTouches[0].pageX - 50 + "px";
    party.style.top = x.changedTouches[0].pageY - 50 + "px";
})

circusInside.addEventListener("click",()=> {
    if (circusInside.style.opacity == 1){
        circusInside.style.opacity = 0;
    }else {
        circusInside.style.opacity = 1;
    }

})

circusInside.addEventListener("touchcancel",()=> {
    if (circusInside.style.opacity == 1){
        circusInside.style.opacity = 0;
    }else {
        circusInside.style.opacity = 1;
    }

})

tavernInside.addEventListener("click",()=> {
    if (tavernInside.style.opacity == 1){
        tavernInside.style.opacity = 0;
    }else {
        tavernInside.style.opacity = 1;
    }

})

tavernInside.addEventListener("touchcancel",()=> {
    if (tavernInside.style.opacity == 1){
        tavernInside.style.opacity = 0;
    }else {
        tavernInside.style.opacity = 1;
    }

})