Added basic preview image for draggable elements

Author: Teddy Sterne

src/pages/game/components/BaseCard.tsx

@@ -21,7 +21,7 @@ export const BaseCard = React.forwardRef<
   const { children, card, transition = "none", showPower, ...rest } = props;
   const { onLongPress, ...imgProps } = rest;
   const [preview, setPreview] = useState(false);
-  const [{ isDragging }, drag] = useDrag({
+  const [{ isDragging }, drag, dragPreview] = useDrag({
     item: { type: "power", value: card },
     canDrag: card.canAttach && showPower,
     collect: (monitor) => ({ isDragging: monitor.isDragging() }),
@@ -31,7 +31,10 @@ export const BaseCard = React.forwardRef<
 
   return (
     <Card
-      innerRef={drag}
+      innerRef={(inst) => {
+        drag(inst);
+        dragPreview(inst);
+      }}
       style={{ position: "relative", flexDirection: "column" }}>
       <SwitchTransition mode="out-in">
         <CSSTransition

src/pages/game/components/Fate.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 export const Fate: FC<Props> = (props) => {
   const { num: value, source, styles, onClick, highlight } = props;
-  const [{ isDragging }, drag] = useDrag({
+  const [{ isDragging }, drag, dragPreview] = useDrag({
     item: { type: "fate", value, source },
     canDrag: !!source,
     collect: (monitor) => ({ isDragging: monitor.isDragging() }),
@@ -32,7 +32,10 @@ export const Fate: FC<Props> = (props) => {
           exit: 350,
         }}>
         <Tile
-          ref={drag}
+          ref={(inst) => {
+            drag(inst);
+            dragPreview(inst);
+          }}
           {...longPressProps}
           onContextMenu={(e) => {
             handler();