diff --git a/frontend-react/src/components/common/AbilityIcon.js b/frontend-react/src/components/common/AbilityIcon.js index 364d7f721..1f4478755 100644 --- a/frontend-react/src/components/common/AbilityIcon.js +++ b/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 ( diff --git a/frontend-react/src/components/common/BuildAbilityView.js b/frontend-react/src/components/common/BuildAbilityView.js new file mode 100644 index 000000000..74b8bce87 --- /dev/null +++ b/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 ( + <> +
+ {build.headgearItem && ( + (setHeadgear ? setHeadgear("") : null)} + /> + )} + + {build.headgear.map((ability, index) => ( + removeAbility(0, index) : null} + /> + ))} + +
+
+ {build.clothingItem && ( + (setClothing ? setClothing("") : null)} + /> + )} + + {build.clothing.map((ability, index) => ( + removeAbility(1, index) : null} + /> + ))} + +
+ <> + {build.shoesItem && ( + (setShoes ? setShoes("") : null)} + /> + )} + + {build.shoes.map((ability, index) => ( + removeAbility(2, index) : null} + /> + ))} + + + + ) +} + +export default BuildAbilityView diff --git a/frontend-react/src/components/common/BuildApView.js b/frontend-react/src/components/common/BuildApView.js new file mode 100644 index 000000000..beda3ab68 --- /dev/null +++ b/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 ( + <> +
+ {build.headgearItem && ( + + )} + {build.clothingItem && ( + + )} + {build.shoesItem && ( + + )} +
+
+ {APArray.map((abilityPointArray, index) => { + return ( +
+ + {abilityPointArray[0] === "999" ? ( + "MAIN ONLY" + ) : ( + + {abilityPointArray[0]} + {index === 0 && " AP"} + + )} + +
+ {abilityPointArray[1].map(ability => ( + + ))} +
+
+ ) + })} +
+ + ) +} + +export default BuildApView diff --git a/frontend-react/src/components/common/BuildCard.js b/frontend-react/src/components/common/BuildCard.js index 4049bef87..850496fb3 100644 --- a/frontend-react/src/components/common/BuildCard.js +++ b/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 ( - + setApView(!apView)} + > {showWeapon && ( (setWeapon ? setWeapon("") : null)} /> )} @@ -69,10 +77,11 @@ const BuildCard = ({ {buildTitle} {build.discord_user && ( - - - {build.discord_user.username}#{build.discord_user.discriminator} - + history.push(`/u/${build.discord_id}`)} + style={{ color: "#4183C4" }} + > + {build.discord_user.username}#{build.discord_user.discriminator} )} {build.updatedAt && ( @@ -94,77 +103,18 @@ const BuildCard = ({ )} )} -
- {build.headgearItem && ( - - )} - - {build.headgear.map((ability, index) => ( - removeAbility(0, index) : null} - /> - ))} - -
-
- {build.clothingItem && ( - - )} - - {build.clothing.map((ability, index) => ( - removeAbility(1, index) : null} - /> - ))} - -
- <> - {build.shoesItem && ( - - )} - - {build.shoes.map((ability, index) => ( - removeAbility(2, index) : null} - /> - ))} - - + {apView ? ( + + ) : ( + + )} {removeBuildFunction && ( diff --git a/frontend-react/src/components/user/AddBuildForm.js b/frontend-react/src/components/user/AddBuildForm.js index c82c4542f..ca2a5e0d1 100644 --- a/frontend-react/src/components/user/AddBuildForm.js +++ b/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} />
@@ -142,8 +146,9 @@ const AddBuildForm = ({ />
- Tip! You can automatically fill in the abilities by first - choosing a gear you used in the past with another build + Tip!You can automatically fill in the + abilities by first choosing a gear you used in the past with another + build