Check artist data before drawing
[brackets.git] / frontend / index.js
index 838b623..8446219 100644 (file)
@@ -96,8 +96,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 +148,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)),
@@ -196,7 +215,7 @@ window.onload = () => {
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
-    drawBracket(canvas, ['dummy', 'dummy', 'dum' ,'dumhy'], "");
+    drawBracket(canvas, [], "");
 
     const bgImg = new Image();
     bgImg.onload = () => {