tcgmapper/Screenload.js at main · SincerityJayce/tcgmapper · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// ! Resizes Screen
window.addEventListener('resize', resize)
function resize(){

    arrowCoordinates();


    canvasAreaW = (window.innerWidth) * scale;
    canvasAreaH = (window.innerHeight - 1) * scale;
    container.style = 'width:'+canvasAreaW/scale+';height:'+canvasAreaH/scale + ';';
    display.width = canvasAreaW;
    display.height = canvasAreaH;
    canvas.width = canvasAreaW;
    canvas.height = canvasAreaH;
    display.style = "width:" + canvasAreaW/scale + "px;height:" + canvasAreaH/scale + "px;";
    canvas.style = "width:" + canvasAreaW/scale + "px;height:" + canvasAreaH/scale + "px;";
    drawCanvas();
}


// ! Clears Screen, Redraws Everything, Triggered by Zoom or Resize
function drawCanvas(){
    c.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < drawnScreenShapes.length; i++){
        drawnScreenShapes[i].draw();
        drawnScreenShapes[i].drawarrows();
    }
}


//Sidebar
function buildToolImage(src){
    let img = document.createElement('img');
    img.src = src;
    img.id = src;
    styleToolImage(img);

    storedImages.appendChild(img);
    storedImagesTools.push(img);
    img.addEventListener('click', selectActiveTool); //event: Select Tool on tool Clicked
}

function loadAllSidebarTools(){
    for (var i = 0; i < toolImgs.length; i++){
        buildToolImage(toolImgs[i])
    }
}

function styleToolImage(img){

    img.classList.add('unselectedTool');

    aspect = calculateAspectOf(img.src);
    if ((58/aspect) > 79){
        let h = 79/aspect;
        let w = 79;
        img.style = "height: " + h + "px; width: " + w + "px;";
    } else {
        let w = 58*aspect;
        let h = 58;

        img.style = "height: " + h + "px; width: " + w + "px;";
    }
}

function calculateAspectOf(image){
    return image.naturalWidth/image.NaturalHeight;
}


// Onload page
resize();


display.remove();


window.addEventListener('click',
    function (e){
        console.log(e)
    })


const deckLinkBox = document.getElementById("ffdeckload");


loadAllSidebarTools();