add visual indication of swipe changes, use bigger threshold

smeea · Nov 23, 2022 · 2b8ea40 · 2b8ea40
1 parent a6b6c2a
commit 2b8ea40
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 38 deletions.
diff --git a/frontend/src/assets/css/style.sass b/frontend/src/assets/css/style.sass
@@ -7,6 +7,7 @@
     --bg-checkbox-selected: #7070ff
     --bg-error: #f04040
     --bg-error-secondary: #ff8080
+    --bg-success: #40d080
     --bg-nav: #404060
     --bg-primary: #ffffff
     --bg-secondary: #e0e5ff
@@ -33,6 +34,7 @@
     --bg-checkbox-selected: #6060d0
     --bg-error: #901000
     --bg-error-secondary: #b03525
+    --bg-success: #007035
     --bg-nav: #303040
     --bg-primary: #252530
     --bg-secondary: #353545
@@ -991,6 +993,12 @@ li
 .result-even
   background-color: var(--bg-third)
 
+.swiped-left
+  background-color: var(--bg-success)
+
+.swiped-right
+  background-color: var(--bg-error-secondary)
+
 a.quantity
   position: relative
 a.quantity:before

diff --git a/frontend/src/components/deck/DeckCryptTableRow.jsx b/frontend/src/components/deck/DeckCryptTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { useSnapshot } from 'valtio';
 import Shuffle from 'assets/images/icons/shuffle.svg';
@@ -54,12 +54,26 @@ const DeckCryptTableRow = ({
   const isEditable = isAuthor && !isPublic && !isFrozen;
   const ALIGN_DISCIPLINES_THRESHOLD = isMobile ? 13 : 17;
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      if (isEditable) deckCardChange(deckid, card.c, card.q - 1);
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable)
+        deckCardChange(deckid, card.c, card.q - 1);
     },
-    onSwipedLeft: () => {
-      if (isEditable) deckCardChange(deckid, card.c, card.q + 1);
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable)
+        deckCardChange(deckid, card.c, card.q + 1);
+    },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
     },
   });
 
@@ -75,7 +89,13 @@ const DeckCryptTableRow = ({
   };
 
   return (
-    <tr {...swipeHandlers} className={`result-${idx % 2 ? 'even' : 'odd'}`}>
+    <tr
+      {...swipeHandlers}
+      className={`result-${idx % 2 ? 'even' : 'odd'} ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }
+`}
+    >
       {isEditable ? (
         <>
           {inventoryMode && decks ? (

diff --git a/frontend/src/components/deck/DeckLibraryTableRow.jsx b/frontend/src/components/deck/DeckLibraryTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { useSnapshot } from 'valtio';
 import Shuffle from 'assets/images/icons/shuffle.svg';
@@ -48,12 +48,26 @@ const DeckLibraryTableRow = ({
   const { deckid, isPublic, isAuthor, isFrozen } = deck;
   const isEditable = isAuthor && !isPublic && !isFrozen;
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      if (isEditable) deckCardChange(deckid, card.c, card.q - 1);
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable)
+        deckCardChange(deckid, card.c, card.q - 1);
     },
-    onSwipedLeft: () => {
-      if (isEditable) deckCardChange(deckid, card.c, card.q + 1);
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable)
+        deckCardChange(deckid, card.c, card.q + 1);
+    },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
     },
   });
 
@@ -69,7 +83,13 @@ const DeckLibraryTableRow = ({
   };
 
   return (
-    <tr {...swipeHandlers} className={`result-${idx % 2 ? 'even' : 'odd'}`}>
+    <tr
+      {...swipeHandlers}
+      className={`result-${idx % 2 ? 'even' : 'odd'} ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }
+`}
+    >
       {isEditable ? (
         <>
           {inventoryMode && decks ? (

diff --git a/frontend/src/components/inventory/InventoryCryptTableRow.jsx b/frontend/src/components/inventory/InventoryCryptTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { useSwipeable } from 'react-swipeable';
 import { OverlayTrigger } from 'react-bootstrap';
@@ -28,12 +28,24 @@ const InventoryCryptTableRow = ({
   const usedCrypt = useSnapshot(usedStore).crypt;
   const { isMobile, isNarrow, isWide } = useApp();
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      inventoryCardChange(card.c, card.q - 1);
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD) inventoryCardChange(card.c, card.q - 1);
     },
-    onSwipedLeft: () => {
-      inventoryCardChange(card.c, card.q + 1);
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD) inventoryCardChange(card.c, card.q + 1);
+    },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
     },
   });
 
@@ -46,7 +58,12 @@ const InventoryCryptTableRow = ({
   }
 
   return (
-    <div className="d-flex no-border inventory-crypt-table" {...swipeHandlers}>
+    <div
+      className={`d-flex no-border inventory-crypt-table ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }`}
+      {...swipeHandlers}
+    >
       <div
         className={`d-flex align-items-center justify-content-center ${
           inShared ? 'quantity-no-buttons me-2' : 'quantity px-1]'

diff --git a/frontend/src/components/inventory/InventoryLibraryTableRow.jsx b/frontend/src/components/inventory/InventoryLibraryTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { useSwipeable } from 'react-swipeable';
 import { OverlayTrigger } from 'react-bootstrap';
@@ -30,12 +30,24 @@ const InventoryLibraryTableRow = ({
   const usedLibrary = useSnapshot(usedStore).library;
   const { isMobile, isNarrow } = useApp();
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      inventoryCardChange(card.c, card.q - 1);
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD) inventoryCardChange(card.c, card.q - 1);
     },
-    onSwipedLeft: () => {
-      inventoryCardChange(card.c, card.q + 1);
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD) inventoryCardChange(card.c, card.q + 1);
+    },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
     },
   });
 
@@ -54,7 +66,9 @@ const InventoryLibraryTableRow = ({
 
   return (
     <div
-      className="d-flex no-border inventory-library-table"
+      className={`d-flex no-border inventory-library-table ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }`}
       {...swipeHandlers}
     >
       <div

diff --git a/frontend/src/components/result_common/ResultModal.jsx b/frontend/src/components/result_common/ResultModal.jsx
@@ -47,9 +47,10 @@ const ResultModal = ({
     }
   }, [card]);
 
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => handleModalCardChange(-1),
-    onSwipedLeft: () => handleModalCardChange(1),
+    onSwipedRight: (e) => e.absX > SWIPE_THRESHOLD && handleModalCardChange(-1),
+    onSwipedLeft: (e) => e.absX > SWIPE_THRESHOLD && handleModalCardChange(1),
   });
 
   return (

diff --git a/frontend/src/components/result_crypt/ResultCryptTableRow.jsx b/frontend/src/components/result_crypt/ResultCryptTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { useSwipeable } from 'react-swipeable';
 import { OverlayTrigger } from 'react-bootstrap';
@@ -38,17 +38,29 @@ const ResultCryptTableRow = ({
   const inDeck = deck?.crypt[card.Id]?.q || 0;
   const isEditable = deck?.isAuthor && !deck?.isPublic && !deck?.isFrozen;
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      if (isEditable && addMode && inDeck > 0) {
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable && addMode && inDeck > 0) {
         deckCardChange(deck.deckid, card, inDeck - 1);
       }
     },
-    onSwipedLeft: () => {
-      if (isEditable && addMode) {
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable && addMode) {
         deckCardChange(deck.deckid, card, inDeck + 1);
       }
     },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
+    },
   });
 
   let softUsedMax = 0;
@@ -63,7 +75,13 @@ const ResultCryptTableRow = ({
   }
 
   return (
-    <tr {...swipeHandlers} className={`result-${idx % 2 ? 'even' : 'odd'}`}>
+    <tr
+      {...swipeHandlers}
+      className={`result-${idx % 2 ? 'even' : 'odd'} ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }
+`}
+    >
       {(inRecommendation ? isEditable : isEditable && addMode) && (
         <td className="quantity-add pe-1">
           <ButtonAddCard

diff --git a/frontend/src/components/result_library/ResultLibraryTableRow.jsx b/frontend/src/components/result_library/ResultLibraryTableRow.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { useSwipeable } from 'react-swipeable';
 import { OverlayTrigger } from 'react-bootstrap';
@@ -33,17 +33,29 @@ const ResultLibraryTableRow = ({ card, handleClick, idx, placement }) => {
   const inDeck = deck?.library[card.Id]?.q || 0;
   const isEditable = deck?.isAuthor && !deck?.isPublic && !deck?.isFrozen;
 
+  const [isSwiped, setIsSwiped] = useState();
+  const SWIPE_THRESHOLD = 50;
   const swipeHandlers = useSwipeable({
-    onSwipedRight: () => {
-      if (isEditable && addMode && inDeck > 0) {
+    onSwipedRight: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable && addMode && inDeck > 0) {
         deckCardChange(deck.deckid, card, inDeck - 1);
       }
     },
-    onSwipedLeft: () => {
-      if (isEditable && addMode) {
+    onSwipedLeft: (e) => {
+      if (e.absX > SWIPE_THRESHOLD && isEditable && addMode) {
         deckCardChange(deck.deckid, card, inDeck + 1);
       }
     },
+    onSwiped: () => {
+      setIsSwiped(false);
+    },
+    onSwiping: (e) => {
+      if (e.deltaX < -SWIPE_THRESHOLD) {
+        setIsSwiped('left');
+      } else if (e.deltaX > SWIPE_THRESHOLD) {
+        setIsSwiped('right');
+      }
+    },
   });
 
   let softUsedMax = 0;
@@ -58,7 +70,13 @@ const ResultLibraryTableRow = ({ card, handleClick, idx, placement }) => {
   }
 
   return (
-    <tr {...swipeHandlers} className={`result-${idx % 2 ? 'even' : 'odd'}`}>
+    <tr
+      {...swipeHandlers}
+      className={`result-${idx % 2 ? 'even' : 'odd'} ${
+        isSwiped ? `swiped-${isSwiped}` : ''
+      }
+`}
+    >
       {isEditable && addMode && (
         <td className="quantity-add pe-1">
           <ButtonAddCard deckid={deck.deckid} card={card} inDeck={inDeck} />

diff --git a/frontend/src/context/ThemeContext.js b/frontend/src/context/ThemeContext.js
@@ -84,6 +84,7 @@ const light = [
   '--bg-third: #f0f5ff',
   '--bg-error: #f04040',
   '--bg-error-secondary: #ff8080',
+  '--bg-success: #40d080',
   '--bg-warning: #ffb050',
   '--bg-button: #ffffff',
   '--bg-button-secondary: #ffffff',
@@ -111,6 +112,7 @@ const dark = [
   '--bg-third: #303040',
   '--bg-error: #901000',
   '--bg-error-secondary: #b03525',
+  '--bg-success: #007035',
   '--bg-warning: #c06500',
   '--bg-button: #404050',
   '--bg-button-secondary: #303040',