Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | /**
* @module Client.Game
* Game Engine
* @preferred
*/
import { CharacterFrontend } from '@models';
import * as React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { IStateFrontend } from '../reducers';
export interface CharactersListProps {
characters: Record<string, CharacterFrontend>;
loaded: boolean;
loading: boolean;
error?: string;
}
export class CharactersListComponent extends React.Component<CharactersListProps> {
public render() {
const { loaded, loading, characters, error } = this.props;
if (loading) {
return <i className="fas fa-spinner">Loading...</i>;
}
if (error) {
return <div className="alert alert-danger" role="alert">{error}</div>;
}
if (!loaded) {
return <div>Vous n'êtes pas connecté</div>;
}
return (
<div>
<table>
<thead>
<tr>
<th colSpan={2}>Nom</th>
<th>PV</th>
<th>Mvt</th>
<th>PA</th>
<th>Force</th>
<th>Dext.</th>
<th>Magie</th>
<th>Vue</th>
<th>PI/XP</th>
<th>Endurance</th>
</tr>
</thead>
<tbody>
{Object.keys(characters).map(mat => {
return this.renderLine(characters[mat]);
})}
</tbody>
</table>
</div>
);
}
private renderLine(character: CharacterFrontend) {
return (
<tr key={character.mat}>
<td />
<td><Link to={`/game/${character.mat}`}>{character.name} ({character.mat})</Link></td>
<td>{character.currentHp}/{character.xp}</td>
<td>{character.currentSpeed}/{character.speed}</td>
<td>{character.currentAgility}/{character.agility}</td>
<td>{character.currentStrength}/{character.strength}</td>
<td>{character.currentDexterity}/{character.dexterity}</td>
<td>{character.currentMagic}/{character.magic}</td>
<td>{character.currentInsight}/{character.insight}</td>
<td>{character.ep}/{character.xp}</td>
<td>endu</td>
</tr>
);
}
}
const mapStateToProps = (state: IStateFrontend) => ({
characters: state.characters,
loaded: state.loaded,
loading: state.loading,
error: state.error,
});
export const CharactersList = connect(mapStateToProps)(CharactersListComponent);
|