3 const map = document.createElement('canvas'); // the map we see
5 map.height = window.innerHeight;
6 map.width = window.innerWidth;
7 document.getElementsByTagName('body')[0].append(map);
8 // this is the map that we actually draw on
9 this.map = map.getContext('2d', {
12 this.map.imageSmoothingEnabled = false;
14 // the info box in the corner
15 this.infobox = document.getElementsByClassName('infoboxTable')[0];
16 this.infoboxSlots = new Array();
19 this.chunkScript = document.createElement('script');
20 this.chunkScript.type = 'text/javascript';
21 this.chunkScript.src = 'Metadata.js';
22 document.getElementsByTagName('body')[0].append(this.chunkScript);
23 this.chunkScript.addEventListener('load', () => {
24 ViewFrame.initInfobox(this.infobox, this.infoboxSlots);
25 this.x = ViewFrame.chunks.startCoords[0];
26 this.y = ViewFrame.chunks.startCoords[1];
27 this.availableChunks = ViewFrame.chunks.chunkMetadata;
33 // Tracks images that have been loaded and are on the map
34 this.loadedChunksByName = new Map();
35 // this is needed because [1, 2] != [1, 2] and thats how we store coords.
36 this.loadedChunksByCoords = new Map();
37 this.availableChunks = null; // the chunks in ./Metadata.js
38 // so that we dont render twice at the same time
39 this.rendering = false;
42 this.y = -1; // can be fractional
43 this.zoom = 32; // pixels wide the shards are to be
46 // prototypes, some less... notable? methods are
47 // in ViewFrameUtils.js
48 ViewFrame.prototype.reloadChunkList = function () {
49 if (this.chunkScript) {
50 this.chunkScript.remove();
51 delete this.chunkScript;
54 this.chunkScript = document.createElement('script');
55 this.chunkScript.type = 'text/javascript';
56 this.chunkScript.src = 'Metadata.js';
57 document.getElementsByTagName('body')[0].append(this.chunkScript);
59 this.chunkScript.addEventListener('load', () => {
60 this.availableChunks = ViewFrame.chunks.chunkMetadata;
65 ViewFrame.prototype.render = function () {
66 if (!this.availableChunks) return;
67 if (this.rendering) clearInterval(ViewFrame.intervalRef);
68 this.rendering = true;
70 this.map.clearRect(0, 0, window.innerWidth, window.innerHeight);
72 this.loadedChunksByCoords
73 .forEach((chunk, coord) => { // check the bounds
74 if (coord[0] < this.eastChunk &&
75 coord[0] >= this.westChunk &&
76 coord[1] <= this.northChunk &&
77 coord[1] >= this.southChunk) {
79 this.place(chunk, coord[0], coord[1]);
82 // its out of range!!!
84 this.loadedChunksByCoords.delete(coord);
85 this.loadedChunksByName.delete(coord.join('_'));
89 // gathering what we need to load
90 const neededChunks = new Set();
91 for (var x = this.westChunk; x < this.eastChunk; x++) {
92 for (var y = this.southChunk; y < this.northChunk; y++) {
93 const chunKey = [x, y]; // chunk + key = chunKey :)
94 const name = chunKey.join('_');
95 // continue if its not available, or it is loaded
96 if (!this.availableChunks.has(name) ||
97 this.loadedChunksByName.has(name)) continue;
98 neededChunks.add(chunKey);
101 // iterating over everything we need to load
102 const it = neededChunks.values();
103 ViewFrame.intervalRef = setInterval(() => {
104 let round = it.next();
107 const img = new Image(32, 32);
108 const name = round.value.join('_');
110 img.src = 'Chunks/' + name + '.png';
112 decode(img, loadedImage => {
113 this.place(img, round.value[0], round.value[1]);
115 this.loadedChunksByName.set(name, img);
116 this.loadedChunksByCoords.set(round.value, img);
118 clearInterval(ViewFrame.intervalRef);
119 this.rendering = false;
124 ViewFrame.prototype.place = function (img, x, y) {
130 y += this.height / 2;
132 this.map.drawImage(img, Math.floor(x), Math.floor(y), this.zoom, this.zoom);
135 ViewFrame.prototype.updateInfobox = function (chunkName) {
136 const chunkMeta = this.availableChunks.get(chunkName);
137 this.infoboxSlots.forEach((l, k) => {
138 l.innerText = chunkMeta ? chunkMeta[k] : '0';