projects
/
brackets.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
1ffe1db
)
Draw bracket with artist values
author
Jacob Casper
<dev@jacobcasper.com>
Sun, 19 Apr 2020 01:12:43 +0000
(20:12 -0500)
committer
Jacob Casper
<dev@jacobcasper.com>
Sun, 19 Apr 2020 01:12:43 +0000
(20:12 -0500)
frontend/index.js
patch
|
blob
|
blame
|
history
diff --git
a/frontend/index.js
b/frontend/index.js
index
e2c62bf
..
bd10105
100644
(file)
--- a/
frontend/index.js
+++ b/
frontend/index.js
@@
-63,7
+63,7
@@
const drawArtistOnCtx = (ctx, artistName, x, y) => ctx.strokeText(artistName, x,
* Draws paths to the terminal nodes of a round
* @param x, y the point representation of the start of the branch
*/
* Draws paths to the terminal nodes of a round
* @param x, y the point representation of the start of the branch
*/
-const drawMatchup = (canvas, x, y, iter, left) => {
+const drawMatchup = (canvas, x, y, iter, left
, artist1, artist2
) => {
const ctx = canvas.getContext("2d");
const [width, height] = getDimensions(canvas);
const ctx = canvas.getContext("2d");
const [width, height] = getDimensions(canvas);
@@
-74,21
+74,28
@@
const drawMatchup = (canvas, x, y, iter, left) => {
ctx.beginPath();
ctx.moveTo(x, y);
drawArtist(
ctx.beginPath();
ctx.moveTo(x, y);
drawArtist(
-
'test'
,
+
artist1["name"]
,
...drawBranchUp(width / iter, height / iter)
);
ctx.moveTo(x, y);
drawArtist(
...drawBranchUp(width / iter, height / iter)
);
ctx.moveTo(x, y);
drawArtist(
-
'test2'
,
+
artist2["name"]
,
...drawBranchDown(width / iter, height / iter)
);
ctx.stroke();
}
...drawBranchDown(width / iter, height / iter)
);
ctx.stroke();
}
-const drawBracket = (canvas,
...
artists) => {
+const drawBracket = (canvas, artists) => {
drawWinner(canvas);
const [mid_x, mid_y] = getCenter(canvas);
drawWinner(canvas);
const [mid_x, mid_y] = getCenter(canvas);
- drawMatchup(canvas, mid_x, mid_y, 2 * 3, -1);
+ const groups = 4;
+ const rounds = Math.log2(artists.length / groups);
+ for (let group = 1; group <= groups; group++) {
+ for (let round = 0; round < rounds; round++) {
+ const matchup = [artists.shift(), artists.pop()];
+ drawMatchup(canvas, mid_x, mid_y, 2 * round, Math.pow(-1, group), ...matchup);
+ }
+ }
}
window.onload = () => {
}
window.onload = () => {
@@
-121,8
+128,7
@@
window.onload = () => {
e.preventDefault();
fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
.then((response) => response.json())
e.preventDefault();
fetch(encodeURI(`http://localhost:8080/artist/genre?genre_name=${genreInput.value}`))
.then((response) => response.json())
- .then((data) => console.log(data));
- drawBracket(canvas, ...[])
+ .then((data) => drawBracket(canvas, data.slice(0, 33)));
});
genreInput.addEventListener("input", (e) => {
});
genreInput.addEventListener("input", (e) => {
@@
-141,7
+147,7
@@
window.onload = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
- drawBracket(canvas);
+ drawBracket(canvas
, []
);
const bgImg = new Image();
bgImg.onload = () => {
const bgImg = new Image();
bgImg.onload = () => {