Added TranscendencePopover

This popover is the UI that lets you set an item's transcendence

components/TranscendencePopover/index.scss

@@ -0,0 +1,32 @@
+.Transcendence.Popover {
+  align-items: center;
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  border: 0.5px solid rgba(0, 0, 0, 0.18);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
+  display: flex;
+  flex-direction: column;
+  gap: $unit-half;
+  width: 80px;
+  height: 80px;
+  padding: $unit;
+  justify-content: center;
+  position: absolute;
+  opacity: 0;
+  z-index: 31;
+  top: -32px;
+  right: -40px;
+
+  &.open {
+    opacity: 1;
+  }
+
+  h4 {
+    font-size: $font-small;
+    font-weight: $medium;
+  }
+
+  .Pending {
+    color: $yellow;
+  }
+}

components/TranscendencePopover/index.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import classNames from 'classnames'
+
+import TranscendenceStar from '~components/TranscendenceStar'
+import './index.scss'
+
+interface Props {
+  className?: string
+  open: boolean
+  stage: number
+  sendValue?: (stage: number) => void
+}
+
+const TranscendencePopover = ({
+  className,
+  open: popoverOpen,
+  stage,
+  sendValue,
+}: Props) => {
+  const { t } = useTranslation('common')
+
+  const [open, setOpen] = useState(false)
+
+  const [currentStage, setCurrentStage] = useState(0)
+
+  const classes = classNames({
+    Transcendence: true,
+    Popover: true,
+    open: true, // This is hardcoded for now
+  })
+
+  const levelClasses = classNames({
+    Pending: stage != currentStage,
+  })
+
+  useEffect(() => {
+    setCurrentStage(stage)
+  }, [stage])
+
+  useEffect(() => {
+    setOpen(popoverOpen)
+  }, [popoverOpen])
+
+  function handleFragmentClicked(newStage: number) {
+    setCurrentStage(newStage)
+    if (sendValue) sendValue(newStage)
+  }
+
+  function handleFragmentHovered(newStage: number) {
+    setCurrentStage(newStage)
+  }
+
+  return (
+    <div className={classes}>
+      <TranscendenceStar
+        className="Interactive Base"
+        editable={true}
+        interactive={true}
+        stage={stage}
+        onFragmentClick={handleFragmentClicked}
+        onFragmentHover={handleFragmentHovered}
+      />
+      <h4>
+        <span>{t('level')}&nbsp;</span>
+        <span className={levelClasses}>{100 + 10 * currentStage}</span>
+      </h4>
+    </div>
+  )
+}
+
+export default TranscendencePopover

components/UncapIndicator/index.scss

@@ -1,3 +1,7 @@
+.Uncap {
+  position: relative;
+}
+
 .UncapIndicator {
   display: flex;
   flex-direction: row;

components/UncapIndicator/index.tsx

@@ -1,20 +1,28 @@
-import React from 'react'
+import React, { useState } from 'react'
 import UncapStar from '~components/UncapStar'
+import TranscendenceStar from '~components/TranscendenceStar'
 
 import './index.scss'
+import TranscendencePopover from '~components/TranscendencePopover'
 
 interface Props {
   type: 'character' | 'weapon' | 'summon'
   rarity?: number
   uncapLevel?: number
+  transcendenceStep?: number
   flb: boolean
   ulb: boolean
+  xlb?: boolean
   special: boolean
   updateUncap?: (index: number) => void
+  updateTranscendence?: (index: number) => void
 }
 
 const UncapIndicator = (props: Props) => {
   const numStars = setNumStars()
+
+  const [popoverOpen, setPopoverOpen] = useState(false)
+
   function setNumStars() {
     let numStars
 
@@ -56,14 +64,16 @@ const UncapIndicator = (props: Props) => {
     }
   }
 
+  function openPopover() {
+    setPopoverOpen(true)
+  }
+
   const transcendence = (i: number) => {
     return (
-      <UncapStar
-        ulb={true}
-        empty={props.uncapLevel ? i >= props.uncapLevel : false}
+      <TranscendenceStar
         key={`star_${i}`}
-        index={i}
-        onClick={toggleStar}
+        interactive={false}
+        onClick={openPopover}
       />
     )
   }
@@ -106,23 +116,38 @@ const UncapIndicator = (props: Props) => {
     )
   }
 
+  const transcendencePopover = () => {
+    return props.type === 'character' || props.type === 'summon' ? (
+      <TranscendencePopover
+        open={popoverOpen}
+        stage={props.transcendenceStep ? props.transcendenceStep : 0}
+        sendValue={props.updateTranscendence}
+      />
+    ) : (
+      ''
+    )
+  }
+
   return (
-    <ul className="UncapIndicator">
-      {Array.from(Array(numStars)).map((x, i) => {
-        if (props.type === 'character' && i > 4) {
-          if (props.special) return ulb(i)
-          else return transcendence(i)
-        } else if (
-          (props.special && props.type === 'character' && i == 3) ||
-          (props.type === 'character' && i == 4) ||
-          (props.type !== 'character' && i > 2)
-        ) {
-          return flb(i)
-        } else {
-          return mlb(i)
-        }
-      })}
-    </ul>
+    <div className="Uncap">
+      <ul className="UncapIndicator">
+        {Array.from(Array(numStars)).map((x, i) => {
+          if (props.type === 'character' && i > 4) {
+            if (props.special) return ulb(i)
+            else return transcendence(i)
+          } else if (
+            (props.special && props.type === 'character' && i == 3) ||
+            (props.type === 'character' && i == 4) ||
+            (props.type !== 'character' && i > 2)
+          ) {
+            return flb(i)
+          } else {
+            return mlb(i)
+          }
+        })}
+      </ul>
+      {transcendencePopover()}
+    </div>
   )
 }