fix cards

src/components/Map/Map.js

@@ -1,7 +1,7 @@
 const Map = () => {
     return ( 
         <div>
-            
+            <span>Переход готов</span>
         </div>
      );
 }

src/components/Start/kek.css

@@ -0,0 +1,122 @@
+@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);
+
+@-webkit-keyframes rotate-right {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes rotate-left {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(-360deg);
+    }
+  }
+  @-webkit-keyframes hover {
+    0% {
+      -webkit-transform: translateY(0%);
+    }
+    50% {
+      -webkit-transform: translateY(5%);
+    }
+    100% {
+      -webkit-transform: translateY(0%);
+    }
+  }
+  @-webkit-keyframes pull {
+    0% {
+      -webkit-transform: scaleY(1);
+    }
+    40% {
+      -webkit-transform: scaleY(1.01);
+    }
+    60% {
+      -webkit-transform: scaleY(0.99);
+    }
+    80% {
+      -webkit-transform: scaleY(1.01);
+    }
+    100% {
+      -webkit-transform: scaleY(0.99);
+    }
+    80% {
+      -webkit-transform: scaleY(1.01);
+    }
+    100% {
+      -webkit-transform: scaleY(1);
+    }
+  }
+  #airplane2, #airplane1 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 60s linear 0s infinite;
+  }
+  #countryObjects {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 240s linear 0s infinite;
+  }
+  #floatingGlobe {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-left 360s linear 0s infinite;
+  }
+  #globe {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: hover 0s linear 0s infinite;
+  }
+  #windmill {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 331px 201px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 2s linear 0s infinite;
+  }
+  #cloud1 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: hover 3s linear 1s infinite;
+  }
+  #cloud2 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: hover 3s linear 2s infinite;
+  }
+  #cloud3 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: hover 3s linear 3s infinite;
+  }
+  #circle1 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 12s linear 0s infinite;
+  }
+  #circle2 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-left 24s linear 0s infinite;
+  }
+  #circle3 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 12s linear 0s infinite;
+  }
+  #circle4 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-left 24s linear 0s infinite;
+  }
+  #circle5 {
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform-origin: 200px 200px;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-animation: rotate-right 12s linear 0s infinite;
+  }

src/components/Tinder/Tinder.css

@@ -1,4 +1,4 @@
-.tinder-container {
+  .tinder-container {
     margin-top: 30%;
     height: 85vh;
     width: 100%;
@@ -42,7 +42,7 @@
   
   .card {
     height: 400px;
-    width: 90%;
+    width: 100%;
     max-width: 300px;
     max-height: 400px;
     border-radius: 10px;
@@ -54,19 +54,19 @@
     align-items: flex-end;
     align-content: center;
     flex-wrap: wrap;
-    padding: 16px;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
   }
   
   .card-content {
     border-radius: 10px;
-    padding: 8px;
+    /* padding: 8px; */
     text-align: center;
+    width: 300px;
+    height: 400px;
     background-color: rgba(255, 255, 255, 0.8);
   }
   
   .infoText {
     margin-top: 16px;
-  }
-  
+  }

src/components/Tinder/Tinder.js

@@ -1,100 +1,80 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
+import axios from 'axios';
 
-const db = [
-    {
-        id: 1,
-        name: 'Richard Hendricks',
-    },
-    {
-        id: 2,
-        name: 'Erlich Bachman',
-    },
-    {
-        id: 3,
-        name: 'Monica Hall',
-    },
-    {
-        id: 4,
-        name: 'Jared Dunn',
-    },
-    {
-        id: 5,
-        name: 'Dinesh Chugtai',
-    }
-  ];
-
-  const Tinder = (props) => {
+const Tinder = (props) => {
 
     const route = props.getValue;
 
-    useEffect(() => {
-        console.log(characters[0])
-    });
-
-    const characters = props.cardData;
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
     const [allIds, setAllIds] = useState([]);
-    const [cardLenth, setCardLenth] = useState(false);
+    const [cardInfo, setCardInfo] = useState([]);
 
-    let uniqueTags = [...characters];
-    let allTags = [];
+    useEffect(() => {
+        const fetchData = () => {
+          axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
+            .then(response => {
+              setCardInfo(response.data);
+
+              console.log(cardInfo.length);
+            })
+            .catch(error => {
+              console.error('Error fetching data:', error);
+            });
+        }
+        fetchData();
+      }, []);
 
     const swiped = (direction, id) => {
         setLastDirection(direction);
         allIds.push(id);
-        if (direction === 'right') {
+        console.log(allIds.length);
+        if (direction === 'right' || direction === 'up') {
             cardId.push(id);
         };
     };
 
-    const getId = () => {
-
-        // uniqueTags = cardId.filter(function(elem, pos) {
-        //     return cardId.indexOf(elem) === pos;
-        // });
-
-        // allTags = allIds.filter(function(elem, pos){
-        //     return allIds.indexOf(elem) === pos;
-        // });
-
-        // characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
-
-        // if(cardLenth) {
-        //     route('/map')
-        // }
-        console.log(uniqueTags);
-    }
-  
     return (
-      <div className='tinder-container'>
+        <div className='tinder-container'>
             <h1>Card</h1>
             <div className='card-container'>
-            {characters.map((character) => (
-                <TinderCard
-                className='swipe'
-                key={character.id}
-                onSwipe={(dir) => {
-                    swiped(dir, character.id);
-                    getId();
-                    // console.log(uniqueTags);
-                }}
-                >
-                <div className='card'>
-                    <div
-                    className='card-content'
-                    // style={{ backgroundImage: url(${character.url}) }}
+                {cardInfo.map((card) => (
+                    <TinderCard
+                        className='swipe'
+                        key={card.id}
+                        onSwipe={(dir) => {
+                            swiped(dir, card.id);
+                            var unique = [...new Set(cardId)]
+                            var uniqueIds = [...new Set(allIds)];
+                            if(uniqueIds.length === cardInfo.length) {
+                                route('/map');
+
+                                console.log(unique);
+                            }
+                        }}
                     >
-                    <h3>{props.character.question}</h3>
-                    </div>
-                </div>
-                </TinderCard>
-            ))}
+                        <div className='card'>
+                        <div
+                            className='card-content'
+                            style={{
+                                backgroundImage: `url(${card.imageURL})`,
+                                width: '300px',
+                                height: '400px',
+                                borderRadius: '10px',
+                                backgroundRepeat: 'no-repeat',
+                                backgroundPosition: 'center',
+                            }}
+                        >
+                                <h3>{card.question}</h3>
+                            </div>
+                        </div>
+                    </TinderCard>
+                ))}
             </div>
         </div>
     );
-  };
-  
-  export default Tinder;
+}
+
+export default Tinder;