Set weapons when they're selected

src/components/SearchModal/SearchModal.css

@@ -24,5 +24,6 @@
 }
 
 .SearchModal #results_container {
+    margin: 0;
     padding: 0 12px 12px 12px;
 }

src/components/SearchModal/SearchModal.tsx

@@ -9,6 +9,7 @@ import './SearchModal.css'
 
 interface Props {
     close: () => void
+    send: (weapon: Weapon) => void
     placeholderText: string
 }
 
@@ -68,11 +69,11 @@ class SearchModal extends React.Component<Props, State> {
 
         if (results.length) {
             return (
-                <div id="results_container">
+                <ul id="results_container">
                     { results.map( result => {
-                        return <WeaponResult key={result.id} data={result} />
+                        return <WeaponResult key={result.id} data={result} onClick={() => { this.props.send(result) }} />
                     })}
-                </div>
+                </ul>
             )
         }
     }

src/components/WeaponGridMainhand/WeaponGridMainhand.css

@@ -4,11 +4,12 @@
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 8px;
     display: flex;
-    height: 432px;
+    height: 420px;
     justify-content: center;
     margin-right: 24px;
+    overflow: hidden;
     transition: all 0.18s ease-in-out;
-    width: 205px;
+    width: 200px;
 }
 
 .WeaponGridMainhand:hover {
@@ -18,10 +19,18 @@
     transform: scale(1.05, 1.05);
 }
 
+.WeaponGridMainhand img {
+    position: relative;
+    width: 100%;
+    z-index: 2;
+}
+
 .WeaponGridMainhand .icon {
+    position: absolute;
     color: #c9c9c9;
     height: 20px;
     width: 20px;
+    z-index: 1;
 }
 
 .WeaponGridMainhand:hover .icon {

src/components/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -1,22 +1,38 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import './WeaponGridMainhand.css'
 
 import SearchModal from '../SearchModal/SearchModal'
 import { useModal as useModal } from '../../useModal'
 
+import mainhandImages from '../../images/mainhand/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
 function WeaponGridUnit() {
     const { open, openModal, closeModal } = useModal()
+    const [weapon, setWeapon] = useState<Weapon>({
+        id: '', 
+        granblue_id: 0, 
+        name: { 
+            en: '', 
+            jp: ''
+        }
+    })
+    
+    function receiveData(data: Weapon) {
+        setWeapon(data)
+        closeModal()
+    }
 
     return (
         <div>
             <div className="WeaponGridMainhand" onClick={openModal}>
+                <img className="grid_image" src={mainhandImages[weapon.granblue_id]} />
                 <span className='icon'><Plus /></span>
             </div>
             {open ? (
                 <SearchModal 
                     close={closeModal}
+                    send={receiveData}
                     placeholderText="Search for a weapon..."
                 />
             ) : null}

src/components/WeaponGridUnit/WeaponGridUnit.css

@@ -6,6 +6,7 @@
     display: flex;
     height: 92px;
     justify-content: center;
+    overflow: hidden;
     transition: all 0.18s ease-in-out;
     width: 160px;
 }
@@ -17,10 +18,18 @@
     transform: scale(1.1, 1.1);
 }
 
+.WeaponGridUnit img {
+    position: relative;
+    width: 100%;
+    z-index: 2;
+}
+
 .WeaponGridUnit .icon {
+    position: absolute;
     color: #c9c9c9;
     height: 20px;
     width: 20px;
+    z-index: 1;
 }
 
 .WeaponGridUnit:hover .icon {

src/components/WeaponGridUnit/WeaponGridUnit.tsx

@@ -1,23 +1,39 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import './WeaponGridUnit.css'
 
 import SearchModal from '../SearchModal/SearchModal'
 import { useModal as useModal } from '../../useModal'
 
+import gridImages from '../../images/grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
 function WeaponGridUnit() {
     const { open, openModal, closeModal } = useModal()
+    const [weapon, setWeapon] = useState<Weapon>({
+        id: '', 
+        granblue_id: 0, 
+        name: { 
+            en: '', 
+            jp: ''
+        }
+    })
+    
+    function receiveData(data: Weapon) {
+        setWeapon(data)
+        closeModal()
+    }
 
     return (
         <div>
             <div className="WeaponGridUnit" onClick={openModal}>
+                <img className="grid_image" src={gridImages[weapon.granblue_id]} />
                 <span className='icon'><Plus /></span>
             </div>
             {open ? (
                 <SearchModal 
                     close={closeModal}
+                    send={receiveData}
                     placeholderText="Search for a weapon..."
                 />
             ) : null}

src/components/WeaponResult/WeaponResult.tsx

@@ -6,37 +6,9 @@ import WeaponLabelIcon from '../WeaponLabelIcon/WeaponLabelIcon'
 
 import gridImages from '../../images/grid/*.jpg'
 
-interface Weapon {
-    id: string
-    granblue_id: number
-    element: number
-    proficiency: number
-    max_level: number
-    max_skill_level: number
-    name: { 
-        en: string
-        jp: string
-    }
-    hp: {
-        min_hp: number
-        max_hp: number
-        max_hp_flb: number
-        max_hp_ulb: number
-    }
-    atk: {
-        min_atk: number
-        max_atk: number
-        max_atk_flb: number
-        max_atk_ulb: number
-    }
-    uncap: {
-        flb: boolean
-        ulb: boolean
-    }
-}
-
 interface Props {
     data: Weapon
+    onClick: () => Weapon
 }
 
 const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
@@ -47,7 +19,7 @@ class WeaponResult extends React.Component<Props> {
     render() {
         const weapon = this.props.data
         return (
-            <div className="WeaponResult">
+            <li className="WeaponResult" onClick={this.props.onClick}>
                 <img alt={weapon.name.en} src={gridImages[weapon.granblue_id]} />
                 <div>
                     <div>
@@ -57,7 +29,7 @@ class WeaponResult extends React.Component<Props> {
                     <WeaponLabelIcon labelType={Element[weapon.element]} />
                     <WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
                 </div>
-            </div>
+            </li>
         )
     }
 }