Update transcendence components to work with CSS modules (#350)

* Update transcendence components to use CSS modules

* Fix summon transcendence

Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on.

components/common/Popover/index.module.scss

@@ -21,12 +21,6 @@
   &.flush {
     padding: 0;
   }
-
-  .Arrow {
-    fill: var(--dialog-bg);
-    filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
-    margin-top: -1px;
-  }
 }
 
 .trigger {

components/common/PopoverContent/index.module.scss

@@ -0,0 +1,5 @@
+.arrow {
+  fill: var(--dialog-bg);
+  filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
+  margin-top: -1px;
+}

components/summon/SummonGrid/index.tsx

@@ -261,11 +261,9 @@ const SummonGrid = (props: Props) => {
 
     try {
       if (stage != previousTranscendenceStages[position])
-        await api.endpoints.grid_summons
-          .update(id, payload)
-          .then((response) => {
-            storeGridSummon(response.data.grid_summon)
-          })
+        await api.updateTranscendence('summon', id, stage).then((response) => {
+          storeGridSummon(response.data.grid_summon)
+        })
     } catch (error) {
       console.error(error)
 

components/uncap/TranscendenceFragment/index.module.scss

@@ -1,4 +1,4 @@
-.Fragment {
+.fragment {
   $degrees: 72deg;
 
   $origWidth: 29px;
@@ -28,11 +28,11 @@
     cursor: pointer;
   }
 
-  &.Visible {
+  &.visible {
     opacity: 1;
   }
 
-  &.Stage1 {
+  &.stage1 {
     top: 3px;
     left: 18px;
 
@@ -41,7 +41,7 @@
     // }
   }
 
-  &.Stage2 {
+  &.stage2 {
     top: 10px;
     left: 27px;
     transform: rotate($degrees);
@@ -51,7 +51,7 @@
     // }
   }
 
-  &.Stage3 {
+  &.stage3 {
     top: 21px;
     left: 24px;
     transform: rotate($degrees * 2);
@@ -61,7 +61,7 @@
     // }
   }
 
-  &.Stage4 {
+  &.stage4 {
     top: 21px;
     left: 12px;
     transform: rotate($degrees * 3);
@@ -71,7 +71,7 @@
     // }
   }
 
-  &.Stage5 {
+  &.stage5 {
     top: 10px;
     left: 8px;
     transform: rotate($degrees * 4);

components/uncap/TranscendenceFragment/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import styles from './index.module.scss'
 
@@ -18,14 +18,14 @@ const TranscendenceFragment = ({
   onClick,
   onHover,
 }: Props) => {
-  const classes = classnames({
-    Fragment: true,
-    Visible: visible,
-    Stage1: stage === 1,
-    Stage2: stage === 2,
-    Stage3: stage === 3,
-    Stage4: stage === 4,
-    Stage5: stage === 5,
+  const classes = classNames({
+    [styles.fragment]: true,
+    [styles.visible]: visible,
+    [styles.stage1]: stage === 1,
+    [styles.stage2]: stage === 2,
+    [styles.stage3]: stage === 3,
+    [styles.stage4]: stage === 4,
+    [styles.stage5]: stage === 5,
   })
 
   function handleClick() {

components/uncap/TranscendencePopover/index.module.scss

@@ -1,11 +1,20 @@
-.Transcendence.Popover {
-  align-items: center;
+.transcendence {
+  display: flex;
   flex-direction: column;
   gap: $unit-half;
-  display: flex;
+  align-items: center;
+  justify-content: center;
   width: $unit-10x;
   height: $unit-10x;
-  justify-content: center;
+
+  animation: scaleIn $duration-zoom ease-out;
+  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);
+  outline: none;
+  padding: $unit;
+  transform-origin: var(--radix-popover-content-transform-origin);
   z-index: 32;
 
   &.open {
@@ -18,7 +27,50 @@
     font-weight: $medium;
   }
 
-  .Pending {
+  .pending {
     color: $yellow;
   }
 }
+
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: scale(0.4);
+  }
+  40% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  60% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  65% {
+    opacity: 0.65;
+    transform: scale(1.1);
+  }
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0.75;
+    transform: scale(0.98);
+  }
+  80% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+  90% {
+    opacity: 0.9;
+    transform: scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

components/uncap/TranscendencePopover/index.tsx

@@ -2,8 +2,8 @@ import React, { PropsWithChildren, useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
+import { Popover } from '@radix-ui/react-popover'
 import {
-  Popover,
   PopoverAnchor,
   PopoverContent,
 } from '~components/common/PopoverContent'
@@ -40,12 +40,8 @@ const TranscendencePopover = ({
 
   const popoverRef = React.createRef<HTMLDivElement>()
 
-  const classes = classNames({
-    Transcendence: true,
-  })
-
   const levelClasses = classNames({
-    Pending: stage != currentStage,
+    [styles.pending]: stage != currentStage,
   })
 
   useEffect(() => {
@@ -77,16 +73,20 @@ const TranscendencePopover = ({
   return (
     <Popover open={open} onOpenChange={onOpenChange}>
       <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent className={classes} ref={popoverRef} tabIndex={tabIndex}>
+      <PopoverContent
+        className={styles.transcendence}
+        ref={popoverRef}
+        tabIndex={tabIndex}
+      >
         <TranscendenceStar
-          className="Interactive Base"
+          className="interactive base"
           editable={true}
           interactive={true}
           stage={stage}
           onFragmentClick={handleFragmentClicked}
           onFragmentHover={handleFragmentHovered}
         />
-        <h4>
+        <h4 className="name">
           <span>{t('level')}&nbsp;</span>
           <span className={levelClasses}>{baseLevel + 10 * currentStage}</span>
         </h4>

components/uncap/TranscendenceStar/index.tsx

@@ -46,9 +46,12 @@ const TranscendenceStar = ({
     [styles.stage5]: stage === 5,
   })
 
-  const baseImageClasses = classnames(className, {
-    [styles.figure]: true,
-  })
+  const baseImageClasses = classnames(
+    {
+      [styles.figure]: true,
+    },
+    className?.split(' ').map((c) => styles[c])
+  )
 
   useEffect(() => {
     setVisibleStage(stage)
@@ -87,7 +90,7 @@ const TranscendenceStar = ({
       onMouseLeave={interactive ? handleMouseLeave : () => {}}
       tabIndex={tabIndex}
     >
-      <div className="Fragments">
+      <div className={styles.fragments}>
         {[...Array(NUM_FRAGMENTS)].map((e, i) => {
           const loopStage = i + 1
           return interactive ? (

utils/api.tsx

@@ -179,6 +179,17 @@ class Api {
       }
     })
   }
+
+  updateTranscendence(resource: 'character'|'summon', id: string, value: number) {
+    const pluralized = resource + 's'
+    const resourceUrl = `${this.url}/${pluralized}/update_uncap`
+    return axios.post(resourceUrl, {
+      [resource]: {
+        id: id,
+        transcendence_step: value
+      }
+    })
+  }
   
   userInfo(id: string) {
     const resourceUrl = `${this.url}/users/info/${id}`