mirror of
https://github.com/originalmk/skrytka-app.git
synced 2025-04-18 07:28:05 +00:00
91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { endScore } from './QuizGame';
|
|
import { SecondSeconds } from './Timer';
|
|
import { SecondMinutes } from './Timer';
|
|
import { TruckId } from './Truck';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Conffetti from './Conffetti';
|
|
|
|
import { CircularProgressbar , buildStyles } from 'react-circular-progressbar' ;
|
|
import 'react-circular-progressbar/dist/styles.css';
|
|
|
|
const Result = () => {
|
|
|
|
|
|
|
|
fetch('/quiz-results', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore})
|
|
});
|
|
|
|
const navigate = useNavigate();
|
|
// UpdateTrackScore();
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="container">
|
|
|
|
|
|
|
|
<h1 className='endH1'>Koniec</h1>
|
|
<h2 className='scoreYouWin'>W quizie uzyskałeś/aś: </h2>
|
|
<div style = {{width: 180, height: 180}}>
|
|
<CircularProgressbar
|
|
value={endScore * 10}
|
|
text={`${endScore * 10}%`}
|
|
styles = { buildStyles ( {
|
|
|
|
pathColor : `#d42436` ,
|
|
textColor : 'black' ,
|
|
trailColor : '#c6c4c4' ,
|
|
backgroundColor : '#d42436' ,
|
|
} ) } />;
|
|
</div>
|
|
|
|
<h3 className='textDependsEndScore'>{{endScore}/10 < 9 ? "Jesteś szybki.. ale pożar jest szybszy" : "Brawo udało ci się ugasić pożar !!!"}</h3>
|
|
|
|
|
|
<button id = "resultButton" className='NextQuestionButton' onClick = {() => {
|
|
endScore = 0;
|
|
navigate(-1)
|
|
}}>Zagraj jeszcze raz</button>
|
|
<button id = "resultButton1" className='NextQuestionButton'onClick={() => {
|
|
endScore = 0;
|
|
navigate('/');
|
|
}}>Wróć do strony głównej</button>
|
|
|
|
<h2 id='h2TimeResultPage'>Twój czas wyniósł:
|
|
<i id = 'hourglass' className="fa-regular fa-hourglass"></i>
|
|
{SecondMinutes}:{SecondSeconds < 10 ? `0${SecondSeconds}` : SecondSeconds} </h2>
|
|
|
|
|
|
<h2 id='h2ScoreResult'>Łącznie udało ci się zdobyć: {endScore}/10 pkt</h2>
|
|
|
|
|
|
<h4 className='textEndScreenShare'>Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi</h4>
|
|
|
|
<div id = 'resultMedia'>
|
|
|
|
<i className="fa-brands fa-facebook"></i>
|
|
<i className="fa-brands fa-instagram"></i>
|
|
<i className="fa-brands fa-youtube"></i>
|
|
</div>
|
|
|
|
<Conffetti/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
export default Result; |