#24 Refonte de nombreux éléments en CSS + ajout d'images

#27 Refonte intégrale concernant les noms de fichiers, séparation des fichiers en CSS, etc. Ajout de la fonctionnalité pour le code couleur du monde "impossible"
ORT-Project · Feb 28, 2024 · 64f6911 · 64f6911
1 parent 149e57f
commit 64f6911
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 148 deletions.
diff --git a/public/index.html b/public/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
     <title>モトゥス</title>
 </head>
-<body class="dark">
+<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--

diff --git a/src/components/HealthTry.tsx b/src/components/HealthTry.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import '../home/styles/App.css'
+import heartImage from '../resources/images/new_heart.png'
+import { useLocation } from 'react-router-dom'
+
+export default function HealthTry () {
+	const hearts: string[] = []
+	const location = useLocation()
+	const locationState = location.state
+
+	for (let i = 0; i < locationState.attempts; i++) {
+		hearts.push(heartImage)
+	}
+
+	return (
+		<div className='heart-container'>
+			{
+				hearts.map((heart, index) =>
+					<img key={index} src={heart} alt='heart'/>
+				)
+			}
+		</div>
+	)
+}
diff --git a/src/components/InputAnswer.tsx b/src/components/InputAnswer.tsx
@@ -73,21 +73,19 @@ export default function InputAnswer ({
 		)
 	} else if (locationState.attempts !== 0) { // attempts !== 0
 		return (
-			<div className="input">
-				<div className="container-input visible-game">
-					<input type="text" value={inputValue} onChange={handleInputChange} maxLength={answer.length}
-						   placeholder="Entrez votre réponse" onKeyDown={handlePressEnter}></input>
-					<button onClick={handleClick}>Envoyer</button>
-					<p>{nbInputStringLeft}</p>
-					<p>{textErrorInput}</p>
-				</div>
+			<div className="container-input visible-game">
+				<input type="text" value={inputValue} onChange={handleInputChange} maxLength={answer.length}
+					placeholder="Entrez votre réponse" onKeyDown={handlePressEnter}></input>
+				<button onClick={handleClick}>Envoyer</button>
+				<p>{nbInputStringLeft}</p>
+				<p>{textErrorInput}</p>
 			</div>
 		)
 	} else {
 		return (
 			<div className="lose-game">
 				<p>Vous avez <strong>perdu</strong> la partie, rejouer ? La réponse
-					était <strong>{answer.toLowerCase()}</strong>.</p>
+                    était <strong>{answer.toLowerCase()}</strong>.</p>
 			</div>
 		)
 	}

diff --git a/src/components/WordHistory.tsx b/src/components/WordHistory.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useLocation } from 'react-router-dom'
 
 export type WordHistoryProps = {
 	answer: string
@@ -11,21 +12,30 @@ export default function WordHistory ({
 	inputValue
 }: WordHistoryProps) {
 	const wordLetter = answer.split('')
+	const location = useLocation()
+	const locationState = location.state
 
 	const verifyLetter = (letter: string, index: number, wordLetter: string[]) => {
-		if (letter === wordLetter[index]) {
-			return 'green'
-		} else if (answer.includes(letter)) {
-			return 'orange'
+		if (locationState.color) {
+			if (letter === wordLetter[index]) {
+				return 'green'
+			} else if (answer.includes(letter)) {
+				return 'orange'
+			} else {
+				return 'red'
+			}
 		} else {
-			return 'red'
+			if (letter === wordLetter[index]) {
+				return 'green'
+			} else {
+				return 'red'
+			}
 		}
 	}
 
 	// render
 	return (
-		<div className="history">
-			<p>{inputValue}</p>
+		<div>
 			<table>
 				<tbody>
 					{historyInput.map((answer, index) => (

diff --git a/src/home/App.tsx b/src/home/App.tsx
@@ -1,64 +1,29 @@
-import React from 'react'
-import './App.css'
-import easy from '../resources/images/black_swan.png'
-import medium from '../resources/images/jingliu.png'
-import hard from '../resources/images/sparkle.png'
-import impossible from '../resources/images/ruan_mei.png'
-import { useNavigate } from 'react-router-dom'
+import React, { useState } from 'react'
+import './styles/App.css'
+import heartImage from '../resources/images/heart.png'
 
 export default function App () {
-	const navigate = useNavigate()
+	const hearts: string[] = []
+	const [numHearts, setNumHearts] = useState(9)
 
-	interface FormData {
-		difficulty: string
-		tip: number
-		attempts: number
-		color: boolean
+	for (let i = 0; i < numHearts; i++) {
+		hearts.push(heartImage)
 	}
 
-	const handleRequest = (formData: FormData) => {
-		navigate('/motus/game', { state: formData })
+	const handleClick = () => {
+		setNumHearts(numHearts - 1)
 	}
 
 	return (
-		<div className="container">
-			<h1>Bienvenue sur Motus</h1>
-			<p>Le jeu de mots où il faut deviner un mot en un minimum d&rsquo;essais !</p>
-			<div className="difficulty-container">
-				<img onClick={() => {
-					handleRequest({
-						difficulty: 'Facile',
-						tip: 1,
-						attempts: 10,
-						color: true
-					})
-				}} src={easy} alt="easy" width="300"/>
-				<img onClick={() => {
-					handleRequest({
-						difficulty: 'Moyen',
-						tip: 1,
-						attempts: 7,
-						color: true
-					})
-				}} src={medium} alt="medium" width="300"/>
-				<img onClick={() => {
-					handleRequest({
-						difficulty: 'Difficile',
-						tip: 1,
-						attempts: 5,
-						color: true
-					})
-				}} src={hard} alt="hard" width="300"/>
-				<img onClick={() => {
-					handleRequest({
-						difficulty: 'Impossible',
-						tip: 1,
-						attempts: 3,
-						color: false
-					})
-				}} src={impossible} alt="impossible" width="300"/>
+		<div className='container'>
+			<div className='heart-container'>
+				{
+					hearts.map((heart, index) =>
+						<img key={index} src={heart} alt='heart'/>
+					)
+				}
+				<button onClick={handleClick}>Essai</button>
 			</div>
-			<button className="play-button">Jouer</button>
 		</div>
 	)
 }
diff --git a/src/home/Difficulty.tsx b/src/home/Difficulty.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import './styles/Difficulty.css'
+import easy from '../resources/images/black_swan.png'
+import medium from '../resources/images/jingliu.png'
+import hard from '../resources/images/sparkle.png'
+import impossible from '../resources/images/ruan_mei.png'
+import { useNavigate } from 'react-router-dom'
+
+export default function Difficulty () {
+	const navigate = useNavigate()
+
+	interface FormData {
+		difficulty: string
+		tip: number
+		attempts: number
+		color: boolean
+	}
+
+	const handleRequest = (formData: FormData) => {
+		navigate('/motus/game', { state: formData })
+	}
+
+	return (
+		<div className="container">
+			<h1>Bienvenue sur Motus</h1>
+			<p>Le jeu de mots où il faut deviner un mot en un minimum d&rsquo;essais !</p>
+			<div className="difficulty-container">
+				<img onClick={() => {
+					handleRequest({
+						difficulty: 'Facile',
+						tip: 1,
+						attempts: 10,
+						color: true
+					})
+				}} src={easy} alt="easy" width="300"/>
+				<img onClick={() => {
+					handleRequest({
+						difficulty: 'Moyen',
+						tip: 1,
+						attempts: 7,
+						color: true
+					})
+				}} src={medium} alt="medium" width="300"/>
+				<img onClick={() => {
+					handleRequest({
+						difficulty: 'Difficile',
+						tip: 1,
+						attempts: 5,
+						color: true
+					})
+				}} src={hard} alt="hard" width="300"/>
+				<img onClick={() => {
+					handleRequest({
+						difficulty: 'Impossible',
+						tip: 1,
+						attempts: 3,
+						color: false
+					})
+				}} src={impossible} alt="impossible" width="300"/>
+			</div>
+			<button className="play-button">Jouer</button>
+		</div>
+	)
+}
diff --git a/src/home/Motus.tsx b/src/home/Motus.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react'
-import './Motus.css'
+import './styles/Motus.css'
+import './styles/styles.css'
 import DictionaryRuleProcessor from '../components/DictionaryRuleProcessor'
 import WordHistory from '../components/WordHistory'
 import InputAnswer from '../components/InputAnswer'
 import DifficultyRules from '../components/DifficultyRules'
 import { Link } from 'react-router-dom'
+import HealthTry from '../components/HealthTry'
 
 export default function Motus () {
 	// affichage (render)
@@ -27,18 +29,21 @@ export default function Motus () {
 				</div>
 			</div>
 			<div className="column-middle">
-				<InputAnswer
-					answer={answer}
-					setHistoryInput={setHistoryInput}
-					historyInput={historyInput}
-					inputValue={inputValue}
-					setInputValue={setInputValue}
-				/>
-				<WordHistory
-					answer={answer}
-					historyInput={historyInput}
-					inputValue={inputValue}
-				/>
+				<HealthTry></HealthTry>
+				<div className="history">
+					<InputAnswer
+						answer={answer}
+						setHistoryInput={setHistoryInput}
+						historyInput={historyInput}
+						inputValue={inputValue}
+						setInputValue={setInputValue}
+					/>
+					<WordHistory
+						answer={answer}
+						historyInput={historyInput}
+						inputValue={inputValue}
+					/>
+				</div>
 				<div className="retry">
 					<Link to='/' className='button-style'>Page d&rsquo;accueil</Link>
 					<button onClick={reloadPage} className="button-style">Recommencer</button>

diff --git a/src/home/styles/App.css b/src/home/styles/App.css
@@ -0,0 +1,16 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100%;
+}
+
+.input {
+    background-image: url('../../resources/images/retry-bg.png');
+    border-radius: 20px;
+    border: 3px solid #30363d;
+    height: 80px;
+    width: 90%;
+}
diff --git a/src/home/App.css → src/home/styles/Difficulty.css b/src/home/App.css → src/home/styles/Difficulty.css
@@ -1,13 +1,3 @@
-:root {
-    --init-background-color: #4AA3A2;
-    --text-color: aquamarine;
-}
-
-body.dark {
-    --init-background-color: #12769E;
-    --text-color: #FCF6F3;
-}
-
 * {
     margin: 0;
     padding: 0;
@@ -38,12 +28,6 @@ h1 {
     color: #333;
 }
 
-p {
-    font-size: 1.2rem;
-    /*margin-bottom: 30px;*/
-    color: #666;
-}
-
 .play-button {
     padding: 15px 30px;
     font-size: 1.2rem;