Implement experimental GridRep (#368)
https://github.com/jedmund/hensei-web/assets/383021/d18f68f4-a14a-45a8-81b1-1addb5bd6ed1 This adds an experimental GridRep feature for testing. There are indicator bars underneath the grid preview on desktop that when hovered over, shows the user a peek into the other views of the team. I have qualms about this but I'm pushing it to production so that myself and others can play with it more.
This commit is contained in:
GitHub
parent
62b957034f
commit
aabd7de207
9 changed files with 559 additions and 128 deletions
|
|
@ -260,16 +260,7 @@ const PartyFooter = (props: Props) => {
|
|||
return partySnapshot?.remixes.map((party, i) => {
|
||||
return (
|
||||
<GridRep
|
||||
id={party.id}
|
||||
shortcode={party.shortcode}
|
||||
name={party.name}
|
||||
createdAt={new Date(party.created_at)}
|
||||
raid={party.raid}
|
||||
grid={party.weapons}
|
||||
user={party.user}
|
||||
favorited={party.favorited}
|
||||
fullAuto={party.full_auto}
|
||||
autoGuard={party.auto_guard}
|
||||
party={party}
|
||||
key={`party-${i}`}
|
||||
loading={false}
|
||||
onClick={goTo}
|
||||
|
|
|
|||
|
|
@ -47,32 +47,32 @@
|
|||
}
|
||||
|
||||
&.fire {
|
||||
background: var(--fire-hover-bg);
|
||||
background: var(--fire-portrait-bg);
|
||||
border-color: var(--fire-bg);
|
||||
}
|
||||
|
||||
&.water {
|
||||
background: var(--water-hover-bg);
|
||||
background: var(--water-portrait-bg);
|
||||
border-color: var(--water-bg);
|
||||
}
|
||||
|
||||
&.wind {
|
||||
background: var(--wind-hover-bg);
|
||||
background: var(--wind-portrait-bg);
|
||||
border-color: var(--wind-bg);
|
||||
}
|
||||
|
||||
&.earth {
|
||||
background: var(--earth-hover-bg);
|
||||
background: var(--earth-portrait-bg);
|
||||
border-color: var(--earth-bg);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: var(--light-hover-bg);
|
||||
background: var(--light-portrait-bg);
|
||||
border-color: var(--light-bg);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--dark-hover-bg);
|
||||
background: var(--dark-portrait-bg);
|
||||
border-color: var(--dark-bg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,11 +6,15 @@
|
|||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: $unit;
|
||||
padding: $unit-2x;
|
||||
padding: $unit-2x $unit-2x 0 $unit-2x;
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
padding-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
|
|
@ -29,6 +33,10 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.weaponGrid {
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -46,7 +54,70 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > .weaponGrid {
|
||||
.gridContainer {
|
||||
aspect-ratio: 2/0.95;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.characterGrid {
|
||||
aspect-ratio: 2/0.95;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.protagonist {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
&.fire {
|
||||
background: var(--fire-portrait-bg);
|
||||
border-color: var(--fire-bg);
|
||||
}
|
||||
|
||||
&.water {
|
||||
background: var(--water-portrait-bg);
|
||||
border-color: var(--water-bg);
|
||||
}
|
||||
|
||||
&.wind {
|
||||
background: var(--wind-portrait-bg);
|
||||
border-color: var(--wind-bg);
|
||||
}
|
||||
|
||||
&.earth {
|
||||
background: var(--earth-portrait-bg);
|
||||
border-color: var(--earth-bg);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: var(--light-portrait-bg);
|
||||
border-color: var(--light-bg);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--dark-portrait-bg);
|
||||
border-color: var(--dark-bg);
|
||||
}
|
||||
|
||||
&.empty {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: var(--background);
|
||||
border-radius: $item-corner-small;
|
||||
aspect-ratio: 69/142;
|
||||
list-style: none;
|
||||
height: calc(100% - $unit-half);
|
||||
|
||||
img {
|
||||
border-radius: $item-corner-small;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weaponGrid {
|
||||
aspect-ratio: 2/0.95;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
|
||||
|
|
@ -54,7 +125,7 @@
|
|||
|
||||
.weapon {
|
||||
background: var(--unit-bg);
|
||||
border-radius: 4px;
|
||||
border-radius: $item-corner-small;
|
||||
}
|
||||
|
||||
.mainhand.weapon {
|
||||
|
|
@ -91,6 +162,51 @@
|
|||
}
|
||||
}
|
||||
|
||||
.summonGrid {
|
||||
aspect-ratio: 2/0.94;
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
justify-content: space-between;
|
||||
|
||||
.summon,
|
||||
.mainSummon {
|
||||
background: var(--background);
|
||||
border-radius: $item-corner-small;
|
||||
|
||||
img {
|
||||
border-radius: $item-corner-small;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mainSummon {
|
||||
aspect-ratio: 56/97;
|
||||
display: grid;
|
||||
grid-column: 1 / 2; /* spans one column */
|
||||
}
|
||||
|
||||
.summons {
|
||||
display: grid; /* make the right-images container a grid */
|
||||
grid-template-columns: repeat(
|
||||
2,
|
||||
1fr
|
||||
); /* create 3 columns, each taking up 1 fraction */
|
||||
grid-template-rows: repeat(
|
||||
2,
|
||||
1fr
|
||||
); /* create 3 rows, each taking up 1 fraction */
|
||||
gap: $unit;
|
||||
aspect-ratio: 83/100;
|
||||
// column-gap: $unit;
|
||||
// row-gap: $unit-2x;
|
||||
}
|
||||
|
||||
.summon {
|
||||
aspect-ratio: 184 / 138;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -104,6 +220,7 @@
|
|||
padding-bottom: 1px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 24px;
|
||||
max-width: 258px; // Can we not do this?
|
||||
|
||||
&.empty {
|
||||
|
|
@ -157,6 +274,7 @@
|
|||
}
|
||||
|
||||
time {
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -234,4 +352,41 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicators {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $unit;
|
||||
margin-top: $unit * -1;
|
||||
margin-bottom: $unit-fourth;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
text-indent: -9999px;
|
||||
padding: $unit 0;
|
||||
|
||||
.indicator {
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
height: $unit;
|
||||
border-radius: $unit-half;
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
|
||||
span {
|
||||
text-indent: -9999px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover .indicator,
|
||||
&.active .indicator {
|
||||
background-color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,23 +16,15 @@ import ShieldIcon from '~public/icons/Shield.svg'
|
|||
import styles from './index.module.scss'
|
||||
|
||||
interface Props {
|
||||
shortcode: string
|
||||
id: string
|
||||
name: string
|
||||
raid: Raid
|
||||
grid: GridWeapon[]
|
||||
user?: User
|
||||
fullAuto: boolean
|
||||
autoGuard: boolean
|
||||
favorited: boolean
|
||||
party: Party
|
||||
loading: boolean
|
||||
createdAt: Date
|
||||
onClick: (shortcode: string) => void
|
||||
onSave?: (partyId: string, favorited: boolean) => void
|
||||
}
|
||||
|
||||
const GridRep = (props: Props) => {
|
||||
const GridRep = ({ party, loading, onClick, onSave }: Props) => {
|
||||
const numWeapons: number = 9
|
||||
const numSummons: number = 6
|
||||
|
||||
const { account } = useSnapshot(accountState)
|
||||
|
||||
|
|
@ -42,27 +34,42 @@ const GridRep = (props: Props) => {
|
|||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [currentView, setCurrentView] = useState<
|
||||
'characters' | 'weapons' | 'summons'
|
||||
>('weapons')
|
||||
|
||||
const [mainhand, setMainhand] = useState<Weapon>()
|
||||
const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
|
||||
const [grid, setGrid] = useState<GridArray<GridWeapon>>({})
|
||||
const [weaponGrid, setWeaponGrid] = useState<GridArray<GridWeapon>>({})
|
||||
const [characters, setCharacters] = useState<GridArray<Character>>({})
|
||||
const [characterGrid, setCharacterGrid] = useState<GridArray<GridCharacter>>(
|
||||
{}
|
||||
)
|
||||
const [mainSummon, setMainSummon] = useState<GridSummon>()
|
||||
const [friendSummon, setFriendSummon] = useState<GridSummon>()
|
||||
const [summons, setSummons] = useState<GridArray<Summon>>({})
|
||||
const [summonGrid, setSummonGrid] = useState<GridArray<GridSummon>>({})
|
||||
|
||||
const gridRepStyles = classNames({
|
||||
// Style construction
|
||||
|
||||
const gridRepClasses = classNames({
|
||||
[styles.gridRep]: true,
|
||||
[styles.visible]: visible,
|
||||
[styles.hidden]: !visible,
|
||||
})
|
||||
|
||||
const titleClass = classNames({
|
||||
empty: !props.name,
|
||||
empty: !party.name,
|
||||
})
|
||||
|
||||
const raidClass = classNames({
|
||||
[styles.raid]: true,
|
||||
[styles.empty]: !props.raid,
|
||||
[styles.empty]: !party.raid,
|
||||
})
|
||||
|
||||
const userClass = classNames({
|
||||
[styles.user]: true,
|
||||
[styles.empty]: !props.user,
|
||||
[styles.empty]: !party.user,
|
||||
})
|
||||
|
||||
const mainhandClasses = classNames({
|
||||
|
|
@ -75,8 +82,22 @@ const GridRep = (props: Props) => {
|
|||
[styles.grid]: true,
|
||||
})
|
||||
|
||||
const protagonistClasses = classNames({
|
||||
[styles.protagonist]: true,
|
||||
[styles.grid]: true,
|
||||
[styles[`${numberToElement()}`]]: true,
|
||||
[styles.empty]: !party.job || party.job.id === '-1',
|
||||
})
|
||||
|
||||
const characterClasses = classNames({
|
||||
[styles.character]: true,
|
||||
[styles.grid]: true,
|
||||
})
|
||||
|
||||
// Hooks
|
||||
|
||||
useEffect(() => {
|
||||
if (props.loading) {
|
||||
if (loading) {
|
||||
setVisible(false)
|
||||
} else {
|
||||
const timeout = setTimeout(() => {
|
||||
|
|
@ -84,7 +105,7 @@ const GridRep = (props: Props) => {
|
|||
}, 150)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [props.loading])
|
||||
}, [loading])
|
||||
|
||||
useEffect(() => {
|
||||
setVisible(false) // Trigger fade out
|
||||
|
|
@ -99,7 +120,7 @@ const GridRep = (props: Props) => {
|
|||
const gridWeapons = Array(numWeapons)
|
||||
|
||||
let foundMainhand = false
|
||||
for (const [key, value] of Object.entries(props.grid)) {
|
||||
for (const [key, value] of Object.entries(party.weapons)) {
|
||||
if (value.position == -1) {
|
||||
setMainhand(value.object)
|
||||
foundMainhand = true
|
||||
|
|
@ -114,18 +135,74 @@ const GridRep = (props: Props) => {
|
|||
}
|
||||
|
||||
setWeapons(newWeapons)
|
||||
setGrid(gridWeapons)
|
||||
}, [props.grid])
|
||||
setWeaponGrid(gridWeapons)
|
||||
}, [party])
|
||||
|
||||
function navigate() {
|
||||
props.onClick(props.shortcode)
|
||||
useEffect(() => {
|
||||
const newCharacters = Array(3)
|
||||
const gridCharacters = Array(3)
|
||||
|
||||
if (party.characters) {
|
||||
for (const [key, value] of Object.entries(party.characters)) {
|
||||
if (value.position != null) {
|
||||
newCharacters[value.position] = value.object
|
||||
gridCharacters[value.position] = value
|
||||
}
|
||||
}
|
||||
|
||||
setCharacters(newCharacters)
|
||||
setCharacterGrid(gridCharacters)
|
||||
}
|
||||
}, [party])
|
||||
|
||||
useEffect(() => {
|
||||
const newSummons = Array(numSummons)
|
||||
const gridSummons = Array(numSummons)
|
||||
|
||||
if (party.summons) {
|
||||
for (const [key, value] of Object.entries(party.summons)) {
|
||||
if (value.main) {
|
||||
setMainSummon(value)
|
||||
} else if (value.friend) {
|
||||
setFriendSummon(value)
|
||||
} else if (!value.main && !value.friend && value.position != null) {
|
||||
newSummons[value.position] = value.object
|
||||
gridSummons[value.position] = value
|
||||
}
|
||||
}
|
||||
|
||||
setSummons(newSummons)
|
||||
setSummonGrid(gridSummons)
|
||||
}
|
||||
}, [party])
|
||||
|
||||
// Convert element to string
|
||||
function numberToElement() {
|
||||
switch (mainhand?.element || weaponGrid[0]?.element) {
|
||||
case 1:
|
||||
return 'wind'
|
||||
case 2:
|
||||
return 'fire'
|
||||
case 3:
|
||||
return 'water'
|
||||
case 4:
|
||||
return 'earth'
|
||||
case 5:
|
||||
return 'dark'
|
||||
case 6:
|
||||
return 'light'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
// Methods: Image generation
|
||||
|
||||
function generateMainhandImage() {
|
||||
let url = ''
|
||||
|
||||
if (mainhand) {
|
||||
const weapon = Object.values(props.grid).find(
|
||||
const weapon = Object.values(party.weapons).find(
|
||||
(w) => w && w.object.id === mainhand.id
|
||||
)
|
||||
|
||||
|
|
@ -136,18 +213,18 @@ const GridRep = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
return mainhand && props.grid[0] ? (
|
||||
return mainhand && party.weapons[0] ? (
|
||||
<img alt={mainhand.name[locale]} src={url} />
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
function generateGridImage(position: number) {
|
||||
function generateWeaponGridImage(position: number) {
|
||||
let url = ''
|
||||
|
||||
const weapon = weapons[position]
|
||||
const gridWeapon = grid[position]
|
||||
const gridWeapon = weaponGrid[position]
|
||||
|
||||
if (weapon && gridWeapon) {
|
||||
if (weapon.element == 0 && gridWeapon.element) {
|
||||
|
|
@ -164,19 +241,163 @@ const GridRep = (props: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
function generateMCImage() {
|
||||
let source = ''
|
||||
|
||||
if (party.job) {
|
||||
const slug = party.job.name.en.replaceAll(' ', '-').toLowerCase()
|
||||
const gender = party.user?.gender == 1 ? 'b' : 'a'
|
||||
source = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-portraits/${slug}_${gender}.png`
|
||||
}
|
||||
|
||||
return (
|
||||
party.job &&
|
||||
party.job.id !== '-1' && (
|
||||
<img alt={party.job ? party.job?.name[locale] : ''} src={source} />
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
function generateCharacterGridImage(position: number) {
|
||||
let url = ''
|
||||
|
||||
const gridCharacter = characterGrid[position]
|
||||
const character = characters[position]
|
||||
|
||||
if (character && gridCharacter) {
|
||||
// Change the image based on the uncap level
|
||||
let suffix = '01'
|
||||
if (gridCharacter.transcendence_step > 0) suffix = '04'
|
||||
else if (gridCharacter.uncap_level >= 5) suffix = '03'
|
||||
else if (gridCharacter.uncap_level > 2) suffix = '02'
|
||||
|
||||
if (gridCharacter.object.granblue_id === '3030182000') {
|
||||
let element = 1
|
||||
if (mainhand && mainhand.element) {
|
||||
element = mainhand.element
|
||||
}
|
||||
|
||||
suffix = `${suffix}_0${element}`
|
||||
}
|
||||
|
||||
const url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-main/${character.granblue_id}_${suffix}.jpg`
|
||||
|
||||
return (
|
||||
characters[position] && (
|
||||
<img alt={characters[position]?.name[locale]} src={url} />
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function generateMainSummonImage(position: 'main' | 'friend') {
|
||||
let url = ''
|
||||
|
||||
const upgradedSummons = [
|
||||
'2040094000',
|
||||
'2040100000',
|
||||
'2040080000',
|
||||
'2040098000',
|
||||
'2040090000',
|
||||
'2040084000',
|
||||
'2040003000',
|
||||
'2040056000',
|
||||
'2040020000',
|
||||
'2040034000',
|
||||
'2040028000',
|
||||
'2040027000',
|
||||
'2040046000',
|
||||
'2040047000',
|
||||
]
|
||||
|
||||
const summon = position === 'main' ? mainSummon : friendSummon
|
||||
|
||||
if (summon) {
|
||||
// Change the image based on the uncap level
|
||||
let suffix = ''
|
||||
if (summon.object.uncap.xlb && summon.uncap_level == 6) {
|
||||
if (summon.transcendence_step >= 1 && summon.transcendence_step < 5) {
|
||||
suffix = '_03'
|
||||
} else if (summon.transcendence_step === 5) {
|
||||
suffix = '_04'
|
||||
}
|
||||
} else if (
|
||||
upgradedSummons.indexOf(summon.object.granblue_id.toString()) != -1 &&
|
||||
summon.uncap_level == 5
|
||||
) {
|
||||
suffix = '_02'
|
||||
}
|
||||
|
||||
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${summon.object.granblue_id}${suffix}.jpg`
|
||||
}
|
||||
|
||||
return summon && <img alt={summon.object.name[locale]} src={url} />
|
||||
}
|
||||
|
||||
function generateSummonGridImage(position: number) {
|
||||
let url = ''
|
||||
|
||||
const gridSummon = summonGrid[position]
|
||||
const summon = gridSummon?.object
|
||||
|
||||
const upgradedSummons = [
|
||||
'2040094000',
|
||||
'2040100000',
|
||||
'2040080000',
|
||||
'2040098000',
|
||||
'2040090000',
|
||||
'2040084000',
|
||||
'2040003000',
|
||||
'2040056000',
|
||||
'2040020000',
|
||||
'2040034000',
|
||||
'2040028000',
|
||||
'2040027000',
|
||||
'2040046000',
|
||||
'2040047000',
|
||||
]
|
||||
|
||||
if (summon && gridSummon) {
|
||||
// Change the image based on the uncap level
|
||||
let suffix = ''
|
||||
if (gridSummon.object.uncap.xlb && gridSummon.uncap_level == 6) {
|
||||
if (
|
||||
gridSummon.transcendence_step >= 1 &&
|
||||
gridSummon.transcendence_step < 5
|
||||
) {
|
||||
suffix = '_03'
|
||||
} else if (gridSummon.transcendence_step === 5) {
|
||||
suffix = '_04'
|
||||
}
|
||||
} else if (
|
||||
upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 &&
|
||||
gridSummon.uncap_level == 5
|
||||
) {
|
||||
suffix = '_02'
|
||||
}
|
||||
|
||||
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`
|
||||
}
|
||||
return (
|
||||
summons[position] && (
|
||||
<img alt={summons[position]?.name[locale]} src={url} />
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
function sendSaveData() {
|
||||
if (props.onSave) props.onSave(props.id, props.favorited)
|
||||
if (onSave) onSave(party.id, party.favorited)
|
||||
}
|
||||
|
||||
const userImage = () => {
|
||||
if (props.user && props.user.avatar) {
|
||||
if (party.user && party.user.avatar) {
|
||||
return (
|
||||
<img
|
||||
alt={props.user.avatar.picture}
|
||||
className={`profile ${props.user.avatar.element}`}
|
||||
srcSet={`/profile/${props.user.avatar.picture}.png,
|
||||
/profile/${props.user.avatar.picture}@2x.png 2x`}
|
||||
src={`/profile/${props.user.avatar.picture}.png`}
|
||||
alt={party.user.avatar.picture}
|
||||
className={`profile ${party.user.avatar.element}`}
|
||||
srcSet={`/profile/${party.user.avatar.picture}.png,
|
||||
/profile/${party.user.avatar.picture}@2x.png 2x`}
|
||||
src={`/profile/${party.user.avatar.picture}.png`}
|
||||
/>
|
||||
)
|
||||
} else
|
||||
|
|
@ -194,63 +415,95 @@ const GridRep = (props: Props) => {
|
|||
const attribution = () => (
|
||||
<span className={userClass}>
|
||||
{userImage()}
|
||||
{props.user ? props.user.username : t('no_user')}
|
||||
{party.user ? party.user.username : t('no_user')}
|
||||
</span>
|
||||
)
|
||||
|
||||
function fullAutoString() {
|
||||
const fullAutoElement = (
|
||||
<span className={styles.fullAuto}>
|
||||
{` · ${t('party.details.labels.full_auto')}`}
|
||||
</span>
|
||||
)
|
||||
|
||||
const autoGuardElement = (
|
||||
<span className={styles.autoGuard}>
|
||||
<ShieldIcon />
|
||||
</span>
|
||||
)
|
||||
const renderWeaponGrid = (
|
||||
<div className={styles.weaponGrid}>
|
||||
<div className={mainhandClasses}>{generateMainhandImage()}</div>
|
||||
|
||||
<ul className={styles.weapons}>
|
||||
{Array.from(Array(numWeapons)).map((x, i) => {
|
||||
return (
|
||||
<div className={styles.auto}>
|
||||
{fullAutoElement}
|
||||
{props.autoGuard ? autoGuardElement : ''}
|
||||
<li
|
||||
key={`${party.shortcode}-weapon-${i}`}
|
||||
className={weaponClasses}
|
||||
>
|
||||
{generateWeaponGridImage(i)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderCharacterGrid = (
|
||||
<div className={styles.characterGrid}>
|
||||
<div className={protagonistClasses}>{generateMCImage()}</div>
|
||||
{Array.from(Array(3)).map((x, i) => {
|
||||
return (
|
||||
<li
|
||||
key={`${party.shortcode}-chara-${i}`}
|
||||
className={characterClasses}
|
||||
>
|
||||
{generateCharacterGridImage(i)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderSummonGrid = (
|
||||
<div className={styles.summonGrid}>
|
||||
<div className={styles.mainSummon}>{generateMainSummonImage('main')}</div>
|
||||
<ul className={styles.summons}>
|
||||
{Array.from(Array(numSummons)).map((x, i) => {
|
||||
return (
|
||||
<li key={`summons-${i}`} className={styles.summon}>
|
||||
{generateSummonGridImage(i)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<div className={styles.mainSummon}>
|
||||
{generateMainSummonImage('friend')}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const detailsWithUsername = (
|
||||
<div className={styles.details}>
|
||||
<div className={styles.top}>
|
||||
<div className={styles.info}>
|
||||
<h2 className={titleClass}>
|
||||
{props.name ? props.name : t('no_title')}
|
||||
{party.name ? party.name : t('no_title')}
|
||||
</h2>
|
||||
<div className={styles.properties}>
|
||||
<span className={raidClass}>
|
||||
{props.raid ? props.raid.name[locale] : t('no_raid')}
|
||||
{party.raid ? party.raid.name[locale] : t('no_raid')}
|
||||
</span>
|
||||
{props.fullAuto && (
|
||||
{party.full_auto && (
|
||||
<span className={styles.fullAuto}>
|
||||
{` · ${t('party.details.labels.full_auto')}`}
|
||||
</span>
|
||||
)}
|
||||
{props.raid && props.raid.group.extra && (
|
||||
{party.raid && party.raid.group.extra && (
|
||||
<span className={styles.extra}>{` · EX`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{account.authorized &&
|
||||
((props.user && account.user && account.user.id !== props.user.id) ||
|
||||
!props.user) ? (
|
||||
((party.user && account.user && account.user.id !== party.user.id) ||
|
||||
!party.user) ? (
|
||||
<Link href="#">
|
||||
<Button
|
||||
className={classNames({
|
||||
save: true,
|
||||
saved: props.favorited,
|
||||
saved: party.favorited,
|
||||
})}
|
||||
leftAccessoryIcon={<SaveIcon className="stroke" />}
|
||||
active={props.favorited}
|
||||
active={party.favorited}
|
||||
bound={true}
|
||||
size="small"
|
||||
onClick={sendSaveData}
|
||||
|
|
@ -265,32 +518,61 @@ const GridRep = (props: Props) => {
|
|||
|
||||
<time
|
||||
className={styles.lastUpdated}
|
||||
dateTime={props.createdAt.toISOString()}
|
||||
dateTime={new Date(party.created_at).toISOString()}
|
||||
>
|
||||
{formatTimeAgo(props.createdAt, locale)}
|
||||
{formatTimeAgo(new Date(party.created_at), locale)}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Link legacyBehavior href={`/p/${props.shortcode}`}>
|
||||
<a className={gridRepStyles}>
|
||||
{detailsWithUsername}
|
||||
<div className={styles.weaponGrid}>
|
||||
<div className={mainhandClasses}>{generateMainhandImage()}</div>
|
||||
function changeView(view: 'characters' | 'weapons' | 'summons') {
|
||||
setCurrentView(view)
|
||||
}
|
||||
|
||||
<ul className={styles.weapons}>
|
||||
{Array.from(Array(numWeapons)).map((x, i) => {
|
||||
return (
|
||||
<li key={`${props.shortcode}-${i}`} className={weaponClasses}>
|
||||
{generateGridImage(i)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<Link
|
||||
href={`/p/${party.shortcode}`}
|
||||
className={gridRepClasses}
|
||||
onMouseLeave={() => changeView('weapons')}
|
||||
>
|
||||
{detailsWithUsername}
|
||||
<div className={styles.gridContainer}>
|
||||
{currentView === 'characters'
|
||||
? renderCharacterGrid
|
||||
: currentView === 'summons'
|
||||
? renderSummonGrid
|
||||
: renderWeaponGrid}
|
||||
</div>
|
||||
</a>
|
||||
<ul className={styles.indicators}>
|
||||
<li
|
||||
className={classNames({
|
||||
[styles.active]: currentView === 'characters',
|
||||
})}
|
||||
onMouseEnter={() => changeView('characters')}
|
||||
>
|
||||
<div className={styles.indicator} />
|
||||
<span>Characters</span>
|
||||
</li>
|
||||
<li
|
||||
className={classNames({
|
||||
[styles.active]: currentView === 'weapons',
|
||||
})}
|
||||
onMouseEnter={() => changeView('weapons')}
|
||||
>
|
||||
<div className={styles.indicator} />
|
||||
<span>Weapons</span>
|
||||
</li>
|
||||
<li
|
||||
className={classNames({
|
||||
[styles.active]: currentView === 'summons',
|
||||
})}
|
||||
onMouseEnter={() => changeView('summons')}
|
||||
>
|
||||
<div className={styles.indicator} />
|
||||
<span>Summons</span>
|
||||
</li>
|
||||
</ul>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -255,16 +255,7 @@ const ProfileRoute: React.FC<Props> = ({
|
|||
return parties.map((party, i) => {
|
||||
return (
|
||||
<GridRep
|
||||
id={party.id}
|
||||
shortcode={party.shortcode}
|
||||
name={party.name}
|
||||
createdAt={new Date(party.created_at)}
|
||||
raid={party.raid}
|
||||
grid={party.weapons}
|
||||
user={party.user}
|
||||
favorited={party.favorited}
|
||||
fullAuto={party.full_auto}
|
||||
autoGuard={party.auto_guard}
|
||||
party={party}
|
||||
key={`party-${i}`}
|
||||
loading={isLoading}
|
||||
onClick={goTo}
|
||||
|
|
|
|||
|
|
@ -294,16 +294,7 @@ const SavedRoute: React.FC<Props> = ({
|
|||
return parties.map((party, i) => {
|
||||
return (
|
||||
<GridRep
|
||||
id={party.id}
|
||||
shortcode={party.shortcode}
|
||||
name={party.name}
|
||||
createdAt={new Date(party.created_at)}
|
||||
raid={party.raid}
|
||||
grid={party.weapons}
|
||||
user={party.user}
|
||||
favorited={party.favorited}
|
||||
fullAuto={party.full_auto}
|
||||
autoGuard={party.auto_guard}
|
||||
party={party}
|
||||
key={`party-${i}`}
|
||||
loading={isLoading}
|
||||
onClick={goTo}
|
||||
|
|
|
|||
|
|
@ -308,16 +308,7 @@ const TeamsRoute: React.FC<Props> = ({
|
|||
return parties.map((party, i) => {
|
||||
return (
|
||||
<GridRep
|
||||
id={party.id}
|
||||
shortcode={party.shortcode}
|
||||
name={party.name}
|
||||
createdAt={new Date(party.created_at)}
|
||||
raid={party.raid}
|
||||
grid={party.weapons}
|
||||
user={party.user}
|
||||
favorited={party.favorited}
|
||||
fullAuto={party.full_auto}
|
||||
autoGuard={party.auto_guard}
|
||||
party={party}
|
||||
key={`party-${i}`}
|
||||
loading={isLoading}
|
||||
onClick={goTo}
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@
|
|||
|
||||
--wind-bg: #{$wind--bg--light};
|
||||
--wind-bg-hover: #{$wind--bg--hover--light};
|
||||
--wind-portrait-bg: #{$wind--portrait--bg--light};
|
||||
--wind-text: #{$wind--text--light};
|
||||
--wind-raid-text: #{$wind--text--raid--light};
|
||||
--wind-text-hover: #{$wind--text--hover--light};
|
||||
|
|
@ -181,6 +182,7 @@
|
|||
|
||||
--fire-bg: #{$fire--bg--light};
|
||||
--fire-bg-hover: #{$fire--bg--hover--light};
|
||||
--fire-portrait-bg: #{$fire--portrait--bg--light};
|
||||
--fire-text: #{$fire--text--light};
|
||||
--fire-raid-text: #{$fire--text--raid--light};
|
||||
--fire-text-hover: #{$fire--text--hover--light};
|
||||
|
|
@ -189,6 +191,7 @@
|
|||
|
||||
--water-bg: #{$water--bg--light};
|
||||
--water-bg-hover: #{$water--bg--hover--light};
|
||||
--water-portrait-bg: #{$water--portrait--bg--light};
|
||||
--water-text: #{$water--text--light};
|
||||
--water-raid-text: #{$water--text--raid--light};
|
||||
--water-text-hover: #{$water--text--hover--light};
|
||||
|
|
@ -197,6 +200,7 @@
|
|||
|
||||
--earth-bg: #{$earth--bg--light};
|
||||
--earth-bg-hover: #{$earth--bg--hover--light};
|
||||
--earth-portrait-bg: #{$earth--portrait--bg--light};
|
||||
--earth-text: #{$earth--text--light};
|
||||
--earth-raid-text: #{$earth--text--raid--light};
|
||||
--earth-text-hover: #{$earth--text--hover--light};
|
||||
|
|
@ -205,6 +209,7 @@
|
|||
|
||||
--dark-bg: #{$dark--bg--light};
|
||||
--dark-bg-hover: #{$dark--bg--hover--light};
|
||||
--dark-portrait-bg: #{$dark--portrait--bg--light};
|
||||
--dark-text: #{$dark--text--light};
|
||||
--dark-raid-text: #{$dark--text--raid--light};
|
||||
--dark-text-hover: #{$dark--text--hover--light};
|
||||
|
|
@ -213,6 +218,7 @@
|
|||
|
||||
--light-bg: #{$light--bg--light};
|
||||
--light-bg-hover: #{$light--bg--hover--light};
|
||||
--light-portrait-bg: #{$light--portrait--bg--light};
|
||||
--light-text: #{$light--text--light};
|
||||
--light-raid-text: #{$light--text--raid--light};
|
||||
--light-text-hover: #{$light--text--hover--light};
|
||||
|
|
@ -399,6 +405,7 @@
|
|||
|
||||
--wind-bg: #{$wind--bg--dark};
|
||||
--wind-bg-hover: #{$wind--bg--hover--dark};
|
||||
--wind-portrait-bg: #{$wind--portrait--bg--dark};
|
||||
--wind-text: #{$wind--text--dark};
|
||||
--wind-raid-text: #{$wind--text--raid--dark};
|
||||
--wind-text-hover: #{$wind--text--hover--dark};
|
||||
|
|
@ -407,6 +414,7 @@
|
|||
|
||||
--fire-bg: #{$fire--bg--dark};
|
||||
--fire-bg-hover: #{$fire--bg--hover--dark};
|
||||
--fire-portrait-bg: #{$fire--portrait--bg--dark};
|
||||
--fire-text: #{$fire--text--dark};
|
||||
--fire-raid-text: #{$fire--text--raid--dark};
|
||||
--fire-text-hover: #{$fire--text--hover--dark};
|
||||
|
|
@ -415,6 +423,7 @@
|
|||
|
||||
--water-bg: #{$water--bg--dark};
|
||||
--water-bg-hover: #{$water--bg--hover--dark};
|
||||
--water-portrait-bg: #{$water--portrait--bg--dark};
|
||||
--water-text: #{$water--text--dark};
|
||||
--water-raid-text: #{$water--text--raid--dark};
|
||||
--water-text-hover: #{$water--text--hover--dark};
|
||||
|
|
@ -423,6 +432,7 @@
|
|||
|
||||
--earth-bg: #{$earth--bg--dark};
|
||||
--earth-bg-hover: #{$earth--bg--hover--dark};
|
||||
--earth-portrait-bg: #{$earth--portrait--bg--dark};
|
||||
--earth-text: #{$earth--text--dark};
|
||||
--earth-raid-text: #{$earth--text--raid--dark};
|
||||
--earth-text-hover: #{$earth--text--hover--dark};
|
||||
|
|
@ -431,6 +441,7 @@
|
|||
|
||||
--dark-bg: #{$dark--bg--dark};
|
||||
--dark-bg-hover: #{$dark--bg--hover--dark};
|
||||
--dark-portrait-bg: #{$dark--portrait--bg--dark};
|
||||
--dark-text: #{$dark--text--dark};
|
||||
--dark-raid-text: #{$dark--text--raid--dark};
|
||||
--dark-text-hover: #{$dark--text--hover--dark};
|
||||
|
|
@ -439,6 +450,7 @@
|
|||
|
||||
--light-bg: #{$light--bg--dark};
|
||||
--light-bg-hover: #{$light--bg--hover--dark};
|
||||
--light-portrait-bg: #{$light--portrait--bg--dark};
|
||||
--light-text: #{$light--text--dark};
|
||||
--light-raid-text: #{$light--text--raid--dark};
|
||||
--light-text-hover: #{$light--text--hover--dark};
|
||||
|
|
|
|||
|
|
@ -450,6 +450,9 @@ $tag--text--dark: $grey-50;
|
|||
$wind--bg--light: $wind-bg-10;
|
||||
$wind--bg--dark: $wind-bg-10;
|
||||
|
||||
$wind--portrait--bg--light: $wind-bg-20;
|
||||
$wind--portrait--bg--dark: $wind-bg-20;
|
||||
|
||||
$wind--bg--hover--light: $wind-bg-00;
|
||||
$wind--bg--hover--dark: $wind-bg-00;
|
||||
|
||||
|
|
@ -494,6 +497,9 @@ $null--shadow--dark--hover: fade-out($grey-10, 0.3);
|
|||
$fire--bg--light: $fire-bg-10;
|
||||
$fire--bg--dark: $fire-bg-10;
|
||||
|
||||
$fire--portrait--bg--light: $fire-bg-20;
|
||||
$fire--portrait--bg--dark: $fire-bg-20;
|
||||
|
||||
$fire--bg--hover--light: $fire-bg-00;
|
||||
$fire--bg--hover--dark: $fire-bg-00;
|
||||
|
||||
|
|
@ -516,6 +522,9 @@ $fire--shadow--dark--hover: fade-out($fire-text-00, 0.3);
|
|||
$water--bg--light: $water-bg-10;
|
||||
$water--bg--dark: $water-bg-10;
|
||||
|
||||
$water--portrait--bg--light: $water-bg-20;
|
||||
$water--portrait--bg--dark: $water-bg-20;
|
||||
|
||||
$water--bg--hover--light: $water-bg-00;
|
||||
$water--bg--hover--dark: $water-bg-00;
|
||||
|
||||
|
|
@ -538,6 +547,9 @@ $water--shadow--dark--hover: fade-out($water-text-00, 0.3);
|
|||
$earth--bg--light: $earth-bg-10;
|
||||
$earth--bg--dark: $earth-bg-10;
|
||||
|
||||
$earth--portrait--bg--light: $earth-bg-20;
|
||||
$earth--portrait--bg--dark: $earth-bg-20;
|
||||
|
||||
$earth--bg--hover--light: $earth-bg-00;
|
||||
$earth--bg--hover--dark: $earth-bg-00;
|
||||
|
||||
|
|
@ -560,6 +572,9 @@ $earth--shadow--dark--hover: fade-out($earth-text-00, 0.3);
|
|||
$dark--bg--light: $dark-bg-10;
|
||||
$dark--bg--dark: $dark-bg-10;
|
||||
|
||||
$dark--portrait--bg--light: $dark-bg-20;
|
||||
$dark--portrait--bg--dark: $dark-bg-20;
|
||||
|
||||
$dark--bg--hover--light: $dark-bg-00;
|
||||
$dark--bg--hover--dark: $dark-bg-00;
|
||||
|
||||
|
|
@ -582,6 +597,9 @@ $dark--shadow--dark--hover: fade-out($dark-text-00, 0.3);
|
|||
$light--bg--light: $light-bg-10;
|
||||
$light--bg--dark: $light-bg-10;
|
||||
|
||||
$light--portrait--bg--light: $light-bg-20;
|
||||
$light--portrait--bg--dark: $light-bg-20;
|
||||
|
||||
$light--bg--hover--light: $light-bg-00;
|
||||
$light--bg--hover--dark: $light-bg-00;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue