const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+/**
+ * Safari iOS pls
+ */
+const formSubmitPolyfill = (form, callback) => {
+ if (form.requestSubmit) {
+ form.requestSubmit();
+ } else {
+ callback();
+ }
+}
+
const createGenreListWithClickEvent = (genreList, genres, callback) => {
genreList.append(...genres.map((genre) => {
const name = genre["name"];
* Draws paths to the terminal nodes of a round
* @param x, y the point representation of the start of the branch
*/
-const drawMatchup = (canvas, x, y, iter, left) => {
+const drawMatchup = (canvas, x, y, iter, left, artist1, artist2) => {
const ctx = canvas.getContext("2d");
const [width, height] = getDimensions(canvas);
ctx.beginPath();
ctx.moveTo(x, y);
drawArtist(
- 'test',
+ artist1["name"],
...drawBranchUp(width / iter, height / iter)
);
ctx.moveTo(x, y);
drawArtist(
- 'test2',
+ artist2["name"],
...drawBranchDown(width / iter, height / iter)
);
ctx.stroke();
}
-const drawBracket = (canvas, ...artists) => {
+const drawBracket = (canvas, artists) => {
drawWinner(canvas);
const [mid_x, mid_y] = getCenter(canvas);
- drawMatchup(canvas, mid_x, mid_y, 2 * 3, -1);
+ const groups = 4;
+ const rounds = Math.log2(artists.length / groups);
+ for (let group = 1; group <= groups; group++) {
+ for (let round = 0; round < rounds; round++) {
+ const matchup = [artists.shift(), artists.pop()];
+ drawMatchup(canvas, mid_x, mid_y, 2 * round, Math.pow(-1, group), ...matchup);
+ }
+ }
}
window.onload = () => {
const genreForm = document.getElementById("genre-form");
const canvas = document.getElementById("bracket");
+ const formSubmitAction = () => {
+ fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
+ .then((response) => response.json())
+ .then((data) => drawBracket(canvas, data.slice(0, 33)));
+ }
+
const createGenreList = (genreList, genres) => {
return createGenreListWithClickEvent(genreList, genres, (e) => {
genreInput.value = e.target.innerText;
- genreForm.requestSubmit();
+ formSubmitPolyfill(genreForm, formSubmitAction);
})
}
let genres = JSON.parse(lStorage.getItem("genres"))
genreForm.addEventListener("submit", (e) => {
e.preventDefault();
- fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
- .then((response) => response.json())
- .then((data) => console.log(data));
- drawBracket(canvas, ...[])
+ formSubmitAction()
});
genreInput.addEventListener("input", (e) => {
const input = e.target;
- for (const item of genreList.children) {
- item.style.display = item.dataset.name.includes(input.value.toLowerCase()) ? "block" : "none";
- }
+ Array.from(genreList.children).forEach((item) => item.style.display= item.dataset.name.includes(input.value.toLowerCase()) ? "block" : "none");
});
genreInput.addEventListener("focus", (e) => {
genreList.style.display = "block";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
- drawBracket(canvas);
+ drawBracket(canvas, []);
const bgImg = new Image();
bgImg.onload = () => {