2021-03-16 04:40:28 +01:00
|
|
|
import { Sleeve } from "../Sleeve";
|
|
|
|
import { numeralWrapper } from "../../../ui/numeralFormat";
|
|
|
|
import * as React from "react";
|
2021-09-25 05:02:27 +02:00
|
|
|
import { convertTimeMsToTimeElapsedString } from "../../../../utils/StringHelperFunctions";
|
|
|
|
import { CONSTANTS } from "../../../Constants";
|
2021-03-16 04:40:28 +01:00
|
|
|
|
2021-09-10 03:38:05 +02:00
|
|
|
interface IProps {
|
|
|
|
sleeve: Sleeve;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function StatsElement(props: IProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
let style = {};
|
|
|
|
style = { textAlign: "right" };
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td className="character-hp-cell">HP: </td>
|
|
|
|
<td className="character-hp-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatHp(props.sleeve.hp)} / {numeralWrapper.formatHp(props.sleeve.max_hp)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>City: </td>
|
2021-09-10 03:38:05 +02:00
|
|
|
<td style={style}>{props.sleeve.city}</td>
|
2021-09-05 01:09:30 +02:00
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-hack-cell">Hacking: </td>
|
|
|
|
<td className="character-hack-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.hacking_skill)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-combat-cell">Strength: </td>
|
|
|
|
<td className="character-combat-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.strength)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-combat-cell">Defense: </td>
|
|
|
|
<td className="character-combat-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.defense)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-combat-cell">Dexterity: </td>
|
|
|
|
<td className="character-combat-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.dexterity)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-combat-cell">Agility: </td>
|
|
|
|
<td className="character-combat-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.agility)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-cha-cell">Charisma: </td>
|
|
|
|
<td className="character-cha-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSkill(props.sleeve.charisma)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-int-cell">Shock: </td>
|
|
|
|
<td className="character-int-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSleeveShock(100 - props.sleeve.shock)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-int-cell">Sync: </td>
|
|
|
|
<td className="character-int-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSleeveSynchro(props.sleeve.sync)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td className="character-int-cell">Memory: </td>
|
|
|
|
<td className="character-int-cell" style={style}>
|
2021-09-10 03:38:05 +02:00
|
|
|
{numeralWrapper.formatSleeveMemory(props.sleeve.memory)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
2021-09-25 05:02:27 +02:00
|
|
|
{props.sleeve.storedCycles > 15 && (
|
|
|
|
<tr>
|
|
|
|
<td>Bonus time: </td>
|
|
|
|
<td style={style}>
|
|
|
|
{convertTimeMsToTimeElapsedString((props.sleeve.storedCycles / (1000 / CONSTANTS._idleSpeed)) * 1000)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</>
|
|
|
|
);
|
2021-03-16 04:40:28 +01:00
|
|
|
}
|