link to analyzer

frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx

@@ -1,9 +1,9 @@
 import { Box, FormLabel, Switch, Badge, Flex } from "@chakra-ui/core"
-import { RouteComponentProps } from "@reach/router"
+import { RouteComponentProps, useLocation } from "@reach/router"
 import React, { useState, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import useAbilityEffects from "../../hooks/useAbilityEffects"
-import { Build, Ability } from "../../types"
+import { Build, Ability, Weapon } from "../../types"
 import PageHeader from "../common/PageHeader"
 import WeaponSelector from "../common/WeaponSelector"
 import BuildStats from "./BuildStats"
@@ -20,7 +20,8 @@ const defaultBuild: Partial<Build> = {
 
 const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
   const { themeColor, grayWithShade } = useContext(MyThemeContext)
-  const [build, setBuild] = useState<Partial<Build>>(defaultBuild)
+  const location = useLocation()
+  const [build, setBuild] = useState<Partial<Build>>(getBuildFromUrl())
   const [otherBuild, setOtherBuild] = useState<Partial<Build>>(defaultBuild)
   const [showOther, setShowOther] = useState(false)
   const [showNotActualProgress, setShowNotActualProgress] = useState(false)
@@ -43,6 +44,26 @@ const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
     otherLde
   )
 
+  function getBuildFromUrl() {
+    const buildToReturn = { ...defaultBuild }
+    const decoded = new URLSearchParams(location.search)
+
+    for (const [key, value] of decoded) {
+      switch (key) {
+        case "weapon":
+          buildToReturn.weapon = value as Weapon
+          break
+        case "headgear":
+        case "clothing":
+        case "shoes":
+          const abilityKey = key as "headgear" | "clothing" | "shoes"
+          buildToReturn[abilityKey] = value.split(",") as any
+      }
+    }
+
+    return buildToReturn
+  }
+
   return (
     <>
       <Helmet>

frontend-react/src/components/builds/BuildCard.tsx

@@ -1,28 +1,26 @@
-import React, { useState, useContext, useEffect } from "react"
 import {
-  Image,
-  IconButton,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  Button,
   Box,
   BoxProps,
-  PseudoBox,
   Flex,
+  IconButton,
+  Image,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  PseudoBox,
 } from "@chakra-ui/core"
 import { Link } from "@reach/router"
-
-import WeaponImage from "../common/WeaponImage"
+import React, { useContext, useEffect, useState } from "react"
+import { FiBarChart2, FiEdit, FiInfo, FiTarget } from "react-icons/fi"
 import { top500 } from "../../assets/imageImports"
-import ViewSlots from "./ViewSlots"
-import ViewAP from "./ViewAP"
 import MyThemeContext from "../../themeContext"
 import { Build } from "../../types"
-import Gears from "./Gears"
-import { FiEdit, FiInfo, FiTarget, FiBarChart2 } from "react-icons/fi"
+import WeaponImage from "../common/WeaponImage"
 import BuildCardStats from "./BuildCardStats"
+import Gears from "./Gears"
+import ViewAP from "./ViewAP"
+import ViewSlots from "./ViewSlots"
 
 interface BuildCardProps {
   build: Build

frontend-react/src/components/builds/BuildCardStats.tsx

@@ -4,6 +4,9 @@ import { Build } from "../../types"
 import BuildStats from "../analyzer/BuildStats"
 import Modal from "../elements/Modal"
 import ViewSlots from "./ViewSlots"
+import Button from "../elements/Button"
+import { Link } from "@reach/router"
+import { RiTShirtAirLine } from "react-icons/ri"
 
 interface BuildCardStatsProps {
   build: Build
@@ -25,6 +28,15 @@ const BuildCardStats: React.FC<BuildCardStatsProps> = ({
     shoes: ["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"],
   }
   const zeroExplanations = useAbilityEffects(defaultBuild, unchangingBonus, 0)
+
+  const strippedBuild = {
+    weapon: build.weapon,
+    headgear: build.headgear,
+    clothing: build.clothing,
+    shoes: build.shoes,
+  }
+  const queryParam = new URLSearchParams(strippedBuild as any).toString()
+
   return (
     <Modal
       title={`Stats of ${build.weapon} build by ${
@@ -34,6 +46,11 @@ const BuildCardStats: React.FC<BuildCardStatsProps> = ({
       closeOnOutsideClick
     >
       <ViewSlots build={build} />
+      <Link to={`/analyzer?${queryParam}`}>
+        <Button icon={RiTShirtAirLine} outlined>
+          Show in build analyzer
+        </Button>
+      </Link>
       <BuildStats
         build={build}
         explanations={explanations}

frontend-react/src/components/elements/Modal.tsx

@@ -1,11 +1,10 @@
-import React, { useContext, RefObject } from "react"
-import MyThemeContext from "../../themeContext"
-import useBreakPoints from "../../hooks/useBreakPoints"
-import IconButton from "./IconButton"
-import { MdClose } from "react-icons/md"
-import { useEffect } from "react"
 import { Box, Flex } from "@chakra-ui/core"
+import React, { useContext, useEffect } from "react"
+import { MdClose } from "react-icons/md"
 import useOnClickOutside from "use-onclickoutside"
+import useBreakPoints from "../../hooks/useBreakPoints"
+import MyThemeContext from "../../themeContext"
+import IconButton from "./IconButton"
 
 interface ModalProps {
   title: string

frontend-react/tsconfig.json

@@ -13,6 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "downlevelIteration": true,
     "jsx": "react",
     "types": ["webpack-env"]
   },