From ca0397bfad5ebea795b31d54a0d7e1beaf16131f Mon Sep 17 00:00:00 2001 From: Anmol Varma Date: Sun, 29 Mar 2020 14:26:34 +0530 Subject: [PATCH] feat: basic layout with timer and background --- gatsby-browser.js | 2 + gatsby-config.js | 6 +- getTeamLogoMapping.js | 34 +++++++ package-lock.json | 21 +++++ package.json | 5 +- src/components/footer.js | 17 ++++ src/components/header.js | 36 ++++---- src/components/image.js | 32 ------- src/components/layout.css | 2 +- src/components/layout.js | 50 ++++++++-- src/constants/config.js | 7 ++ src/images/home.svg | 50 ++++++++++ src/images/logo.png | Bin 0 -> 4597 bytes src/images/refresh.svg | 41 ++++++++ src/images/reload.png | Bin 0 -> 2372 bytes src/jsons/players | 32 +++++++ src/jsons/team-logo.json | 180 ++++++++++++++++++++++++++++++++++++ src/jsons/transfer.json | 11 +++ src/pages/index.js | 109 +++++++++++++++++++--- src/pages/page-2.js | 16 ---- src/styles/global.css | 42 +++++++++ src/styles/index.module.css | 125 +++++++++++++++++++++++++ 22 files changed, 724 insertions(+), 94 deletions(-) create mode 100644 getTeamLogoMapping.js create mode 100644 src/components/footer.js delete mode 100644 src/components/image.js create mode 100644 src/constants/config.js create mode 100644 src/images/home.svg create mode 100644 src/images/logo.png create mode 100644 src/images/refresh.svg create mode 100644 src/images/reload.png create mode 100644 src/jsons/players create mode 100644 src/jsons/team-logo.json create mode 100644 src/jsons/transfer.json delete mode 100644 src/pages/page-2.js create mode 100644 src/styles/global.css create mode 100644 src/styles/index.module.css diff --git a/gatsby-browser.js b/gatsby-browser.js index b1e5c31..b705a5e 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,3 +1,5 @@ +import "./src/styles/global.css" + /** * Implement Gatsby's Browser APIs in this file. * diff --git a/gatsby-config.js b/gatsby-config.js index 999bd3d..5892477 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,8 +1,8 @@ module.exports = { siteMetadata: { - title: `Gatsby Default Starter`, - description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, - author: `@gatsbyjs`, + title: `QUIZZZES`, + description: `Take football transfer quizes, guess players based on the clubs they have been and beat your friends to show your true power!`, + author: `@anmol5varma`, }, plugins: [ `gatsby-plugin-react-helmet`, diff --git a/getTeamLogoMapping.js b/getTeamLogoMapping.js new file mode 100644 index 0000000..2659965 --- /dev/null +++ b/getTeamLogoMapping.js @@ -0,0 +1,34 @@ +// const axios = require('axios'); + +// const leagueId = [ +// 4328, // English Premier League +// 4331, // German Bundesliga +// 4332, // Italian Serie A +// 4334, // French Ligue 1 +// 4335, // Spanish La Liga +// 4344, // Portuguese Primeira Liga +// 4346, // American Major League Soccer +// 4351, // Brazilian Brasileirao +// 4359 // Chinese Super League +// ] + +// const API_KEY = 1 + +// Promise.all( +// leagueId.map(async lid => { +// const { data: { teams: teamList } } = await axios.get(`https://www.thesportsdb.com/api/v1/json/${API_KEY}/lookup_all_teams.php?id=${lid}`); +// return teamList.map(({ strTeam, strTeamBadge }) => ({ +// name: strTeam.toLowerCase(), +// logo: strTeamBadge +// })) +// }) +// ).then(parsedTeamList => console.log(JSON.stringify(Array.prototype.concat.apply([], parsedTeamList)))) + +const abc = require("./src/data/team-logo.json") + +const ans = {}; + +abc.map(({ name, logo }) => ans[name] = logo); + +console.log(JSON.stringify(ans)); + diff --git a/package-lock.json b/package-lock.json index 9440543..401ac75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12840,6 +12840,14 @@ "prop-types": "^15.6.2" } }, + "react-countdown-circle-timer": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-1.1.1.tgz", + "integrity": "sha512-wt9traVc4Dw4fFKNkXcgd7Ik6J8O8FnEEm8o+ttGGPenLz2EnakhWHB4z48h1WC07HJJDIOpTUnNtjwT12ihOQ==", + "requires": { + "use-elapsed-time": "^1.1.5" + } + }, "react-dev-utils": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-4.2.3.tgz", @@ -13138,6 +13146,14 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-particles-js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-2.7.1.tgz", + "integrity": "sha512-H3lnlcnc35HRismahWl8n/1IBNvP1u78r1YdS+QigDYwGkv4Bxqjdp3qLkQOkQnGLzaO5iu+Z4TWnyLVxOKPtA==", + "requires": { + "lodash": "^4.17.11" + } + }, "react-reconciler": { "version": "0.24.0", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.24.0.tgz", @@ -15752,6 +15768,11 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-elapsed-time": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/use-elapsed-time/-/use-elapsed-time-1.1.5.tgz", + "integrity": "sha512-GBi12dcko+IzRnxd9/3xd4SyZVK4z35Bs2heo1g6vOz/l7fo2cOdDUf8cjZP0blekrVAq7hnZxco5jnFcb6EFg==" + }, "utif": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz", diff --git a/package.json b/package.json index dac7673..181e487 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,13 @@ "gatsby-transformer-sharp": "^2.3.13", "prop-types": "^15.7.2", "react": "^16.12.0", + "react-countdown-circle-timer": "^1.1.1", "react-dom": "^16.12.0", - "react-helmet": "^5.2.1" + "react-helmet": "^5.2.1", + "react-particles-js": "^2.7.1" }, "devDependencies": { + "axios": "^0.19.2", "prettier": "^1.19.1" }, "keywords": [ diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 0000000..4364b32 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,17 @@ +import PropTypes from "prop-types" +import React from "react" + +const Footer = () => ( + +) + +export default Footer diff --git a/src/components/header.js b/src/components/header.js index 8990b7e..4c1e51b 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -2,31 +2,35 @@ import { Link } from "gatsby" import PropTypes from "prop-types" import React from "react" +import Logo from "../images/logo.png" + const Header = ({ siteTitle }) => (
-

- - {siteTitle} - -

+ + Logo + + {/*
+ Home button + Refresh button +
*/}
) diff --git a/src/components/image.js b/src/components/image.js deleted file mode 100644 index e61edb6..0000000 --- a/src/components/image.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import { useStaticQuery, graphql } from "gatsby" -import Img from "gatsby-image" - -/* - * This component is built using `gatsby-image` to automatically serve optimized - * images with lazy loading and reduced file sizes. The image is loaded using a - * `useStaticQuery`, which allows us to load the image from directly within this - * component, rather than having to pass the image data down from pages. - * - * For more information, see the docs: - * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ - */ - -const Image = () => { - const data = useStaticQuery(graphql` - query { - placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { - childImageSharp { - fluid(maxWidth: 300) { - ...GatsbyImageSharpFluid - } - } - } - } - `) - - return -} - -export default Image diff --git a/src/components/layout.css b/src/components/layout.css index b6f6332..bbb71f3 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -619,4 +619,4 @@ pre tt:after { html { font-size: 100%; } -} +} \ No newline at end of file diff --git a/src/components/layout.js b/src/components/layout.js index 0359ea6..9746035 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -8,8 +8,10 @@ import React from "react" import PropTypes from "prop-types" import { useStaticQuery, graphql } from "gatsby" +import Particles from 'react-particles-js'; import Header from "./header" +import Footer from "./footer" import "./layout.css" const Layout = ({ children }) => { @@ -26,20 +28,48 @@ const Layout = ({ children }) => { return ( <>
-
+ params={{ + particles: { + color: { + value: "#2b8a9d" + }, + size: { + value: "2" + }, + number: { + value: "150" + }, + line_linked: { + enable: { + auto: true + }, + distance: "150", + color: "#2b8a9d", + opacity: "0.4", + width: "1" + } + }, + interactivity: { + events: { + onhover: { + enable: true, + mode: "repulse" + } + } + } + }} + /> +
{children}
-
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
+