generated from Arquisoft/wiq_0
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from Arquisoft/wiq
Game and styling
- Loading branch information
Showing
7 changed files
with
111 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { useState } from "react"; | ||
| import axios from "axios"; | ||
| import Question from "./Question"; | ||
|
|
||
| const Game = () => { | ||
| const [gameStarted, setGameStarted] = useState(false); | ||
|
|
||
| const startGame = () => { | ||
| setGameStarted(!gameStarted); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| {gameStarted ? ( | ||
| <Question /> | ||
| ) : ( | ||
| <div className="flex flex-col items-center justify-center mt-16"> | ||
| <h1 className="text-6xl font-bold text-zinc-700">Welcome to WIQ!</h1> | ||
| <button onClick={startGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full | ||
| transition-transform transform-gpu hover:scale-105"> | ||
| Play | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default Game; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import axios from "axios"; | ||
|
|
||
| const Question = () => { | ||
| const apiEndpoint = 'http://localhost:8000'; | ||
| const [question, setQuestion] = useState([]) | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| const fetchQuestion = async () => { | ||
| try { | ||
| const res = await axios.get(`${apiEndpoint}/flags/question`); | ||
| setQuestion(res.data); | ||
| setLoading(false); | ||
| } catch (error) { | ||
| console.error('Error fetching question:', error); | ||
| } | ||
| }; | ||
|
|
||
| const answerQuestion = async (answer) => { | ||
| try { | ||
| setLoading(true); | ||
| const result = await axios.get(`${apiEndpoint}/flags/answer`, {answer}); // to fix | ||
|
|
||
| const res = await axios.get(`${apiEndpoint}/flags/question`); | ||
| setQuestion(res.data); | ||
| setLoading(false); | ||
|
|
||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| fetchQuestion(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="bg-slate-50 shadow-lg rounded-md p-4 mx-auto max-w-2xl mt-16"> | ||
| { loading ? ( | ||
| <h1 className="font-bold text-2xl text-gray-800 pl-8">Loading...</h1> | ||
| ) : ( | ||
| <> | ||
| <h1 className="font-bold text-3xl text-gray-800 pl-8">{question.question}</h1> | ||
| <div className="grid grid-cols-2 mt-10 item"> | ||
| {question.flags.map( flag => ( | ||
| <div className="rounded-xl mx-8 my-8"> | ||
| <button className="transition-transform transform-gpu hover:scale-105"> | ||
| <img src={flag} alt='Loading flag...' className="rounded-lg max-h-50 object-contain shadow-md" | ||
| onClick={() => answerQuestion(flag)}></img> | ||
| </button> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default Question; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters