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 | 3x 28x 28x | import React from "react";
import { Card } from "react-bootstrap";
import Health from "./../../../assets/Health.png";
import Cash from "./../../../assets/Cash.png";
const FarmStats = ({ userCommons }) => {
const cowHealthPercent = Math.round(userCommons.cowHealth * 100 / 100);
return (
<Card>
<Card.Header as="h5">Your Farm Stats</Card.Header>
<Card.Body>
<Card.Text>
<img className="icon" src={Cash} alt="Cash"></img>
</Card.Text>
<Card.Text>
Total wealth: ${userCommons.totalWealth}
</Card.Text>
<Card.Text>
<img className="icon" src={Health} alt="Health"></img>
</Card.Text>
<div style={
// Stryker disable all
{
width: "100%",
padding: "4px",
background: "rgb(191, 191, 191)",
borderRadius: "50px",
textAlign: "center",
color: "white",
fontWeight: "bold",
height: "34px",
}
// Stryker enable all
}>
Cow health: {cowHealthPercent}%
<div style={
// Stryker disable all
{
background: "rgb(191, 60, 60)",
width: `${cowHealthPercent}%`,
transition: "width 0.5s linear",
borderRadius: "50px",
verticalAlign: "center",
height: "100%",
marginTop: "-24px",
}
// Stryker enable all
} />
</div>
</Card.Body>
</Card >
);
};
export default FarmStats;
|