875e9c8795
Refs #17 Adds a 'Rematch' button to the game completion modal. Introduces a 'handleRematch' function in 'App.jsx' to create a new game with the same players and settings as the previous game. The 'onRematch' handler is passed down to the 'GameCompletionModal' component. Adds '.gitea' to '.gitignore' to prevent tracking local issue context.
53 lines
2.5 KiB
JavaScript
53 lines
2.5 KiB
JavaScript
import { h } from 'preact';
|
||
import modalStyles from './Modal.module.css';
|
||
import styles from './GameCompletionModal.module.css';
|
||
|
||
/**
|
||
* Modal shown when a game is completed.
|
||
* @param {object} props
|
||
* @param {boolean} props.open
|
||
* @param {object} props.game
|
||
* @param {Function} props.onConfirm
|
||
* @param {Function} props.onClose
|
||
* @param {Function} props.onRematch
|
||
* @returns {import('preact').VNode|null}
|
||
*/
|
||
const GameCompletionModal = ({ open, game, onConfirm, onClose, onRematch }) => {
|
||
if (!open || !game) return null;
|
||
const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
|
||
const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
|
||
const maxScore = Math.max(...scores);
|
||
// Find all winners (could be a tie)
|
||
const winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
|
||
const winnerText = winners.length > 1
|
||
? `Unentschieden zwischen ${winners.join(' und ')}`
|
||
: `${winners[0]} hat gewonnen!`;
|
||
return (
|
||
<div id="game-completion-modal" className={modalStyles['modal'] + ' ' + modalStyles['show']} role="dialog" aria-modal="true" aria-labelledby="completion-modal-title">
|
||
<div className={modalStyles['modal-content']}>
|
||
<div className={modalStyles['modal-header']}>
|
||
<span className={modalStyles['modal-title']} id="completion-modal-title">Spiel beendet</span>
|
||
<button className={modalStyles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
|
||
</div>
|
||
<div className={modalStyles['modal-body']}>
|
||
<div className={styles['final-scores']}>
|
||
{playerNames.map((name, idx) => (
|
||
<div className={styles['final-score']} key={name + idx}>
|
||
<span className={styles['player-name']}>{name}</span>
|
||
<span className={styles['score']}>{scores[idx]}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className={styles['winner-announcement']}><h3>{winnerText}</h3></div>
|
||
</div>
|
||
<div className={modalStyles['modal-footer']}>
|
||
<button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm} aria-label="Bestätigen">Bestätigen</button>
|
||
<button className={styles['btn'] + ' ' + styles['btn--primary']} onClick={onRematch} aria-label="Rematch">Rematch</button>
|
||
<button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default GameCompletionModal;
|