add submit handler to seed field with calendar data
This commit is contained in:
sorrelbri
parent
5d370bda47
commit
ed9fcbe57b
7 changed files with 41 additions and 15 deletions
1
dist/app.bundle.js
vendored
1
dist/app.bundle.js
vendored
File diff suppressed because one or more lines are too long
1
dist/index.html
vendored
1
dist/index.html
vendored
|
|
@ -1 +0,0 @@
|
||||||
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Game of Life</title></head><body><aside id="controls"><h1>Game of Life</h1></aside><main><canvas id="game-field" width="500" height="300"></canvas></main><script src="app.bundle.js"></script></body></html>
|
|
||||||
|
|
@ -31,6 +31,12 @@ const init = (gameField) => {
|
||||||
this.pause();
|
this.pause();
|
||||||
gameField = gameField.reset();
|
gameField = gameField.reset();
|
||||||
},
|
},
|
||||||
|
seed(weeks) {
|
||||||
|
if (weeks.length) {
|
||||||
|
gameField = gameField.seed(weeks);
|
||||||
|
console.log(gameField);
|
||||||
|
}
|
||||||
|
},
|
||||||
forward() {
|
forward() {
|
||||||
gameField.advance();
|
gameField.advance();
|
||||||
},
|
},
|
||||||
|
|
@ -83,7 +89,16 @@ const init = (gameField) => {
|
||||||
calendarFormEl.addEventListener("submit", (e) => {
|
calendarFormEl.addEventListener("submit", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const user = e.target[0].value;
|
const user = e.target[0].value;
|
||||||
console.log(getCalendar(user));
|
getCalendar(user)
|
||||||
|
.then((data) => {
|
||||||
|
return data.map((week) => {
|
||||||
|
return week.contributionDays.map((day) => day.contributionCount);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.then((weeks) => controls.seed(weeks))
|
||||||
|
.catch((e) => {
|
||||||
|
calendarFormEl.elements[0].value = "enter valid handle";
|
||||||
|
});
|
||||||
});
|
});
|
||||||
return controls;
|
return controls;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -8,21 +8,17 @@ canvas2D.fillStyle = "white";
|
||||||
const parseSeed = (seed) => {
|
const parseSeed = (seed) => {
|
||||||
if (seed && Array.isArray(seed)) {
|
if (seed && Array.isArray(seed)) {
|
||||||
return {
|
return {
|
||||||
fieldArray: [
|
fieldArray: seed,
|
||||||
[0, 1, 0],
|
|
||||||
[0, 0, 1],
|
|
||||||
[1, 1, 1],
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return seed;
|
return seed;
|
||||||
};
|
};
|
||||||
|
|
||||||
const fieldView = (seed) => {
|
const fieldView = (seed) => {
|
||||||
console.log(seed);
|
// console.log(seed);
|
||||||
seed = parseSeed(seed);
|
seed = parseSeed(seed);
|
||||||
// generateTable(true);
|
// // generateTable(true);
|
||||||
console.log(seed);
|
// console.log(seed);
|
||||||
const field = fieldStream(seed);
|
const field = fieldStream(seed);
|
||||||
const view = {
|
const view = {
|
||||||
draw(x, y) {
|
draw(x, y) {
|
||||||
|
|
@ -46,6 +42,10 @@ const fieldView = (seed) => {
|
||||||
newField.updateView();
|
newField.updateView();
|
||||||
return newField;
|
return newField;
|
||||||
},
|
},
|
||||||
|
seed(seed) {
|
||||||
|
console.log(seed);
|
||||||
|
return fieldView(seed);
|
||||||
|
},
|
||||||
advance() {
|
advance() {
|
||||||
this.field = this.field.next.next;
|
this.field = this.field.next.next;
|
||||||
this.updateView();
|
this.updateView();
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,6 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<form action="/" id="calendar-form">
|
<form action="/" id="calendar-form">
|
||||||
<input type="text" />
|
<input type="text" value="GitHub handle"/>
|
||||||
<input type="submit" value="seed" />
|
<input type="submit" value="seed" />
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
const token = process.env.GITHUB_API_TOKEN;
|
||||||
|
|
||||||
const query = (user) => `query {
|
const query = (user) => `query {
|
||||||
user (login: "${user}") {
|
user (login: "${user}") {
|
||||||
contributionsCollection {
|
contributionsCollection {
|
||||||
|
|
@ -17,6 +19,7 @@ const options = (user) => ({
|
||||||
method: "post",
|
method: "post",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `bearer ${token}`,
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
query: query(user),
|
query: query(user),
|
||||||
|
|
@ -24,9 +27,13 @@ const options = (user) => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const getCalendar = (user) => {
|
const getCalendar = (user) => {
|
||||||
// return fetch(`https://api.github.com/graphql`, options(user)).then((res) =>
|
return fetch(`https://api.github.com/graphql`, options(user))
|
||||||
// res.json()
|
.then((res) => res.json())
|
||||||
// );
|
.then(
|
||||||
|
(result) =>
|
||||||
|
result.data.user.contributionsCollection.contributionCalendar.weeks
|
||||||
|
)
|
||||||
|
.catch((e) => e);
|
||||||
};
|
};
|
||||||
|
|
||||||
class Stream {
|
class Stream {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||||
|
const { DefinePlugin } = require("webpack");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
|
|
@ -12,6 +13,11 @@ module.exports = {
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: "index.html",
|
template: "index.html",
|
||||||
}),
|
}),
|
||||||
|
new DefinePlugin({
|
||||||
|
"process.env.GITHUB_API_TOKEN": JSON.stringify(
|
||||||
|
process.env.GITHUB_API_TOKEN
|
||||||
|
),
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
filename: "[name].bundle.js",
|
filename: "[name].bundle.js",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue