Commit | Line | Data |
---|---|---|
98344134 JC |
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 | } |