54 lines
2.3 KiB
JavaScript
54 lines
2.3 KiB
JavaScript
import {useEffect, useState} from "react";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";
|
|
import {usePubAffDispatch} from "../../../hooks/useExternalWindow.jsx";
|
|
import {useTranslation} from "react-i18next";
|
|
|
|
export function PointPanel({menuActions}) {
|
|
const [revers, setRevers] = useState(false)
|
|
const [scoreRouge, setScoreRouge] = useState(0)
|
|
const [scoreBleu, setScoreBleu] = useState(0)
|
|
const publicAffDispatch = usePubAffDispatch()
|
|
const {t} = useTranslation("cm");
|
|
|
|
menuActions.current.switchSore = () => {
|
|
setRevers(!revers)
|
|
}
|
|
|
|
const handleSave = () => {
|
|
menuActions.current.saveScore?.(scoreRouge, scoreBleu)
|
|
handleReset();
|
|
}
|
|
|
|
const handleReset = () => {
|
|
setScoreRouge(0);
|
|
setScoreBleu(0);
|
|
}
|
|
|
|
useEffect(() => {
|
|
publicAffDispatch({type: 'SET_DATA', payload: {scoreRouge: scoreRouge, scoreBleu: scoreBleu}})
|
|
}, [scoreRouge, scoreBleu])
|
|
|
|
const red =
|
|
<div className="col-5 row align-items-center" style={{padding: "0 1em"}}>
|
|
<button className="btn btn-secondary" onClick={() => setScoreRouge(scoreRouge + 1)}><FontAwesomeIcon icon={faChevronUp}/></button>
|
|
<h1 style={{color: "red", fontSize: "min(15vw, 7em)", textAlign: "center"}}>{scoreRouge}</h1>
|
|
<button className="btn btn-secondary" onClick={() => setScoreRouge(scoreRouge - 1)}><FontAwesomeIcon icon={faChevronDown}/></button>
|
|
</div>
|
|
|
|
return <div className="row">
|
|
{!revers && red}
|
|
<div className="col-5 row align-items-center" style={{padding: "0 1em"}}>
|
|
<button className="btn btn-secondary" onClick={() => setScoreBleu(scoreBleu + 1)}><FontAwesomeIcon icon={faChevronUp}/></button>
|
|
<h1 style={{color: "blue", fontSize: "min(15vw, 7em)", textAlign: "center"}}>{scoreBleu}</h1>
|
|
<button className="btn btn-secondary" onClick={() => setScoreBleu(scoreBleu - 1)}><FontAwesomeIcon icon={faChevronDown}/></button>
|
|
</div>
|
|
{revers && red}
|
|
|
|
<div className="col row align-items-center">
|
|
<button className="btn btn-danger" onClick={handleReset}>{t('réinitialiser')}</button>
|
|
<button className="btn btn-success" onClick={handleSave}>{t('sauvegarder')}</button>
|
|
</div>
|
|
</div>
|
|
}
|