Set weapons when they're selected
This commit is contained in:
parent
a0a40c54b8
commit
f4be26467b
7 changed files with 62 additions and 38 deletions
|
|
@ -24,5 +24,6 @@
|
|||
}
|
||||
|
||||
.SearchModal #results_container {
|
||||
margin: 0;
|
||||
padding: 0 12px 12px 12px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue