From 1f21e9d80896cf234b2b6dcd61135c0bd92968fd Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 22 Jan 2023 14:40:57 -0800
Subject: [PATCH] Added `TranscendencePopover`

This popover is the UI that lets you set an item's transcendence
---
 components/TranscendencePopover/index.scss | 32 ++++++++++
 components/TranscendencePopover/index.tsx  | 72 ++++++++++++++++++++++
 components/UncapIndicator/index.scss       |  4 ++
 components/UncapIndicator/index.tsx        | 69 ++++++++++++++-------
 4 files changed, 155 insertions(+), 22 deletions(-)
 create mode 100644 components/TranscendencePopover/index.scss
 create mode 100644 components/TranscendencePopover/index.tsx

diff --git a/components/TranscendencePopover/index.scss b/components/TranscendencePopover/index.scss
new file mode 100644
index 00000000..1cc28072
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/components/TranscendencePopover/index.tsx b/components/TranscendencePopover/index.tsx
new file mode 100644
index 00000000..16a0faf9
--- /dev/null
+++ b/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
diff --git a/components/UncapIndicator/index.scss b/components/UncapIndicator/index.scss
index 5b174197..42e1dcd8 100644
--- a/components/UncapIndicator/index.scss
+++ b/components/UncapIndicator/index.scss
@@ -1,3 +1,7 @@
+.Uncap {
+  position: relative;
+}
+
 .UncapIndicator {
   display: flex;
   flex-direction: row;
diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx
index b8ab47ec..f0f4cd79 100644
--- a/components/UncapIndicator/index.tsx
+++ b/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>
   )
 }