build card flipping feature for ap

frontend-react/src/components/common/AbilityIcon.js

@@ -13,7 +13,7 @@ const mainAbilityStyle = {
   borderBottom: "0px",
   backgroundSize: "100%",
   boxShadow: "0 0 0 1px #000",
-  userSelect: "none"
+  userSelect: "none",
 }
 const subAbilityStyle = {
   //https://github.com/loadout-ink/splat2-calc
@@ -27,14 +27,14 @@ const subAbilityStyle = {
   borderBottom: "0px",
   backgroundSize: "100%",
   boxShadow: "0 0 0 1px #000",
-  userSelect: "none"
+  userSelect: "none",
 }
 
 const AbilityIcon = ({
   ability,
   size = "MAIN",
   style = {},
-  onClick = null
+  onClick = null,
 }) => {
   if (ability == null) return null
   return (

frontend-react/src/components/common/BuildAbilityView.js

@@ -0,0 +1,122 @@
+import React from "react"
+import { Image } from "semantic-ui-react"
+
+import english_internal from "../../utils/english_internal.json"
+import AbilityIcon from "./AbilityIcon"
+
+const BuildAbilityView = ({
+  build,
+  setHeadgear,
+  setClothing,
+  setShoes,
+  setAbilities,
+  existingAbilities,
+}) => {
+  function removeAbility(gearIndex, slotIndex) {
+    let copyOfArray = [...existingAbilities]
+    copyOfArray[gearIndex][slotIndex] = ""
+    setAbilities(copyOfArray)
+  }
+  const noItems = !build.headgearItem && !build.clothingItem && !build.shoesItem
+
+  return (
+    <>
+      <div style={{ marginTop: "1em" }}>
+        {build.headgearItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+              cursor: setHeadgear ? "pointer" : null,
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.headgearItem]
+            }.png`}
+            onClick={() => (setHeadgear ? setHeadgear("") : null)}
+          />
+        )}
+        <span style={{ marginLeft: !build.headgearItem && !noItems && "80px" }}>
+          {build.headgear.map((ability, index) => (
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+              style={{
+                margin: "0 0.3em 0 0",
+                cursor: setAbilities ? "pointer" : null,
+              }}
+              onClick={setAbilities ? () => removeAbility(0, index) : null}
+            />
+          ))}
+        </span>
+      </div>
+      <div
+        style={{
+          margin: build.clothingItem ? "0 0 0 0" : "0.5em 0 0.5em 0",
+        }}
+      >
+        {build.clothingItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+              cursor: setClothing ? "pointer" : null,
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.clothingItem]
+            }.png`}
+            onClick={() => (setClothing ? setClothing("") : null)}
+          />
+        )}
+        <span style={{ marginLeft: !build.clothingItem && !noItems && "80px" }}>
+          {build.clothing.map((ability, index) => (
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+              style={{
+                margin: "0 0.3em 0 0",
+                cursor: setAbilities ? "pointer" : null,
+              }}
+              onClick={setAbilities ? () => removeAbility(1, index) : null}
+            />
+          ))}
+        </span>
+      </div>
+      <>
+        {build.shoesItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+              cursor: setShoes ? "pointer" : null,
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.shoesItem]
+            }.png`}
+            onClick={() => (setShoes ? setShoes("") : null)}
+          />
+        )}
+        <span style={{ marginLeft: !build.shoesItem && !noItems && "80px" }}>
+          {build.shoes.map((ability, index) => (
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+              style={{
+                margin: "0 0.3em 0 0",
+                cursor: setAbilities ? "pointer" : null,
+              }}
+              onClick={setAbilities ? () => removeAbility(2, index) : null}
+            />
+          ))}
+        </span>
+      </>
+    </>
+  )
+}
+
+export default BuildAbilityView

frontend-react/src/components/common/BuildApView.js

@@ -0,0 +1,120 @@
+import React from "react"
+
+import english_internal from "../../utils/english_internal.json"
+import AbilityIcon from "./AbilityIcon"
+import { Image, Divider } from "semantic-ui-react"
+
+const BuildApView = ({ build }) => {
+  const abilityArrays = [build.headgear, build.clothing, build.shoes]
+  const mainOnlyAbilities = [
+    "CB",
+    "LDE",
+    "OG",
+    "T",
+    "H",
+    "NS",
+    "TI",
+    "RP",
+    "AD",
+    "DR",
+    "SJ",
+    "OS",
+  ]
+
+  const APObject = {}
+  abilityArrays.forEach(arr =>
+    arr.forEach((ability, index) => {
+      let abilityPoints = index === 0 ? 10 : 3
+      if (mainOnlyAbilities.indexOf(ability) !== -1) abilityPoints = 999
+      APObject[ability] = APObject.hasOwnProperty(ability)
+        ? APObject[ability] + abilityPoints
+        : abilityPoints
+    })
+  )
+
+  Object.keys(APObject).forEach(ability => {
+    const points = APObject[ability]
+
+    APObject.hasOwnProperty(points)
+      ? APObject[points].push(ability)
+      : (APObject[points] = [ability])
+  })
+
+  const APArray = Object.keys(APObject)
+    .filter(key => !isNaN(key))
+    .map(points => [points, APObject[points]])
+    .sort((a1, a2) => a2[0] - a1[0])
+
+  return (
+    <>
+      <div style={{ marginTop: "1em", paddingLeft: "2em" }}>
+        {build.headgearItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.headgearItem]
+            }.png`}
+          />
+        )}
+        {build.clothingItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.clothingItem]
+            }.png`}
+          />
+        )}
+        {build.shoesItem && (
+          <Image
+            style={{
+              width: "25%",
+              height: "auto",
+              marginRight: "1em",
+            }}
+            src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+              english_internal[build.shoesItem]
+            }.png`}
+          />
+        )}
+      </div>
+      <div style={{ marginTop: "1em", color: "black" }}>
+        {APArray.map((abilityPointArray, index) => {
+          return (
+            <div key={abilityPointArray[1]}>
+              <Divider horizontal fitted>
+                {abilityPointArray[0] === "999" ? (
+                  "MAIN ONLY"
+                ) : (
+                  <b>
+                    {abilityPointArray[0]}
+                    {index === 0 && " AP"}
+                  </b>
+                )}
+              </Divider>
+              <div style={{ margin: "0.5em 0 0.5em 0", lineHeight: "250%" }}>
+                {abilityPointArray[1].map(ability => (
+                  <AbilityIcon
+                    key={ability}
+                    ability={ability}
+                    size="SUB"
+                    style={{ marginRight: "0.5em" }}
+                  />
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
+export default BuildApView

frontend-react/src/components/common/BuildCard.js

@@ -1,13 +1,14 @@
 import React, { useState } from "react"
 import { Card, Image, Icon, Popup, Button } from "semantic-ui-react"
-import { Link } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 import english_internal from "../../utils/english_internal.json"
-import AbilityIcon from "./AbilityIcon"
 
 import { wpnMedium } from "../../assets/imageImports"
 import top500 from "../../assets/xleaderboardIcons/all.png"
 import BuildDeleteModal from "../user/BuildDeleteModal.js"
 import AddBuildForm from "../user/AddBuildForm.js"
+import BuildAbilityView from "./BuildAbilityView.js"
+import BuildApView from "./BuildApView.js"
 
 const BuildCard = ({
   build,
@@ -16,10 +17,16 @@ const BuildCard = ({
   removeBuildFunction,
   editBuildFunction,
   buildsArray,
+  setWeapon,
+  setHeadgear,
+  setClothing,
+  setShoes,
   showWeapon = true,
   showDescription = true,
 }) => {
   const [showEdit, setShowEdit] = useState(false)
+  const [apView, setApView] = useState(false)
+  const history = useHistory()
 
   if (showEdit) {
     return (
@@ -34,26 +41,27 @@ const BuildCard = ({
     )
   }
 
-  function removeAbility(gearIndex, slotIndex) {
-    let copyOfArray = [...existingAbilities]
-    copyOfArray[gearIndex][slotIndex] = ""
-    setAbilities(copyOfArray)
-  }
-
   const buildTitle =
     !build.title || build.title === "" ? `${build.weapon} Build` : build.title
   const buildDescription = !build.description ? "" : build.description
-  const noItems = !build.headgearItem && !build.clothingItem && !build.shoesItem
 
   return (
-    <Card raised style={{ overflowWrap: "break-word" }}>
+    <Card
+      raised
+      style={{ overflowWrap: "break-word", userSelect: "none" }}
+      onClick={setAbilities ? null : () => setApView(!apView)}
+    >
       {showWeapon && (
         <Card.Content textAlign="center">
           <Image
-            style={{ marginRight: "0.2em" }}
+            style={{
+              marginRight: "0.2em",
+              cursor: setWeapon ? "pointer" : null,
+            }}
             src={wpnMedium[english_internal[build.weapon]]}
             size="tiny"
             centered
+            onClick={() => (setWeapon ? setWeapon("") : null)}
           />
         </Card.Content>
       )}
@@ -69,10 +77,11 @@ const BuildCard = ({
           {buildTitle}
         </Card.Header>
         {build.discord_user && (
-          <Card.Meta>
-            <Link to={`/u/${build.discord_id}`} style={{ color: "#4183C4" }}>
-              {build.discord_user.username}#{build.discord_user.discriminator}
-            </Link>
+          <Card.Meta
+            onClick={() => history.push(`/u/${build.discord_id}`)}
+            style={{ color: "#4183C4" }}
+          >
+            {build.discord_user.username}#{build.discord_user.discriminator}
           </Card.Meta>
         )}
         {build.updatedAt && (
@@ -94,77 +103,18 @@ const BuildCard = ({
             )}
           </Card.Meta>
         )}
-        <div style={{ marginTop: "1em" }}>
-          {build.headgearItem && (
-            <Image
-              style={{ width: "25%", height: "auto", marginRight: "1em" }}
-              src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
-                english_internal[build.headgearItem]
-              }.png`}
-            />
-          )}
-          <span
-            style={{ marginLeft: !build.headgearItem && !noItems && "80px" }}
-          >
-            {build.headgear.map((ability, index) => (
-              <AbilityIcon
-                key={index}
-                ability={ability}
-                size={index === 0 ? "MAIN" : "SUB"}
-                style={{ margin: "0 0.3em 0 0" }}
-                onClick={setAbilities ? () => removeAbility(0, index) : null}
-              />
-            ))}
-          </span>
-        </div>
-        <div
-          style={{
-            margin: build.clothingItem ? "0 0 0 0" : "0.5em 0 0.5em 0",
-          }}
-        >
-          {build.clothingItem && (
-            <Image
-              style={{ width: "25%", height: "auto", marginRight: "1em" }}
-              src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
-                english_internal[build.clothingItem]
-              }.png`}
-            />
-          )}
-          <span
-            style={{ marginLeft: !build.clothingItem && !noItems && "80px" }}
-          >
-            {build.clothing.map((ability, index) => (
-              <AbilityIcon
-                key={index}
-                ability={ability}
-                size={index === 0 ? "MAIN" : "SUB"}
-                style={{ margin: "0 0.3em 0 0" }}
-                onClick={setAbilities ? () => removeAbility(1, index) : null}
-              />
-            ))}
-          </span>
-        </div>
-        <>
-          {build.shoesItem && (
-            <Image
-              style={{ width: "25%", height: "auto", marginRight: "1em" }}
-              src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
-                english_internal[build.shoesItem]
-              }.png`}
-            />
-          )}
-          <span style={{ marginLeft: !build.shoesItem && !noItems && "80px" }}>
-            {build.shoes.map((ability, index) => (
-              <AbilityIcon
-                key={index}
-                ability={ability}
-                size={index === 0 ? "MAIN" : "SUB"}
-                style={{ margin: "0 0.3em 0 0" }}
-                onClick={setAbilities ? () => removeAbility(2, index) : null}
-              />
-            ))}
-          </span>
-        </>
+        {apView ? (
+          <BuildApView build={build} />
+        ) : (
+          <BuildAbilityView
+            build={build}
+            setHeadgear={setHeadgear}
+            setClothing={setClothing}
+            setShoes={setShoes}
+            setAbilities={setAbilities}
+            existingAbilities={existingAbilities}
+          />
+        )}
       </Card.Content>
       {removeBuildFunction && (
         <Card.Content extra>

frontend-react/src/components/user/AddBuildForm.js

@@ -133,6 +133,10 @@ const AddBuildForm = ({
           existingAbilities={abilities}
           setAbilities={setAbilities}
           showDescription={false}
+          setWeapon={setWeapon}
+          setHeadgear={setHeadgear}
+          setClothing={setClothing}
+          setShoes={setShoes}
         />
       </div>
       <div style={{ paddingTop: "15px" }}>
@@ -142,8 +146,9 @@ const AddBuildForm = ({
         />
       </div>
       <Message>
-        <b>Tip!</b> You can automatically fill in the abilities by first
-        choosing a gear you used in the past with another build
+        <Message.Header>Tip!</Message.Header>You can automatically fill in the
+        abilities by first choosing a gear you used in the past with another
+        build
       </Message>
       <div style={{ paddingTop: "10px" }}>
         <AbilityButtons abilities={abilities} setAbilities={setAbilities} />