Football Game - Copy this React, Tailwind Component to your project

import { observer } from 'mobx-react-lite'; import React, { useState } from 'react'; import { GameViewModel } from '../viewmodels/GameViewModel'; import './GameView.css'; interface GameTemplateProps { viewModel: GameViewModel; } const GameTemplate: React.FC<GameTemplateProps> = observer(({ viewModel }) => { const [playerName, setPlayerName] = useState(''); const [playerNumber, setPlayerNumber] = useState(''); const handleAddPlayer = (e: React.FormEvent) => { e.preventDefault(); if (playerName && playerNumber) { viewModel.initializePlayers([{ name: playerName, number: parseInt(playerNumber) }]); setPlayerName(''); setPlayerNumber(''); } }; return ( <div className="game-container"> <div className="player-form"> <h2>Thêm cầu thủ</h2> <form onSubmit={handleAddPlayer}> <input type="text" className="text-gray-900" value={playerName} onChange={(e) => setPlayerName(e.target.value)} placeholder="Tên cầu thủ" /> <input type="number" className="text-gray-900" value={playerNumber} onChange={(e) => setPlayerNumber(e.target.value)} placeholder="Số áo" /> <button type="submit">Thêm</button> </form> </div> <div className="players-list"> <h2>Danh sách cầu thủ</h2> {viewModel.players.map(player => ( <div key={player.id} className="player-card"> <h3>{player.name} - #{player.number}</h3> <p>Chỉ số phòng thủ: {player.defenseRating}</p> <p>Kỹ năng:</p> <ul> {player.skills.map(skill => ( <li key={skill.name}>{skill.name} (Độ khó: {skill.difficulty})</li> ))} </ul> </div> ))} </div> <div className="game-controls"> <button onClick={() => viewModel.startNewRound()} disabled={viewModel.currentRound >= 10} > Bắt đầu lượt mới </button> </div> <div className="top-players"> <h2>Top 3 cầu thủ</h2> {viewModel.getTopPlayers().map((player, index) => ( <div key={player.id} className={`top-player rank-${index + 1}`}> <h3>{player.name}</h3> <p>Điểm: {viewModel.calculateScore(player)}</p> </div> ))} </div> </div> ); }); export default GameTemplate;