should allow tap to play plus dragging

Talishar · Apr 18, 2023 · 8672a9b · 8672a9b
1 parent 5f2308a
commit 8672a9b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 65 deletions.
diff --git a/src/routes/game/components/elements/passTurnDisplay/PassTurnDisplay.tsx b/src/routes/game/components/elements/passTurnDisplay/PassTurnDisplay.tsx
@@ -31,7 +31,6 @@ export default function PassTurnDisplay() {
 
   useEffect(() => {
     let link = document.getElementById('favicon') as HTMLLinkElement;
-    console.log(link);
     if (hasPriority && link) {
       link.href = '/images/priorityGreen.ico';
     } else if (link) {
@@ -46,13 +45,6 @@ export default function PassTurnDisplay() {
 
   useShortcut(DEFAULT_SHORTCUTS.PASS_TURN, onPassTurn);
 
-  // useEffect(() => {
-  //   if (canPassPhase && canPassController) {
-  //     setCanPassController(false);
-  //     playPassTurnSound();
-  //   }
-  // }, [canPassController]);
-
   if (canPassPhase === undefined) {
     return <div className={styles.passTurnDisplay}></div>;
   }

diff --git a/src/routes/game/components/elements/playerHandCard/PlayerHandCard.tsx b/src/routes/game/components/elements/playerHandCard/PlayerHandCard.tsx
@@ -7,13 +7,13 @@ import {
 import { GiTombstone, GiFluffySwirl, GiCannon } from 'react-icons/gi';
 import { Card } from 'features/Card';
 import styles from './PlayerHandCard.module.css';
-import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import { useAppDispatch } from 'app/Hooks';
 import { LONG_PRESS_TIMER } from 'appConstants';
 import classNames from 'classnames';
 import CardImage from '../cardImage/CardImage';
 import CardPopUp from '../cardPopUp/CardPopUp';
 import useWindowDimensions from 'hooks/useWindowDimensions';
+import { motion, PanInfo } from 'framer-motion';
 
 const ScreenPercentageForCardPlayed = 0.25;
 
@@ -30,9 +30,9 @@ export const PlayerHandCard = ({
   isBanished,
   isGraveyard
 }: HandCard) => {
-  const [controlledPosition, setControlledPosition] = useState({ x: 0, y: 0 });
   const [canPopUp, setCanPopup] = useState(true);
   const [, windowHeight] = useWindowDimensions();
+  const [snapback, setSnapback] = useState<boolean>(true);
 
   // ref to determine if we have a long press or a short tap.
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
@@ -44,11 +44,17 @@ export const PlayerHandCard = ({
   const src = `/cardimages/${card.cardNumber}.webp`;
   const dispatch = useAppDispatch();
 
-  const onDragStop = (_: DraggableEvent, data: DraggableData) => {
-    if (data.lastY < -windowHeight * ScreenPercentageForCardPlayed) {
+  const handleDragEnd = (
+    event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo
+  ) => {
+    if (
+      Math.abs(info.offset.y) >
+      windowHeight * ScreenPercentageForCardPlayed
+    ) {
+      setSnapback(false);
       playCardFunc();
     }
-    setControlledPosition({ x: 0, y: 0 });
     setCanPopup(true);
   };
 
@@ -61,11 +67,14 @@ export const PlayerHandCard = ({
   };
 
   const onDrag = () => {
-    dispatch(clearPopUp());
-    setCanPopup(false);
+    if (canPopUp) {
+      setSnapback(true);
+      dispatch(clearPopUp());
+      setCanPopup(false);
+    }
   };
 
-  const onClick = () => {
+  const handleOnClick = () => {
     if (!isLongPress.current) {
       playCardFunc();
     }
@@ -78,6 +87,10 @@ export const PlayerHandCard = ({
     }, LONG_PRESS_TIMER);
   };
 
+  const stopPressTimer = () => {
+    clearTimeout(timerRef.current);
+  };
+
   const imgStyles = classNames(styles.img, {
     [styles.border1]: card.borderColor == '1',
     [styles.border2]: card.borderColor == '2',
@@ -89,47 +102,45 @@ export const PlayerHandCard = ({
   });
 
   return (
-    <div
+    <motion.div
+      drag
       className={styles.handCard}
-      onClick={onClick}
-      onMouseDown={startPressTimer}
-      onMouseUp={() => clearTimeout(timerRef.current)}
-      onTouchStart={startPressTimer}
-      onTouchEnd={() => clearTimeout(timerRef.current)}
+      style={{ touchAction: 'none' }}
+      onClick={handleOnClick}
+      onTapStart={startPressTimer}
+      onTap={stopPressTimer}
+      onDragEnd={handleDragEnd}
+      onDrag={onDrag}
+      dragSnapToOrigin={snapback}
+      initial={{ opacity: 0, y: 100 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.5 }}
     >
       <CardPopUp
         containerClass={styles.imgContainer}
         cardNumber={card.cardNumber}
         isHidden={!canPopUp}
       >
-        <Draggable
-          onStop={onDragStop}
-          onDrag={onDrag}
-          position={controlledPosition}
-        >
-          <div>
-            <CardImage src={src} className={imgStyles} draggable="false" />
-            <div className={styles.iconCol}>
-              {isArsenal === true && (
-                <div className={styles.icon}>
-                  <GiCannon title="Arsenal" />
-                </div>
-              )}
-              {isBanished === true && (
-                <div className={styles.icon}>
-                  <GiFluffySwirl title="Banished Zone" />
-                </div>
-              )}
-              {isGraveyard === true && (
-                <div className={styles.icon}>
-                  <GiTombstone title="Graveyard" />
-                </div>
-              )}
+        <CardImage src={src} className={imgStyles} draggable="false" />
+        <div className={styles.iconCol}>
+          {isArsenal === true && (
+            <div className={styles.icon}>
+              <GiCannon title="Arsenal" />
+            </div>
+          )}
+          {isBanished === true && (
+            <div className={styles.icon}>
+              <GiFluffySwirl title="Banished Zone" />
+            </div>
+          )}
+          {isGraveyard === true && (
+            <div className={styles.icon}>
+              <GiTombstone title="Graveyard" />
             </div>
-          </div>
-        </Draggable>
+          )}
+        </div>
       </CardPopUp>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.tsx b/src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.tsx
@@ -82,5 +82,5 @@ const Target = ({ target }: { target: string | undefined }) => {
   // TODO: have this be useful
   return null;
 
-  return <h4 className={styles.target}>{target}</h4>;
+  // return <h4 className={styles.target}>{target}</h4>;
 };
diff --git a/src/routes/game/components/zones/playerHand/PlayerHand.tsx b/src/routes/game/components/zones/playerHand/PlayerHand.tsx
@@ -6,6 +6,7 @@ import styles from './PlayerHand.module.css';
 import PlayerHandCard from '../../elements/playerHandCard/PlayerHandCard';
 import { useAppSelector } from 'app/Hooks';
 import useWindowDimensions from 'hooks/useWindowDimensions';
+import { AnimatePresence } from 'framer-motion';
 
 const MaxHandWidthPercentage = 50;
 
@@ -66,22 +67,36 @@ export default function PlayerHand() {
 
   return (
     <div className={styles.handRow} style={widthfunction}>
-      {handCards !== undefined &&
-        handCards.map((card, ix) => {
-          return <PlayerHandCard card={card} key={`hand-${ix}`} />;
-        })}
-      {hasArsenal &&
-        showArsenal &&
-        arsenalCards !== undefined &&
-        arsenalCards.map((card, ix) => {
-          return <PlayerHandCard card={card} isArsenal key={`arsenal-${ix}`} />;
-        })}
-      {playableBanishedCards !== undefined &&
-        playableBanishedCards.map((card, ix) => {
-          return (
-            <PlayerHandCard card={card} isBanished key={`banished-${ix}`} />
-          );
-        })}
+      <AnimatePresence>
+        {handCards !== undefined &&
+          handCards.map((card, ix) => {
+            return (
+              <PlayerHandCard card={card} key={`hand-${card.cardNumber}`} />
+            );
+          })}
+        {hasArsenal &&
+          showArsenal &&
+          arsenalCards !== undefined &&
+          arsenalCards.map((card, ix) => {
+            return (
+              <PlayerHandCard
+                card={card}
+                isArsenal
+                key={`arsenal${card.cardNumber}`}
+              />
+            );
+          })}
+        {playableBanishedCards !== undefined &&
+          playableBanishedCards.map((card, ix) => {
+            return (
+              <PlayerHandCard
+                card={card}
+                isBanished
+                key={`banished-${card.cardNumber}`}
+              />
+            );
+          })}
+      </AnimatePresence>
     </div>
   );
 }