From abf238b1fb2b24e53c9ce7608e77e87f2aacbdc7 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Mon, 28 Mar 2022 00:28:09 -0500
Subject: [PATCH] Created untested GameInfoCard.

With required data structures and functions.
---
 client/src/components/GameInfoCard.js | 36 +++++++++++++++++++++++++++
 client/src/models/Match.js            | 10 ++++++++
 client/src/models/User.js             |  8 ++++++
 client/src/pages/Welcome.js           | 11 +++++++-
 client/src/styles/extra.css           |  4 +--
 client/src/utils/strings.js           | 22 ++++++++++++++++
 6 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/GameInfoCard.js
 create mode 100644 client/src/models/Match.js
 create mode 100644 client/src/models/User.js
 create mode 100644 client/src/utils/strings.js

diff --git a/client/src/components/GameInfoCard.js b/client/src/components/GameInfoCard.js
new file mode 100644
index 0000000..99dccf2
--- /dev/null
+++ b/client/src/components/GameInfoCard.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, Card } from "react-bootstrap";
+import propTypes from "prop-types";
+import { grammaticalListString } from "../utils/strings";
+export default class GameInfoCard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    getParticipants() {
+        let participants = [];
+        this.props.match.registeredUsers.array.forEach(user => {
+            participants.push(user.firstName);
+        });
+        return participants;
+    }
+
+    render() {
+        return (
+            <Card style={{ width: "20rem" }}>
+                <Card.Body>
+                    <Card.Title>{this.props.match.sport}</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
+                    <Card.Text>
+                        Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
+                    </Card.Text>
+                    <Button variant="primary">Join!</Button>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+GameInfoCard.propTypes = {
+    match: propTypes.object,
+};
\ No newline at end of file
diff --git a/client/src/models/Match.js b/client/src/models/Match.js
new file mode 100644
index 0000000..fa4f603
--- /dev/null
+++ b/client/src/models/Match.js
@@ -0,0 +1,10 @@
+export default class Match {
+    minUsers;
+    MaxUsers;
+    registeredUsers;
+    dateTime;
+    duration;
+    sport;
+    difficulty;
+    title;
+}
\ No newline at end of file
diff --git a/client/src/models/User.js b/client/src/models/User.js
new file mode 100644
index 0000000..c3c8ff4
--- /dev/null
+++ b/client/src/models/User.js
@@ -0,0 +1,8 @@
+export default class User {
+    firstName;
+    lastName;
+    email;
+    age;
+    biography;
+    id;
+}
\ No newline at end of file
diff --git a/client/src/pages/Welcome.js b/client/src/pages/Welcome.js
index dfe3d07..4e8123a 100644
--- a/client/src/pages/Welcome.js
+++ b/client/src/pages/Welcome.js
@@ -8,10 +8,19 @@ export default class Welcome extends React.Component {
     render() {
         return (
             <div className="page-root">
-                <div id="welcome-jumbotron" className="jumbotron" >
+                <div className="jumbotron" >
                     <h1>Sports Matcher</h1>
                     <p>The best place to find a local match for a good game of your favourite sport!</p>
                 </div>
+                <div className="text-center p-3 mt-2">
+                    <h2>Why?</h2>
+                    <p>Because you want to play the sports you love while meeting new friends and foes!</p>
+                    {/* TODO: All this text should be expanded on. */}
+                </div>
+                <hr />
+                <div className="p-4">
+                    <h2>Available Matches</h2>
+                </div>
             </div>
         );
     }
diff --git a/client/src/styles/extra.css b/client/src/styles/extra.css
index dd5e9ba..f9eb2ad 100644
--- a/client/src/styles/extra.css
+++ b/client/src/styles/extra.css
@@ -2,8 +2,8 @@
   width: 100%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
-  padding-top: 10rem;
-  padding-bottom: 0.75rem;
+  padding-top: 12rem;
+  padding-bottom: 1rem;
   text-align: center;
   background-size: cover;
   background-color: black;
diff --git a/client/src/utils/strings.js b/client/src/utils/strings.js
new file mode 100644
index 0000000..14f18e1
--- /dev/null
+++ b/client/src/utils/strings.js
@@ -0,0 +1,22 @@
+export function grammaticalListString(items, max) {
+    if (!items) return null;
+    if (max < 1) return "";
+    let built = "";
+
+    let index = 0;
+    items.forEach(item => {
+        if (index > max) {
+            built += "and " + items.length + " more ";
+            return;
+        }
+        built += item;
+        built += ", ";
+        if (index == max - 1) {
+            built += "and ";
+        }
+
+        index += 1;
+    });
+
+    return built;
+}
\ No newline at end of file