Merge pull request #224 from jedmund/fix-uncap-transc

Fix editing uncaps and transcendence

components/CharacterGrid/index.tsx

@@ -16,7 +16,6 @@ import type { DetailsObject, JobSkillObject, SearchableObject } from '~types'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
-import { accountState } from '~utils/accountState'
 
 import './index.scss'
 
@@ -330,11 +329,7 @@ const CharacterGrid = (props: Props) => {
     position: number,
     uncapLevel: number
   ) {
-    if (
-      party.user &&
-      accountState.account.user &&
-      party.user.id === accountState.account.user.id
-    ) {
+    if (props.editable) {
       memoizeUncapAction(id, position, uncapLevel)
 
       // Optimistically update UI
@@ -430,11 +425,7 @@ const CharacterGrid = (props: Props) => {
     position: number,
     stage: number
   ) {
-    if (
-      party.user &&
-      accountState.account.user &&
-      party.user.id === accountState.account.user.id
-    ) {
+    if (props.editable) {
       memoizeTranscendenceAction(id, position, stage)
 
       // Optimistically update UI

components/CharacterHovercard/index.tsx

@@ -224,7 +224,7 @@ const CharacterHovercard = (props: Props) => {
       <HovercardTrigger asChild onClick={props.onTriggerClick}>
         {props.children}
       </HovercardTrigger>
-      <HovercardContent className="Character">
+      <HovercardContent className="Character" side="top">
         <div className="top">
           <div className="title">
             <h4>{props.gridCharacter.object.name[locale]}</h4>

components/SummonGrid/index.tsx

@@ -13,7 +13,6 @@ import ExtraSummons from '~components/ExtraSummons'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
-import { accountState } from '~utils/accountState'
 import type { DetailsObject, SearchableObject } from '~types'
 
 import './index.scss'
@@ -184,11 +183,7 @@ const SummonGrid = (props: Props) => {
     position: number,
     uncapLevel: number
   ) {
-    if (
-      party.user &&
-      accountState.account.user &&
-      party.user.id === accountState.account.user.id
-    ) {
+    if (props.editable) {
       memoizeUncapAction(id, position, uncapLevel)
 
       // Optimistically update UI
@@ -294,11 +289,7 @@ const SummonGrid = (props: Props) => {
     position: number,
     stage: number
   ) {
-    if (
-      party.user &&
-      accountState.account.user &&
-      party.user.id === accountState.account.user.id
-    ) {
+    if (props.editable) {
       memoizeTranscendenceAction(id, position, stage)
 
       // Optimistically update UI

components/SummonHovercard/index.tsx

@@ -16,6 +16,7 @@ import './index.scss'
 interface Props {
   gridSummon: GridSummon
   children: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
   onTriggerClick: () => void
 }
 
@@ -57,8 +58,14 @@ const SummonHovercard = (props: Props) => {
       if (
         upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 &&
         props.gridSummon.uncap_level == 5
-      )
+      ) {
         suffix = '_02'
+      } else if (
+        props.gridSummon.object.uncap.xlb &&
+        props.gridSummon.transcendence_step > 0
+      ) {
+        suffix = '_03'
+      }
 
       // Generate the correct source for the summon
       imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`
@@ -81,7 +88,7 @@ const SummonHovercard = (props: Props) => {
       <HovercardTrigger asChild onClick={props.onTriggerClick}>
         {props.children}
       </HovercardTrigger>
-      <HovercardContent className="Summon">
+      <HovercardContent className="Summon" side={props.side}>
         <div className="top">
           <div className="title">
             <h4>{props.gridSummon.object.name[locale]}</h4>
@@ -100,6 +107,8 @@ const SummonHovercard = (props: Props) => {
               type="summon"
               ulb={props.gridSummon.object.uncap.ulb || false}
               flb={props.gridSummon.object.uncap.flb || false}
+              xlb={props.gridSummon.object.uncap.xlb || false}
+              transcendenceStage={props.gridSummon.transcendence_step}
               special={false}
             />
           </div>

components/UncapIndicator/index.scss

@@ -1,4 +1,4 @@
-.Uncap {
+.UncapWrapper {
   position: relative;
 }
 

components/UncapIndicator/index.tsx

@@ -149,7 +149,7 @@ const UncapIndicator = (props: Props) => {
   }
 
   return (
-    <div className="Uncap">
+    <div className="UncapWrapper">
       <ul className="UncapIndicator">
         {Array.from(Array(numStars)).map((x, i) => {
           if (props.type === 'character' && i > 4) {

components/WeaponGrid/index.tsx

@@ -14,7 +14,6 @@ import WeaponConflictModal from '~components/WeaponConflictModal'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
-import { accountState } from '~utils/accountState'
 
 import type { DetailsObject, SearchableObject } from '~types'
 
@@ -265,11 +264,7 @@ const WeaponGrid = (props: Props) => {
     position: number,
     uncapLevel: number
   ) {
-    if (
-      party.user &&
-      accountState.account.user &&
-      party.user.id === accountState.account.user.id
-    ) {
+    if (props.editable) {
       memoizeAction(id, position, uncapLevel)
 
       // Optimistically update UI