Removed hover styles and fixed tap/drag bug

ProLoser · Oct 12, 2024 · 117225d · 117225d
1 parent 1eabee5
commit 117225d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/src/Board/Board.css b/src/Board/Board.css
@@ -95,7 +95,7 @@ order:
     .point {
         height: 50%;
         &:hover::before {
-            border-top-color: var(--primary-hover) !important;
+            /* border-top-color: var(--primary-hover) !important; */
         }
         &::before {
             left: 50%;
@@ -141,10 +141,10 @@ order:
             }
 
             &:nth-child(even):hover::before {
-                border-bottom-color: var(--primary-hover) !important;
+                /* border-bottom-color: var(--primary-hover) !important; */
             }
             &:nth-child(odd):hover::before {
-                border-bottom-color: var(--secondary-hover) !important;
+                /* border-bottom-color: var(--secondary-hover) !important; */
             }
             /* Stack Pieces */
             .piece:nth-child(n+6) {
@@ -176,10 +176,10 @@ order:
     .point {
         width: 50%;
         &:nth-child(even):hover::before {
-            border-left-color: var(--primary-hover) !important;
+            /* border-left-color: var(--primary-hover) !important; */
         }
         &:nth-child(odd):hover::before {
-            border-left-color: var(--secondary-hover) !important;
+            /* border-left-color: var(--secondary-hover) !important; */
         }
 
         &::before {
@@ -221,7 +221,7 @@ order:
                 right: 0;
             }
             &:hover::before {
-                border-right-color: var(--primary-hover) !important;
+                /* border-right-color: var(--primary-hover) !important; */
             }
             &:nth-child(even)::before {
                 border-right-color: var(--secondary);

diff --git a/src/Board/Point.tsx b/src/Board/Point.tsx
@@ -1,4 +1,4 @@
-import { useCallback, type DragEventHandler } from "react";
+import { useCallback, useState, type DragEventHandler } from "react";
 import Piece from './Piece'
 
 type PointProps = {
@@ -10,6 +10,7 @@ type PointProps = {
 }
 
 export default function Point({ pieces, move, position, onSelect, selected }: PointProps) {
+    const [isDragging, setIsDragging] = useState(false);
     const onDragOver: DragEventHandler = useCallback((event) => { event.preventDefault(); }, [])
     const onDrop: DragEventHandler = useCallback((event) => {
         event.preventDefault();
@@ -20,12 +21,27 @@ export default function Point({ pieces, move, position, onSelect, selected }: Po
 
     const color = pieces > 0 ? 'white' : 'black';
 
+    const handleDragStart = () => {
+        setIsDragging(true);
+    };
+
+    const handleDragEnd = () => {
+        setIsDragging(false);
+    };
+
     const onPointerUp = useCallback(() => {
+        if (isDragging) return;
         if (pieces !== 0 || selected !== null)
             onSelect(position)
-    }, [pieces, position, onSelect])
+    }, [pieces, position, onSelect, isDragging])
 
-    return <div className={`point ${selected === position ? 'selected' : ''}`} onPointerUp={onPointerUp} onDragOver={onDragOver} onDrop={onDrop}>
+    return <div className={`point ${selected === position ? 'selected' : ''}`} 
+        onPointerUp={onPointerUp} 
+        onDragOver={onDragOver} 
+        onDrop={onDrop}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        >
         {Array.from({ length: Math.abs(pieces) }, (_, index) => <Piece key={index} color={color} position={position} onSelect={onSelect} />)}
     </div>
 }
diff --git a/src/index.css b/src/index.css
@@ -104,10 +104,6 @@ dialog {
   color: black;
   cursor: pointer;
 
-  &:hover {
-    color: blue;
-  }
-
   &+menu,
   &+[role="menu"] {
     display: none;