Card Flip and transform animations

dsoskey · May 29, 2024 · 383668a · 383668a
1 parent e6836f7
commit 383668a
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 20 deletions.
diff --git a/src/ui/card/cardCustomRender.tsx b/src/ui/card/cardCustomRender.tsx
@@ -214,7 +214,7 @@ export const CardCustomRender = ({ card }: CardCustomRenderProps) => {
     {framedComponent}
     {DOUBLE_FACED_LAYOUTS.includes(card.layout) && (
       <button
-        className='flip-button'
+        className='transform-button'
         onClick={() => setFlipped((prev) => !prev)}
         title='flip'
       >🔄</button>

diff --git a/src/ui/cardBrowser/browserView.tsx b/src/ui/cardBrowser/browserView.tsx
@@ -189,7 +189,7 @@ export const BrowserView = React.memo(({
                   className={`_${cardsPerRow}`}
                   onAdd={onAdd}
                   hoverContent={<SearchHoverActions card={card} onAdd={onAdd} onIgnore={onIgnore} />}
-                  key={index}
+                  key={card.data.id + index}
                   card={card}
                   showRender={displayType === "render"}
                   revealDetails={revealDetails}

diff --git a/src/ui/cardBrowser/cardViews/cardImage.css b/src/ui/cardBrowser/cardViews/cardImage.css
@@ -1,32 +1,70 @@
 .card-image {
     position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'overlap';
 }
 
 .card-image img {
     clip-path: inset(0 0 0 0 round var(--card-border-radius));
     box-shadow: var(--spacing-200) var(--gray-68);
     position: relative;
-    z-index: 1;
+    grid-area: overlap;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
+    backface-visibility: hidden;
+    transition: rotate 400ms ease, transform 400ms ease-in-out;
 }
 
 .card-image.lea img {
     clip-path: inset(0 0 0 0 round 7% / 5.5%);
 }
 
-.flip-button {
+.card-image img.flipped {
+    rotate: 180deg;
+    rotation-point: center;
+}
+
+.card-image img.front {
+    transform: rotateY(0deg);
+    z-index: 2;
+}
+.card-image img.front.transformed {
+    transform: rotateY(180deg);
+}
+
+.card-image img.back {
+    z-index: 1;
+    transform: rotateY(-180deg);
+}
+.card-image img.back.transformed {
+    transform: rotateY(0deg);
+}
+
+.flip-button,
+.transform-button {
     position: absolute;
     z-index: 2;
-    top: 11%;
     right: 8%;
     background-color: transparent;
     border-color: transparent;
     font-size: 1.75em;
     cursor: pointer;
 }
+.flip-button {
+    top: 30%;
+}
+.transform-button {
+    top: 11%;
+
+}
+.flip-button:hover,
+.transform-button:hover {
+    color: whitesmoke;
+}
 
 .edhrec-lol {
     position: absolute;
@@ -37,6 +75,3 @@
     color: var(--light-color);
 }
 
-.flip-button:hover {
-    color: whitesmoke;
-}
diff --git a/src/ui/cardBrowser/cardViews/cardImage.tsx b/src/ui/cardBrowser/cardViews/cardImage.tsx
@@ -20,31 +20,54 @@ interface CardImageProps {
 }
 
 export const CardImage = ({ card }: CardImageProps) => {
-  const { edhrecOverlay } = useContext(FlagContext).flags
-  const [flipped, setFlipped] = useState(false)
-  const onFlipCLick = e => {
+  const { edhrecOverlay } = useContext(FlagContext).flags;
+  const [transformed, setTransformed] = useState(false);
+  const [flipped, setFlipped] = useState(false);
+  const canTransform = DOUBLE_FACED_LAYOUTS.includes(card.layout)
+  const onTransformCLick = e => {
     e.stopPropagation()
-    setFlipped((prev) => !prev)
+    setTransformed((prev) => !prev)
+  }
+  const onFlipClick = e => {
+    e.stopPropagation();
+    setFlipped(prev => !prev)
   }
   const version = 'normal'
-  const imageSource = flipped
-    ? getBackImageURI(card, version)
-    : card.image_uris?.normal ?? getFrontImageURI(card, version)
   return <div className={`card-image ${card.set}`}>
     <img
+      className={`front ${flipped ? "flipped" : ""} ${canTransform && transformed ? "transformed" : ""}`}
       width='100%'
-      src={imageSource}
+      src={card.image_uris?.normal ?? getFrontImageURI(card, version)}
       alt={card.name}
       title={card.name}
       onError={() => {
         // load local backup
       }}
     />
-    {DOUBLE_FACED_LAYOUTS.includes(card.layout) && (
+    {canTransform &&
+      <img
+        className={`back ${canTransform && transformed ? "transformed" : ""}`}
+        width='100%'
+        src={getBackImageURI(card, version)}
+        alt={card.name}
+        title={card.name}
+        onError={() => {
+          // load local backup
+        }}
+      />
+    }
+    {canTransform && (
+      <button
+        className='transform-button'
+        onClick={onTransformCLick}
+        title='transform'
+      >🔄</button>
+    )}
+    {card.layout === "flip" && (
       <button
-        className='flip-button'
-        onClick={onFlipCLick}
-        title='flip'
+        className="flip-button"
+        onClick={onFlipClick}
+        title="flip"
       >🔄</button>
     )}
     {edhrecOverlay&&<div className='edhrec-lol'>{card.edhrec_rank}</div>}