| 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 | } |