Bracket Maker

From 98344134270d5ea2e986aebe8802e901018e8af6 Mon Sep 17 00:00:00 2001 From: Jacob Casper Date: Fri, 17 Apr 2020 23:09:21 -0500 Subject: [PATCH] Add webpage with canvas that can request artists, draw background --- frontend/index.css | 14 +++++ frontend/index.html | 24 +++++++++ frontend/index.js | 125 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 frontend/index.css create mode 100644 frontend/index.html create mode 100644 frontend/index.js diff --git a/frontend/index.css b/frontend/index.css new file mode 100644 index 0000000..c555dd0 --- /dev/null +++ b/frontend/index.css @@ -0,0 +1,14 @@ +ul { + position: absolute; + display: none; +} +li { + display: block; + background-color: white; +} +input#genre-submit { + display: none; +} +canvas { + border: 1px dashed black; +} diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..8b9b3cb --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,24 @@ + + + + + + + Bracket Maker + + + +

+ + + diff --git a/frontend/index.js b/frontend/index.js new file mode 100644 index 0000000..a76f407 --- /dev/null +++ b/frontend/index.js @@ -0,0 +1,125 @@ +const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + +const createGenreListWithClickEvent = (genreList, genres, callback) => { + genreList.append(...genres.map((genre) => { + const name = genre["name"]; + const li = document.createElement("li"); + li.setAttribute("data-name", name); + li.addEventListener("click", callback); + li.appendChild(document.createTextNode(name)); + return li; + })); +} + +const relativeToCtx = (x1, x2, y1, y2, ctx) => { + const newX = x1 + x2; + const newY = y1 + y2; + ctx.lineTo(newX, newY); + return [newX, newY]; +} + +const drawBracket = (canvas, ...artists) => { + const ctx = canvas.getContext("2d"); + const height = canvas.height; + const width = canvas.width; + const mid_x = width / 2; + const mid_y = height / 2; + const rect_width = width * .5; + const rect_height = height * .1; + ctx.strokeRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height); + ctx.clearRect(mid_x - rect_width / 2, mid_y - rect_height / 2, rect_width, rect_height); + + relativeTo = (x1, x2, y1, y2) => relativeToCtx(x1, x2, y1, y2, ctx); + let [x, y] = [mid_x, mid_y - rect_height / 2]; + ctx.beginPath(); + ctx.moveTo(mid_x, mid_y - rect_height / 2); + [x, y] = relativeTo(x, 0, y, -height * .2); + [x, y] = relativeTo(x, -width * .05, y, 0); + const [branch1x, branch1y] = [x, y]; + [x, y] = relativeTo(x, 0, y, -height * .05); + [x, y] = relativeTo(x, -width * .10, y, 0); + const [branch2x, branch2y] = [x, y]; + [x, y] = relativeTo(x, 0, y, -height * .05); + [x, y] = relativeTo(x, -width * .15, y, 0); + const [branch3x, branch3y] = [x, y]; + [x, y] = relativeTo(x, 0, y, -height * .05); + [x, y] = relativeTo(x, -width * .15, y, 0); + ctx.moveTo(branch3x, branch3y); + [x, y] = relativeTo(branch3x, 0, branch3y, height * .05); + [x, y] = relativeTo(x, -width * .15, y, 0); + ctx.stroke(); +} + +window.onload = () => { + const lStorage = window.localStorage; + const genreList = document.getElementById("genre-list"); + const genreInput = document.getElementById("genre-input"); + const genreForm = document.getElementById("genre-form"); + const canvas = document.getElementById("bracket"); + + const createGenreList = (genreList, genres) => { + return createGenreListWithClickEvent(genreList, genres, (e) => { + genreInput.value = e.target.innerText; + genreForm.requestSubmit(); + }) + } + let genres = JSON.parse(lStorage.getItem("genres")) + if (genres === null) { + fetch("http://localhost:8080/genre") + .then((response) => response.text()) + .then((text) => { + window.localStorage.setItem("genres", text); + genres = JSON.parse(text); + createGenreList(genreList, genres); + }); + } else { + createGenreList(genreList, genres); + } + + genreForm.addEventListener("submit", (e) => { + e.preventDefault(); + fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`)) + .then((response) => response.json()) + .then((data) => console.log(data)); + drawBracket(canvas, ...[]) + }); + + genreInput.addEventListener("input", (e) => { + const input = e.target; + for (const item of genreList.children) { + item.style.display = item.dataset.name.includes(input.value.toLowerCase()) ? "block" : "none"; + } + }); + genreInput.addEventListener("focus", (e) => { + genreList.style.display = "block"; + }); + genreInput.addEventListener("blur", (e) => { + sleep(150).then(() => genreList.style.display = "none"); + }); + + + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + 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, + 0, + (canvas.width / bgImg.width) * bgImg.width, + (canvas.height / bgImg.height) * bgImg.height + ); + } + + const upload = document.getElementById("image-upload"); + upload.addEventListener("change", (e) => { + bgImg.src = URL.createObjectURL(e.target.files[0]); + }); +} -- 2.20.1