Convert sleeves to react, fix shock recovery bug

This commit is contained in:
Olivier Gagnon
2021-09-09 21:38:05 -04:00
parent b0fcdb8363
commit d5c9306395
12 changed files with 672 additions and 901 deletions
+16 -12
View File
@@ -2,7 +2,11 @@ import { Sleeve } from "../Sleeve";
import { numeralWrapper } from "../../../ui/numeralFormat";
import * as React from "react";
export function StatsElement(sleeve: Sleeve): React.ReactElement {
interface IProps {
sleeve: Sleeve;
}
export function StatsElement(props: IProps): React.ReactElement {
let style = {};
style = { textAlign: "right" };
return (
@@ -12,65 +16,65 @@ export function StatsElement(sleeve: Sleeve): React.ReactElement {
<tr>
<td className="character-hp-cell">HP: </td>
<td className="character-hp-cell" style={style}>
{numeralWrapper.formatHp(sleeve.hp)} / {numeralWrapper.formatHp(sleeve.max_hp)}
{numeralWrapper.formatHp(props.sleeve.hp)} / {numeralWrapper.formatHp(props.sleeve.max_hp)}
</td>
</tr>
<tr>
<td>City: </td>
<td style={style}>{sleeve.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(sleeve.hacking_skill)}
{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(sleeve.strength)}
{numeralWrapper.formatSkill(props.sleeve.strength)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Defense: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(sleeve.defense)}
{numeralWrapper.formatSkill(props.sleeve.defense)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Dexterity: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(sleeve.dexterity)}
{numeralWrapper.formatSkill(props.sleeve.dexterity)}
</td>
</tr>
<tr>
<td className="character-combat-cell">Agility: </td>
<td className="character-combat-cell" style={style}>
{numeralWrapper.formatSkill(sleeve.agility)}
{numeralWrapper.formatSkill(props.sleeve.agility)}
</td>
</tr>
<tr>
<td className="character-cha-cell">Charisma: </td>
<td className="character-cha-cell" style={style}>
{numeralWrapper.formatSkill(sleeve.charisma)}
{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 - sleeve.shock)}
{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(sleeve.sync)}
{numeralWrapper.formatSleeveSynchro(props.sleeve.sync)}
</td>
</tr>
<tr>
<td className="character-int-cell">Memory: </td>
<td className="character-int-cell" style={style}>
{numeralWrapper.formatSleeveMemory(sleeve.memory)}
{numeralWrapper.formatSleeveMemory(props.sleeve.memory)}
</td>
</tr>
</tbody>