projects / brackets.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: fc4e364)
Add webpage with canvas that can request artists, draw background
authorJacob Casper <dev@jacobcasper.com>
Sat, 18 Apr 2020 04:09:21 +0000 (23:09 -0500)
committerJacob Casper <dev@jacobcasper.com>
Sat, 18 Apr 2020 04:09:21 +0000 (23:09 -0500)
frontend/index.css [new file with mode: 0644] patch | blob
frontend/index.html [new file with mode: 0644] patch | blob
frontend/index.js [new file with mode: 0644] patch | blob

diff --git a/frontend/index.css b/frontend/index.css
new file mode 100644 (file)
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 (file)
index 0000000..8b9b3cb
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <meta charset="UTF-8">
+    <script src="index.js"></script>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <head>
+        <title>Bracket Maker</title>
+    </head>
+    <body>
+        <form id="genre-form">
+            <input id="genre-input" 
+                   type="text"
+                   placeholder="Genre Name"
+                   autocomplete="off"/>
+            <input id="genre-submit"
+                   type="submit"/>
+        </form>
+        <ul id="genre-list"></ul>
+        <canvas id="bracket"></canvas> 
+        <input id="image-upload" 
+               type="file"
+               accept="image/*">
+    </body>
+</html>
diff --git a/frontend/index.js b/frontend/index.js
new file mode 100644 (file)
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]);
+    });
+}
Brackets for Instagram Stories