Big things for the stock portfolio

frontend/src/js/components/button.js

@@ -1,12 +1,22 @@
 import React from 'react';
+import { Link} from "react-router-dom";
 
 function Button(props){
     return (
-        <button>
-            {console.log(props)}
-            {props.displayValue}
-        </button>
+        <Link 
+            to={props.link} 
+            disabled={props.disabled} 
+            className={`p-2 m-2 rounded-2xl text-center border-black bg-slate-600 font-bold border-2 text-white 
+                ${props.disabled ? 'pointer-events-none' : 'hover:font-bold hover:text-black hover:bg-slate-400 '}`}>
+                {props.displayValue}
+        </Link>
     );
 }
 
+Button.defaultProps = {
+    disabled: false,
+    link: "/",
+    displayValue: "Missing displayValue"
+}
+
 export default Button;

frontend/src/js/components/gameList.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ListGameCell from '../components/listGameCell';
+
+function GameList(props){    
+    return (
+        <div className="bg-gray-500 min-h-1/2 border-solid rounded-xl min-w-40 border-2 border-black w-1/3 p-4 m-4">
+            {props.games.map((game) => (
+                <ListGameCell
+                key={game.gameId}
+                data={game}
+                selectedGame={props.selected}
+                setGame={props.toggle}
+                />
+            ))}
+        </div>
+    )
+}
+
+export default GameList;

frontend/src/js/components/leaderboard.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 function Leaderboard(){
     return (
-        <div className="bg-gray-500 min-h-1/2 border-solid rounded-xl min-w-32 w-1/3 p-4 m-4">
+        <div className="bg-gray-500 min-h-1/2 border-solid rounded-xl border-2 border-black min-w-40 w-1/3 p-4 m-4">
 
         </div>
     );

frontend/src/js/components/listGameCell.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function ListGameCell(props){
+    const isSelected = props.selectedGame === props.data.gameId;
+
+    return (
+      <div
+        className={`w-full p-2 my-1 border-2 rounded-sm border-black ${
+          isSelected ? 'bg-blue-400' : 'bg-slate-200 hover:bg-slate-400'
+        }`}
+        onClick={() => isSelected ? props.setGame(null) :props.setGame(props.data.gameId)}
+      >
+        <p>Game ID: {props.data.gameId}</p>
+        <p>
+          {props.data.completed}/{props.data.gameSize}
+        </p>
+      </div>
+    );
+}
+
+export default ListGameCell;

frontend/src/js/pages/gameView.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import {useParams} from 'react-router-dom';
+import GameCard from '../components/gameCard';
+import Button from '../components/button';
 
 function GameView(){
     const {id} = useParams();
     return (
-        <h1>{id}</h1>
+        <div>
+            <h1>Game ID: {id}</h1>
+            <GameCard />
+            <div className="w-full flex flex-row-reverse">
+                <Button displayValue="Back" link="/"/>
+                <Button displayValue="BINGO" />
+            </div>
+        </div>
     );
 }
 

frontend/src/js/pages/home.js

@@ -1,10 +1,42 @@
-import React from 'react';
+import React, { useState} from 'react';
 import Leaderboard from '../components/leaderboard';
+import GameList from '../components/gameList';
+import Button from '../components/button';
+
 
 function Home(){
+    const [selectedGame, setSelectedGame] = useState(null);
+
+    const games = [
+        {
+        "gameId": 1,
+        "completed": 3,
+        "gameSize": 9,
+        },{
+        "gameId": 2,
+        "completed": 16,
+        "gameSize": 25,
+        },{
+        "gameId": 4,
+        "completed": 14,
+        "gameSize": 25,
+        },{
+        "gameId": 7,
+        "completed": 3,
+        "gameSize": 9,
+        }
+    ]
     return (
-        <div className="min-h-full h-full">
+        <div className="min-h-full h-full flex flex-row">
             <Leaderboard />
+            <GameList games={games} selected={selectedGame} toggle={setSelectedGame}/>
+            <div className="flex flex-col">
+                <Button displayValue="New Game" link="/game/1"/>
+                <Button displayValue="Join Game" link={`/game/${selectedGame}`} disabled={selectedGame ? false : true}/>
+                <Button displayValue="List Pools"/>
+                <Button displayValue="Join Pool"/>
+
+            </div>
         </div>
     );
 }