X-Git-Url: https://git.jacobcasper.com/?a=blobdiff_plain;f=frontend%2Findex.js;h=214f67933ac4f86286e1007b02e4b6c4b88dcceb;hb=HEAD;hp=3054ce3f12efca56b0cb76f48af160672802213e;hpb=01952c94b8e16ede7d94462a86122e2d1aa7c656;p=brackets.git

diff --git a/frontend/index.js b/frontend/index.js
index 3054ce3..214f679 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,5 +1,21 @@
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
+const getGenres = (lStorage) => {
+    return new Promise((resolve) => {
+        const genres = JSON.parse(lStorage.getItem("genres"))
+        if (genres === null) {
+            fetch("http://api.brackets.jacobcasper.com/genre")
+                .then((response) => response.text())
+                .then((text) => {
+                    lStorage.setItem("genres", text);
+                    resolve(JSON.parse(text));
+                })
+        } else {
+            resolve(genres);
+        }
+    });
+}
+
 /**
  * Safari iOS pls
  */
@@ -14,11 +30,11 @@ const formSubmitPolyfill = (form, callback) => {
 const createGenreListWithClickEvent = (genreList, genres, callback) => {
     genreList.append(...genres.map((genre) => {
         const name = genre["name"];
-        const li = document.createElement("li");
-        li.setAttribute("data-name", name);
-        li.addEventListener("click", callback);
-        li.appendChild(document.createTextNode(name));
-        return li;
+        const option = document.createElement("option");
+        option.setAttribute("data-name", name);
+        option.addEventListener("click", callback);
+        option.appendChild(document.createTextNode(name));
+        return option;
     }));
 }
 
@@ -39,6 +55,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.
  */
@@ -46,8 +69,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);
 }
@@ -65,47 +87,101 @@ const drawBranchFrom = (ctx, x, y, xDist, yDist, left, up) => {
     const newY = y + (yDist * up)
     ctx.lineTo(x, newY);
     ctx.lineTo(newX, newY);
+    ctx.stroke();
     return [newX, newY];
 }
 
-const drawArtistOnCtx = (ctx, artistName, x, y) => ctx.strokeText(artistName, x, y);
+const drawArtistOnCtx = (ctx, artistName, x, y) => {
+    ctx.font = "20px sans serif";
+    ctx.strokeText(artistName, x, y);
+}
 
 /**
  * Draws paths to the terminal nodes of a round
  * @param x, y the point representation of the start of the branch
+ * @param baseCallback a callback that needs the terminal x,y context
  */
-const drawMatchup = (canvas, x, y, iter, left, artist1, artist2) => {
+const drawMatchup = (canvas, x, y, iter, maxIter, left, artists, baseCallback) => {
+    if (iter === maxIter) {
+        return baseCallback(x, y);
+    }
     const ctx =  canvas.getContext("2d");
+    ctx.direction = left === -1 ? "ltr" : "rtl";
     const [width, height] = getDimensions(canvas);
 
-    const drawBranchUp = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, 1);
-    const drawBranchDown = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, -1);
+    const drawBranchUp = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, -1);
+    const drawBranchDown = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, 1);
     const drawArtist = (artistName, x, y) => drawArtistOnCtx(ctx, artistName, x, y);
+    const drawArtist1 = (x, y) => {
+        const artist1 = artists.shift();
+        if (!artist1) {
+            return;
+        }
+        drawArtist(artist1["name"], x, y);
+    }
+
+    const drawArtist2 = (x, y) => {
+        const artist2 = artists.pop();
+        if (!artist2) {
+            return;
+        }
+        drawArtist(artist2["name"], x, y);
+    }
 
     ctx.beginPath();
     ctx.moveTo(x, y);
-    drawArtist(
-        artist1["name"],
-        ...drawBranchUp(width / iter, height / iter)
+    const branchDistances = [width / (5 * (iter + 1)), height / (9 * (iter + 1))];
+    drawMatchup(
+        canvas,
+        ...drawBranchUp(...branchDistances),
+        iter + 1,
+        maxIter,
+        left,
+        artists,
+        drawArtist1,
     );
+
     ctx.moveTo(x, y);
-    drawArtist(
-        artist2["name"],
-        ...drawBranchDown(width / iter, height / iter)
+    drawMatchup(
+        canvas,
+        ...drawBranchDown(...branchDistances),
+        iter + 1,
+        maxIter,
+        left,
+        artists,
+        drawArtist2,
     );
-    ctx.stroke();
 }
 
-const drawBracket = (canvas, artists) => {
+const drawBracket = (canvas, artists, genre) => {
+    const context = canvas.getContext("2d");
+    context.clearRect(0, 0, canvas.width, canvas.height);
     drawWinner(canvas);
     const [mid_x, mid_y] = getCenter(canvas);
+    context.font = '28px sans serif'
+    context.textAlign = "center";
+    context.strokeText(genre.toUpperCase(), mid_x, 40);
+    context.textAlign = "start";
+    const [rect_width, rect_height] = getRectangleDimensions(canvas);
     const groups = 4;
-    const rounds = Math.log2(artists.length / groups);
+    const rounds = Math.max(
+        Math.floor(Math.log2(artists.length / groups)),
+        1
+    );
     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);
+        if (artists.length === 0) {
+            break;
         }
+            drawMatchup(
+                canvas,
+                mid_x + (Math.pow(-1, group) * (rect_width / 6)),
+                mid_y + (Math.pow(-1, Math.floor(group / 2)) * (rect_height * 2.5)),
+                0,
+                rounds,
+                Math.pow(-1, group),
+                artists,
+                (x, y) => console.log("hello")
+            );
     }
 }
 
@@ -116,29 +192,22 @@ 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 genreFormSubmitPolyfill = () => formSubmitPolyfill(genreList, formSubmitAction)
 
     const createGenreList = (genreList, genres) => {
         return createGenreListWithClickEvent(genreList, genres, (e) => {
             genreInput.value = e.target.innerText;
-            formSubmitPolyfill(genreForm, formSubmitAction);
+            genreFormSubmitPolyfill()
         })
     }
-    let genres = JSON.parse(lStorage.getItem("genres"))
-    if (genres === null) {
-        fetch("http://localhost:8080/genre")
-            .then((response) => response.text())
-            .then((text) => {
-                window.localStorage.setItem("genres", text);
-                genres = JSON.parse(text);
-                createGenreList(genreList, genres);
-            });
-    } else {
-        createGenreList(genreList, genres);
+
+    const genres = getGenres(lStorage)
+        .then((genres) => createGenreList(genreList, genres));
+
+    const formSubmitAction = () => {
+        fetch(encodeURI(`http://api.brackets.jacobcasper.com/artist/genre?genre_name=${genreInput.value}`))
+        .then((response) => response.json())
+        .then((data) => drawBracket(canvas, data.slice(0, 33), genreInput.value));
     }
 
     genreForm.addEventListener("submit", (e) => {
@@ -146,29 +215,18 @@ window.onload = () => {
         formSubmitAction()
     });
 
-    genreInput.addEventListener("input", (e) => {
-        const input = e.target;
-        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";
-    });
-    genreInput.addEventListener("blur", (e) => {
-        sleep(150).then(() => genreList.style.display = "none");
+    genreInput.addEventListener("change", (e) => {
+        genreFormSubmitPolyfill()
     });
 
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
-    drawBracket(canvas, []);
+    drawBracket(canvas, [], "");
 
     const bgImg = new Image();
     bgImg.onload = () => {
         const ctx = canvas.getContext("2d");
-        //ctx.mozImageSmoothingEnabled = false;
-        //ctx.webkitImageSmoothingEnabled = false;
-        //ctx.msImageSmoothingEnabled = false;
-        //ctx.imageSmoothingEnabled = false;
         ctx.drawImage(
             bgImg, 
             0,