From 962720f86f13db9779861e826ffa518ce7e64be5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 15 Oct 2020 23:01:59 -0700 Subject: [PATCH] Added other grid layouts --- src/components/App/index.css | 9 ++- src/components/CharacterGrid/index.css | 27 +++++++ src/components/CharacterGrid/index.tsx | 38 +++++++++ src/components/CharacterUnit/index.css | 64 ++++++++++++++++ src/components/CharacterUnit/index.tsx | 46 +++++++++++ src/components/GridRep/index.tsx | 4 +- src/components/GridRepCollection/index.tsx | 4 +- src/components/Header/index.tsx | 6 +- src/components/SummonGrid/index.css | 27 +++++++ src/components/SummonGrid/index.tsx | 59 ++++++++++++++ src/components/SummonUnit/index.css | 89 ++++++++++++++++++++++ src/components/SummonUnit/index.tsx | 51 +++++++++++++ src/components/WeaponGrid/index.css | 1 - src/routes/New/index.tsx | 35 +++++++++ src/types/Character.d.ts | 27 +++++++ src/types/Summon.d.ts | 27 +++++++ 16 files changed, 506 insertions(+), 8 deletions(-) create mode 100644 src/components/CharacterGrid/index.css create mode 100644 src/components/CharacterGrid/index.tsx create mode 100644 src/components/CharacterUnit/index.css create mode 100644 src/components/CharacterUnit/index.tsx create mode 100644 src/components/SummonGrid/index.css create mode 100644 src/components/SummonGrid/index.tsx create mode 100644 src/components/SummonUnit/index.css create mode 100644 src/components/SummonUnit/index.tsx create mode 100644 src/types/Character.d.ts create mode 100644 src/types/Summon.d.ts diff --git a/src/components/App/index.css b/src/components/App/index.css index f62e3165..c9ba1cea 100644 --- a/src/components/App/index.css +++ b/src/components/App/index.css @@ -3,7 +3,7 @@ } html { - background: #f5f5f5; + background: #efefef; padding: 16px; } @@ -22,6 +22,13 @@ h1 { text-align: center; } +#Content { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 96px; +} + #NotFound { display: flex; flex-direction: column; diff --git a/src/components/CharacterGrid/index.css b/src/components/CharacterGrid/index.css new file mode 100644 index 00000000..74ae5816 --- /dev/null +++ b/src/components/CharacterGrid/index.css @@ -0,0 +1,27 @@ +.CharacterGrid { + display: flex; + justify-content: center; +} + +#grid_characters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; + padding: 0; + width: 752px; +} + +#grid_characters > * { + margin-bottom: 24px; + margin-right: 24px; + +} + +#grid_characters > li { + list-style: none; +} + +#grid_characters > li:last-child { + margin: 0; +} \ No newline at end of file diff --git a/src/components/CharacterGrid/index.tsx b/src/components/CharacterGrid/index.tsx new file mode 100644 index 00000000..2817ad48 --- /dev/null +++ b/src/components/CharacterGrid/index.tsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react' +import CharacterUnit from '~components/CharacterUnit' + +import './index.css' + +interface Props { + editable: boolean +} + +const CharacterGrid = (props: Props) => { + const numCharacters: number = 5 + + const [characters, setCharacters] = useState({}) + const [partyId, setPartyId] = useState('') + + return ( +
+
    + { + Array.from(Array(numCharacters)).map((x, i) => { + return ( +
  • + {}} + position={i} + character={characters[i]} + /> +
    • + ) + }) + } +
+
+ ) +} + +export default CharacterGrid diff --git a/src/components/CharacterUnit/index.css b/src/components/CharacterUnit/index.css new file mode 100644 index 00000000..ad331752 --- /dev/null +++ b/src/components/CharacterUnit/index.css @@ -0,0 +1,64 @@ +.CharacterUnit { + display: flex; + flex-direction: column; + gap: 4px; + max-width: 200px; +} + +.CharacterUnit .CharacterImage { + background: white; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: all 0.18s ease-in-out; + height: 275px; + width: 131px; +} + +.CharacterUnit.editable .CharacterImage:hover { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + cursor: pointer; + transform: scale(1.1, 1.1); +} + +.CharacterUnit.filled h3 { + display: block; +} + +.CharacterUnit.filled ul { + display: flex; +} + +.CharacterUnit h3, +.CharacterUnit ul { + display: none; +} + +.CharacterUnit h3 { + color: #333; + font-weight: 500; + margin: 0; + text-align: center; +} + +.CharacterUnit img { + position: relative; + width: 100%; + z-index: 2; +} + +.CharacterImage .icon { + position: absolute; + color: #c9c9c9; + height: 20px; + width: 20px; + z-index: 1; +} + +.CharacterImage:hover .icon { + color: #555; +} \ No newline at end of file diff --git a/src/components/CharacterUnit/index.tsx b/src/components/CharacterUnit/index.tsx new file mode 100644 index 00000000..6c654e1b --- /dev/null +++ b/src/components/CharacterUnit/index.tsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react' +import classnames from 'classnames' +import UncapIndicator from '~components/UncapIndicator' + +import './index.css' + +import Plus from '../../../assets/plus.svg' + +interface Props { + onReceiveData: (character: Character, position: number) => void + character: Character | undefined + position: number + editable: boolean +} + +const CharacterUnit = (props: Props) => { + const openModal = () => {} + + const openModalIfEditable = (props.editable) ? openModal : () => {} + + const classes = classnames({ + CharacterUnit: true, + 'editable': props.editable, + 'filled': (props.character !== undefined) + }) + + const character = props.character + + return ( +
+
+
+ { (props.editable) ? : '' } +
+ +

{character?.name.en}

+
+
+ ) +} + +export default CharacterUnit diff --git a/src/components/GridRep/index.tsx b/src/components/GridRep/index.tsx index 02f81bf7..addf31bb 100644 --- a/src/components/GridRep/index.tsx +++ b/src/components/GridRep/index.tsx @@ -68,9 +68,9 @@ const GridRep = (props: Props) => { { Array.from(Array(numWeapons)).map((x, i) => { return ( -
+
  • {generateGridImage(i)} -
    • + ) }) } diff --git a/src/components/GridRepCollection/index.tsx b/src/components/GridRepCollection/index.tsx index fdceedc0..abc9de4e 100644 --- a/src/components/GridRepCollection/index.tsx +++ b/src/components/GridRepCollection/index.tsx @@ -6,9 +6,9 @@ interface Props {} const GridRepCollection: React.FC = ({ children }) => { return ( -
      +
      {children} -
    + ) } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 01f97243..7f2ca59f 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import { useLocation } from 'react-router-dom' +import { useHistory, useLocation } from 'react-router-dom' import { useCookies } from 'react-cookie' import Button from '~components/Button' @@ -14,6 +14,8 @@ interface Props { const Header = (props: Props) => { const [username, setUsername] = useState(undefined) const [cookies, setCookie, removeCookie] = useCookies(['user']) + + let history = useHistory() let location = useLocation() const route = (pathname: string) => props.navigate(pathname) @@ -42,7 +44,7 @@ const Header = (props: Props) => { function logout() { removeCookie('user') window.history.replaceState(null, `Grid Tool`, `/`) - props.history.go(0) + history.go(0) } if (cookies.user != null) { diff --git a/src/components/SummonGrid/index.css b/src/components/SummonGrid/index.css new file mode 100644 index 00000000..611749da --- /dev/null +++ b/src/components/SummonGrid/index.css @@ -0,0 +1,27 @@ +.SummonGrid { + display: flex; + justify-content: center; +} + +#grid_summons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 24px 0 0; + padding: 0; + width: 344px; +} + +#grid_summons > * { + margin-bottom: 24px; + margin-right: 24px; + +} + +#grid_summons > *:nth-child(2n+2) { + margin-right: 0; +} + +#grid_summons > li { + list-style: none; +} \ No newline at end of file diff --git a/src/components/SummonGrid/index.tsx b/src/components/SummonGrid/index.tsx new file mode 100644 index 00000000..3d85b633 --- /dev/null +++ b/src/components/SummonGrid/index.tsx @@ -0,0 +1,59 @@ +import React, { useState } from 'react' +import SummonUnit from '~components/SummonUnit' + +import './index.css' + +interface Props { + editable: boolean +} + +const SummonGrid = (props: Props) => { + const numSummons: number = 4 + + const [mainSummon, setMainSummon] = useState() + const [friendSummon, setFriendSummon] = useState() + const [summons, setSummons] = useState({}) + const [partyId, setPartyId] = useState('') + + return ( +
    + {}} + position={-1} + unitType={0} + summon={mainSummon} + /> + +
      + { + Array.from(Array(numSummons)).map((x, i) => { + return ( +
    • + {}} + position={i} + unitType={1} + summon={summons[i]} + /> +
      • + ) + }) + } +
    + + {}} + position={-1} + unitType={2} + summon={friendSummon} + /> +
    + ) +} + +export default SummonGrid diff --git a/src/components/SummonUnit/index.css b/src/components/SummonUnit/index.css new file mode 100644 index 00000000..1604bb14 --- /dev/null +++ b/src/components/SummonUnit/index.css @@ -0,0 +1,89 @@ +.SummonUnit { + display: flex; + flex-direction: column; + gap: 4px; +} + +.SummonUnit .SummonImage { + background: white; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: all 0.18s ease-in-out; +} + +.SummonUnit.editable .SummonImage:hover { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + cursor: pointer; + transform: scale(1.1, 1.1); +} + +.SummonUnit.filled h3 { + display: block; +} + +.SummonUnit.filled ul { + display: flex; +} + +.SummonUnit h3, +.SummonUnit ul { + display: none; +} + +.SummonUnit h3 { + color: #333; + font-weight: 500; + margin: 0; + text-align: center; +} + +.SummonUnit img { + position: relative; + width: 100%; + z-index: 2; +} + +.SummonImage .icon { + position: absolute; + color: #c9c9c9; + height: 20px; + width: 20px; + z-index: 1; +} + +.SummonImage:hover .icon { + color: #555; +} + +/* Mainhand */ +.SummonUnit.main, +.SummonUnit.friend { + margin-right: 24px; + max-width: 200px; +} + +.SummonUnit.friend { + margin-right: 0; +} + +.SummonUnit.main .SummonImage, +.SummonUnit.friend .SummonImage { + height: 378px; + width: 180px; +} + +/* Grid */ +.SummonUnit.grid { + max-width: 160px; +} + +.SummonUnit.grid .SummonImage { + list-style-type: none; + height: 92px; + width: 160px; +} \ No newline at end of file diff --git a/src/components/SummonUnit/index.tsx b/src/components/SummonUnit/index.tsx new file mode 100644 index 00000000..9c1e5c9b --- /dev/null +++ b/src/components/SummonUnit/index.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react' +import classnames from 'classnames' +import UncapIndicator from '~components/UncapIndicator' + +import './index.css' + +import Plus from '../../../assets/plus.svg' + +interface Props { + onReceiveData: (summon: Summon, position: number) => void + summon: Summon | undefined + position: number + editable: boolean + unitType: 0 | 1 | 2 +} + +const SummonUnit = (props: Props) => { + const numSummons: number = 4 + const openModal = () => {} + + const openModalIfEditable = (props.editable) ? openModal : () => {} + + const classes = classnames({ + SummonUnit: true, + 'main': props.unitType == 0, + 'grid': props.unitType == 1, + 'friend': props.unitType == 2, + 'editable': props.editable, + 'filled': (props.summon !== undefined) + }) + + const summon = props.summon + + return ( +
    +
    +
    + { (props.editable) ? : '' } +
    + +

    {summon?.name.en}

    +
    +
    + ) +} + +export default SummonUnit diff --git a/src/components/WeaponGrid/index.css b/src/components/WeaponGrid/index.css index ad176b84..ced4973e 100644 --- a/src/components/WeaponGrid/index.css +++ b/src/components/WeaponGrid/index.css @@ -1,6 +1,5 @@ .WeaponGrid { display: flex; - margin-top: 96px; justify-content: center; } diff --git a/src/routes/New/index.tsx b/src/routes/New/index.tsx index f21f086e..a36b3299 100644 --- a/src/routes/New/index.tsx +++ b/src/routes/New/index.tsx @@ -2,6 +2,11 @@ import React, { useState } from 'react' import { RouteComponentProps } from 'react-router-dom' import { useCookies } from 'react-cookie' import WeaponGrid from '~components/WeaponGrid' +import SegmentedControl from '~components/SegmentedControl' +import Segment from '~components/Segment' +import PartySegmentedControl from '~components/PartySegmentedControl' +import SummonGrid from '~components/SummonGrid' +import CharacterGrid from '~components/CharacterGrid' interface Props {} interface NewProps extends RouteComponentProps {} @@ -24,6 +29,36 @@ const New: React.FC = (props: NewProps) => { } function segmentClicked(event: React.ChangeEvent) { + setSelectedTab(event.target.value) + + switch(event.target.value) { + case 'weapons': + setGrid(( + + )) + break + case 'summons': + setGrid(( + + )) + break + case 'characters': + setGrid(( + + )) + break + default: + break + } } return ( diff --git a/src/types/Character.d.ts b/src/types/Character.d.ts new file mode 100644 index 00000000..a47cad3a --- /dev/null +++ b/src/types/Character.d.ts @@ -0,0 +1,27 @@ +interface Character { + id: string + granblue_id: number + element: number + max_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 + } + position?: number +} \ No newline at end of file diff --git a/src/types/Summon.d.ts b/src/types/Summon.d.ts new file mode 100644 index 00000000..8b03037e --- /dev/null +++ b/src/types/Summon.d.ts @@ -0,0 +1,27 @@ +interface Summon { + id: string + granblue_id: number + element: number + max_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 + } + position?: number +} \ No newline at end of file