{mainSummonElement}
- {friendSummonElement}
{summonGridElement}
+ {friendSummonElement}
{subAuraSummonElement}
diff --git a/components/toasts/RemixedToast/index.tsx b/components/toasts/RemixedToast/index.tsx
new file mode 100644
index 00000000..cf112d84
--- /dev/null
+++ b/components/toasts/RemixedToast/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import Toast from '~components/common/Toast'
+import { Trans, useTranslation } from 'next-i18next'
+
+import './index.scss'
+
+interface Props {
+ partyName: string
+ open: boolean
+ onActionClick?: () => void
+ onOpenChange: (open: boolean) => void
+ onCloseClick: () => void
+}
+
+const RemixedToast = ({
+ partyName,
+ open,
+ onOpenChange,
+ onCloseClick,
+}: Props) => {
+ const { t } = useTranslation('common')
+
+ // Methods: Event handlers
+ function handleOpenChange() {
+ onOpenChange(open)
+ }
+
+ function handleCloseClick() {
+ onCloseClick()
+ }
+
+ return (
+
+ You remixed {{ title: partyName }}
+
+ }
+ onOpenChange={handleOpenChange}
+ onCloseClick={handleCloseClick}
+ />
+ )
+}
+
+export default RemixedToast
diff --git a/components/about/UpdateToast/index.scss b/components/toasts/UpdateToast/index.scss
similarity index 100%
rename from components/about/UpdateToast/index.scss
rename to components/toasts/UpdateToast/index.scss
diff --git a/components/about/UpdateToast/index.tsx b/components/toasts/UpdateToast/index.tsx
similarity index 100%
rename from components/about/UpdateToast/index.tsx
rename to components/toasts/UpdateToast/index.tsx
diff --git a/components/toasts/UrlCopiedToast/index.tsx b/components/toasts/UrlCopiedToast/index.tsx
new file mode 100644
index 00000000..60ffea89
--- /dev/null
+++ b/components/toasts/UrlCopiedToast/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import Toast from '~components/common/Toast'
+
+import './index.scss'
+import { useTranslation } from 'next-i18next'
+
+interface Props {
+ open: boolean
+ onActionClick?: () => void
+ onOpenChange: (open: boolean) => void
+ onCloseClick: () => void
+}
+
+const UrlCopiedToast = ({ open, onOpenChange, onCloseClick }: Props) => {
+ const { t } = useTranslation('common')
+
+ // Methods: Event handlers
+ function handleOpenChange() {
+ onOpenChange(open)
+ }
+
+ function handleCloseClick() {
+ onCloseClick()
+ }
+
+ return (
+
+ )
+}
+
+export default UrlCopiedToast
diff --git a/components/weapon/ExtraWeapons/index.scss b/components/weapon/ExtraWeapons/index.scss
deleted file mode 100644
index d4cc6d5b..00000000
--- a/components/weapon/ExtraWeapons/index.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.ExtraGrid.Weapons {
- background: var(--extra-purple-bg);
- border-radius: $card-corner;
- box-sizing: border-box;
- display: grid;
- grid-template-columns: 1.42fr 3fr;
- justify-content: center;
- margin: 20px auto;
- max-width: calc($grid-width + 20px);
- padding: $unit-2x $unit-2x $unit-2x 0;
- position: relative;
- left: $unit;
-
- @include breakpoint(tablet) {
- left: auto;
- max-width: auto;
- width: 100%;
- }
-
- @include breakpoint(phone) {
- display: flex;
- gap: $unit-2x;
- padding: $unit-2x;
- flex-direction: column;
- }
-
- & > span {
- color: var(--extra-purple-text);
- display: flex;
- align-items: center;
- flex-grow: 1;
- justify-content: center;
- line-height: 1.2;
- font-weight: 500;
- text-align: center;
- }
-
- #ExtraWeapons {
- display: grid;
- gap: $unit-3x;
- grid-template-columns: repeat(3, minmax(0, 1fr));
-
- @include breakpoint(tablet) {
- gap: $unit-2x;
- }
-
- @include breakpoint(phone) {
- gap: $unit;
- }
- }
-
- .WeaponUnit .WeaponImage {
- background: var(--extra-purple-card-bg);
- }
-
- .WeaponUnit .WeaponImage .icon svg {
- fill: var(--extra-purple-secondary);
- }
-}
diff --git a/components/weapon/ExtraWeapons/index.tsx b/components/weapon/ExtraWeapons/index.tsx
deleted file mode 100644
index 6c1ec552..00000000
--- a/components/weapon/ExtraWeapons/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'next-i18next'
-import WeaponUnit from '~components/weapon/WeaponUnit'
-
-import type { SearchableObject } from '~types'
-
-import './index.scss'
-
-// Props
-interface Props {
- grid: GridArray
- editable: boolean
- found?: boolean
- offset: number
- removeWeapon: (id: string) => void
- updateObject: (object: SearchableObject, position: number) => void
- updateUncap: (id: string, position: number, uncap: number) => void
-}
-
-const ExtraWeapons = (props: Props) => {
- const numWeapons: number = 3
- const { t } = useTranslation('common')
-
- return (
-
- {t('extra_weapons')}
-
-
- )
-}
-
-export default ExtraWeapons
diff --git a/components/weapon/WeaponGrid/index.scss b/components/weapon/WeaponGrid/index.scss
index 7d04123d..8fec4f82 100644
--- a/components/weapon/WeaponGrid/index.scss
+++ b/components/weapon/WeaponGrid/index.scss
@@ -49,7 +49,7 @@
}
}
- li {
- list-style: none;
+ li:not(.Empty) {
+ // aspect-ratio: 1 / 1.035;
}
}
diff --git a/components/weapon/WeaponGrid/index.tsx b/components/weapon/WeaponGrid/index.tsx
index 36ba8843..44133528 100644
--- a/components/weapon/WeaponGrid/index.tsx
+++ b/components/weapon/WeaponGrid/index.tsx
@@ -6,10 +6,13 @@ import { useTranslation } from 'next-i18next'
import { AxiosError, AxiosResponse } from 'axios'
import debounce from 'lodash.debounce'
+import classNames from 'classnames'
import Alert from '~components/common/Alert'
import WeaponUnit from '~components/weapon/WeaponUnit'
-import ExtraWeapons from '~components/weapon/ExtraWeapons'
+import ExtraWeaponsGrid from '~components/extra/ExtraWeaponsGrid'
+import ExtraContainer from '~components/extra/ExtraContainer'
+import GuidebooksGrid from '~components/extra/GuidebooksGrid'
import WeaponConflictModal from '~components/weapon/WeaponConflictModal'
import api from '~utils/api'
@@ -24,8 +27,11 @@ interface Props {
new: boolean
editable: boolean
weapons?: GridWeapon[]
+ guidebooks?: GuidebookList
createParty: (details: DetailsObject) => Promise
pushHistory?: (path: string) => void
+ updateExtra: (enabled: boolean) => void
+ updateGuidebook: (book: Guidebook | undefined, position: number) => void
}
const WeaponGrid = (props: Props) => {
@@ -115,6 +121,13 @@ const WeaponGrid = (props: Props) => {
}
}
+ function receiveGuidebookFromSearch(
+ object: SearchableObject,
+ position: number
+ ) {
+ props.updateGuidebook(object as Guidebook, position)
+ }
+
async function handleWeaponResponse(data: any) {
if (data.hasOwnProperty('conflicts')) {
if (data.incoming) setIncoming(data.incoming)
@@ -236,6 +249,10 @@ const WeaponGrid = (props: Props) => {
}
}
+ async function removeGuidebook(position: number) {
+ props.updateGuidebook(undefined, position)
+ }
+
// Methods: Updating uncap level
// Note: Saves, but debouncing is not working properly
async function saveUncap(id: string, position: number, uncapLevel: number) {
@@ -318,6 +335,12 @@ const WeaponGrid = (props: Props) => {
setPreviousUncapValues(newPreviousValues)
}
+ // Methods: Convenience
+ const displayExtraContainer =
+ props.editable ||
+ appState.party.extra ||
+ Object.values(appState.party.guidebooks).every((el) => el === undefined)
+
// Render: JSX components
const mainhandElement = (
{
)
const weaponGridElement = Array.from(Array(numWeapons)).map((x, i) => {
+ const itemClasses = classNames({
+ Empty: appState.grid.weapons.allWeapons[i] === undefined,
+ })
+
return (
-
+
{
)
})
- const extraGridElement = (
-
+ const extraElement = (
+
+
+
+
)
const conflictModal = () => {
@@ -409,9 +447,7 @@ const WeaponGrid = (props: Props) => {
- {(() => {
- return party.extra ? extraGridElement : ''
- })()}
+ {displayExtraContainer ? extraElement : ''}