fix cards
This commit is contained in:
VITALY-VORON
parent
7d7658d38c
commit
88067edac3
153
.gitignore
vendored
153
.gitignore
vendored
@ -1,146 +1,23 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
# production
|
||||
/build
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
172
package-lock.json
generated
172
package-lock.json
generated
@ -12,9 +12,11 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"framer": "^2.3.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tinder-card": "^1.6.2",
|
||||
"web-vitals": "^2.1.4",
|
||||
"workbox-background-sync": "^6.6.0",
|
||||
@ -2279,6 +2281,23 @@
|
||||
"postcss-selector-parser": "^6.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
|
||||
@ -3136,11 +3155,80 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@juggle/resize-observer": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
|
||||
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
|
||||
},
|
||||
"node_modules/@leichtgewicht/ip-codec": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||
},
|
||||
"node_modules/@motionone/animation": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
|
||||
"integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/easing": "^10.15.1",
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/dom": {
|
||||
"version": "10.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.16.2.tgz",
|
||||
"integrity": "sha512-bnuHdNbge1FutZXv+k7xub9oPWcF0hsu8y1HTH/qg6av58YI0VufZ3ngfC7p2xhMJMnoh0LXFma2EGTgPeCkeg==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/animation": "^10.15.1",
|
||||
"@motionone/generators": "^10.15.1",
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/easing": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
|
||||
"integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/generators": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
|
||||
"integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/types": "^10.15.1",
|
||||
"@motionone/utils": "^10.15.1",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@motionone/types": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
|
||||
"integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@motionone/utils": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
|
||||
"integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/types": "^10.15.1",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
|
||||
"version": "5.1.1-v1",
|
||||
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
|
||||
@ -8385,6 +8473,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fontfaceobserver": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
|
||||
"integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg=="
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@ -8582,6 +8675,53 @@
|
||||
"url": "https://www.patreon.com/infusion"
|
||||
}
|
||||
},
|
||||
"node_modules/framer": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/framer/-/framer-2.3.0.tgz",
|
||||
"integrity": "sha512-sVAwMEO3LEfHElJOueRjnlBEYN3X8ztbXwZ22RvBHUftOdDpBkrJfISdAds87O8FEWsn5T7Dp3sLfmrBKXXIaQ==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@juggle/resize-observer": "^3.3.1",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"fontfaceobserver": "^2.1.0",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"hsluv": "^0.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"framer-motion": "^7.6.12",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "7.10.3",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz",
|
||||
"integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@motionone/dom": "^10.15.3",
|
||||
"hey-listen": "^1.0.8",
|
||||
"tslib": "2.4.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@emotion/is-prop-valid": "^0.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion/node_modules/tslib": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
||||
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/framer/node_modules/eventemitter3": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
|
||||
"integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
@ -8963,6 +9103,25 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hey-listen": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
|
||||
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -9014,6 +9173,11 @@
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hsluv": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
|
||||
"integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ=="
|
||||
},
|
||||
"node_modules/html-encoding-sniffer": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
|
||||
@ -14787,6 +14951,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-swipeable": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
|
||||
"integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.3 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tinder-card": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
|
||||
|
||||
10
package.json
10
package.json
@ -7,9 +7,11 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"framer": "^2.3.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tinder-card": "^1.6.2",
|
||||
"web-vitals": "^2.1.4",
|
||||
"workbox-background-sync": "^6.6.0",
|
||||
@ -48,5 +50,11 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
},
|
||||
"main": "index.js",
|
||||
"devDependencies": {},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
|
||||
23
src/App.js
23
src/App.js
@ -1,43 +1,24 @@
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import './App.css';
|
||||
import React, {useState} from 'react';
|
||||
import Start from './components/Start/Start';
|
||||
import Second from './components/Second/Second';
|
||||
import Tinder from './components/Tinder/Tinder';
|
||||
import Map from './components/Map/Map';
|
||||
import axios from 'axios';
|
||||
|
||||
function App() {
|
||||
|
||||
const options = {
|
||||
method: 'GET',
|
||||
url: 'https://easytravel.zetcraft.ru/v1/GetAllCards'
|
||||
};
|
||||
|
||||
const [buttonValue, setButtonValue] = useState("");
|
||||
const [fetchData, setFetchData] = useState([]);
|
||||
|
||||
const handleButtonValue = (value) => {
|
||||
setButtonValue(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
axios.request(options).then(function (response) {
|
||||
console.log(response.data);
|
||||
fetchData.push(response.data);
|
||||
console.log(fetchData);
|
||||
}).catch(function (error) {
|
||||
console.error(error);
|
||||
return null;
|
||||
});
|
||||
});
|
||||
|
||||
let content = null;
|
||||
switch (buttonValue) {
|
||||
case '/':
|
||||
content = <Second getValue={handleButtonValue}/>
|
||||
break;
|
||||
case '/tinder':
|
||||
content = <Tinder getValue={handleButtonValue} cardData={fetchData}/>
|
||||
content = <Tinder getValue={handleButtonValue}/>
|
||||
break;
|
||||
case '/map':
|
||||
content = <Map/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const Map = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<span>Переход готов</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
122
src/components/Start/kek.css
Normal file
122
src/components/Start/kek.css
Normal file
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
}
|
||||
|
||||
@ -1,93 +1,73 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import TinderCard from 'react-tinder-card';
|
||||
import './Tinder.css';
|
||||
|
||||
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',
|
||||
}
|
||||
];
|
||||
import axios from 'axios';
|
||||
|
||||
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'>
|
||||
<h1>Card</h1>
|
||||
<div className='card-container'>
|
||||
{characters.map((character) => (
|
||||
{cardInfo.map((card) => (
|
||||
<TinderCard
|
||||
className='swipe'
|
||||
key={character.id}
|
||||
key={card.id}
|
||||
onSwipe={(dir) => {
|
||||
swiped(dir, character.id);
|
||||
getId();
|
||||
// console.log(uniqueTags);
|
||||
swiped(dir, card.id);
|
||||
var unique = [...new Set(cardId)]
|
||||
var uniqueIds = [...new Set(allIds)];
|
||||
if(uniqueIds.length === cardInfo.length) {
|
||||
route('/map');
|
||||
|
||||
console.log(unique);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className='card'>
|
||||
<div
|
||||
className='card-content'
|
||||
// style={{ backgroundImage: url(${character.url}) }}
|
||||
style={{
|
||||
backgroundImage: `url(${card.imageURL})`,
|
||||
width: '300px',
|
||||
height: '400px',
|
||||
borderRadius: '10px',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
<h3>{props.character.question}</h3>
|
||||
<h3>{card.question}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</TinderCard>
|
||||
@ -95,6 +75,6 @@ const db = [
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Tinder;
|
||||
|
||||
@ -7,9 +7,7 @@ import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
serviceWorkerRegistration.unregister();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const reportWebVitals = (onPerfEntry) => {
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user