diff --git a/src/components/ExtraWeapons/index.scss b/src/components/ExtraWeapons/index.scss new file mode 100644 index 00000000..ed1631ca --- /dev/null +++ b/src/components/ExtraWeapons/index.scss @@ -0,0 +1,32 @@ +.ExtraWeapons { + background: #ECEBFF; + border-radius: 8px; + box-sizing: border-box; + display: flex; + justify-content: center; + margin: 20px auto; + max-width: 766px; + padding: 16px 16px 16px 0; + position: relative; + left: 8px; + + & > span { + color: #4F3C79; + display: flex; + align-items: center; + justify-content: center; + line-height: 1.2; + font-weight: 500; + margin-right: 16px; + text-align: center; + width: 206px; + } + + .WeaponUnit .WeaponImage { + background: #D5D3F6; + } + + .WeaponUnit .WeaponImage .icon svg { + fill: #8F8AC6; + } +} \ No newline at end of file diff --git a/src/components/ExtraWeapons/index.tsx b/src/components/ExtraWeapons/index.tsx new file mode 100644 index 00000000..fdfea713 --- /dev/null +++ b/src/components/ExtraWeapons/index.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import WeaponUnit from '~components/WeaponUnit' + +import './index.scss' + +// GridType +export enum GridType { + Class, + Character, + Weapon, + Summon +} + +// Props +interface Props { + grid: GridArray + editable: boolean + exists: boolean + found?: boolean + onSelect: (type: GridType, weapon: Weapon, position: number) => void +} + +const ExtraWeapons = (props: Props) => { + const numWeapons: number = 3 + + function receiveWeapon(weapon: Weapon, position: number) { + props.onSelect(GridType.Weapon, weapon, position) + } + + return ( +
+ Additional
Weapons + +
+ ) +} + +export default ExtraWeapons diff --git a/src/components/Party/index.css b/src/components/Party/index.css index e69de29b..558ffbe9 100644 --- a/src/components/Party/index.css +++ b/src/components/Party/index.css @@ -0,0 +1,7 @@ +.Extra { + color: #888; + display: flex; + font-weight: 500; + gap: 8px; + line-height: 34px; +} \ No newline at end of file diff --git a/src/components/Party/index.tsx b/src/components/Party/index.tsx index 3c25e17e..596496ee 100644 --- a/src/components/Party/index.tsx +++ b/src/components/Party/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { ChangeEvent, useEffect, useState } from 'react' import { useCookies } from 'react-cookie' import api from '~utils/api' @@ -28,6 +28,7 @@ interface Props { characters?: GridArray weapons?: GridArray summons?: GridArray + extra: boolean editable: boolean exists: boolean pushHistory?: (path: string) => void @@ -51,6 +52,8 @@ const Party = (props: Props) => { const [mainSummon, setMainSummon] = useState() const [friendSummon, setFriendSummon] = useState() + const [extra, setExtra] = useState(false) + useEffect(() => { setPartyId(props.partyId || '') setMainWeapon(props.mainWeapon) @@ -59,7 +62,8 @@ const Party = (props: Props) => { setCharacters(props.characters || {}) setWeapons(props.weapons || {}) setSummons(props.summons || {}) - }, [props.partyId, props.mainWeapon, props.mainSummon, props.friendSummon, props.characters, props.weapons, props.summons]) + setExtra(props.extra || false) + }, [props.partyId, props.mainWeapon, props.mainSummon, props.friendSummon, props.characters, props.weapons, props.summons, props.extra]) const weaponGrid = ( { grid={weapons} editable={props.editable} exists={props.exists} + extra={extra} onSelect={itemSelected} /> ) @@ -97,8 +102,15 @@ const Party = (props: Props) => { const [currentTab, setCurrentTab] = useState(GridType.Weapon) const [partyId, setPartyId] = useState('') + function checkboxChanged(event: React.ChangeEvent) { + setExtra(event.target.checked) + } + function segmentClicked(event: React.ChangeEvent) { switch(event.target.value) { + case 'class': + setCurrentTab(GridType.Class) + break case 'characters': setCurrentTab(GridType.Character) break @@ -136,9 +148,14 @@ const Party = (props: Props) => { } async function createParty() { - const body = (cookies.userId === undefined) ? {} : { + const body = (cookies.userId === undefined) ? { party: { - user_id: cookies.userId + is_extra: extra + } + } : { + party: { + user_id: cookies.userId, + is_extra: extra } } @@ -249,8 +266,11 @@ const Party = (props: Props) => { return (
{ diff --git a/src/components/PartySegmentedControl/index.scss b/src/components/PartySegmentedControl/index.scss new file mode 100644 index 00000000..3665a032 --- /dev/null +++ b/src/components/PartySegmentedControl/index.scss @@ -0,0 +1,16 @@ +.PartyNavigation { + display: flex; + gap: 58px; + justify-content: right; + margin: 0 auto; + max-width: 760px; +} + +.Extra { + color: #888; + display: flex; + font-weight: 500; + gap: 8px; + line-height: 34px; + height: 100%; +} \ No newline at end of file diff --git a/src/components/PartySegmentedControl/index.tsx b/src/components/PartySegmentedControl/index.tsx index d01eda90..088ed511 100644 --- a/src/components/PartySegmentedControl/index.tsx +++ b/src/components/PartySegmentedControl/index.tsx @@ -1,6 +1,9 @@ import React from 'react' +import './index.scss' + import SegmentedControl from '~components/SegmentedControl' import Segment from '~components/Segment' +import ToggleSwitch from '~components/ToggleSwitch' // GridType export enum GridType { @@ -11,21 +14,23 @@ export enum GridType { } interface Props { + editable: boolean + extra: boolean selectedTab: GridType onClick: (event: React.ChangeEvent) => void + onCheckboxChange: (event: React.ChangeEvent) => void } const PartySegmentedControl = (props: Props) => { - return ( -
+
- {/* Class */} + >Class { onClick={props.onClick} >Summons + +
+ Extra + +
) } diff --git a/src/components/ToggleSwitch/index.scss b/src/components/ToggleSwitch/index.scss new file mode 100644 index 00000000..3d34fd10 --- /dev/null +++ b/src/components/ToggleSwitch/index.scss @@ -0,0 +1,60 @@ +.toggle-switch { + background: #fff; + border-radius: 18px; + display: inline-block; + position: relative; + width: 58px; + + &-checkbox { + display: none; + } + + &-label { + border-radius: 17px; + display: block; + cursor: pointer; + height: 34px; + margin: 0; + overflow: hidden; + } + + &-disabled { + background-color: #ddd; + cursor: not-allowed; + + &:before { + background-color: #ddd; + cursor: not-allowed; + } + } + + &-switch { + background: #e4e4e4; + display: block; + width: 24px; + margin: 5px; + position: absolute; + top: 0; + bottom: 0; + right: 24px; + border-radius: 17px; + transition: all 0.18s ease-in 0s; + } + + &-checkbox:checked + &-label { + background: #ECEBFF; + } + + &-checkbox:checked + &-label &-switch { + background: #8C86FF; + } + + &-checkbox:checked + &-label { + .toggle-switch-inner { + margin-left: 0; + } + .toggle-switch-switch { + right: 0px; + } + } +} \ No newline at end of file diff --git a/src/components/ToggleSwitch/index.tsx b/src/components/ToggleSwitch/index.tsx new file mode 100644 index 00000000..379a3c8a --- /dev/null +++ b/src/components/ToggleSwitch/index.tsx @@ -0,0 +1,31 @@ +import React from 'react' + +import './index.scss' + +interface Props { + name: string + checked: boolean + editable: boolean + onChange: (event: React.ChangeEvent) => void +} + +const ToggleSwitch: React.FC = (props: Props) => { + return ( +
+ + +
+ ); +} + +export default ToggleSwitch \ No newline at end of file diff --git a/src/components/WeaponGrid/index.scss b/src/components/WeaponGrid/index.scss index ced4973e..cbff9511 100644 --- a/src/components/WeaponGrid/index.scss +++ b/src/components/WeaponGrid/index.scss @@ -3,6 +3,10 @@ justify-content: center; } +.ExtraWeapons #grid_weapons > * { + margin-bottom: 0; +} + #grid_weapons { display: flex; flex-direction: row; diff --git a/src/components/WeaponGrid/index.tsx b/src/components/WeaponGrid/index.tsx index a9b5cd88..a4db4386 100644 --- a/src/components/WeaponGrid/index.tsx +++ b/src/components/WeaponGrid/index.tsx @@ -1,5 +1,6 @@ import React from 'react' import WeaponUnit from '~components/WeaponUnit' +import ExtraWeapons from '~components/ExtraWeapons' import './index.scss' @@ -17,6 +18,7 @@ interface Props { partyId?: string mainhand?: Weapon | undefined grid: GridArray + extra: boolean editable: boolean exists: boolean found?: boolean @@ -26,38 +28,59 @@ interface Props { const WeaponGrid = (props: Props) => { const numWeapons: number = 9 + const extraGrid = ( + + ) + function receiveWeapon(weapon: Weapon, position: number) { props.onSelect(GridType.Weapon, weapon, position) } return ( -
- +
+
+ -
    - { - Array.from(Array(numWeapons)).map((x, i) => { - return ( -
  • - -
    • - ) - }) - } -
+
    + { + Array.from(Array(numWeapons)).map((x, i) => { + return ( +
  • + +
    • + ) + }) + } +
+
+ + { (() => { + if(props.extra) { + return extraGrid + } + })() }
) } diff --git a/src/routes/NewRoute/index.tsx b/src/routes/NewRoute/index.tsx index e5536e5e..e4bdb5d1 100644 --- a/src/routes/NewRoute/index.tsx +++ b/src/routes/NewRoute/index.tsx @@ -15,6 +15,7 @@ const NewRoute: React.FC = () => {
diff --git a/src/routes/PartyRoute/index.tsx b/src/routes/PartyRoute/index.tsx index 3b348e59..2ab7673b 100644 --- a/src/routes/PartyRoute/index.tsx +++ b/src/routes/PartyRoute/index.tsx @@ -26,6 +26,7 @@ const PartyRoute: React.FC = ({ match }) => { const [friendSummon, setFriendSummon] = useState() const [partyId, setPartyId] = useState('') + const [extra, setExtra] = useState(false) const [cookies, setCookie] = useCookies(['user']) const shortcode = match.params.hash || '' @@ -69,6 +70,7 @@ const PartyRoute: React.FC = ({ match }) => { summons[gridSummon.position] = gridSummon.summon }) + setExtra(response.data.party.is_extra) setFound(true) setLoading(false) setCharacters(characters) @@ -101,6 +103,7 @@ const PartyRoute: React.FC = ({ match }) => { summons={summons} editable={editable} exists={found} + extra={extra} />
)