diff --git a/Api/package.json b/Api/package.json index c2d9d25..80aedb7 100644 --- a/Api/package.json +++ b/Api/package.json @@ -2,17 +2,28 @@ "name": "api", "version": "1.0.0", "description": "", - "main": "index.js", + "main": "src/server.ts", "scripts": { + "start": "nodemon src/server.ts", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { + "@types/cors": "^2.8.13", + "@types/debug": "^4.1.7", "@types/express": "^4.17.16", + "@types/morgan": "^1.9.4", "nodemon": "^2.0.20", "ts-node": "^10.9.1", "typescript": "^4.9.4" + }, + "dependencies": { + "cors": "^2.8.5", + "express-winston": "^4.2.0", + "morgan": "^1.10.0", + "swagger-ui-express": "^4.6.0", + "winston": "^3.8.2" } } diff --git a/Api/src/app.ts b/Api/src/app.ts new file mode 100644 index 0000000..dd14310 --- /dev/null +++ b/Api/src/app.ts @@ -0,0 +1,68 @@ +import express, { Application } from 'express'; +// import compression from 'compression'; +import cors from 'cors'; +// import db from './database'; +// import morgan from 'morgan'; +import Controller from './controller/Icontroller'; +// import ErrorMiddleware from './middleware/error.middleware'; +import bodyParser from 'body-parser'; + +// to secure +// import helmet from 'helmet'; + +import http from 'http'; + +class App { + public express: Application; + public port: number; + public dataBase: null; + + public server : any; + + constructor(controllers: Controller[], port: number) { + this.express = express(); + this.port = port; + this.dataBase = null; + + // this.initialiseDatabase(); + this.initialiseMiddleware(); + this.initialiseControllers(controllers); + + // this.initialiseErrorHandling(); + } + + private initialiseMiddleware(): void { + // this.express.use(helmet()); + this.express.use(cors()); + // this.express.use(morgan('dev')); + this.express.use(express.json()); + this.express.use(express.urlencoded({ extended: false })); + // this.express.use(compression()); + // mine + this.express.use(bodyParser.json()); + this.express.use(bodyParser.urlencoded({ + extended: true + })); + + } + + private initialiseControllers(controllers: Controller[]): void { + controllers.forEach((controller: Controller) => { + this.express.use('/api', controller.router); + }); + } + + // private initialiseErrorHandling(): void { + // this.express.use(ErrorMiddleware); + // } + + public listen(): void { + const server = this.express.listen(this.port, () => { + console.log(`⚡️[server] : App listening on the port ${this.port}`); + }); + } + + +} + +export default App; \ No newline at end of file diff --git a/Api/src/controller/Icontroller.ts b/Api/src/controller/Icontroller.ts new file mode 100644 index 0000000..dc34151 --- /dev/null +++ b/Api/src/controller/Icontroller.ts @@ -0,0 +1,15 @@ +import { Router } from 'express'; + +interface Controller { + path: string; + router: Router; + // constructor() { + // this.initialiseRoutes(); + // } + + // initialiseRoutes(): void ; + +} +// il y a un truc inject + +export default Controller; \ No newline at end of file diff --git a/Api/src/controller/TestCtrl.ts b/Api/src/controller/TestCtrl.ts new file mode 100644 index 0000000..4058fc5 --- /dev/null +++ b/Api/src/controller/TestCtrl.ts @@ -0,0 +1,27 @@ +import { Router } from "express"; +import Controller from "./Icontroller"; + +type PingResponse = { + message: string; + } + +export default class PingController implements Controller { + public path = '/ping'; + public router = Router(); + + constructor() { + this.initialiseRoutes(); + } + + private initialiseRoutes(): void { + this.router.get("/ping", async (_req, res) => { + const response = await this.getMessage(); + return res.send(response); + }); + } + async getMessage(): Promise { + return { + message: "pong", + }; + } +} \ No newline at end of file diff --git a/Api/src/database/StrategyDatabase.ts b/Api/src/database/StrategyDatabase.ts new file mode 100644 index 0000000..e69de29 diff --git a/Api/src/middleware/winston.ts b/Api/src/middleware/winston.ts new file mode 100644 index 0000000..87a8e70 --- /dev/null +++ b/Api/src/middleware/winston.ts @@ -0,0 +1,8 @@ +// export const loggerOptions: expressWinston.LoggerOptions = { +// transports: [new winston.transports.Console()], +// format: winston.format.combine( +// winston.format.json(), +// winston.format.prettyPrint(), +// winston.format.colorize({ all: true }) +// ), +// }; \ No newline at end of file diff --git a/Api/src/server.ts b/Api/src/server.ts new file mode 100644 index 0000000..9c86e7c --- /dev/null +++ b/Api/src/server.ts @@ -0,0 +1,11 @@ +import App from "./app"; +import PingController from "./controller/TestCtrl"; + +const app = new App( + [new PingController()], + Number(8080) + // Number(process.env.PORT) + +); + +app.listen(); diff --git a/FLAD/App.tsx b/FLAD/App.tsx index e8bcfa7..5e576c2 100644 --- a/FLAD/App.tsx +++ b/FLAD/App.tsx @@ -1,43 +1,61 @@ +import { LinearGradient } from 'expo-linear-gradient'; import { StatusBar } from 'expo-status-bar'; import { useState, useTransition } from 'react'; -import { Animated, StyleSheet, Text, View } from 'react-native'; +import { Animated, Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native'; import Card from './components/Card'; +import Spot from './pages/spot'; + -import { cards as cardArray } from './FakeData/data' - export default function App() { -// const [currentCard, setCurrentCard] = useState(cardArray); -// const aIndex = useTransition(currentCard) -// ; -const [cards, setCards] = useState(cardArray); -const aIndex = useTransition(); -const onSwipe = (index: number, direction: 'left' | 'right') => { - if (direction === 'right') { - // Swiped right - console.log('Swiped right'); + // const [currentCard, setCurrentCard] = useState(cardArray); + // const aIndex = useTransition(currentCard) + // ; + +// const aIndex = useTransition(); +// const onSwipe = (index: number, direction: 'left' | 'right') => { +// if (direction === 'right') { +// // Swiped right +// console.log('Swiped right'); - } else if (direction === 'left') { - console.log('Swiped left'); - } - // update the state of the card or the app - setCards(cards.filter((_, i) => i !== index)); -}; +// } else if (direction === 'left') { +// console.log('Swiped left'); +// } +// // update the state of the card or the app +// setCards(cards.filter((_, i) => i !== index)); +// }; // const [currentCard, setCurrentCard] = useState(0); +const {width : wWidht} = Dimensions.get("window"); return ( - - {cards.map((card, index) => ( - - onSwipe(index, direction)} - /> - - ))} + + + + LOST FOREST + Laylow + + + + + @@ -81,4 +99,11 @@ const styles = StyleSheet.create({ resizeMode : "cover", placeholder: "assets/images/loadingPlaceholder.gif" }, -}); \ No newline at end of file + gradient : { + position : "absolute", + top : 0, + left : 0, + right : 0, + height : 209, + } +}); diff --git a/FLAD/FakeData/data.ts b/FLAD/FakeData/data.ts index 26f9297..24013a7 100644 --- a/FLAD/FakeData/data.ts +++ b/FLAD/FakeData/data.ts @@ -4,14 +4,9 @@ export const cards = [{ index : 3 }, { - name : "red", - sourceUrl : "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80", - index : 2 - }, - { - name : "green", - sourceUrl : "https://images.unsplash.com/photo-1584679109597-c656b19974c9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80", - index : 1 + name : "her", + sourceUrl : "https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1359&q=80", + index : 3 } ] \ No newline at end of file diff --git a/FLAD/app.json b/FLAD/app.json index bdbb044..1769d52 100644 --- a/FLAD/app.json +++ b/FLAD/app.json @@ -9,7 +9,7 @@ "splash": { "image": "./assets/splash.png", "resizeMode": "contain", - "backgroundColor": "#ffffff" + "backgroundColor": "#1d2129" }, "updates": { "fallbackToCacheTimeout": 0 diff --git a/FLAD/assets/adaptive-icon.png b/FLAD/assets/adaptive-icon.png index 03d6f6b..b9c3cb3 100644 Binary files a/FLAD/assets/adaptive-icon.png and b/FLAD/assets/adaptive-icon.png differ diff --git a/FLAD/assets/colors/colors.tsx b/FLAD/assets/colors/colors.tsx new file mode 100644 index 0000000..e69de29 diff --git a/FLAD/assets/colors/theme.tsx b/FLAD/assets/colors/theme.tsx new file mode 100644 index 0000000..e69de29 diff --git a/FLAD/assets/icon.png b/FLAD/assets/icon.png index a0b1526..ae5490e 100644 Binary files a/FLAD/assets/icon.png and b/FLAD/assets/icon.png differ diff --git a/FLAD/assets/icons/icon_discovery.png b/FLAD/assets/icons/icon_discovery.png new file mode 100644 index 0000000..d3dc70c Binary files /dev/null and b/FLAD/assets/icons/icon_discovery.png differ diff --git a/FLAD/assets/icons/icon_dislike.png b/FLAD/assets/icons/icon_dislike.png new file mode 100644 index 0000000..7196a46 Binary files /dev/null and b/FLAD/assets/icons/icon_dislike.png differ diff --git a/FLAD/assets/icons/icon_like.png b/FLAD/assets/icons/icon_like.png new file mode 100644 index 0000000..d5297d9 Binary files /dev/null and b/FLAD/assets/icons/icon_like.png differ diff --git a/FLAD/assets/icons/icon_messages.png b/FLAD/assets/icons/icon_messages.png new file mode 100644 index 0000000..0ae98bb Binary files /dev/null and b/FLAD/assets/icons/icon_messages.png differ diff --git a/FLAD/assets/splash.png b/FLAD/assets/splash.png index 0e89705..7126405 100644 Binary files a/FLAD/assets/splash.png and b/FLAD/assets/splash.png differ diff --git a/FLAD/babel.config.js b/FLAD/babel.config.js index 2900afe..3b0441f 100644 --- a/FLAD/babel.config.js +++ b/FLAD/babel.config.js @@ -2,5 +2,8 @@ module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], + + // always the last plugin + plugins: ['react-native-reanimated/plugin'], }; }; diff --git a/FLAD/components/Card.tsx b/FLAD/components/Card.tsx index 131e662..290c300 100644 --- a/FLAD/components/Card.tsx +++ b/FLAD/components/Card.tsx @@ -1,77 +1,199 @@ -import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet } from 'react-native' +import { View, Text, Image , Dimensions, StyleSheet } from 'react-native' import React, { useRef, useState } from 'react' -import { eventMethod } from '@ionic/core/dist/types/utils/overlays'; +import Animated,{ Extrapolate, interpolate, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; +import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; +import * as Haptics from 'expo-haptics'; const {width : wWidht} = Dimensions.get("window"); -const width = wWidht *0.75; -const height = wWidht * (465/264); -const borderRadius = 24; - +const SCREEN_HEIGHT = Dimensions.get('window').height +const SCREEN_WIDTH = Dimensions.get('window').width +// const width = wWidht *0.75; +// const height = wWidht * (465/264); +// const borderRadius = 24; interface CardProps { title: string; image: any; onSwipe: (direction: "left" | "right") => void; } + type ContextType = { + translateX: number; + translateY: number; + }; + +const Card = ({ title, image, onSwipe} : CardProps) => { + + const translateX = useSharedValue(0); + const translateY = useSharedValue(0); + + const hapti = (() => { + + // Haptics.NotificationFeedbackType.Success + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) + }); + const onGestureEvent = useAnimatedGestureHandler< + PanGestureHandlerGestureEvent, + ContextType + >({ + onStart : (event, context) => { + context.translateX = translateX.value; + context.translateY = translateY.value; + }, + onActive : (event, context) => { + translateX.value = event.translationX + context.translateX -5; + translateY.value = event.translationY + context.translateY; + }, + onEnd : (event, context) => { + // translateX.value = withSpring(0); + // translateY.value = withSpring(snapPoint(translateY.value,velocityY, snapPoints )) + if (translateX.value > 160) { + hapti() + onSwipe("right"); + } else if (translateX.value < -160) { + onSwipe("left"); + } else { + translateX.value = withSpring(0); + translateY.value = withSpring(0); + } -// const [loading, setLoading] = useState(true); -// const [cards, setCards] = useState(cardArray); + }, + }); + -// useEffect(()=>{ -// setLoading(true); -// eventMethod().then( -// setLoading(false); -// ) -// }) - - const Card: React.FC = ({ title, image, onSwipe }) => { - const pan = useRef(new Animated.ValueXY()).current; - const panResponder = useRef( - PanResponder.create({ - onMoveShouldSetPanResponder: (evt, gestureState) => { - // Only set the pan responder if the user has moved the card more than a certain threshold - if (Math.abs(gestureState.dx) > 10) { - return true; - } - return false; - }, - onPanResponderMove: (evt, gestureState) => { - // Update the position of the card as the user swipes it - pan.setValue({ x: gestureState.dx, y: 0 }); - console.log("Card"); - }, - onPanResponderRelease: (evt, gestureState) => { - // Handle the swipe action based on the swipe direction - if (gestureState.dx > 50) { - onSwipe("right"); - } else if (gestureState.dx < -50) { - onSwipe("left"); - } else { - // Swiped a small amount, reset the position of the card - Animated.spring(pan, { - toValue: { x: 0, y: 0 }, - useNativeDriver: true, - }).start(); - } - }, - }) - ).current; +//better to have 2 listerner => 2 useAnimatedStyle ou faire une ftc qui retourne l'verse de une useAnimatedStyle + const opacLStyle = useAnimatedStyle(() => { + const opacityl = interpolate + ( translateX.value, + [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 4], + [0, 0, 1]); + return { + opacity : opacityl, + }; + }); + const opacRStyle = useAnimatedStyle(() => { + const opacityl = interpolate + ( translateX.value, + [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 2], + [1, 0, 0]); + return { + opacity : opacityl, + }; + }); + + const opacCStyle = useAnimatedStyle(() => { + const opacityl = interpolate + ( translateX.value, + [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 4], + [0.75, 1, 0.75]); + + return { + opacity : opacityl, + }; + }); + const opacDStyle = useAnimatedStyle(() => { + const opacityl = interpolate + ( translateY.value, + [-SCREEN_HEIGHT / 4, 0, SCREEN_HEIGHT / 2], + [0, 0, 1]); + return { + opacity : opacityl, + }; + }); + + const rotateStyle = useAnimatedStyle(() => { + const rot = interpolate + ( translateX.value, + [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], + [30, 0, 30], + Extrapolate.CLAMP); + return { + transform: [{ rotate: `${rot}deg` },{ + translateX: withSpring(translateX.value), + } ], + + }; + }); + + const rStyle = useAnimatedStyle(() => { + + return { + transform: [ + { + translateX: translateX.value, + }, + { + translateY: translateY.value, + }, + ], + }; + }); return ( + + + + - + style={[{ + // transform: [{ rotate: "30deg" }], + position: "absolute", + zIndex: 1000, + },opacRStyle]} + > + + + + + + + + + + ); }; -const nournous = StyleSheet.create({ - +const styles = StyleSheet.create({ + card : { + justifyContent : 'center', + alignItems : 'center', + + }, + image : { + borderRadius : 24, + resizeMode: 'cover', + height: 529, + width: 312, + backgroundColor: 'black', +} }) diff --git a/FLAD/components/button.tsx b/FLAD/components/button.tsx new file mode 100644 index 0000000..e69de29 diff --git a/FLAD/package-lock.json b/FLAD/package-lock.json index 6385f2c..2073ca9 100644 --- a/FLAD/package-lock.json +++ b/FLAD/package-lock.json @@ -12,10 +12,14 @@ "@react-navigation/native-stack": "^6.9.8", "expo": "~47.0.12", "expo-cli": "^6.1.0", + "expo-haptics": "~12.0.1", + "expo-linear-gradient": "~12.0.1", "expo-status-bar": "~1.4.2", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", + "react-native-gesture-handler": "~2.8.0", + "react-native-reanimated": "~2.12.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-web": "~0.18.9" @@ -1310,6 +1314,20 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-object-assign": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz", + "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-object-super": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz", @@ -1796,6 +1814,17 @@ "node": ">=0.1.90" } }, + "node_modules/@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "dependencies": { + "@types/hammerjs": "^2.0.36" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@expo/apple-utils": { "version": "0.0.0-alpha.31", "resolved": "https://registry.npmjs.org/@expo/apple-utils/-/apple-utils-0.0.0-alpha.31.tgz", @@ -4914,6 +4943,11 @@ "@types/node": "*" } }, + "node_modules/@types/hammerjs": { + "version": "2.0.41", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz", + "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==" + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -4924,6 +4958,11 @@ "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz", "integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==" }, + "node_modules/@types/invariant": { + "version": "2.2.35", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", + "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -9923,6 +9962,14 @@ "expo": "*" } }, + "node_modules/expo-haptics": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-12.0.1.tgz", + "integrity": "sha512-YubK3P3WTdjp5mFZcaF3ienqXHoDqzPpe61yTEIR5y+CVWqk+If9cC3ZYxn6lSp8KiNUmz7zC0GvUAVEqn8t6Q==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-keep-awake": { "version": "11.0.1", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz", @@ -9931,6 +9978,14 @@ "expo": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz", + "integrity": "sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.0.2.tgz", @@ -11700,6 +11755,19 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "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/hosted-git-info": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz", @@ -13760,6 +13828,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -16933,6 +17006,21 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/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/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -17558,11 +17646,46 @@ "nullthrows": "^1.1.1" } }, + "node_modules/react-native-gesture-handler": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz", + "integrity": "sha512-poOSfz/w0IyD6Qwq7aaIRRfEaVTl1ecQFoyiIbpOpfNTjm2B1niY2FLrdVQIOtIOe+K9nH55Qal04nr4jGkHdQ==", + "dependencies": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-gradle-plugin": { "version": "0.70.3", "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz", "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==" }, + "node_modules/react-native-reanimated": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz", + "integrity": "sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==", + "dependencies": { + "@babel/plugin-transform-object-assign": "^7.16.7", + "@babel/preset-typescript": "^7.16.7", + "@types/invariant": "^2.2.35", + "invariant": "^2.2.4", + "lodash.isequal": "^4.5.0", + "setimmediate": "^1.0.5", + "string-hash-64": "^1.0.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0", + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz", @@ -19197,6 +19320,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/string-hash-64": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz", + "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==" + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -23960,6 +24088,14 @@ "@babel/helper-plugin-utils": "^7.18.6" } }, + "@babel/plugin-transform-object-assign": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz", + "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==", + "requires": { + "@babel/helper-plugin-utils": "^7.18.6" + } + }, "@babel/plugin-transform-object-super": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz", @@ -24296,6 +24432,14 @@ "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", "optional": true }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@expo/apple-utils": { "version": "0.0.0-alpha.31", "resolved": "https://registry.npmjs.org/@expo/apple-utils/-/apple-utils-0.0.0-alpha.31.tgz", @@ -26705,6 +26849,11 @@ "@types/node": "*" } }, + "@types/hammerjs": { + "version": "2.0.41", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz", + "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==" + }, "@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -26715,6 +26864,11 @@ "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz", "integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==" }, + "@types/invariant": { + "version": "2.2.35", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", + "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -30718,12 +30872,24 @@ "fontfaceobserver": "^2.1.0" } }, + "expo-haptics": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-12.0.1.tgz", + "integrity": "sha512-YubK3P3WTdjp5mFZcaF3ienqXHoDqzPpe61yTEIR5y+CVWqk+If9cC3ZYxn6lSp8KiNUmz7zC0GvUAVEqn8t6Q==", + "requires": {} + }, "expo-keep-awake": { "version": "11.0.1", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz", "integrity": "sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==", "requires": {} }, + "expo-linear-gradient": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz", + "integrity": "sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==", + "requires": {} + }, "expo-modules-autolinking": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.0.2.tgz", @@ -32074,6 +32240,21 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "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==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "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==" + } + } + }, "hosted-git-info": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz", @@ -33637,6 +33818,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -36205,6 +36391,23 @@ "sisteransi": "^1.0.5" } }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + }, + "dependencies": { + "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==" + } + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -36685,11 +36888,37 @@ "nullthrows": "^1.1.1" } }, + "react-native-gesture-handler": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz", + "integrity": "sha512-poOSfz/w0IyD6Qwq7aaIRRfEaVTl1ecQFoyiIbpOpfNTjm2B1niY2FLrdVQIOtIOe+K9nH55Qal04nr4jGkHdQ==", + "requires": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, "react-native-gradle-plugin": { "version": "0.70.3", "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz", "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==" }, + "react-native-reanimated": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz", + "integrity": "sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==", + "requires": { + "@babel/plugin-transform-object-assign": "^7.16.7", + "@babel/preset-typescript": "^7.16.7", + "@types/invariant": "^2.2.35", + "invariant": "^2.2.4", + "lodash.isequal": "^4.5.0", + "setimmediate": "^1.0.5", + "string-hash-64": "^1.0.3" + } + }, "react-native-safe-area-context": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz", @@ -38012,6 +38241,11 @@ "safe-buffer": "~5.1.0" } }, + "string-hash-64": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz", + "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==" + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/FLAD/package.json b/FLAD/package.json index 7490513..cac7a54 100644 --- a/FLAD/package.json +++ b/FLAD/package.json @@ -19,7 +19,11 @@ "react-native": "0.70.5", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", - "react-native-web": "~0.18.9" + "react-native-web": "~0.18.9", + "expo-linear-gradient": "~12.0.1", + "react-native-reanimated": "~2.12.0", + "react-native-gesture-handler": "~2.8.0", + "expo-haptics": "~12.0.1" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/FLAD/pages/spot.tsx b/FLAD/pages/spot.tsx index 0a3d1a6..84ada9c 100644 --- a/FLAD/pages/spot.tsx +++ b/FLAD/pages/spot.tsx @@ -1,73 +1,80 @@ -import { View, Text, Image, Animated ,PanResponder, Dimensions } from 'react-native' -import React, { useRef, useState, useTransition } from 'react' +import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable } from 'react-native' +import React, { useCallback, useRef, useState, useTransition } from 'react' +import { LinearGradient } from 'expo-linear-gradient'; +import * as Haptics from 'expo-haptics'; import Card from '../components/Card'; import { cards as cardArray } from '../FakeData/data' -const {width : wWidht} = Dimensions.get("window"); -const width = wWidht *0.75; -const height = wWidht * (465/264); -const borderRadius = 24; - interface SpotProps { - title: string; - image: any; - onSwipe: (direction: "left" | "right") => void; - } - +} +const Spot: React.FC = () => { - const Spot: React.FC = ({ title, image, onSwipe }) => { - const [cards, setCards] = useState(cardArray); - const aIndex = useTransition(); - const onSwipe = (index: number, direction: 'left' | 'right') => { + const [cards, setCards] = useState(cardArray); + const onSwipe = (index: number, direction: 'left' | 'right') => { if (direction === 'right') { - // Swiped right - console.log('Swiped right'); - + // Swiped right + console.log("===================") } else if (direction === 'left') { - console.log('Swiped left'); + // Swiped left } // update the state of the card or the app setCards(cards.filter((_, i) => i !== index)); - }; + }; -// const [currentCard, setCurrentCard] = useState(0); + const hapti = (() => { + + // Haptics.NotificationFeedbackType.Success + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) + }); return ( - + + {cards.map((card, index) => ( - + + + + onSwipe(index, direction)} /> + +