adding setter to wraper and layout

JollyGrin · Oct 20, 2024 · 3a939cb · 3a939cb
1 parent a3def57
commit 3a939cb
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx
@@ -1,21 +1,75 @@
-import { ReactNode } from "react";
+import { DragEvent, ReactNode, useState } from "react";
 import { Box, Grid } from "styled-system/jsx";
 import { grid } from "styled-system/patterns";
-import { LAYOUT_HEIGHTS } from "./constants";
+import { getCardImage, LAYOUT_HEIGHTS } from "./constants";
 import { GameFooter } from "./Footer";
 import { GameStateActions } from ".";
 import { Auras } from "./Auras";
 import { PlayerDataProps } from "@/types/card";
 import { GameHeader } from "./Header";
+import { useMediaQuery } from "@/utils/hooks/useMediaQuery";
 
 const { nav, body, footer } = LAYOUT_HEIGHTS;
 
 export const GameLayout = (
   props: GameStateActions &
-    PlayerDataProps & { isReversed?: boolean; children: ReactNode },
+    PlayerDataProps & {
+      isReversed?: boolean;
+      activeCardSlug?: string;
+      children: ReactNode;
+    },
 ) => {
+  const matches = useMediaQuery("(min-width: 1200px)");
+  const [trans, setTrans] = useState<string>("");
+
+  const handleDrag = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault(); // Prevent default drag behavior
+
+    if (e.clientX !== 0 && e.clientY !== 0) {
+      const transform = `translate(${e.clientX - 150}px, ${e.clientY - 150}px)`;
+      setTrans(transform ?? "");
+    }
+  };
+
   return (
-    <Grid style={{ gridTemplateRows: `${nav} ${body} ${footer}` }} gap={0}>
+    <Grid
+      style={{ gridTemplateRows: `${nav} ${body} ${footer}` }}
+      gap={0}
+      position="relative"
+    >
+      <Box
+        zIndex={5}
+        position="absolute"
+        draggable
+        onDragStart={(e) => {
+          const img = new Image();
+          img.src = "";
+          e.dataTransfer.setDragImage(img, 0, 0);
+        }}
+        onDrag={handleDrag} // Directly update position for smoother dragging
+        cursor="grab"
+        style={{
+          transform: trans,
+          display: matches ? "block" : "none",
+        }}
+      >
+        {matches && props.activeCardSlug && (
+          <img
+            src={getCardImage(props.activeCardSlug)}
+            alt="card"
+            style={{ maxWidth: "20rem" }}
+          />
+        )}
+        {matches && props.activeCardSlug === undefined && (
+          <Box
+            w="20rem"
+            h="26rem"
+            bg="gray"
+            borderRadius="1rem"
+            opacity="0.35"
+          />
+        )}
+      </Box>
       <GameHeader players={props.players} />
       <Box position="relative" h="100%" w="100%" maxW="1200px" m="0 auto">
         <Auras {...props} />

diff --git a/src/components/organisms/GameBoard/SortItemWrapper.tsx b/src/components/organisms/GameBoard/SortItemWrapper.tsx
@@ -28,7 +28,15 @@ export const SortItemWrapper = ({
   gridIndex: number;
   cardIndex: number;
   amountOfCards?: number;
+  setHoverImage?(slug?: string): void;
 } & GameStateActions) => {
+  function over() {
+    if (props.setHoverImage) props.setHoverImage(card.img);
+  }
+  function out() {
+    if (props.setHoverImage) props.setHoverImage();
+  }
+
   const { query } = useRouter();
   const name = query?.name as string;
 
@@ -78,6 +86,8 @@ export const SortItemWrapper = ({
           e.stopPropagation();
           toggleTap();
         }}
+        onMouseOver={over}
+        onMouseOut={out}
         data-testid={"sortable-item-wrapper-" + card.id}
         style={{
           height: heightCalc() + 7 + "px",