attempt to add dnd

letier3110 · Dec 26, 2022 · 8a6885c · 8a6885c
1 parent bf27883
commit 8a6885c
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "constate": "^3.3.2",
     "mathjs": "^11.5.0",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

diff --git a/src/App.css b/src/App.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   background-color: white;
   color: black;
 }
@@ -18,10 +19,25 @@ html, body {
   display: flex;
   flex-direction: column;
 
-  justify-content: space-between;
   align-items: center;
 }
 
+.flex {
+  display: flex;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.aic {
+  align-items: center;
+}
+
+.jcc {
+  justify-content: center;
+}
+
 .secondPage {
   width: 100%;
   height: calc(100vh - 48px);
@@ -70,12 +86,14 @@ html, body {
   user-select: none;
   position: relative;
 
-  padding: 2em;
+  /* padding: 2em; */
   border: 1px solid #888;
   background-color: #fff;
 
-  width: 50px;
-  height: 120px;
+  /* width: 50px;
+  height: 120px; */
+  width: 116px;
+  height: 186px;
 
   display: flex;
   flex-direction: column;
@@ -110,7 +128,8 @@ html, body {
   transition: transform ease 0.3s;
   color: #eee;
 
-  box-shadow: inset 0px 3px 1px -2px rgb(0 0 0 / 20%), inset 0px 2px 2px 0px rgb(0 0 0 / 14%), inset 0px 1px 5px 0px rgb(0 0 0 / 12%);
+  box-shadow: inset 0px 3px 1px -2px rgb(0 0 0 / 20%), inset 0px 2px 2px 0px rgb(0 0 0 / 14%),
+    inset 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
 .cardPlace .mainText {
@@ -142,8 +161,8 @@ html, body {
 
 .chainResultElem .card:hover {
   transform: scale(1.2);
-  background: rgb(255,255,255);
-  background: radial-gradient(circle, rgba(255,255,190,1) 0%, rgba(240,255,27,1) 35%, rgba(0,212,255,1) 100%);
+  background: rgb(255, 255, 255);
+  background: radial-gradient(circle, rgba(255, 255, 190, 1) 0%, rgba(240, 255, 27, 1) 35%, rgba(0, 212, 255, 1) 100%);
   background-size: 400% 400%;
   background-position: center;
   /* background: linear-gradient(270deg, #246655, #665f24);
@@ -154,22 +173,39 @@ html, body {
 }
 
 @-webkit-keyframes equalizerAnim {
-  0%{background-size:400% 400%}
-  50%{background-size:200% 200%}
-  100%{background-size:400% 400%}
+  0% {
+    background-size: 400% 400%;
+  }
+  50% {
+    background-size: 200% 200%;
+  }
+  100% {
+    background-size: 400% 400%;
+  }
 }
 @-moz-keyframes equalizerAnim {
-  0%{background-size:400% 400%}
-  50%{background-size:200% 200%}
-  100%{background-size:400% 400%}
+  0% {
+    background-size: 400% 400%;
+  }
+  50% {
+    background-size: 200% 200%;
+  }
+  100% {
+    background-size: 400% 400%;
+  }
 }
 @keyframes equalizerAnim {
-  0%{background-size:400% 400%}
-  50%{background-size:200% 200%}
-  100%{background-size:400% 400%}
+  0% {
+    background-size: 400% 400%;
+  }
+  50% {
+    background-size: 200% 200%;
+  }
+  100% {
+    background-size: 400% 400%;
+  }
 }
 
-
 .cards {
   margin-bottom: 100px;
   display: flex;
@@ -185,11 +221,11 @@ html, body {
 }
 
 @keyframes cardsShow {
-  0%{
+  0% {
     transform: translateY(300px);
     opacity: 0;
   }
-  100%{
+  100% {
     transform: translateY(0px);
     opacity: 1;
   }
@@ -201,11 +237,11 @@ html, body {
 }
 
 @keyframes cardsHide {
-  0%{
+  0% {
     transform: translateY(0px);
     opacity: 1;
   }
-  100%{
+  100% {
     transform: translateY(300px);
     opacity: 0;
   }
@@ -243,7 +279,8 @@ html, body {
   display: flex;
 }
 
-.cardAddition, .addition {
+.cardAddition,
+.addition {
   user-select: none;
   padding: 16px 24px;
   box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
@@ -283,41 +320,42 @@ html, body {
 
 .additionText {
   text-align: center;
-  transition: all .2s;
+  transition: all 0.2s;
   color: #fff;
   /* background-color: rgba(0,0,0,.1); */
   font-weight: bold;
   padding: 3px 6px;
   border-radius: 0 6px 0 0;
 }
 
-.chainElem, .chainResultElem {
+.chainElem,
+.chainResultElem {
   display: flex;
   align-items: center;
 }
 
 .Denominator {
-  background-color: #FF9E9E;
+  background-color: #ff9e9e;
 }
 
 .Multiplicator {
-  background-color: #FF6D28;
+  background-color: #ff6d28;
 }
 
 .Summator {
-  background-color: #FCE700;
+  background-color: #fce700;
 }
 
 .Differencator {
-  background-color: #EA047E;
+  background-color: #ea047e;
 }
 
 .chain .Numberator {
   opacity: 0;
 }
 
 .Switcher {
-  background: rgb(2,0,36);
+  background: rgb(2, 0, 36);
   -webkit-animation: switcherAnim 1s ease infinite;
   -moz-animation: switcherAnim 1s ease infinite;
   animation: switcherAnim 1s ease infinite;
@@ -333,8 +371,8 @@ html, body {
 }
 
 .equalizer {
-  background: rgb(2,0,36);
-  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+  background: rgb(2, 0, 36);
+  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
 }
 
 .tutorialText {
@@ -348,11 +386,11 @@ html, body {
   right: 0px;
   top: 0px;
   bottom: 0px;
-  
+
   width: 30vw;
   text-align: left;
   padding: 24px;
-  
+
   color: #fff;
   background-color: #888;
 
@@ -379,29 +417,30 @@ html, body {
   z-index: 200;
 }
 
-
 .additionAnim {
   animation: additionAnim 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   /* box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); */
 }
 
 @keyframes additionAnim {
   0% {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 250, 0.2), 0px 2px 2px 0px rgba(0, 0, 250, 0.14), 0px 1px 5px 0px rgba(0, 0, 250, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 250, 0.2), 0px 2px 2px 0px rgba(0, 0, 250, 0.14),
+      0px 1px 5px 0px rgba(0, 0, 250, 0.12);
   }
   50% {
-    box-shadow: 0px 4px 4px -2px rgba(0, 0, 250, 0.2), 0px 4px 4px 3px rgba(0, 0, 250, 0.2), 0px 4px 4px 2px rgba(0, 0, 250, 0.2), 0px -4px 4px 2px rgba(0, 0, 250, 0.2);
+    box-shadow: 0px 4px 4px -2px rgba(0, 0, 250, 0.2), 0px 4px 4px 3px rgba(0, 0, 250, 0.2),
+      0px 4px 4px 2px rgba(0, 0, 250, 0.2), 0px -4px 4px 2px rgba(0, 0, 250, 0.2);
   }
   100% {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 250, 0.2), 0px 2px 2px 0px rgba(0, 0, 250, 0.14), 0px 1px 5px 0px rgba(0, 0, 250, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 250, 0.2), 0px 2px 2px 0px rgba(0, 0, 250, 0.14),
+      0px 1px 5px 0px rgba(0, 0, 250, 0.12);
   }
-} 
-
+}
 
 .mt32 {
   margin-top: 32px;
 }
 
 .mb32 {
   margin-bottom: 32px;
-}
+}
diff --git a/src/components/CardsHand/CardsHand.tsx b/src/components/CardsHand/CardsHand.tsx
@@ -1,4 +1,6 @@
 import { FC, ReactNode } from 'react'
+import { DragPreviewImage, useDrag } from 'react-dnd'
+import { ItemTypes } from '../../shared/constants'
 
 interface CardsHandProps {
   children: ReactNode[]
@@ -9,7 +11,7 @@ interface CardsHandProps {
 
 export const CardsHand: FC<CardsHandProps> = ({ children, className = '', keys, hide = false }) => {
   const height = Math.abs(-Math.floor(children.length / 2))
-  if(hide) return null;
+  if (hide) return null
   return (
     <div
       className={['cards', className].join(' ')}
@@ -18,15 +20,30 @@ export const CardsHand: FC<CardsHandProps> = ({ children, className = '', keys,
       }}
     >
       {children.map((Element, index, deck) => {
+        // const [{ opacity }, dragRef] = useDrag(
+        //   () => ({
+        //     type: ItemTypes.CARD,
+        //     item: { card: deck[index] },
+        //     collect: (monitor) => ({
+        //       opacity: monitor.isDragging() ? 0.5 : 1
+        //     })
+        //   }),
+        //   []
+        // )
         const delta = Math.abs(-Math.floor(deck.length / 2) + index)
         const rotate = -Math.floor(deck.length / 2)
         const translateX = delta * delta * 5
         const translateY = index < deck.length / 2 ? delta * delta * 1.3 : -(delta * delta * 1.3)
         const style = {
           rotate: `${(rotate + index) * 6}deg`,
           margin: '0px -12px',
-          translate: `${translateY}px ${translateX}px`
+          translate: `${translateY}px ${translateX}px`,
+          // opacity,
+          // opacity: isDragging ? 0.5 : 1
         }
+        // if (isDragging) {
+        //   return (<div key={(keys ?? [(index = index)])[index]} ref={drag}>{Element}</div>)
+        // }
         return (
           <div key={(keys ?? [(index = index)])[index]} style={style}>
             {Element}

diff --git a/src/components/NavigatorTypeView/NavigatorTypeView.tsx b/src/components/NavigatorTypeView/NavigatorTypeView.tsx
@@ -1,6 +1,8 @@
 import { CSSProperties, FC } from 'react'
+import { useDrag } from 'react-dnd'
 import { CardType } from '../../math/arithmetic'
 import { formatNumber } from '../../math/utils'
+import { ItemTypes } from '../../shared/constants'
 import { AdditionView } from '../AdditionView/AdditionView'
 
 interface NavigatorViewProps {
@@ -16,6 +18,17 @@ export const NavigatorTypeView: FC<NavigatorViewProps> = ({
   style = {},
   handleCardClick
 }) => {
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: ItemTypes.CARD,
+      item: card,
+      collect: (monitor) => ({
+        isDragging: !!monitor.isDragging()
+      })
+    }),
+    []
+  )
+
   const name = card.getName()
 
   const handleClick = () => {
@@ -25,7 +38,7 @@ export const NavigatorTypeView: FC<NavigatorViewProps> = ({
   }
 
   return (
-    <div onClick={handleClick} style={style} className={className}>
+    <div ref={drag} style={style} data-testid='box' className={className} onClick={handleClick}>
       <div className='mainText'>{name}</div>
     </div>
   )