diff --git a/website/pages/functions/rightPrice.js b/website/pages/functions/rightPrice.js new file mode 100644 index 0000000..5b12c41 --- /dev/null +++ b/website/pages/functions/rightPrice.js @@ -0,0 +1,154 @@ +import { useState, useEffect, Fragment } from 'react'; +import redirect from '../../utils/redirect'; +import FunctionPage from '../../components/FunctionPage/FunctionPage'; +import FunctionTabs from '../../components/FunctionPage/FunctionTabs'; +import FunctionArticle from '../../components/FunctionPage/FunctionArticle'; +import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'; +import Loader from '../../components/Loader'; +import api from '../../utils/api'; +import '../../public/css/pages/FunctionComponent.css'; +import '../../public/css/pages/functions/toDoList.css'; +import '../../components/FunctionCard/FunctionCard.css'; +import '../../public/css/pages/functions/rightPrice.css'; + +const PlayRightPrice = () => { + + const [isPlaying, setIsPlaying] = useState(false); + const [productToGuess, setProductToGuess] = useState({}); + const [isLoadingProduct, setIsLoadingProduct] = useState(false); + const [enteredPrice, setEnteredPrice] = useState(""); + const [attemptsArray, setAttemptsArray] = useState([]); + + const handlePlaying = () => { + setIsPlaying(true); + setAttemptsArray([]); + fetchRandomAmazonProduct(); + } + + const fetchRandomAmazonProduct = async () => { + setIsLoadingProduct(true); + const { data } = await api.post('/functions/rightPrice'); + setProductToGuess(data); + setIsLoadingProduct(false); + } + + const handleChange = (event) => { + setEnteredPrice(event.target.value); + } + + const handleSubmit = async (event) => { + event.preventDefault(); + const objectTry = {}; + const guessedPrice = Number((enteredPrice).replace(",", ".").replace(" ", "")); + if (!isNaN(guessedPrice)) { + objectTry.guessedPrice = guessedPrice; + objectTry.numberTry = attemptsArray.length + 1; + if (guessedPrice > productToGuess.price) { + objectTry.message = "C'est moins !"; + } else if (guessedPrice < productToGuess.price) { + objectTry.message = "C'est plus !"; + } else { + objectTry.message = "Bravo, vous avez trouvé le juste prix !"; + } + setAttemptsArray([objectTry, ...attemptsArray]); + } + setEnteredPrice(""); + } + + return ( +
+ { + (!isPlaying) ? +
+
+ +
+
+ : (isLoadingProduct) ? +
+ +
+ : + +
+
+

{productToGuess.name}

+ {productToGuess.name} +
+
+ +
+
+ {((attemptsArray.length > 0) && attemptsArray[0].message === "Bravo, vous avez trouvé le juste prix !") ? +
+ +
+ : +
+
+ +
+ +
+ +
+
+ } +
+
+ +
+ {attemptsArray.map((attempt, index) => { + const { message } = attempt; + let priceResultClass; + if (message === "C'est moins !") { + priceResultClass = "Price__result-moins"; + } else if (message === "C'est plus !") { + priceResultClass = "Price__result-plus"; + } else { + priceResultClass = "Price__result-success"; + } + return ( +
+ # {attempt.numberTry} ({attempt.guessedPrice}) {message} +
+ ); + })} +
+
+ } +
+ ); +} + +const FunctionTabManager = (props) => { + return ( + +
+ +
+
+ +
+
+ +
+
+ ); +} + +const rightPrice = (props) => ( + +); + +export async function getServerSideProps(context) { + return api.get(`/functions/rightPrice`) + .then((response) => ({ props: response.data })) + .catch(() => redirect(context, '/404')); +} + +export default rightPrice; \ No newline at end of file diff --git a/website/public/css/pages/functions/rightPrice.css b/website/public/css/pages/functions/rightPrice.css new file mode 100644 index 0000000..bc5431a --- /dev/null +++ b/website/public/css/pages/functions/rightPrice.css @@ -0,0 +1,20 @@ +.Product__image { + max-width: 150px; +} +.Price__result { + height: 50px; + margin: 5px 0 10px 0; + display: flex; + align-items: center; + padding-left: 10px; + color: #fff; +} +.Price__result-success { + background-color: #28a745; +} +.Price__result-plus { + background-color: #dc3545; +} +.Price__result-moins { + background-color: #343a40; +} \ No newline at end of file