From 4717d7791ecc9ea77860cabe3dd5375a636d1899 Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Thu, 7 Nov 2019 21:34:15 +0200
Subject: [PATCH] build cards v1

---
 react-ui/src/assets/abilityIcons/UNKNOWN.png  | Bin 0 -> 2215 bytes
 react-ui/src/assets/imageImports.js           |   5 +-
 react-ui/src/components/common/AbilityIcon.js |   2 +-
 react-ui/src/components/common/BuildCard.js   |  54 +++++++++++++++++-
 react-ui/src/components/user/AddBuildForm.js  |  15 +++--
 react-ui/src/components/user/BuildTab.js      |  21 ++++---
 6 files changed, 75 insertions(+), 22 deletions(-)
 create mode 100644 react-ui/src/assets/abilityIcons/UNKNOWN.png

diff --git a/react-ui/src/assets/abilityIcons/UNKNOWN.png b/react-ui/src/assets/abilityIcons/UNKNOWN.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d543e5e550bfd51b83b698ece8f7db99102e813
GIT binary patch
literal 2215
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

literal 0
HcmV?d00001

diff --git a/react-ui/src/assets/imageImports.js b/react-ui/src/assets/imageImports.js
index 4ec5902d2..ea26cc533 100644
--- a/react-ui/src/assets/imageImports.js
+++ b/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 = [
diff --git a/react-ui/src/components/common/AbilityIcon.js b/react-ui/src/components/common/AbilityIcon.js
index 93e72c88f..89e250fe5 100644
--- a/react-ui/src/components/common/AbilityIcon.js
+++ b/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
diff --git a/react-ui/src/components/common/BuildCard.js b/react-ui/src/components/common/BuildCard.js
index 4b871a533..4e473189c 100644
--- a/react-ui/src/components/common/BuildCard.js
+++ b/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
diff --git a/react-ui/src/components/user/AddBuildForm.js b/react-ui/src/components/user/AddBuildForm.js
index 1d12753c2..e7d41ffc9 100644
--- a/react-ui/src/components/user/AddBuildForm.js
+++ b/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>
diff --git a/react-ui/src/components/user/BuildTab.js b/react-ui/src/components/user/BuildTab.js
index e4f5951e4..1dbbeac23 100644
--- a/react-ui/src/components/user/BuildTab.js
+++ b/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>
   )
 }