gruman-elo
v1.0.4
Published
Elo rankings
Downloads
289
Maintainers
Readme
Gruman Elo
Get Elo rankings for your chess, backgammon, or other strategy games. Visit NPM for more info.
Install
yarn add gruman-elo
or
npm install gruman-elo
Usage
// Import necessary modules from React, including useState for managing state and useEffect for side effects
import React, { useState, useEffect } from 'react';
// Import the Elo rating calculation function from the 'gruman-elo' package
import getElo from 'gruman-elo';
// Define the App component
const App: React.FC = () => {
// State to track the initial Elo rating of the winner, starting at 1500
const [winnerElo, setWinnerElo] = useState<number>(1500);
// State to track the initial Elo rating of the loser, also starting at 1500
const [loserElo, setLoserElo] = useState<number>(1500);
// State to track the match length, defaulting to 1
const [matchLength, setMatchLength] = useState<number>(1);
// State to hold the calculated Elo ratings for both winner and loser
const [elo, setElo] = useState<{ winner: number; loser: number }>({
winner: 1500,
loser: 1500
});
// useEffect hook to calculate and update the Elo ratings whenever
// winnerElo, loserElo, or matchLength change
useEffect(() => {
const elo = getElo(winnerElo, loserElo, matchLength); // Call the Elo calculation function
setElo({ winner: elo.winner, loser: elo.loser }); // Update state with new Elo ratings
}, [winnerElo, loserElo, matchLength]); // Dependencies: recalculate on change
// Render the form with input fields for winnerElo, loserElo, and matchLength
// Display the updated Elo ratings for both winner and loser
return (
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', flexDirection: 'column'}}>
{/* Input for Winner Elo */}
<label>Winner Elo:</label>
<input
type="number"
value={winnerElo}
onChange={e => setWinnerElo(parseInt(e.target.value))}
min={1}
style={{marginBottom: '1rem'}}
/>
{/* Input for Loser Elo */}
<label>Loser Elo:</label>
<input
type="number"
value={loserElo}
onChange={e => setLoserElo(parseInt(e.target.value))}
min={1}
style={{marginBottom: '1rem'}}
/>
{/* Input for Match Length */}
<label>Match Length:</label>
<input
type="number"
value={matchLength}
onChange={e => setMatchLength(parseInt(e.target.value))}
min={1}
style={{marginBottom: '1rem'}}
/>
{/* Display the calculated Elo ratings */}
<ul>
<li>Winner: {elo.winner}</li>
<li>Loser: {elo.loser}</li>
</ul>
</div>
);
};
// Export the App component as the default export
export default App;