MapAddon/map.js at master · Isleward-Addon-Dev-Group/MapAddon · 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
113
addons.register({
    init: function(events) {
        this.collisionMap;
        this.mapScale = 3;
        this.uiContainer = $('.ui-container');
        this.uiMap = $('<canvas class="addon-uiMap"></canvas>')
            .appendTo(this.uiContainer);


        this.uiMap.css("display", "none");
        events.on('onGetMap', this.onGetMap.bind(this));
        events.on('onKeyDown', this.onKeyDown.bind(this));
        events.on('onGetObject', this.onGetObject.bind(this));
    },
    onGetMap: function(mapData) {
        if (!mapData.collisionMap) {
            return;
        }

        this.collisionMap = mapData.collisionMap;
    },
    onKeyDown: function(key) {
        if (!key) {
            return;
        } else if (key == "n") {
            this.toggleMap();
        } else if (key == "13") {
            if (this.mapScale > 1) {
                this.mapScale--;
                this.drawMap();
            }
        } else if (key == "11") {
            if (this.mapScale < 11) {
                this.mapScale++;
                this.drawMap();
            }
        }
    },
    onGetObject: function(object) {
        if (!object.id) {
            return;
        }

        if (!window.player) {
            return;
        }

        if (object.id == window.player.id) {
            this.drawMap();
        }
    },
    toggleMap: function() {
        if (!this.collisionMap) {
            return;
        }

        if (this.uiMap.css("display") == "block") {
            this.uiContainer.css('background-color', 'transparent');
			this.uiContainer.removeClass('blocking');
            this.uiMap.css("display", "none");
            return;
        } else {
            this.uiMap.css("display", "block");
        }

        this.uiContainer.css('background-color', 'rgba(49, 33, 54, 0.5)');
	    this.uiContainer.addClass('blocking');
        this.drawMap();
    },
    drawMap: function() {
        if (!this.collisionMap) {
            return;
        }

        this.uiMap[0].width = this.collisionMap[0].length * this.mapScale;
        this.uiMap[0].height = this.collisionMap.length * this.mapScale;

        var ctx = this.uiMap[0].getContext('2d');
        ctx.scale(this.mapScale, this.mapScale);
        ctx.clearRect(0, 0, this.uiMap[0].width, this.uiMap[0].height);

        for (i = 0; i < this.collisionMap.length; i++) {
            for (j = 0; j < this.collisionMap[i].length; j++) {
                if (this.collisionMap[j][i] == 1) {
                    ctx.fillStyle = "#757b92";
                } else {
                    ctx.fillStyle = "#3c3f4c";
                }

                ctx.fillRect(j, i, 1, 1);
            }
        }

        this.drawPlayer();

        this.uiMap.css({
            'position': "absolute",
            'left': (this.uiContainer[0].clientWidth / 2) - (this.uiMap[0].width / 2),
            'top': (this.uiContainer[0].clientHeight / 2) - (this.uiMap[0].height / 2),
            'background-color': "#3c3f4c",
            'border': "4px solid #505360",
        });
    },
    drawPlayer: function() {
        var x = window.player.x;
        var y = window.player.y;

        var ctx = this.uiMap[0].getContext('2d');

        ctx.fillStyle = "#ff0";
        ctx.fillRect(x, y, 1, 1);
    }
});