Simplify genre retrieval with promise

[brackets.git] / frontend / index.js

diff --git a/frontend/index.js b/frontend/index.js
index 838b623..214f679 100644 (file)
--- 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
  */
@@ -96,8 +112,21 @@ const drawMatchup = (canvas, x, y, iter, maxIter, left, artists, baseCallback) =
     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) => drawArtist(artists.shift()["name"], x, y);
-    const drawArtist2 = (x, y) => drawArtist(artists.pop()["name"], 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);
@@ -135,8 +164,14 @@ const drawBracket = (canvas, artists, genre) => {
     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++) {
+        if (artists.length === 0) {
+            break;
+        }
             drawMatchup(
                 canvas,
                 mid_x + (Math.pow(-1, group) * (rect_width / 6)),
@@ -157,12 +192,6 @@ window.onload = () => {
     const genreForm = document.getElementById("genre-form");
     const canvas = document.getElementById("bracket");
 
-    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));
-    }
-
     const genreFormSubmitPolyfill = () => formSubmitPolyfill(genreList, formSubmitAction)
 
     const createGenreList = (genreList, genres) => {
@@ -171,17 +200,14 @@ window.onload = () => {
             genreFormSubmitPolyfill()
         })
     }
-    let genres = JSON.parse(lStorage.getItem("genres"))
-    if (genres === null) {
-        fetch("http://api.brackets.jacobcasper.com/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) => {
@@ -196,15 +222,11 @@ window.onload = () => {
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
-    drawBracket(canvas, ['dummy', 'dummy', 'dum' ,'dumhy'], "");
+    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,