Merge pull request #47 from ucsb-cs156-s23/max-commons_ui

Redesign play page UI
ucsb-cs156-s23 · Jun 8, 2023 · 109ca7b · 109ca7b
2 parents 41aa65b + f485acc
commit 109ca7b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 49 deletions.
diff --git a/frontend/src/main/components/Commons/FarmStats.js b/frontend/src/main/components/Commons/FarmStats.js
@@ -1,26 +1,20 @@
 import React from "react";
 import { Card } from "react-bootstrap";
-import Health from "./../../../assets/Health.png";
-import Cash from "./../../../assets/Cash.png";
+import { ProgressBar } from "react-bootstrap";
 
 const FarmStats = ({userCommons}) => {
     return (
         <Card>
         <Card.Header as="h5">Your Farm Stats</Card.Header>
         <Card.Body>
             {/* update total wealth and cow health with data from fixture */}
-            <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>
-            <Card.Text>
-                Cow Health: {Math.round(userCommons.cowHealth*100)/100}%
-            </Card.Text>
+            <Card.Title className="text-center">
+                💰 Total Wealth: ${userCommons.totalWealth.toFixed(2)}
+            </Card.Title>
+            <Card.Title className="text-center">
+                ❤️ Cow Health: {Math.round(userCommons.cowHealth*100)/100}%
+            </Card.Title>
+            <ProgressBar now={userCommons.cowHealth} min={0} max={100} variant="danger" />
         </Card.Body>
         </Card>
     ); 

diff --git a/frontend/src/main/components/Commons/ManageCows.js b/frontend/src/main/components/Commons/ManageCows.js
@@ -1,6 +1,5 @@
 import React from "react";
 import { Card, Button, Row, Col } from "react-bootstrap";
-import cowHead from "./../../../assets/CowHead.png"; 
 
 // add parameters 
 const ManageCows = ({userCommons,commons, onBuy, onSell}) =>  {
@@ -10,24 +9,18 @@ const ManageCows = ({userCommons,commons, onBuy, onSell}) =>  {
         <Card.Header as="h5">Manage Cows</Card.Header>
         <Card.Body>
             {/* change $10 to info from fixture */}
-            <Card.Title>Market Cow Price: ${commons?.cowPrice}</Card.Title>
-            <Card.Title>Number of Cows: {userCommons.numOfCows}</Card.Title>
-            <Card.Title>Current Milk Price: ${commons?.milkPrice}</Card.Title>
-                <Row>
-                    <Col>
-                        <Card.Text>
-                            <img alt="Cow Icon" className="icon" src={cowHead}></img>
-                        </Card.Text>
-                    </Col>
-                    <Col>
-                        <Button variant="outline-danger" onClick={()=>{onBuy(userCommons)}} data-testid={"buy-cow-button"}>Buy cow</Button>
-                        <br/>
-                        <br/>
-                        <Button variant="outline-danger" onClick={()=>{onSell(userCommons)}} data-testid={"sell-cow-button"}>Sell cow</Button>
-                        <br/>
-                        <br/>
-                    </Col>
-                </Row>
+            <Card.Title className="text-center">💵 Market Cow Price: ${commons?.cowPrice}</Card.Title>
+            <Card.Title className="text-center">🐮 Number of Cows: {userCommons.numOfCows}</Card.Title>
+            <Card.Title className="text-center">🥛 Current Milk Price: ${commons?.milkPrice}</Card.Title>
+            <Row>
+                <Col className="text-center">
+                    <Button variant="outline-success" onClick={()=>{onBuy(userCommons)}} data-testid={"buy-cow-button"}>Buy cow</Button>
+                </Col>
+                <Col className="text-center">
+                    <Button variant="outline-danger" onClick={()=>{onSell(userCommons)}} data-testid={"sell-cow-button"}>Sell cow</Button>
+                </Col>
+            </Row>
+
                     Note: Buying cows buys at current cow price, but selling cows sells at current cow price
                     times the average health of cows as a percentage! 
         </Card.Body>

diff --git a/frontend/src/main/components/Commons/Profits.js b/frontend/src/main/components/Commons/Profits.js
@@ -14,6 +14,7 @@ const Profits = ({ profits }) => {
         })) : 
         // Stryker disable next-line ArrayDeclaration : no need to test what happens if [] is replaced with ["Stryker was here"]
         [];
+        profitsForTable.reverse();
     return (
         <Card>
             <Card.Header as="h5">

diff --git a/frontend/src/main/components/Commons/ProfitsTable.js b/frontend/src/main/components/Commons/ProfitsTable.js
@@ -7,19 +7,19 @@ export default function ProfitsTable({ profits }) {
     const memoizedColumns = React.useMemo(() => 
         [
             {
-                Header: "Amount",
+                Header: "Profit",
                 accessor: (row) => `$${row.amount.toFixed(2)}`,
             },
             {
                 Header: "Date",
                 accessor: "date",
             },
             {
-                Header: "CowHealth",
-                accessor: "avgCowHealth",
+                Header: "Health",
+                accessor: (row) => `${row.avgCowHealth + '%'}`
             },
             {
-                Header: "NumCows",
+                Header: "Cows",
                 accessor: "numCows",
             },
         ], 

diff --git a/frontend/src/tests/components/Commons/Profits.test.js b/frontend/src/tests/components/Commons/Profits.test.js
@@ -15,7 +15,7 @@ describe("Profits tests", () => {
             <Profits userCommons={userCommonsFixtures.oneUserCommons[0]}  />
         );
         await waitFor(()=>{
-            expect(screen.getByTestId("ProfitsTable-header-Amount") ).toBeInTheDocument();
+            expect(screen.getByTestId("ProfitsTable-header-Profit") ).toBeInTheDocument();
         });
     });
 
@@ -24,18 +24,18 @@ describe("Profits tests", () => {
             <Profits userCommons={userCommonsFixtures.oneUserCommons[0]} profits={profitsFixtures.threeProfits} />
         );
 
-        expect(await screen.findByTestId("ProfitsTable-cell-row-0-col-Amount")).toBeInTheDocument();
-        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-Amount")).toHaveTextContent(/58.20/);
-        expect(screen.getByTestId("ProfitsTable-cell-row-1-col-Amount")).toHaveTextContent(/54.60/);
-        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-Amount")).toHaveTextContent(/52.80/);
+        expect(await screen.findByTestId("ProfitsTable-cell-row-0-col-Profit")).toBeInTheDocument();
+        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-Profit")).toHaveTextContent(/52.80/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-1-col-Profit")).toHaveTextContent(/54.60/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-Profit")).toHaveTextContent(/58.20/);
 
-        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-date")).toHaveTextContent(/2023-05-15/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-date")).toHaveTextContent(/2023-05-17/);
         expect(screen.getByTestId("ProfitsTable-cell-row-1-col-date")).toHaveTextContent(/2023-05-16/);
-        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-date")).toHaveTextContent(/2023-05-17/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-date")).toHaveTextContent(/2023-05-15/);
 
-        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-avgCowHealth")).toHaveTextContent(/97/);
-        expect(screen.getByTestId("ProfitsTable-cell-row-1-col-avgCowHealth")).toHaveTextContent(/91/);
-        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-avgCowHealth")).toHaveTextContent(/88/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-0-col-Health")).toHaveTextContent(/88%/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-1-col-Health")).toHaveTextContent(/91%/);
+        expect(screen.getByTestId("ProfitsTable-cell-row-2-col-Health")).toHaveTextContent(/97%/);
 
         expect(screen.getByTestId("ProfitsTable-cell-row-0-col-numCows")).toHaveTextContent(/6/);
         expect(screen.getByTestId("ProfitsTable-cell-row-1-col-numCows")).toHaveTextContent(/6/);

diff --git a/frontend/src/tests/components/Commons/ProfitsTable.test.js b/frontend/src/tests/components/Commons/ProfitsTable.test.js
@@ -14,10 +14,10 @@ describe("ProfitsTable tests", () => {
             <ProfitsTable profits={profitsFixtures.threeProfits} />
         );
         await waitFor(()=>{
-            expect(screen.getByTestId("ProfitsTable-header-Amount") ).toBeInTheDocument();
+            expect(screen.getByTestId("ProfitsTable-header-Profit") ).toBeInTheDocument();
         });
 
-        const expectedHeaders = [ "Amount", "Date", "CowHealth", "NumCows"];
+        const expectedHeaders = [ "Profit", "Date", "Health", "Cows"];
 
         expectedHeaders.forEach((headerText) => {
           const header = screen.getByText(headerText);