build cards v1

react-ui/src/assets/imageImports.js

@@ -24,6 +24,7 @@ import T from "./abilityIcons/T.png"
 import TI from "./abilityIcons/TI.png"
 import OS from "./abilityIcons/OS.png"
 import AD from "./abilityIcons/AD.png"
+import UNKNOWN from "./abilityIcons/UNKNOWN.png"
 
 import szIcon from "./sz.png"
 import tcIcon from "./tc.png"
@@ -93,7 +94,9 @@ export const abilityIcons = {
   T: T,
   TI: TI,
   OS: OS,
-  AD: AD
+  AD: AD,
+  UNKNOWN: UNKNOWN,
+  "": UNKNOWN
 }
 
 export const abilitiesGameOrder = [

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

@@ -34,7 +34,7 @@ const AbilityIcon = ({
   style = {},
   onClick = null
 }) => {
-  if (!ability) return null
+  if (ability == null) return null
   return (
     <span style={style} onClick={onClick}>
       <img

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

@@ -1,7 +1,55 @@
-import React from "react"
+import React, { useState } from "react"
+import { Card, Grid, Image } from "semantic-ui-react"
+import english_internal from "../../utils/english_internal.json"
+import AbilityIcon from "./AbilityIcon"
 
-const BuildCard = () => {
-  return <>build card here</>
+import { wpnMedium } from "../../assets/imageImports"
+
+const BuildCard = ({
+  build,
+  existingAbilities,
+  setAbilities,
+  removeBuildFunction,
+  editBuildFunction
+}) => {
+  console.log("build", build)
+  return (
+    <Card raised>
+      <Card.Content textAlign="center">
+        <Image
+          style={{ marginRight: "0.2em" }}
+          src={wpnMedium[english_internal[build.weapon]]}
+          size="tiny"
+          centered
+        />
+      </Card.Content>
+      <Card.Content>
+        <Card.Header>{build.title}</Card.Header>
+        <Grid columns={4} style={{ marginTop: "1em" }}>
+          <Grid.Row>
+            <Grid.Column width={5}>
+              {build.headgearItem && (
+                <Image
+                  src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${
+                    english_internal[build.headgearItem]
+                  }.png`}
+                />
+              )}
+            </Grid.Column>
+            {build.headgear.map((ability, index) => (
+              <Grid.Column width={index === 0 ? 3 : 2}>
+                <AbilityIcon
+                  key={index}
+                  ability={ability}
+                  size={index === 0 ? "MAIN" : "SUB"}
+                />
+              </Grid.Column>
+            ))}
+          </Grid.Row>
+        </Grid>
+      </Card.Content>
+    </Card>
+  )
 }
 
 export default BuildCard

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

@@ -28,9 +28,9 @@ const AddBuildForm = ({
         ]
       : [["", "", "", ""], ["", "", "", ""], ["", "", "", ""]]
   )
-  const [head, setHead] = useState("")
-  const [clothes, setClothes] = useState("")
-  const [shoes, setShoes] = useState("")
+  const [headgearItem, setHeadgear] = useState("")
+  const [clothingItem, setClothing] = useState("")
+  const [shoesItem, setShoes] = useState("")
 
   const build = {
     id: existingBuild ? existingBuild.id : null,
@@ -38,7 +38,10 @@ const AddBuildForm = ({
     title,
     headgear: abilities[0],
     clothing: abilities[1],
-    shoes: abilities[2]
+    shoes: abilities[2],
+    headgearItem,
+    clothingItem,
+    shoesItem
   }
 
   const submit = async e => {
@@ -106,11 +109,11 @@ const AddBuildForm = ({
           <Form.Group widths="equal">
             <Form.Field>
               <label>Head gear</label>
-              <GearSearch slot="head" setGear={setHead} />
+              <GearSearch slot="head" setGear={setHeadgear} />
             </Form.Field>
             <Form.Field>
               <label>Clothes gear</label>
-              <GearSearch slot="clothes" setGear={setClothes} />
+              <GearSearch slot="clothes" setGear={setClothing} />
             </Form.Field>
             <Form.Field>
               <label>Shoes gear</label>

react-ui/src/components/user/BuildTab.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { useQuery, useMutation } from "@apollo/react-hooks"
-import { Button, Message } from "semantic-ui-react"
+import { Button, Message, Card } from "semantic-ui-react"
 
 import { addBuild } from "../../graphql/mutations/addBuild"
 import { searchForBuilds } from "../../graphql/queries/searchForBuilds"
@@ -123,21 +123,20 @@ const BuildTab = ({ user, userViewed }) => {
           </div>
         ) : null}
       </div>
-      <div style={{ paddingTop: "10px" }}>
+      <Card.Group style={{ marginTop: "0.8em" }}>
         {data.searchForBuilds.map(b => (
-          <div key={b.id} style={{ paddingTop: "10px" }}>
-            <BuildCard
-              build={b}
-              removeBuildFunction={removeBuildFunction}
-              editBuildFunction={editBuildFunction}
-              setSuccessMsg={setSuccessMsg}
-            />
-          </div>
+          <BuildCard
+            key={b.id}
+            build={b}
+            removeBuildFunction={removeBuildFunction}
+            editBuildFunction={editBuildFunction}
+            setSuccessMsg={setSuccessMsg}
+          />
         ))}
         {data.searchForBuilds.length === 0
           ? "So far this user has no builds!"
           : null}
-      </div>
+      </Card.Group>
     </div>
   )
 }