Add rectangle dimension helper

[brackets.git] / frontend / index.js

diff --git a/frontend/index.js b/frontend/index.js
index e2c62bf..84e3c6f 100644 (file)
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,5 +1,16 @@
 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"];
@@ -28,6 +39,13 @@ const getDimensions = (canvas) => [canvas.width, canvas.height];
  */
 const getCenter = (canvas) => getDimensions(canvas).map((dim) => dim / 2);
 
+const getRectangleDimensionsUnbound = (canvas, xScale, yScale) => {
+    [width, height] = getDimensions(canvas);
+    return [width * xScale, height * yScale];
+}
+
+const getRectangleDimensions = (canvas) => getRectangleDimensionsUnbound(canvas, .5, .1);
+
 /**
  * Draw champion box and clear background.
  */
@@ -35,8 +53,7 @@ const drawWinner = (canvas) => {
     const ctx = canvas.getContext("2d");
     const [width, height] = getDimensions(canvas);
     const [mid_x, mid_y] = getCenter(canvas);
-    const rect_width = width * .5;
-    const rect_height = height * .1;
+    const [rect_width, rect_height] = getRectangleDimensions(canvas);
     ctx.strokeRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height);
     ctx.clearRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height);
 }
@@ -63,7 +80,7 @@ const drawArtistOnCtx = (ctx, artistName, x, y) => ctx.strokeText(artistName, x,
  * 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);
 
@@ -74,21 +91,29 @@ const drawMatchup = (canvas, x, y, iter, left) => {
     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 [rect_width, rect_height] = getRectangleDimensions(canvas);
+    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 = () => {
@@ -98,10 +123,16 @@ 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"))
@@ -119,17 +150,12 @@ window.onload = () => {
 
     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";
@@ -141,7 +167,7 @@ window.onload = () => {
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
-    drawBracket(canvas);
+    drawBracket(canvas, []);
 
     const bgImg = new Image();
     bgImg.onload = () => {