Fix infinite bracket on genre with one artist

[brackets.git] / frontend / index.js

diff --git a/frontend/index.js b/frontend/index.js
index d49372f..d70de4f 100644 (file)
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -14,11 +14,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;
     }));
 }
 
@@ -76,7 +76,7 @@ const drawBranchFrom = (ctx, x, y, xDist, yDist, left, up) => {
 }
 
 const drawArtistOnCtx = (ctx, artistName, x, y) => {
-    ctx.font = "1em sans serif";
+    ctx.font = "20px sans serif";
     ctx.strokeText(artistName, x, y);
 }
 
@@ -124,17 +124,26 @@ const drawMatchup = (canvas, x, y, iter, maxIter, left, artists, baseCallback) =
     );
 }
 
-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.floor(Math.log2(artists.length / groups));
+    const rounds = Math.max(
+        Math.floor(Math.log2(artists.length / groups)),
+        1
+    );
     for (let group = 1; group <= groups; group++) {
             drawMatchup(
                 canvas,
-                mid_x + (Math.pow(-1, group) * (rect_width / 4)),
-                mid_y + (Math.pow(-1, Math.floor(group / 2)) * (rect_height * 2)),
+                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),
@@ -152,20 +161,22 @@ window.onload = () => {
     const canvas = document.getElementById("bracket");
 
     const formSubmitAction = () => {
-        fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
+        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)));
+        .then((data) => drawBracket(canvas, data.slice(0, 33), genreInput.value));
     }
 
+    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")
+        fetch("http://api.brackets.jacobcasper.com/genre")
             .then((response) => response.text())
             .then((text) => {
                 window.localStorage.setItem("genres", text);
@@ -181,21 +192,14 @@ 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, ['dummy', 'dummy', 'dum' ,'dumhy']);
+    drawBracket(canvas, ['dummy', 'dummy', 'dum' ,'dumhy'], "");
 
     const bgImg = new Image();
     bgImg.onload = () => {