diff --git a/components/party/Party/index.tsx b/components/party/Party/index.tsx index ef0562fb..a03e910a 100644 --- a/components/party/Party/index.tsx +++ b/components/party/Party/index.tsx @@ -351,7 +351,8 @@ const Party = (props: Props) => { // Methods: Navigating with segmented control function segmentClicked(event: React.ChangeEvent) { const path = [ - router.asPath.split('/').filter((el) => el != '')[1], + // Enable when using Next.js Router + // router.asPath.split('/').filter((el) => el != '')[1], event.target.value, ].join('/') @@ -369,7 +370,10 @@ const Party = (props: Props) => { break } - router.replace(path, undefined, { shallow: true }) + // Ideally, we would use the Next.js Router to replace the URL, + // but something about shallow routing isn't working so the page is refreshing + // router.replace(path, undefined, { shallow: true }) + history.pushState({}, '', path) } // Render: JSX components diff --git a/components/party/PartyHeader/index.scss b/components/party/PartyHeader/index.scss index f51ba741..e617331c 100644 --- a/components/party/PartyHeader/index.scss +++ b/components/party/PartyHeader/index.scss @@ -18,7 +18,9 @@ .PartyDetails { box-sizing: border-box; - display: none; + display: block; + line-height: 1.4; + white-space: pre-wrap; margin: 0 auto $unit-2x; max-width: $unit * 94; overflow: hidden; @@ -28,261 +30,105 @@ padding: 0 $unit; } - &.Visible { - // margin-bottom: $unit-12x; + a:hover { + text-decoration: underline; } - &.Editable { + p { + font-size: $font-regular; + line-height: $font-regular * 1.2; + white-space: pre-line; + } + + .Tokens { + display: flex; + flex-direction: row; + flex-wrap: wrap; gap: $unit; - - &.Visible { - display: grid; - } - - fieldset { - display: block; - width: 100%; - - textarea { - min-height: $unit * 22; - width: 100%; - } - } - - .SelectTrigger { - padding: $unit-2x; - width: 100%; - } - - .DetailToggleGroup { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: $unit; - - @include breakpoint(phone) { - grid-template-columns: 1fr; - } - - .ToggleSection, - .InputSection { - align-items: center; - display: flex; - background: var(--card-bg); - border-radius: $input-corner; - - & > label { - align-items: center; - display: flex; - font-size: $font-regular; - gap: $unit; - grid-template-columns: 2fr 1fr; - justify-content: space-between; - width: 100%; - - & > span { - flex-grow: 1; - } - } - } - - .ToggleSection { - padding: ($unit * 1.5) $unit-2x; - } - - .InputSection { - padding: $unit-half $unit-2x; - padding-right: $unit-half; - - .Input { - border-radius: 7px; - } - - div.Input { - align-items: center; - border: 2px solid transparent; - box-sizing: border-box; - display: flex; - padding: $unit; - - &:has(> input:focus) { - border: 2px solid $blue; - outline: none; - } - - & > input { - background: transparent; - border: none; - padding: $unit 0; - text-align: right; - width: 2rem; - - &:focus { - outline: none; - border: none; - } - } - } - - label { - display: flex; - justify-content: space-between; - - span { - flex-grow: 1; - } - - .Input { - border-radius: 7px; - max-width: 10rem; - } - - div { - display: flex; - flex-direction: row; - gap: $unit-half; - justify-content: right; - } - } - } - } - - .bottom { - display: flex; - flex-direction: row; - gap: $unit; - - @include breakpoint(phone) { - flex-direction: column; - width: 100%; - } - - .left { - flex-grow: 1; - } - - .right { - display: flex; - flex-direction: row; - gap: $unit; - - @include breakpoint(phone) { - .Button { - flex-grow: 1; - } - } - } - } + margin-bottom: $unit-2x; } - &.ReadOnly { - box-sizing: border-box; - line-height: 1.4; - white-space: pre-wrap; + .YoutubeWrapper { + background-color: var(--card-bg); + border-radius: $card-corner; + margin: $unit 0; + position: relative; + display: block; + contain: content; + background-position: center center; + background-size: cover; + cursor: pointer; + width: 60%; + height: 60%; - &.Visible { + @include breakpoint(tablet) { + width: 100%; + height: 100%; + } + + /* gradient */ + &::before { + content: ''; display: block; + position: absolute; + top: 0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); + background-position: top; + background-repeat: repeat-x; + height: 60px; + padding-bottom: 50px; + width: 100%; + transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } - a:hover { - text-decoration: underline; - } - - p { - font-size: $font-regular; - line-height: $font-regular * 1.2; - white-space: pre-line; - } - - .Tokens { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: $unit; - margin-bottom: $unit-2x; - } - - .YoutubeWrapper { - background-color: var(--card-bg); - border-radius: $card-corner; - margin: $unit 0; - position: relative; - display: block; - contain: content; - background-position: center center; - background-size: cover; - cursor: pointer; - width: 60%; - height: 60%; - - @include breakpoint(tablet) { - width: 100%; - height: 100%; - } - - /* gradient */ - &::before { - content: ''; - display: block; - position: absolute; - top: 0; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); - background-position: top; - background-repeat: repeat-x; - height: 60px; - padding-bottom: 50px; - width: 100%; - transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); - } - - /* responsive iframe with a 16:9 aspect ratio + /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ - &::after { - content: ''; - display: block; - padding-bottom: calc(100% / (16 / 9)); - } + &::after { + content: ''; + display: block; + padding-bottom: calc(100% / (16 / 9)); + } - &:hover > .PlayerButton { - opacity: 1; - } + &:hover > .PlayerButton { + opacity: 1; + } - & > iframe { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - } + & > iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } - /* Play button */ - & > .PlayerButton { - background: none; - border: none; - background-image: url('/icons/youtube.svg'); - width: 68px; - height: 68px; - opacity: 0.8; - transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); - } + /* Play button */ + & > .PlayerButton { + background: none; + border: none; + background-image: url('/icons/youtube.svg'); + width: 68px; + height: 68px; + opacity: 0.8; + transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); + } - & > .PlayerButton, - & > .PlayerButton:before { - position: absolute; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - } + & > .PlayerButton, + & > .PlayerButton:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } - /* Post-click styles */ - &.lyt-activated { - cursor: unset; - } - &.lyt-activated::before, - &.lyt-activated > .PlayerButton { - opacity: 0; - pointer-events: none; - } + /* Post-click styles */ + &.lyt-activated { + cursor: unset; + } + &.lyt-activated::before, + &.lyt-activated > .PlayerButton { + opacity: 0; + pointer-events: none; } } } diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx index 269f1d7a..2e192d51 100644 --- a/components/party/PartyHeader/index.tsx +++ b/components/party/PartyHeader/index.tsx @@ -57,7 +57,6 @@ const PartyHeader = (props: Props) => { const classes = classNames({ PartyDetails: true, - ReadOnly: true, }) const userClass = classNames({ diff --git a/components/party/PartySegmentedControl/index.tsx b/components/party/PartySegmentedControl/index.tsx index b84caaf4..e45fb56e 100644 --- a/components/party/PartySegmentedControl/index.tsx +++ b/components/party/PartySegmentedControl/index.tsx @@ -1,20 +1,25 @@ import React from 'react' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' +import classNames from 'classnames' import { appState } from '~utils/appState' +import { accountState } from '~utils/accountState' import SegmentedControl from '~components/common/SegmentedControl' +import RepSegment from '~components/reps/RepSegment' +import CharacterRep from '~components/reps/CharacterRep' +import WeaponRep from '~components/reps/WeaponRep' +import SummonRep from '~components/reps/SummonRep' import { GridType } from '~utils/enums' import './index.scss' -import classNames from 'classnames' -import RepSegment from '~components/reps/RepSegment' -import CharacterRep from '~components/reps/CharacterRep' -import { accountState } from '~utils/accountState' -import WeaponRep from '~components/reps/WeaponRep' -import SummonRep from '~components/reps/SummonRep' + +// Fix for valtio readonly array +declare module 'valtio' { + function useSnapshot(p: T): T +} interface Props { selectedTab: GridType @@ -27,7 +32,7 @@ const PartySegmentedControl = (props: Props) => { const { party, grid } = useSnapshot(appState) - function getElement() { + const getElement = () => { let element: number = 0 if (party.element == 0 && grid.weapons.mainWeapon) element = grid.weapons.mainWeapon.element @@ -55,16 +60,16 @@ const PartySegmentedControl = (props: Props) => { controlGroup="grid" inputName="characters" name={t('party.segmented_control.characters')} - selected={props.selectedTab == GridType.Character} + selected={props.selectedTab === GridType.Character} onClick={props.onClick} > ) @@ -77,10 +82,10 @@ const PartySegmentedControl = (props: Props) => { controlGroup="grid" inputName="weapons" name="Weapons" - selected={props.selectedTab == GridType.Weapon} + selected={props.selectedTab === GridType.Weapon} onClick={props.onClick} > - + ) } @@ -92,10 +97,10 @@ const PartySegmentedControl = (props: Props) => { controlGroup="grid" inputName="summons" name="Summons" - selected={props.selectedTab == GridType.Summon} + selected={props.selectedTab === GridType.Summon} onClick={props.onClick} > - + ) } diff --git a/components/reps/SummonRep/index.tsx b/components/reps/SummonRep/index.tsx index a1a377d5..86ff0b76 100644 --- a/components/reps/SummonRep/index.tsx +++ b/components/reps/SummonRep/index.tsx @@ -1,7 +1,5 @@ import React, { useEffect, useState } from 'react' import { useRouter } from 'next/router' -import { useTranslation } from 'next-i18next' -import 'fix-date' import './index.scss' @@ -18,7 +16,6 @@ const SUMMONS_COUNT = 4 const SummonRep = (props: Props) => { // Localization for alt tags const router = useRouter() - const { t } = useTranslation('common') const locale = router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' @@ -159,8 +156,8 @@ const SummonRep = (props: Props) => {
    {Array.from(Array(SUMMONS_COUNT)).map((x, i) => { return ( -
  • - {generateGridImage(i + 1)} +
  • + {generateGridImage(i)}
    • ) })} diff --git a/components/reps/WeaponRep/index.tsx b/components/reps/WeaponRep/index.tsx index 4cecdd29..53fa18b2 100644 --- a/components/reps/WeaponRep/index.tsx +++ b/components/reps/WeaponRep/index.tsx @@ -1,7 +1,5 @@ import React, { useEffect, useState } from 'react' import { useRouter } from 'next/router' -import { useTranslation } from 'next-i18next' -import 'fix-date' import './index.scss' @@ -17,7 +15,6 @@ const WEAPONS_COUNT = 9 const WeaponRep = (props: Props) => { // Localization for alt tags const router = useRouter() - const { t } = useTranslation('common') const locale = router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' diff --git a/components/summon/ExtraSummons/index.scss b/components/summon/ExtraSummons/index.scss index 1d9bb8de..72e27b10 100644 --- a/components/summon/ExtraSummons/index.scss +++ b/components/summon/ExtraSummons/index.scss @@ -70,4 +70,8 @@ .SummonUnit .SummonImage .icon svg { fill: var(--subaura-orange-secondary); } + + .SummonUnit .QuickSummon { + display: none; + } } diff --git a/components/summon/SummonUnit/index.scss b/components/summon/SummonUnit/index.scss index 0ab90fad..ac8be29e 100644 --- a/components/summon/SummonUnit/index.scss +++ b/components/summon/SummonUnit/index.scss @@ -117,8 +117,7 @@ opacity: 1; } - &.main .QuickSummon, - &.friend .QuickSummon { + &.main .QuickSummon { $diameter: $unit-6x; background-size: $diameter $diameter; top: -2%; @@ -127,6 +126,10 @@ height: $diameter; } + &.friend .QuickSummon { + display: none; + } + &.grid .QuickSummon { $diameter: $unit-5x; background-size: $diameter $diameter;