feat: basic layout with timer and background

gatsby-browser.js

@@ -1,3 +1,5 @@
+import "./src/styles/global.css"
+
 /**
  * Implement Gatsby's Browser APIs in this file.
  *

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`,

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));
+

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": [

src/components/footer.js

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types"
+import React from "react"
+
+const Footer = () => (
+  <footer
+    style={{
+      background: `#2b8a9d`,
+      color: `#fff`,
+      padding: `2px 10px`,
+      textAlign: `center`
+    }}
+  >
+    © {new Date().getFullYear()}, Built with Love &hearts;
+  </footer>
+)
+
+export default Footer

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 }) => (
   <header
     style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
+      background: `#2b8a9d`,
     }}
   >
     <div
       style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
+        padding: `10px`,
+        display: 'flex',
+        justifyContent: 'space-between'
       }}
     >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+      <Link
+        to="/"
+        style={{
+          color: `white`,
+          textDecoration: `none`,
+          lineHeight: 1
+        }}
+      >
+        <img className="logo" src={Logo} alt="Logo" />
+      </Link>
+      {/* <div>
+          <Link><img className="header-icon" src={HomeIcon} alt="Home button" /></Link>
+          <img className="header-icon" src={ReloadIcon} alt="Refresh button" />
+      </div> */}
     </div>
   </header>
 )

src/components/layout.css

@@ -619,4 +619,4 @@ pre tt:after {
   html {
     font-size: 100%;
   }
-}
+}

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 (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
+      <Particles
+        className="particle-js"
+        height={"90%"}
         style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
+          position: 'absolute',
+          top: 50,
         }}
-      >
+        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"
+              }
+            }
+          }
+        }}
+      />
+      <div className="background">
         <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
       </div>
+      <Footer />
     </>
   )
 }

src/constants/config.js

@@ -0,0 +1,7 @@
+const NUMBER_OF_QUESTIONS = 10
+const TIME_FOR_EACH_QUESTION = 15
+
+export default {
+    NUMBER_OF_QUESTIONS,
+    TIME_FOR_EACH_QUESTION
+}