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.

components/party/PartyFooter/index.tsx

@@ -260,16 +260,7 @@ const PartyFooter = (props: Props) => {
     return partySnapshot?.remixes.map((party, i) => {
       return (
         <GridRep
-          id={party.id}
+          party={party}
-          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}
           key={`party-${i}`}
           loading={false}
           onClick={goTo}

components/reps/CharacterRep/index.module.scss

@@ -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);
     }
 

components/reps/GridRep/index.module.scss

@@ -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);
+      }
+    }
+  }
 }

components/reps/GridRep/index.tsx

@@ -16,23 +16,15 @@ import ShieldIcon from '~public/icons/Shield.svg'
 import styles from './index.module.scss'
 
 interface Props {
-  shortcode: string
+  party: Party
-  id: string
-  name: string
-  raid: Raid
-  grid: GridWeapon[]
-  user?: User
-  fullAuto: boolean
-  autoGuard: boolean
-  favorited: boolean
   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)
+    setWeaponGrid(gridWeapons)
-  }, [props.grid])
+  }, [party])
 
-  function navigate() {
+  useEffect(() => {
-    props.onClick(props.shortcode)
+    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}
+          alt={party.user.avatar.picture}
-          className={`profile ${props.user.avatar.element}`}
+          className={`profile ${party.user.avatar.element}`}
-          srcSet={`/profile/${props.user.avatar.picture}.png,
+          srcSet={`/profile/${party.user.avatar.picture}.png,
-                              /profile/${props.user.avatar.picture}@2x.png 2x`}
+                              /profile/${party.user.avatar.picture}@2x.png 2x`}
-          src={`/profile/${props.user.avatar.picture}.png`}
+          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 renderWeaponGrid = (
-    const fullAutoElement = (
+    <div className={styles.weaponGrid}>
-      <span className={styles.fullAuto}>
+      <div className={mainhandClasses}>{generateMainhandImage()}</div>
-        {` · ${t('party.details.labels.full_auto')}`}
-      </span>
-    )
 
-    const autoGuardElement = (
+      <ul className={styles.weapons}>
-      <span className={styles.autoGuard}>
+        {Array.from(Array(numWeapons)).map((x, i) => {
-        <ShieldIcon />
+          return (
-      </span>
+            <li
-    )
+              key={`${party.shortcode}-weapon-${i}`}
+              className={weaponClasses}
+            >
+              {generateWeaponGridImage(i)}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
 
-    return (
+  const renderCharacterGrid = (
-      <div className={styles.auto}>
+    <div className={styles.characterGrid}>
-        {fullAutoElement}
+      <div className={protagonistClasses}>{generateMCImage()}</div>
-        {props.autoGuard ? autoGuardElement : ''}
+      {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) ||
+        ((party.user && account.user && account.user.id !== party.user.id) ||
-          !props.user) ? (
+          !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 (
+  function changeView(view: 'characters' | 'weapons' | 'summons') {
-    <Link legacyBehavior href={`/p/${props.shortcode}`}>
+    setCurrentView(view)
-      <a className={gridRepStyles}>
+  }
-        {detailsWithUsername}
-        <div className={styles.weaponGrid}>
-          <div className={mainhandClasses}>{generateMainhandImage()}</div>
 
-          <ul className={styles.weapons}>
+  return (
-            {Array.from(Array(numWeapons)).map((x, i) => {
+    <Link
-              return (
+      href={`/p/${party.shortcode}`}
-                <li key={`${props.shortcode}-${i}`} className={weaponClasses}>
+      className={gridRepClasses}
-                  {generateGridImage(i)}
+      onMouseLeave={() => changeView('weapons')}
-                </li>
+    >
-              )
+      {detailsWithUsername}
-            })}
+      <div className={styles.gridContainer}>
-          </ul>
+        {currentView === 'characters'
-        </div>
+          ? renderCharacterGrid
-      </a>
+          : currentView === 'summons'
+          ? renderSummonGrid
+          : renderWeaponGrid}
+      </div>
+      <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>
   )
 }

pages/[username].tsx

@@ -255,16 +255,7 @@ const ProfileRoute: React.FC<Props> = ({
     return parties.map((party, i) => {
       return (
         <GridRep
-          id={party.id}
+          party={party}
-          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}
           key={`party-${i}`}
           loading={isLoading}
           onClick={goTo}

pages/saved.tsx

@@ -294,16 +294,7 @@ const SavedRoute: React.FC<Props> = ({
     return parties.map((party, i) => {
       return (
         <GridRep
-          id={party.id}
+          party={party}
-          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}
           key={`party-${i}`}
           loading={isLoading}
           onClick={goTo}

pages/teams.tsx

@@ -308,16 +308,7 @@ const TeamsRoute: React.FC<Props> = ({
     return parties.map((party, i) => {
       return (
         <GridRep
-          id={party.id}
+          party={party}
-          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}
           key={`party-${i}`}
           loading={isLoading}
           onClick={goTo}

styles/themes.scss

@@ -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};

styles/variables.scss

@@ -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;