frontend/index.js

   1 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
   2
   3 const createGenreListWithClickEvent = (genreList, genres, callback) => {
   4     genreList.append(...genres.map((genre) => {
   5         const name = genre["name"];
   6         const li = document.createElement("li");
   7         li.setAttribute("data-name", name);
   8         li.addEventListener("click", callback);
   9         li.appendChild(document.createTextNode(name));
  10         return li;
  11     }));
  12 }
  13
  14 const relativeToCtx = (x1, x2, y1, y2, ctx) => {
  15     const newX = x1 + x2;
  16     const newY = y1 + y2;
  17     ctx.lineTo(newX, newY);
  18     return [newX, newY];
  19 }
  20
  21 const drawBracket = (canvas, ...artists) => {
  22     const ctx = canvas.getContext("2d");
  23     const height = canvas.height;
  24     const width = canvas.width;
  25     const mid_x = width / 2;
  26     const mid_y = height / 2;
  27     const rect_width = width * .5;
  28     const rect_height = height * .1;
  29     ctx.strokeRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height);
  30     ctx.clearRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height);
  31
  32     relativeTo = (x1, x2, y1, y2) => relativeToCtx(x1, x2, y1, y2, ctx);
  33     let [x, y] = [mid_x, mid_y - rect_height / 2];
  34     ctx.beginPath();
  35     ctx.moveTo(mid_x, mid_y - rect_height / 2);
  36     [x, y] = relativeTo(x, 0, y, -height * .2);
  37     [x, y] = relativeTo(x, -width * .05, y, 0);
  38     const [branch1x, branch1y] = [x, y];
  39     [x, y] = relativeTo(x, 0, y, -height * .05);
  40     [x, y] = relativeTo(x, -width * .10, y, 0);
  41     const [branch2x, branch2y] = [x, y];
  42     [x, y] = relativeTo(x, 0, y, -height * .05);
  43     [x, y] = relativeTo(x, -width * .15, y, 0);
  44     const [branch3x, branch3y] = [x, y];
  45     [x, y] = relativeTo(x, 0, y, -height * .05);
  46     [x, y] = relativeTo(x, -width * .15, y, 0);
  47     ctx.moveTo(branch3x, branch3y);
  48     [x, y] = relativeTo(branch3x, 0, branch3y, height * .05);
  49     [x, y] = relativeTo(x, -width * .15, y, 0);
  50     ctx.stroke();
  51 }
  52
  53 window.onload = () => {
  54     const lStorage = window.localStorage;
  55     const genreList = document.getElementById("genre-list");
  56     const genreInput = document.getElementById("genre-input");
  57     const genreForm = document.getElementById("genre-form");
  58     const canvas = document.getElementById("bracket");
  59
  60     const createGenreList = (genreList, genres) => {
  61         return createGenreListWithClickEvent(genreList, genres, (e) => {
  62             genreInput.value = e.target.innerText;
  63             genreForm.requestSubmit();
  64         })
  65     }
  66     let genres = JSON.parse(lStorage.getItem("genres"))
  67     if (genres === null) {
  68         fetch("http://localhost:8080/genre")
  69             .then((response) => response.text())
  70             .then((text) => {
  71                 window.localStorage.setItem("genres", text);
  72                 genres = JSON.parse(text);
  73                 createGenreList(genreList, genres);
  74             });
  75     } else {
  76         createGenreList(genreList, genres);
  77     }
  78
  79     genreForm.addEventListener("submit", (e) => {
  80         e.preventDefault();
  81         fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
  82         .then((response) => response.json())
  83         .then((data) => console.log(data));
  84         drawBracket(canvas, ...[])
  85     });
  86
  87     genreInput.addEventListener("input", (e) => {
  88         const input = e.target;
  89         for (const item of genreList.children) {
  90             item.style.display = item.dataset.name.includes(input.value.toLowerCase()) ? "block" : "none";
  91         }
  92     });
  93     genreInput.addEventListener("focus", (e) => {
  94         genreList.style.display = "block";
  95     });
  96     genreInput.addEventListener("blur", (e) => {
  97         sleep(150).then(() => genreList.style.display = "none");
  98     });
  99
 100
 101     canvas.width = window.innerWidth;
 102     canvas.height = window.innerHeight;
 103     drawBracket(canvas);
 104
 105     const bgImg = new Image();
 106     bgImg.onload = () => {
 107         const ctx = canvas.getContext("2d");
 108         //ctx.mozImageSmoothingEnabled = false;
 109         //ctx.webkitImageSmoothingEnabled = false;
 110         //ctx.msImageSmoothingEnabled = false;
 111         //ctx.imageSmoothingEnabled = false;
 112         ctx.drawImage(
 113             bgImg,
 114             0,
 115             0,
 116             (canvas.width / bgImg.width) * bgImg.width,
 117             (canvas.height / bgImg.height) * bgImg.height
 118         );
 119     }
 120
 121     const upload = document.getElementById("image-upload");
 122     upload.addEventListener("change", (e) => {
 123         bgImg.src = URL.createObjectURL(e.target.files[0]);
 124     });
 125 }