Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

S04US02-Système de vie #76

Merged
merged 5 commits into from
Nov 7, 2023
Merged

S04US02-Système de vie #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6b1ceae
syteme de vie fonctionnelle manque plus qu'une condition si pv<0
Nov 6, 2023
0638cc5
ok fonctionnel
Nov 7, 2023
7c46e68
css et responsive ok
Nov 7, 2023
e1341dd
retrait console.info
Nov 7, 2023
ce9bb44
changement nom variable Length
Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 30 additions & 5 deletions frontend/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ footer {
}
}
#bg {
min-height: 88vh;
height: 100vh;
background-image: url("./assets/potionclassroom.png");
background-size: cover;
background-repeat: no-repeat;
Expand All @@ -324,27 +324,33 @@ footer {
#bgTrue {
text-align: center;
width: 100%;
height: 25vw;
height: 130%;
background-image: url("./assets/potionclassroom-animation-ok.gif");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 450px) {
height: 180%;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: -100px;
}
}
#bgFalse {
text-align: center;
width: 100%;
height: 25vw;
height: 130%;
background-image: url("./assets/potionclassroom-animation-false.gif");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 450px) {
height: 130%;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: -100px;
}
}
.imgIngredient {
Expand All @@ -356,14 +362,33 @@ footer {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, 265px);
transition-delay: 0s;
transform: translate(0px, 300%);
}

100% {
opacity: 0;
}
}
@media screen and (max-width: 450px) {
@keyframes slideIn {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, 30%);
}

100% {
opacity: 0;
}
}
}
}
img {
@media screen and (max-width: 450px) {
width: 50%;
height: 50%;
}
}
.bonus {
justify-content: center;
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/components/Ingredients.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ function Ingredients({
setScore,
score,
gainScore,
setPV,
pV,
}) {
const isTrue = () => {
function returnToTrueAnimation() {
Expand All @@ -33,6 +35,8 @@ function Ingredients({
if (ingredientsPotion.includes(ingredient) !== true) {
setBg("bgFalse");
endAnimation();
setPV(pV?.splice(1));
console.info(pV);
} else {
setImgIngredient(ingredientImg);
setImgIngredientClass("imgIngredient");
Expand All @@ -56,11 +60,13 @@ Ingredients.propTypes = {
ingredient: PropTypes.string.isRequired,
ingredientsPotion: PropTypes.isRequired,
setImgIngredient: PropTypes.func.isRequired,
ingtransp: PropTypes.string.isRequired,
ingtransp: PropTypes.func.isRequired,
setBg: PropTypes.func.isRequired,
setImgIngredientClass: PropTypes.func.isRequired,
setScore: PropTypes.number.isRequired,
setScore: PropTypes.func.isRequired,
gainScore: PropTypes.number.isRequired,
score: PropTypes.number.isRequired,
setPV: PropTypes.func.isRequired,
pV: PropTypes.func.isRequired,
};
export default Ingredients;
171 changes: 96 additions & 75 deletions frontend/src/components/Jeu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import axios from "axios";
import { useParams } from "react-router-dom";
import { useState, useEffect, useMemo } from "react";
import PV from "../assets/f7dfdf45.png";
import Ingredients from "./Ingredients";
Expand All @@ -19,6 +20,18 @@ function Jeu() {
.catch((err) => console.error(err));
}, []);

const { id } = useParams();

let pvs;
if (id === "easy") {
pvs = [1, 2, 3, 4];
} else if (id === "medium") {
pvs = [1, 2, 3];
} else {
pvs = [1, 2];
}
const [pV, setPV] = useState(pvs);

const ingredientsPotion = potions[0]?.attributes.ingredients.split(",");

let wrongIngredients = [];
Expand All @@ -44,106 +57,114 @@ function Jeu() {

allIngredients?.sort();

console.info(allIngredients);

const [imgIngredient, setImgIngredient] = useState(ingtransp);

const [imgIngredientClass, setImgIngredientClass] = useState("");

const [bg, setBg] = useState("bgTrue");

const [score, setScore] = useState(0);
const length = ingredientsPotion?.length;
const gainScore = 100 / length;
const ingredientsPotionLength = ingredientsPotion?.length;
const gainScore = 200 / ingredientsPotionLength;

return (
<div id="bg" className="w-full flex justify:center ">
<div
className=" h-full w-full flex flex-col items-center p-3 justify-around max-sm:justify-normal
"
>
<div className=" shadow-white-100 shadow-2xl bg-purple-heart-300 rounded-2xl w-64 flex justify-center max-sm:w-22 max-sm:h-4">
<div className=" shadow-white-100 shadow-2xl bg-purple-heart-300 rounded-2xl w-72 justify-center flex flex-col max-sm:w-22 max-sm:h-8">
<h2 className="text-black text-center text-xl font-irish max-sm:text-xs ">
You must make this potion
</h2>
<p className="font-irish text-center max-sm:text-xs">
Find {ingredientsPotion?.length} ingredients
</p>
</div>
<div
className="flex justify-between w-5/6 p-3 max-sm:w-full max-sm:h-48 items-center
{pV.length !== 0 ? (
<>
<div
className="flex justify-between w-5/6 p-3 max-sm:w-full max-sm:h-48 items-center

"
>
<div
className="bg-[url('./assets/parch.png')] bg-no-repeat h-72 w-80 flex flex-col items-center justify-center
max-sm:w-2/6 max-sm:h-28 max-sm:bg-cover max-sm:p-0 max-sm:gap-0 "
>
<img
src={potions[0]?.attributes.image}
alt="potion"
className="w-14 h-12 max-sm:w-6 max-sm:h-6 "
/>
<span
className="w-26 text-white text-center font-irish flex flex-col
>
<div
className="bg-[url('./assets/parch.png')] bg-no-repeat h-72 w-80 flex flex-col items-center justify-center
max-sm:w-2/6 max-sm:h-32 max-sm:bg-cover max-sm:p-0 max-sm:gap-0 "
>
<img
src={potions[0]?.attributes.image}
alt="potion"
className="w-14 h-12 max-sm:w-6 max-sm:h-6 "
/>
<span
className="w-26 text-white text-center font-irish flex flex-col
max-sm:w-18 max-sm:text-xs
"
>
<p>{potions[0]?.attributes.name}</p>
<p>{potions[0]?.attributes.characteristics}</p>
<p>{potions[0]?.attributes.effect} </p>
</span>
</div>
<span className={imgIngredientClass}>
<img src={imgIngredient} alt={imgIngredient} />
</span>
<div
className="text-white h-48 w-72 p-10 rounded-2xl bg-purple-heart-500 flex flex-col gap-10 justify-center
>
<p>{potions[0]?.attributes.name}</p>
<p>{potions[0]?.attributes.characteristics}</p>
<p>{potions[0]?.attributes.effect} </p>
</span>
</div>
<span className={imgIngredientClass}>
<img src={imgIngredient} alt={imgIngredient} />
</span>
<div
className="text-white h-48 w-72 p-10 rounded-2xl bg-purple-heart-500 flex flex-col gap-10 justify-center
max-sm:w-28 max-sm:h-16 max-sm:p-0 max-sm:gap-0 align-middle"
>
<div className="flex flex-row justify-around max-sm:justify-center">
<h3 className="self-center font-irish">PV</h3>
<img
src={PV}
alt="PV"
className="w-15 h-12 max-sm:w-6 max-sm:h-6 max-sm:text-xs"
/>
<img
src={PV}
alt="PV"
className="w-15 h-12 max-sm:w-6 max-sm:h-6 max-sm:text-xs"
/>
<img
src={PV}
alt="PV"
className="w-15 h-12 max-sm:w-6 max-sm:h-6 max-sm:text-xs"
/>
</div>
<div className="flex flex-row justify-around max-sm:justify-center">
<h3 className="font-irish">Score </h3>
<h4 className="font-irish">{score}/200</h4>
>
<div className="flex flex-row justify-around max-sm:justify-center">
<h3 className="self-center font-irish">PV</h3>
{pV?.map((pv) => (
<div key={pv}>
<img
src={PV}
alt="PV"
className="w-15 h-12 max-sm:w-6 max-sm:h-6 max-sm:text-xs"
/>
</div>
))}
</div>
<div className="flex flex-row justify-around max-sm:justify-center">
<h3 className="font-irish">Score </h3>
<h4 className="font-irish">{score}/200</h4>
</div>
</div>
</div>
</div>
</div>
<span className="w-full h-3/6 ">
<Chaudron bg={bg} />
</span>
<div className=" flex flex-wrap justify-center ">
{allIngredients?.map((ingredient) => (
<div
key={ingredient}
className="flex bg-purple-heart-500 w-56 h-10 rounded m-2 max-sm:w-42"
>
<Ingredients
ingredient={ingredient}
ingredientsPotion={ingredientsPotion}
setImgIngredient={setImgIngredient}
setBg={setBg}
setImgIngredientClass={setImgIngredientClass}
score={score}
setScore={setScore}
gainScore={gainScore}
/>
<span className="w-full h-3/6 ">
<Chaudron bg={bg} />
</span>
<div className=" flex flex-wrap justify-center ">
{allIngredients?.map((ingredient) => (
<div
key={ingredient}
className="flex bg-purple-heart-500 w-56 h-10 rounded m-2 max-sm:w-42"
>
<Ingredients
ingredient={ingredient}
ingredientsPotion={ingredientsPotion}
setImgIngredient={setImgIngredient}
setBg={setBg}
setImgIngredientClass={setImgIngredientClass}
score={score}
setScore={setScore}
gainScore={gainScore}
setPV={setPV}
pV={pV}
/>
</div>
))}
</div>
))}
</div>
</>
) : (
<p
className="text-white font-irish w-5/6 h-3/6 flex justify-center items-center text-7xl
max-sm:text-xl max-sm:text-black "
>
Game Over !!
</p>
)}
</div>
</div>
);
Expand Down