component---src-pages-games-changeincharge-js-f22afdcd8452e16fc683.js.map

{"version":3,"file":"component---src-pages-games-changeincharge-js-f22afdcd8452e16fc683.js","mappings":"qMAMe,SAASA,EAAUC,GAChC,OAA8BC,EAAAA,EAAAA,UAAS,GAAhCC,EAAP,KAAgBC,EAAhB,KAyBA,OAvBAC,EAAAA,EAAAA,YACE,WACE,IAAMC,EAAQC,YAAW,WACvBH,GAAW,SAACI,GAAD,OAAYA,EAAQ,GAAKP,EAAMQ,OAAOC,MAAtC,GACZ,GATO,KAUR,OAAO,WACLC,aAAaL,EACd,CACF,GAAE,CAACH,KAGNE,EAAAA,EAAAA,YACE,WACEO,SAASC,eAAe,YAAYC,SAClC,CACEC,KAAMH,SAASC,eAAeZ,EAAMQ,OAAON,GAASa,IAAIC,IAAIC,aAAef,EAC3EgB,IAAK,EACLC,SAAU,UAGf,GAAE,CAACjB,IAIJ,2BAASkB,UC3BU,sCD4BjB,gBAAC,EAAAC,EAAD,CACEC,MAAOtB,EAAMQ,OAAON,GAASa,IAAIQ,gBAAgBC,gBACjDC,IAAKzB,EAAMQ,OAAON,GAASuB,IAC3BL,UChCmB,yCDiCnBM,SAAU,CAACC,UAAW,gBAExB,uBAAKP,UCtCoB,8CDuCzB,sBAAIA,UCxCY,oCDwCgBJ,GAAG,YAE7BhB,EAAMQ,OAAOoB,KAAI,SAACC,EAAYtB,GAC5B,OACE,sBACEuB,IAAKD,EAAWd,IAAIC,GACpBA,GAAIa,EAAWd,IAAIC,GACnBe,QAAS,kBAAM5B,EAAWI,EAAjB,GAET,gBAAC,EAAAc,EAAD,CACEC,MAAOO,EAAWd,IAAIQ,gBAAgBC,gBACtCC,IAAKI,EAAWJ,IAChBL,UAAWb,IAAUL,ECjDT,8CADT,qCDmDHwB,SAAU,CAACC,UAAW,gBAI7B,MAMZ,CE3Dc,SAASK,EAAWhC,GACjC,OACE,2BACE,8BACE,gBAAC,EAAAqB,EAAD,CACED,UCTU,mCDUVE,MAAOtB,EAAMiC,KAAKC,OAAOX,gBAAgBC,mBAG7C,wBAAMJ,UCZM,kCDaV,2BACE,0BAAQA,UCRC,mCDSP,0BAAKpB,EAAMiC,KAAKE,OAChB,yBAAInC,EAAMiC,KAAKG,WAEjB,2BAAShB,UChBM,yCDiBb,yBAAIpB,EAAMiC,KAAKI,YAEjB,2BACEjB,UClBa,wCDmBbkB,MAAO,CAACC,gBAAiBvC,EAAMiC,KAAKO,YAElC,gBAAC,EAAD,CAAWhC,OAAQR,EAAMiC,KAAKQ,gBAGpC,yBACErB,UCxBQ,iCDyBRkB,MAAO,CAACC,gBAAiBvC,EAAMiC,KAAKS,eAEpC,2BACE,0BAAK1C,EAAMiC,KAAKU,MAChB,0BAEI3C,EAAMiC,KAAKW,QAAQhB,KAAI,SAAAiB,GAAM,OAC3B,sBAAIf,IAAKe,EAAOC,MACd,0BAAKD,EAAOC,MACZ,yBAAID,EAAOE,MAHc,QAa5C,C,0IE7Cc,SAASC,EAAehD,GACrC,IAAMiC,EAAOjC,EAAMiD,KAAKC,mBACxB,OACE,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAYjB,KAAMA,IAGvB,CAiCM,SAASkB,IACd,OACE,gBAAC,IAAD,CAAKhB,MAAM,oBAEd,C","sources":["webpack://gatsby-starter-hello-world/./src/components/Slideshow.js","webpack://gatsby-starter-hello-world/./src/styles/slideshow.module.css","webpack://gatsby-starter-hello-world/./src/components/Game-Detail.js","webpack://gatsby-starter-hello-world/./src/styles/gamedetail.module.css","webpack://gatsby-starter-hello-world/./src/pages/games/changeincharge.js"],"sourcesContent":["import React, {useEffect, useState} from \"react\";\r\nimport { GatsbyImage } from \"gatsby-plugin-image\";\r\nimport * as styles from \"../styles/slideshow.module.css\"\r\n\r\nconst DELAY = 5000;\r\n\r\nexport default function Slideshow(props) {\r\n  const [mainPic, setMainPic] = useState(0);\r\n  \r\n  useEffect(\r\n    () => {\r\n      const timer = setTimeout(() => {\r\n        setMainPic((index) => (index + 1) % props.images.length);\r\n      }, DELAY)\r\n      return () => {\r\n        clearTimeout(timer);\r\n      };\r\n    }, [mainPic]\r\n  )\r\n\r\n  useEffect(\r\n    () => {\r\n      document.getElementById(\"carousel\").scrollTo(\r\n        {\r\n          left: document.getElementById(props.images[mainPic].img.id).scrollHeight * mainPic,\r\n          top: 0,\r\n          behavior: \"smooth\"\r\n        }\r\n      ) \r\n    }, [mainPic]\r\n  )\r\n  \r\n  return (\r\n    <section className={styles.Slideshow}>\r\n      <GatsbyImage\r\n        image={props.images[mainPic].img.childImageSharp.gatsbyImageData}\r\n        alt={props.images[mainPic].alt}\r\n        className={styles.MainContainer}\r\n        imgStyle={{objectFit: \"scale-down\"}}\r\n      />\r\n      <div className={styles.CarouselContainer}>\r\n      <ul className={styles.Carousel} id=\"carousel\">\r\n          {\r\n            props.images.map((screenshot, index) => {\r\n              return (\r\n                <li \r\n                  key={screenshot.img.id}\r\n                  id={screenshot.img.id}\r\n                  onClick={() => setMainPic(index)}\r\n                >\r\n                  <GatsbyImage\r\n                    image={screenshot.img.childImageSharp.gatsbyImageData}\r\n                    alt={screenshot.alt}\r\n                    className={index === mainPic ? styles.ContainerHighlight : styles.Container}\r\n                    imgStyle={{objectFit: \"scale-down\"}}\r\n                  />\r\n                </li>\r\n              )\r\n            })\r\n          }\r\n      </ul>\r\n      </div>\r\n    </section>\r\n  )\r\n}","// extracted by mini-css-extract-plugin\nexport var Carousel = \"slideshow-module--Carousel--ZOVmB\";\nexport var CarouselContainer = \"slideshow-module--CarouselContainer--+iqAk\";\nexport var Container = \"slideshow-module--Container--t1k-r\";\nexport var ContainerHighlight = \"slideshow-module--ContainerHighlight--fvuzw\";\nexport var MainContainer = \"slideshow-module--MainContainer--zL-sG\";\nexport var Slideshow = \"slideshow-module--Slideshow--v-Ved\";","import { GatsbyImage } from \"gatsby-plugin-image\";\r\nimport React from \"react\";\r\nimport * as styles from \"../styles/gamedetail.module.css\";\r\nimport Slideshow from \"./Slideshow\";\r\n\r\nexport default function GameDetail(props) {\r\n  return (\r\n    <div>\r\n      <header>\r\n        <GatsbyImage\r\n          className={styles.Banner}\r\n          image={props.game.banner.childImageSharp.gatsbyImageData}\r\n        />\r\n      </header>\r\n      <main className={styles.Body}>\r\n        <div>\r\n          <header className={styles.Title}>\r\n            <h1>{props.game.title}</h1>\r\n            <p>{props.game.sentence}</p>\r\n          </header>\r\n          <section className={styles.Description}>\r\n            <p>{props.game.paragraph}</p>\r\n          </section>\r\n          <section \r\n            className={styles.Screenshots}\r\n            style={{backgroundColor: props.game.mainColor}}\r\n          >\r\n              <Slideshow images={props.game.screenshots} />\r\n          </section>\r\n        </div>\r\n        <aside \r\n          className={styles.Team}\r\n          style={{backgroundColor: props.game.sidebarColor}}\r\n        >\r\n          <div>\r\n            <h2>{props.game.team}</h2>\r\n            <ul>\r\n              {\r\n                props.game.members.map(member => (\r\n                  <li key={member.name}>\r\n                    <h3>{member.name}</h3>\r\n                    <p>{member.role}</p>\r\n                  </li>\r\n                ))\r\n              }\r\n            </ul>\r\n          </div>\r\n        </aside>\r\n      </main>\r\n    </div>\r\n  )\r\n}","// extracted by mini-css-extract-plugin\nexport var Banner = \"gamedetail-module--Banner--GItFh\";\nexport var Body = \"gamedetail-module--Body--Eaedq\";\nexport var Container = \"gamedetail-module--Container--oLXj3\";\nexport var Description = \"gamedetail-module--Description--lgabr\";\nexport var Img = \"gamedetail-module--Img--sp0Dt\";\nexport var Screenshots = \"gamedetail-module--Screenshots--h5OFm\";\nexport var Team = \"gamedetail-module--Team--T1HTN\";\nexport var Title = \"gamedetail-module--Title--9J6ij\";","import { graphql } from \"gatsby\";\r\nimport React from \"react\";\r\nimport GameDetail from \"../../components/Game-Detail\";\r\nimport Layout from \"../../components/Layout\";\r\nimport { SEO } from \"../../components/Seo\";\r\n\r\nexport default function ChangeInCharge(props) {\r\n  const game = props.data.changeinchargeJson;\r\n  return (\r\n    <Layout>\r\n      <GameDetail game={game} />\r\n    </Layout>\r\n  )\r\n}\r\n\r\nexport const query = graphql`\r\n  query ChangeInCharge {\r\n    changeinchargeJson {\r\n      title\r\n      team\r\n      sentence\r\n      paragraph\r\n      banner {\r\n        childImageSharp {\r\n          gatsbyImageData\r\n        }\r\n      }\r\n      screenshots {\r\n        img {\r\n          childImageSharp {\r\n            gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)\r\n          }\r\n          id\r\n        }\r\n        alt\r\n      }\r\n      members {\r\n        name\r\n        role\r\n      }\r\n      mainColor\r\n      sidebarColor\r\n    }\r\n  }\r\n`\r\n\r\nexport function Head() {\r\n  return (\r\n    <SEO title=\"Change in Charge\" />\r\n  )\r\n}"],"names":["Slideshow","props","useState","mainPic","setMainPic","useEffect","timer","setTimeout","index","images","length","clearTimeout","document","getElementById","scrollTo","left","img","id","scrollHeight","top","behavior","className","G","image","childImageSharp","gatsbyImageData","alt","imgStyle","objectFit","map","screenshot","key","onClick","GameDetail","game","banner","title","sentence","paragraph","style","backgroundColor","mainColor","screenshots","sidebarColor","team","members","member","name","role","ChangeInCharge","data","changeinchargeJson","Head"],"sourceRoot":""}