granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish

Browse source
This commit is contained in:
Justin Edmund 2020-10-18 23:52:06 -07:00
parent a9c934cb2c
commit c030f9e7a7
8 changed files with 65 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/App/index.tsx
View file

@ -4,10 +4,10 @@ import './index.css'
import Header from '~components/Header'
import New from '~routes/New'
import Party from '~routes/Party'
import Parties from '~routes/Parties'
import Profile from '~routes/Profile'
import NewRoute from '~routes/NewRoute'
import PartyRoute from '~routes/PartyRoute'
import PartiesRoute from '~routes/PartiesRoute'
import ProfileRoute from '~routes/ProfileRoute'
const App = () => {
@ -17,10 +17,10 @@ const App = () => {
return (
<div>
<Header navigate={route} />
<Route exact path='/' component={New} />
<Route exact path='/parties/' component={Parties} />
<Route path='/p/:hash' component={Party} />
<Route exact path='/:username' component={Profile} />
<Route exact path='/' component={NewRoute} />
<Route exact path='/parties/' component={PartiesRoute} />
<Route path='/p/:hash' component={PartyRoute} />
<Route exact path='/:username' component={ProfileRoute} />
</div>
)
}

2
src/components/HeaderMenu/index.tsx
View file

@ -7,7 +7,7 @@ import SignupModal from '~components/SignupModal'
import { useModal as useSignupModal } from '~utils/useModal'
import { useModal as useLoginModal } from '~utils/useModal'
import { Link, Route } from 'react-router-dom'
import Profile from '~routes/Profile'
import Profile from '~routes/ProfileRoute'
interface Props {

45
src/components/Party/index.tsx
View file

@ -21,9 +21,14 @@ export enum GridType {
import './index.css'
interface Props {
mainWeapon?: Weapon
mainSummon?: Summon
friendSummon?: Summon
weapons?: GridArray<Weapon>
summons?: GridArray<Summon>
editable: boolean
exists: boolean
pushHistory: (path: string) => void
pushHistory?: (path: string) => void
}
const Party = (props: Props) => {
@ -43,6 +48,14 @@ const Party = (props: Props) => {
const [mainSummon, setMainSummon] = useState<Summon>()
const [friendSummon, setFriendSummon] = useState<Summon>()
useEffect(() => {
setMainWeapon(props.mainWeapon)
setMainSummon(props.mainSummon)
setFriendSummon(props.friendSummon)
setWeapons(props.weapons || {})
setSummons(props.summons || {})
}, [props.mainWeapon, props.mainSummon, props.friendSummon, props.weapons, props.summons])
const weaponGrid = (
<WeaponGrid
userId={cookies.user ? cookies.user.userId : ''}
@ -72,28 +85,23 @@ const Party = (props: Props) => {
<CharacterGrid
editable={props.editable}
exists={props.exists}
onSelect={saveCharacter}
onSelect={itemSelected}
/>
)
const [currentGrid, setCurrentGrid] = useState<JSX.Element>(weaponGrid)
const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
const [partyId, setPartyId] = useState('')
function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
switch(event.target.value) {
case 'characters':
setCurrentTab(GridType.Character)
setCurrentGrid(characterGrid)
break
case 'weapons':
setCurrentTab(GridType.Weapon)
setCurrentGrid(weaponGrid)
break
case 'summons':
setCurrentTab(GridType.Summon)
setCurrentGrid(summonGrid)
break
default:
break
@ -115,10 +123,10 @@ const Party = (props: Props) => {
})
.then(partyId => {
setPartyId(partyId)
save(partyId, type, item, position)
saveItem(partyId, type, item, position)
})
} else {
save(partyId, type, item, position)
saveItem(partyId, type, item, position)
}
}
@ -132,7 +140,7 @@ const Party = (props: Props) => {
return await api.endpoints.parties.create(body, headers)
}
function save(partyId: string, type: GridType, item: Character | Weapon | Summon, position: number) {
function saveItem(partyId: string, type: GridType, item: Character | Weapon | Summon, position: number) {
switch(type) {
case GridType.Class:
saveClass()
@ -157,6 +165,7 @@ const Party = (props: Props) => {
}
}
// Weapons
function storeWeapon(weapon: Weapon, position: number) {
if (position == -1) {
setMainWeapon(weapon)
@ -179,6 +188,7 @@ const Party = (props: Props) => {
}, headers)
}
// Summons
function storeSummon(summon: Summon, position: number) {
if (position == -1) {
setMainSummon(summon)
@ -204,10 +214,12 @@ const Party = (props: Props) => {
}, headers)
}
// Character
function saveCharacter(character: Character, position: number, party: string) {
// TODO: Implement this
}
// Class
function saveClass() {
// TODO: Implement this
}
@ -219,7 +231,18 @@ const Party = (props: Props) => {
onClick={segmentClicked}
/>
{currentGrid}
{
(() => {
switch(currentTab) {
case GridType.Character:
return characterGrid
case GridType.Weapon:
return weaponGrid
case GridType.Summon:
return summonGrid
}
})()
}
</div>
)
}

7
src/components/PartySegmentedControl/index.tsx
View file

@ -16,6 +16,7 @@ interface Props {
}
const PartySegmentedControl = (props: Props) => {
return (
<div>
<SegmentedControl>
@ -29,21 +30,21 @@ const PartySegmentedControl = (props: Props) => {
<Segment
groupName="grid"
name="characters"
selected={props.selectedTab === GridType.Character}
selected={props.selectedTab == GridType.Character}
onClick={props.onClick}
>Characters</Segment>
<Segment
groupName="grid"
name="weapons"
selected={props.selectedTab === GridType.Weapon}
selected={props.selectedTab == GridType.Weapon}
onClick={props.onClick}
>Weapons</Segment>
<Segment
groupName="grid"
name="summons"
selected={props.selectedTab === GridType.Summon}
selected={props.selectedTab == GridType.Summon}
onClick={props.onClick}
>Summons</Segment>
</SegmentedControl>

4
src/routes/New/index.tsx → src/routes/NewRoute/index.tsx
View file

@ -6,7 +6,7 @@ import Party from '~components/Party'
interface Props {}
interface NewProps extends RouteComponentProps<Props> {}
const New: React.FC<NewProps> = () => {
const NewRoute: React.FC<NewProps> = () => {
function callback(path: string) {
// This is scuffed, how do we do this natively?
window.history.replaceState(null, `Grid Tool`, `${path}`)
@ -23,4 +23,4 @@ const New: React.FC<NewProps> = () => {
)
}
export default New
export default NewRoute

4
src/routes/Parties/index.tsx → src/routes/PartiesRoute/index.tsx
View file

@ -4,7 +4,7 @@ interface State {
parties: {id: string, hash: string}[]
}
class Parties extends React.Component {
class PartiesRoute extends React.Component {
state: State
constructor(props) {
@ -36,4 +36,4 @@ class Parties extends React.Component {
}
}
export default Parties
export default PartiesRoute

79
src/routes/Party/index.tsx → src/routes/PartyRoute/index.tsx
View file

@ -3,10 +3,7 @@ import { withCookies, useCookies } from 'react-cookie'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import api from '~utils/api'
import PartySegmentedControl from '~components/PartySegmentedControl'
import WeaponGrid from '~components/WeaponGrid'
import SummonGrid from '~components/SummonGrid'
import CharacterGrid from '~components/CharacterGrid'
import Party from '~components/Party'
import Button from '~components/Button'
interface Props {
@ -15,7 +12,7 @@ interface Props {
interface PartyProps extends RouteComponentProps<Props> {}
const Party: React.FC<PartyProps> = ({ match }) => {
const PartyRoute: React.FC<PartyProps> = ({ match }) => {
const [found, setFound] = useState(false)
const [loading, setLoading] = useState(true)
const [editable, setEditable] = useState(false)
@ -28,9 +25,7 @@ const Party: React.FC<PartyProps> = ({ match }) => {
const [friendSummon, setFriendSummon] = useState<Summon>()
const [partyId, setPartyId] = useState('')
const [cookies, setCookie] = useCookies(['userId'])
const [selectedTab, setSelectedTab] = useState('weapons')
const [tab, setTab] = useState<JSX.Element>()
const [cookies, setCookie] = useCookies(['user'])
const shortcode = match.params.hash || ''
useEffect(() => {
@ -84,68 +79,18 @@ const Party: React.FC<PartyProps> = ({ match }) => {
})
}
function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
setSelectedTab(event.target.value)
switch(event.target.value) {
case 'weapons':
setTab((
<WeaponGrid
userId={cookies.user ? cookies.user.user_id : ''}
partyId={partyId}
mainhand={mainWeapon}
grid={weapons}
editable={editable}
exists={true}
found={found}
/>
))
break
case 'summons':
setTab((
<SummonGrid
userId={cookies.user ? cookies.user.user_id : ''}
partyId={partyId}
main={mainSummon}
friend={friendSummon}
grid={summons}
editable={editable}
exists={true}
found={found}
/>
))
break
case 'characters':
setTab((
<CharacterGrid
editable={true}
/>
))
break
default:
break
}
}
function render() {
return (
<div id="Content">
<PartySegmentedControl
selectedTab={selectedTab}
onClick={segmentClicked}
<Party
mainWeapon={mainWeapon}
mainSummon={mainSummon}
friendSummon={friendSummon}
weapons={weapons}
summons={summons}
editable={editable}
exists={found}
/>
{tab || (
<WeaponGrid
userId={cookies.user ? cookies.user.user_id : ''}
partyId={partyId}
mainhand={mainWeapon}
grid={weapons}
editable={editable}
exists={true}
found={found}
/>
)}
</div>
)
}
@ -171,6 +116,6 @@ const Party: React.FC<PartyProps> = ({ match }) => {
export default
withCookies(
withRouter(
Party
PartyRoute
)
)

4
src/routes/Profile/index.tsx → src/routes/ProfileRoute/index.tsx
View file

@ -25,7 +25,7 @@ interface Party {
interface ProfileProps extends RouteComponentProps<Props> {}
const Profile: React.FC<ProfileProps> = ({ history, match }) => {
const ProfileRoute: React.FC<ProfileProps> = ({ history, match }) => {
const [cookies, setCookie] = useCookies(['user'])
const [found, setFound] = useState(false)
@ -128,6 +128,6 @@ const Profile: React.FC<ProfileProps> = ({ history, match }) => {
export default
withCookies(
withRouter(
Profile
ProfileRoute
)
)