From 0d862e8085745a1cb9d1350cdb00a1dfd886aeab Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 16 Sep 2020 03:46:56 -0700 Subject: [PATCH] Update components dealing with selecting weapons You can select a weapon and if there is no party, it will create one on the server. It will associate subsequently added weapons to that party. --- src/components/SearchModal/SearchModal.tsx | 16 +- src/components/WeaponGrid/WeaponGrid.css | 12 +- src/components/WeaponGrid/WeaponGrid.tsx | 166 ++++++++++++++++-- .../WeaponGridMainhand/WeaponGridMainhand.tsx | 31 ++-- .../WeaponGridUnit/WeaponGridUnit.css | 6 +- .../WeaponGridUnit/WeaponGridUnit.tsx | 32 +--- src/components/WeaponResult/WeaponResult.tsx | 3 +- 7 files changed, 194 insertions(+), 72 deletions(-) diff --git a/src/components/SearchModal/SearchModal.tsx b/src/components/SearchModal/SearchModal.tsx index f89bba85..26874132 100644 --- a/src/components/SearchModal/SearchModal.tsx +++ b/src/components/SearchModal/SearchModal.tsx @@ -9,8 +9,9 @@ import './SearchModal.css' interface Props { close: () => void - send: (weapon: Weapon) => void + send: (weapon: Weapon, position: number) => any placeholderText: string + fromPosition: number } interface State { @@ -24,7 +25,7 @@ interface State { class SearchModal extends React.Component { searchQuery - constructor(props) { + constructor(props: Props) { super(props) this.state = { query: '', @@ -36,7 +37,7 @@ class SearchModal extends React.Component { } fetchResults = (query) => { - fetch(`http://grid-api.ngrok.io/api/v1/search?query=${query}`) + fetch(`http://127.0.0.1:3000/api/v1/search?query=${query}`) .then(res => res.json()) .then((result) => { const totalResults = result.length @@ -64,14 +65,19 @@ class SearchModal extends React.Component { } } + sendData = (result: Weapon) => { + this.props.send(result, this.props.fromPosition) + this.props.close() + } + renderSearchResults = () => { const { results } = this.state if (results.length) { return (
    - { results.map( result => { - return { this.props.send(result) }} /> + { results.map( (result: Weapon) => { + return { this.sendData(result) }} /> })}
) diff --git a/src/components/WeaponGrid/WeaponGrid.css b/src/components/WeaponGrid/WeaponGrid.css index ee4d4d22..d4722a79 100644 --- a/src/components/WeaponGrid/WeaponGrid.css +++ b/src/components/WeaponGrid/WeaponGrid.css @@ -4,19 +4,25 @@ justify-content: center; } -.grid-weapons { +#grid_weapons { display: flex; flex-direction: row; flex-wrap: wrap; + margin: 0; + padding: 0; width: 528px; } -.grid-weapons > * { +#grid_weapons > * { margin-bottom: 72px; margin-right: 24px; } -.grid-weapons > *:nth-child(3n+3) { +#grid_weapons > *:nth-child(3n+3) { margin-right: 0; +} + +#grid_weapons > li { + list-style: none; } \ No newline at end of file diff --git a/src/components/WeaponGrid/WeaponGrid.tsx b/src/components/WeaponGrid/WeaponGrid.tsx index b9d6037d..d87f0fb9 100644 --- a/src/components/WeaponGrid/WeaponGrid.tsx +++ b/src/components/WeaponGrid/WeaponGrid.tsx @@ -1,28 +1,160 @@ -import React from 'react' -import './WeaponGrid.css' +import React, { useEffect, useState } from 'react' +import { withRouter } from 'react-router' import WeaponGridMainhand from '../WeaponGridMainhand/WeaponGridMainhand' import WeaponGridUnit from '../WeaponGridUnit/WeaponGridUnit' -class WeaponGrid extends React.Component { - render() { - const numWeapons = 9 - let weapons = [] +import './WeaponGrid.css' - Array.from(Array(numWeapons)).forEach((x, i) => { - weapons.push() +const WeaponGrid = (props: null) => { + const [partyId, setPartyId] = useState() + const [shortcode, setShortcode] = useState() + + const [mainhand, setMainhand] = useState() + const [weapons, setWeapons] = useState<{ [key: number]: Weapon }>({}) + + const numWeapons: number = 9 + + useEffect(() => { + const shortcode = props.match.params.hash + + if (shortcode) { + console.log(shortcode) + } else { + console.log('nothing') + } + }, []) + + function fetchGrid(shortcode: string) { + // const body = JSON.stringify({ + // 'weapon': { + // 'party_id': pid, + // 'weapon_id': weapon.id, + // 'position': position + // } + // }) + + // const options = { + // headers: { 'Content-Type': 'application/json' }, + // method: 'POST', + // body: body + // } + } + + function receiveMainhand(weapon: Weapon, _: number) { + // Store the mainhand weapon + setMainhand(weapon) + + if (partyId === undefined) { + let _partyId = '' + + createParty().then(data => { + setPartyId(data.party.id) + _partyId = data.party.id + + return data.party.shortcode + }) + .then((code: string) => { + setShortcode(shortcode) + window.history.replaceState(null, `Grid Tool: ${code}`, `/p/${code}`) + }) + .then(() => { + saveMainhand(_partyId, weapon) + }) + } else { + saveMainhand(partyId, weapon) + } + } + + function receiveWeapon(weapon: Weapon, position: number) { + // Store the grid unit weapon at the correct position + let newWeapons = Object.assign({}, weapons) + newWeapons[position] = weapon + setWeapons(newWeapons) + + if (partyId === undefined) { + let _partyId = '' + + createParty().then(data => { + setPartyId(data.party.id) + _partyId = data.party.id + + return data.party.shortcode + }) + .then(() => { + saveWeapon(_partyId, weapon, position) + }) + } else { + saveWeapon(partyId, weapon, position) + } + } + + function createParty() { + const options = { + headers: { 'Content-Type': 'application/json' }, + method: 'POST' + } + + return fetch('http://127.0.0.1:3000/api/v1/party', options) + .then(response => response.json()) + } + + function saveWeapon(pid: string, weapon: Weapon, position: number) { + const body = JSON.stringify({ + 'weapon': { + 'party_id': pid, + 'weapon_id': weapon.id, + 'position': position, + 'mainhand': false + } }) - return ( -
- + const options = { + headers: { 'Content-Type': 'application/json' }, + method: 'POST', + body: body + } -
- {weapons} -
-
- ) + fetch('http://127.0.0.1:3000/api/v1/weapons', options) + .then(data => { + console.log(data) + }) } + + function saveMainhand(pid: string, weapon: Weapon) { + const body = JSON.stringify({ + 'weapon': { + 'party_id': pid, + 'weapon_id': weapon.id, + 'mainhand': true + } + }) + + const options = { + headers: { 'Content-Type': 'application/json' }, + method: 'POST', + body: body + } + + fetch('http://127.0.0.1:3000/api/v1/weapons', options) + .then(data => { + console.log(data) + }) + } + + return ( +
+ + +
    + { + Array.from(Array(numWeapons)).map((x, i) => { + return + }) + } +
+
+ ) } -export default WeaponGrid \ No newline at end of file +export default withRouter(WeaponGrid) \ No newline at end of file diff --git a/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx b/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx index d48dc2d3..fb2a4b1c 100644 --- a/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx +++ b/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx @@ -1,38 +1,29 @@ -import React, { useEffect, useState } from 'react' -import './WeaponGridMainhand.css' - +import React, { useEffect } from 'react' import SearchModal from '../SearchModal/SearchModal' import { useModal as useModal } from '../../useModal' +import './WeaponGridMainhand.css' import mainhandImages from '../../images/mainhand/*.jpg' import Plus from '../../../assets/plus.svg' -function WeaponGridUnit() { +function WeaponGridMainhand(props: WeaponGridProps) { const { open, openModal, closeModal } = useModal() - const [weapon, setWeapon] = useState({ - id: '', - granblue_id: 0, - name: { - en: '', - jp: '' - } - }) - - function receiveData(data: Weapon) { - setWeapon(data) - closeModal() - } + useEffect(() => { + console.log('Mainhand weapon prop was updated.') + }, [props.weapon]) + return (
- +
{open ? ( ) : null} @@ -40,4 +31,4 @@ function WeaponGridUnit() { ) } -export default WeaponGridUnit \ No newline at end of file +export default WeaponGridMainhand diff --git a/src/components/WeaponGridUnit/WeaponGridUnit.css b/src/components/WeaponGridUnit/WeaponGridUnit.css index c3a3a787..b27063f9 100644 --- a/src/components/WeaponGridUnit/WeaponGridUnit.css +++ b/src/components/WeaponGridUnit/WeaponGridUnit.css @@ -1,11 +1,13 @@ .WeaponGridUnit { + display: flex; align-items: center; + justify-content: center; + background: white; border: 1px solid rgba(0, 0, 0, 0); border-radius: 8px; - display: flex; height: 92px; - justify-content: center; + list-style-type: none; overflow: hidden; transition: all 0.18s ease-in-out; width: 160px; diff --git a/src/components/WeaponGridUnit/WeaponGridUnit.tsx b/src/components/WeaponGridUnit/WeaponGridUnit.tsx index 26dce1f6..968e6735 100644 --- a/src/components/WeaponGridUnit/WeaponGridUnit.tsx +++ b/src/components/WeaponGridUnit/WeaponGridUnit.tsx @@ -1,44 +1,30 @@ -import React, { useEffect, useState } from 'react' - -import './WeaponGridUnit.css' - +import React from 'react' import SearchModal from '../SearchModal/SearchModal' import { useModal as useModal } from '../../useModal' +import './WeaponGridUnit.css' import gridImages from '../../images/grid/*.jpg' import Plus from '../../../assets/plus.svg' -function WeaponGridUnit() { +function WeaponGridUnit(props: WeaponGridProps) { const { open, openModal, closeModal } = useModal() - const [weapon, setWeapon] = useState({ - id: '', - granblue_id: 0, - name: { - en: '', - jp: '' - } - }) - - function receiveData(data: Weapon) { - setWeapon(data) - closeModal() - } return ( -
+
  • - +
    {open ? ( ) : null} -
    • + ) } -export default WeaponGridUnit \ No newline at end of file +export default WeaponGridUnit diff --git a/src/components/WeaponResult/WeaponResult.tsx b/src/components/WeaponResult/WeaponResult.tsx index dafaf699..4c9c2f88 100644 --- a/src/components/WeaponResult/WeaponResult.tsx +++ b/src/components/WeaponResult/WeaponResult.tsx @@ -8,13 +8,12 @@ import gridImages from '../../images/grid/*.jpg' interface Props { data: Weapon - onClick: () => Weapon + onClick: () => void } const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana'] - class WeaponResult extends React.Component { render() { const weapon = this.props.data