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
114
115
116
117
118
119
120
121
122
123
|
/**
* Retrieves the width of the map.
* @returns {Promise<any>} A promise that resolves when the width is retrieved.
*/
const getMapWidth = async () => {
const res = await fetch("http://localhost:2707/mapWidth");
return res.json();
};
/**
* Fetches the bit at the specified index from the server.
* @param {number} i - The index of the bit to fetch.
* @returns {Promise} - A promise that resolves with the fetched bit.
*/
const getMapPiece = async (i) => {
const res = await fetch(`http://localhost:2707/piece/${i}`);
return res.json();
};
/**
* Creates a grid element with the specified map width.
* @param {number} mapWidth - The width of the map.
*/
function createGrid(mapWidth) {
const div = document.createElement("div");
div.id = "asyncGrid";
div.style.display = "grid";
div.style.gridTemplateColumns = `repeat(${mapWidth}, 1fr)`;
div.style.gridTemplateRows = `repeat(${mapWidth}, 1fr)`;
div.style.width = "fit-content";
div.style.height = "fit-content";
document.body.appendChild(div);
}
/**
* Displays an SVG element asynchronously at the specified coordinates.
*
* @param {string} svg - The SVG element to be displayed.
* @param {number} x - The x-coordinate of the grid cell where the SVG element will be displayed.
* @param {number} y - The y-coordinate of the grid cell where the SVG element will be displayed.
*/
async function displayPiece(svg, x, y) {
const svgElement = document.createElement("div");
svgElement.innerHTML = svg;
const width = svgElement.lastChild.getAttribute("width");
const height = svgElement.lastChild.getAttribute("height");
svgElement.style.width = `${width}px`;
svgElement.style.height = `${height}px`;
svgElement.style.gridColumn = x + 1;
svgElement.style.gridRow = y + 1;
svgElement.style.padding = 0;
svgElement.style.margin = 0;
document.getElementById("asyncGrid").appendChild(svgElement);
}
async function displayMap() {
// FIXME !
const startTime = Date.now();
const width = await getMapWidth();
createGrid(width);
const promises = new Array();
for (let i = 0; i < width * width; i++) {
promises.push(
getMapPiece(i).then(async (piece) => {
await displayPiece(piece.svg, piece.x, piece.y);
}),
);
}
await Promise.all(promises);
return Date.now() - startTime;
/*return new Promise((resolve, reject) => {
resolve(getMapWidth);
})
.then((width) => {
createGrid(width);
let promises = new Array();
for (let i = 0; i < width * width; i++) {
promises.push(
new Promise((resolve) => {
resolve(getMapPiece(i));
}).then((piece) => {
displayPiece(piece.svg, piece.x, piece.y);
}),
);
}
Promise.all(promises);
return Date.now() - startTime;
})
.catch((error) => error);*/
// don't forget you can use above functions to help you and also make your own
}
// Your code goes here, the html page will load your script and launch it
// Catch errors if you push your testing code so the Moulinette doesn't fail
displayMap()
.then((time) => {
console.log("displayed in " + time + " ms.");
})
.catch((error) => {
console.error(error);
});
// As always, we need to export the displayMap function for the tests.
// To avoid errors in browsers (where "module" is not defined),
// we wrap the exports inside a conditional check to ensure they
// are only assigned when the code is running in a Node.js environment.
if (typeof window === "undefined") {
module.exports = {
displayMap,
};
}
|
