sleeves to mui

This commit is contained in:
Olivier Gagnon
2021-09-26 20:55:38 -04:00
parent 3289f76cd0
commit 14e6dd0158
23 changed files with 658 additions and 630 deletions
+22 -85
View File
@@ -1,94 +1,31 @@
import { Sleeve } from "../Sleeve";
import { numeralWrapper } from "../../../ui/numeralFormat";
import * as React from "react";
import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
import { CONSTANTS } from "../../../Constants";
import React from "react";
import { StatsTable } from "../../../ui/React/StatsTable";
interface IProps {
sleeve: Sleeve;
}
export function StatsElement(props: IProps): React.ReactElement {
let style = {};
style = { textAlign: "right" };
return (
<>
<table>
<tbody>
<tr>
<td className="character-hp-cell">HP: </td>
<td className="character-hp-cell" style={style}>
{numeralWrapper.formatHp(props.sleeve.hp)} / {numeralWrapper.formatHp(props.sleeve.max_hp)}
</td>
</tr>
<tr>
<td>City: </td>
<td style={style}>{props.sleeve.city}</td>
</tr>
<tr>
<td className="character-hack-cell">Hacking: </td>
<td className="character-hack-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.hacking_skill)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Strength: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.strength)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Defense: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.defense)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Dexterity: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.dexterity)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Agility: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.agility)}
</td>
</tr>
<tr>
<td className="character-cha-cell">Charisma: </td>
<td className="character-cha-cell" style={style}>
{numeralWrapper.formatSkill(props.sleeve.charisma)}
</td>
</tr>
<tr>
<td className="character-int-cell">Shock: </td>
<td className="character-int-cell" style={style}>
{numeralWrapper.formatSleeveShock(100 - props.sleeve.shock)}
</td>
</tr>
<tr>
<td className="character-int-cell">Sync: </td>
<td className="character-int-cell" style={style}>
{numeralWrapper.formatSleeveSynchro(props.sleeve.sync)}
</td>
</tr>
<tr>
<td className="character-int-cell">Memory: </td>
<td className="character-int-cell" style={style}>
{numeralWrapper.formatSleeveMemory(props.sleeve.memory)}
</td>
</tr>
{props.sleeve.storedCycles > 15 && (
<tr>
<td>Bonus time: </td>
<td style={style}>
{convertTimeMsToTimeElapsedString((props.sleeve.storedCycles / (1000 / CONSTANTS._idleSpeed)) * 1000)}
</td>
</tr>
)}
</tbody>
</table>
</>
);
const rows = [
[
"HP: ",
<>
{numeralWrapper.formatHp(props.sleeve.hp)} / {numeralWrapper.formatHp(props.sleeve.max_hp)}
</>,
],
["City: ", <>{props.sleeve.city}</>],
["Hacking: ", <>{numeralWrapper.formatSkill(props.sleeve.hacking_skill)}</>],
["Strength: ", <>{numeralWrapper.formatSkill(props.sleeve.strength)}</>],
["Defense: ", <>{numeralWrapper.formatSkill(props.sleeve.defense)}</>],
["Dexterity: ", <>{numeralWrapper.formatSkill(props.sleeve.dexterity)}</>],
["Agility: ", <>{numeralWrapper.formatSkill(props.sleeve.agility)}</>],
["Charisma: ", <>{numeralWrapper.formatSkill(props.sleeve.charisma)}</>],
["Shock: ", <>{numeralWrapper.formatSleeveShock(100 - props.sleeve.shock)}</>],
["Sync: ", <>{numeralWrapper.formatSleeveSynchro(props.sleeve.sync)}</>],
["Memory: ", <>{numeralWrapper.formatSleeveMemory(props.sleeve.memory)}</>],
];
return <StatsTable rows={rows} />;
}