{"version":3,"file":"component---src-pages-overviews-slime-alchemist-tsx-5f4a38b259eb784df266.js","mappings":"4IASA,MAAMA,GAAiBC,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,oEASjBC,GAAMJ,EAAAA,EAAAA,GAAA,UAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,2EAsBZ,IARcE,IAAiC,IAAhC,SAAEC,EAAQ,MAAEC,GAAcF,EACvC,OACEG,EAAAA,EAAAA,GAACT,EAAiB,MAChBS,EAAAA,EAAAA,GAACJ,EAAM,CAACK,IAAKH,EAAUC,MAAOA,EAAOG,iBAAe,IAClC,C,uKCvBxB,MAAMH,EAAQ,kBAORI,EAAoB,CACxBC,SANe,CACf,CAAEL,MAAO,aAAcM,GAAI,cAC3B,CAAEN,MAAO,gBAAiBM,GAAI,kBAK9BC,QAAS,CACP,sBACAN,EAAAA,EAAAA,GAAA,KAAGO,KAAK,+DAA8D,+BAIxEC,KAAM,CAAC,oBACPC,MAAO,CAAC,QAAS,oBAAqB,aACtCC,cACEV,EAAAA,EAAAA,GAACW,EAAAA,EAAKC,SAAQ,CACZC,MACEb,EAAAA,EAAAA,GAACc,EAAAA,GAAa,CAACC,MAAO,CAAEC,MAAO,UAC7BhB,EAAAA,EAAAA,GAACiB,EAAAA,EAAK,CACJnB,SAAS,4CACTC,MAAM,0BAIZmB,MACElB,EAAAA,EAAAA,GAACmB,EAAAA,GAAiB,MAChBnB,EAAAA,EAAAA,GAACoB,EAAAA,EAAI,MACHpB,EAAAA,EAAAA,GAACqB,EAAAA,EAAW,CACVpB,IAAI,wCACJqB,IAAI,2eACJC,QAAQ,QAAOC,YAAAC,EAAA,aAuE7B,UA9DkBC,KAEd1B,EAAAA,EAAAA,GAAA2B,EAAAA,SAAA,MACE3B,EAAAA,EAAAA,GAAC4B,EAAAA,EAAM,MACL5B,EAAAA,EAAAA,GAAC6B,EAAAA,EAAc,CACbC,GAAG,UACHC,SACE/B,EAAAA,EAAAA,GAACgC,EAAAA,GAAY,CACXtC,KAAMK,EACNkC,SAAS,6BACTC,QAAS/B,MAIbH,EAAAA,EAAAA,GAACW,EAAAA,EAAKwB,EAAC,KAAC,gQAMRnC,EAAAA,EAAAA,GAACW,EAAAA,EAAKwB,EAAC,CAACpB,MAAO,CAAEqB,UAAW,SAAU,sQAMtCpC,EAAAA,EAAAA,GAACc,EAAAA,GAAa,CAACC,MAAO,CAAEqB,UAAW,QAAUC,QAAQ,iBACnDrC,EAAAA,EAAAA,GAACoB,EAAAA,EAAI,MACHpB,EAAAA,EAAAA,GAACqB,EAAAA,EAAW,CACVpB,IAAI,qCACJqB,IAAI,wkBAAukBE,YAAAC,EAAA,WAIjlBzB,EAAAA,EAAAA,GAACc,EAAAA,GAAa,CACZC,MAAO,CAAEqB,UAAW,QACpBC,QAAQ,kCAERrC,EAAAA,EAAAA,GAACoB,EAAAA,EAAI,MACHpB,EAAAA,EAAAA,GAACqB,EAAAA,EAAW,CACVpB,IAAI,8CACJqB,IAAI,u0BAAs0BE,YAAAC,EAAA,WAIh1BzB,EAAAA,EAAAA,GAACc,EAAAA,GAAa,CACZC,MAAO,CAAEqB,UAAW,QACpBC,QAAQ,qBAERrC,EAAAA,EAAAA,GAACoB,EAAAA,EAAI,MACHpB,EAAAA,EAAAA,GAACqB,EAAAA,EAAW,CACVpB,IAAI,kCACJqB,IAAI,iOAAgOE,YAAAC,EAAA,aAY7O,MAAMa,EAAeA,KAAMtC,EAAAA,EAAAA,GAACuC,EAAAA,EAAG,CAACxC,MAAOA,G","sources":["webpack://violeteris.com/./src/components/styling/Video.tsx","webpack://violeteris.com/./src/pages/overviews/slime-alchemist.tsx"],"sourcesContent":["import * as React from \"react\"\nimport styled from \"@emotion/styled\"\nimport { gs } from \"../../components/styling/GlobalStyles\"\n\ninterface Props {\n  videoSrc: string\n  title: string\n}\n\nconst DivVideoContainer = styled.div`\n  //@media all and (min-width: ${gs.size.screen.md}) {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  padding-top: 56.25%;\n  //}\n`\n\nconst Iframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  //@media all and (min-width: ${gs.size.screen.md}) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n\n  //margin-top: -32px;\n  //}\n`\n\nconst Video = ({ videoSrc, title }: Props) => {\n  return (\n    <DivVideoContainer>\n      <Iframe src={videoSrc} title={title} allowFullScreen />\n    </DivVideoContainer>\n  )\n}\n\nexport default Video\n","import * as React from \"react\"\nimport type { HeadFC } from \"gatsby\"\nimport Seo from \"../../components/Seo\"\nimport Layout from \"../../components/Layout\"\nimport { SectionWrapper, Node } from \"../../components/Sections\"\nimport { HeadingTitle } from \"../../components/styling/Heading\"\nimport BorderWrapper, {\n  MobileHideWrapper,\n} from \"../../components/styling/BorderWrapper\"\nimport { StaticImage } from \"gatsby-plugin-image\"\nimport Zoom from \"react-medium-image-zoom\"\nimport Video from \"../../components/styling/Video\"\n\nconst title = \"Slime Alchemist\"\n\nconst headings = [\n  { title: \"Wireframes\", id: \"Wireframes\" },\n  { title: \"Final Product\", id: \"Final-Product\" },\n]\n\nconst summmary: Summary = {\n  headings: headings,\n  details: [\n    \"2023 Steam Release\",\n    <a href=\"https://store.steampowered.com/app/2567800/Slime_Alchemist/\">\n      Slime Alchemist Steam Page\n    </a>,\n  ],\n  role: [\"UI / UX Designer\"],\n  tools: [\"Figma\", \"Affinity Designer\", \"Photoshop\"],\n  extraContent: (\n    <Node.multiCol\n      col1={\n        <BorderWrapper style={{ width: \"100%\" }}>\n          <Video\n            videoSrc=\"https://www.youtube.com/embed/Lke-ISNU-c8\"\n            title=\"YouTube video player\"\n          />\n        </BorderWrapper>\n      }\n      col2={\n        <MobileHideWrapper>\n          <Zoom>\n            <StaticImage\n              src=\"../../images/slime/CraftingMockup.jpg\"\n              alt=\"A mock up from Slime Alchemist showing the crafting screen. On the left and bottom side is a list of items, in the center is the main crafting section, and the right side is an expanded information section giving details of one of the cards. The mock up is depicting a 'Paladin card' being prepared to craft by sacrificing one other essence in the center crafting section. Currently a Berserker essence is highlighted showing a card pool of Leap Slap, Furious Rush, And Empowering Strike.\"\n              loading=\"eager\"\n            />\n          </Zoom>\n        </MobileHideWrapper>\n      }\n    />\n  ),\n}\n\nconst SlimePage = () => {\n  return (\n    <>\n      <Layout>\n        <SectionWrapper\n          as=\"article\"\n          heading={\n            <HeadingTitle\n              name={title}\n              subtitle=\"/overviews/slime-alchemist\"\n              summary={summmary}\n            />\n          }\n        >\n          <Node.p>\n            Slime Alchemist is a roguelike deckbuilder with turn-based tatical\n            combat that's currently in early access on steam! I had a lot of fun\n            working with a more playful style than my usual work and I'd love to\n            get another chance to work with the developer.\n          </Node.p>\n          <Node.p style={{ marginTop: \"10px\" }}>\n            I was brought on to this project to suggest some of the more\n            impactful UX improvements that the developer could make, as well as\n            create a some assets that fit with the existing style of the\n            project. Here's some of the work that I contributed to the project:\n          </Node.p>\n          <BorderWrapper style={{ marginTop: \"20px\" }} caption=\"HUD examples\">\n            <Zoom>\n              <StaticImage\n                src=\"../../images/slime/HUDExamples.png\"\n                alt=\"A series 6 different variations of the HUD, each representing different states in gameplay. The first 4 variations show how the 2 extra status bars (that are attached on the side of the main health bar shaped like a slime) toggle between filled and empty states. The 5th variation shows what one of the extra status bars look like when damage has been taken. The 6th variation shows the two locations inventory and buffs would appear separate from each other; inventory attached to the top of the slime, and buffs right under the health number in the middle of the main health bar.\"\n              />\n            </Zoom>\n          </BorderWrapper>\n          <BorderWrapper\n            style={{ marginTop: \"20px\" }}\n            caption=\"Essence highlighting workflow\"\n          >\n            <Zoom>\n              <StaticImage\n                src=\"../../images/slime/HighlightingWorkflow.png\"\n                alt=\"This image shows 5 frames of the main crafting menu to display how the highlighted essence section functions. There's 3 frams in a row above the last 2 in a row below. The first frame shows an empty highlighted essence section and the player clicking on an icon in the inventory. The second frame shows the clicked icon's additional details in the highlighted essence section, as the player clicks on the second icon in the inventory. The 3rd frame looks similar to the second, but with the details of the second icon now in the highlighted essence section. The 4th frame branches off from the 2nd frame and instead shows the player hovering one of the cards in the card pool, titled with the filler text 'lorem', of the highlighted 'Beserker' essence. The 5th frame shows the card lorem's art and details appearing below the card pool.\"\n              />\n            </Zoom>\n          </BorderWrapper>\n          <BorderWrapper\n            style={{ marginTop: \"20px\" }}\n            caption=\"Main menu mockup\"\n          >\n            <Zoom>\n              <StaticImage\n                src=\"../../images/slime/MainMenu.png\"\n                alt=\"A simple image showing the Slime Alchemist logo in the top left corner, and buttons in ordered list below it as placeholder menu items. The rest of the screen is blank, but would display a gameplay loop in the game itself.\"\n              />\n            </Zoom>\n          </BorderWrapper>\n        </SectionWrapper>\n      </Layout>\n    </>\n  )\n}\n\nexport default SlimePage\n\nexport const Head: HeadFC = () => <Seo title={title} />\n"],"names":["DivVideoContainer","_styled","target","name","styles","Iframe","_ref","videoSrc","title","___EmotionJSX","src","allowFullScreen","summmary","headings","id","details","href","role","tools","extraContent","Node","multiCol","col1","BorderWrapper","style","width","Video","col2","MobileHideWrapper","Zoom","StaticImage","alt","loading","__imageData","require","SlimePage","React","Layout","SectionWrapper","as","heading","HeadingTitle","subtitle","summary","p","marginTop","caption","Head","Seo"],"sourceRoot":""}