From 6ecc1dd7e03e9c75802d5208a1fd9bdb219ae734 Mon Sep 17 00:00:00 2001
From: the-all-good <benjo@dcsi.net.au>
Date: Sun, 15 Dec 2024 16:39:51 +1100
Subject: [PATCH] MOAR STILE

---
 frontend/src/js/App.js                     | 20 ++++++++++----------
 frontend/src/js/components/gameList.js     |  2 --
 frontend/src/js/components/listGameCell.js |  8 +++++---
 frontend/src/js/contexts/GameContext.js    | 16 ++++++++++++++++
 frontend/src/js/pages/home.js              |  7 ++++---
 5 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/js/contexts/GameContext.js

diff --git a/frontend/src/js/App.js b/frontend/src/js/App.js
index b841a6e..557b560 100644
--- a/frontend/src/js/App.js
+++ b/frontend/src/js/App.js
@@ -1,19 +1,19 @@
-import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import '../css/App.css';
-import Leaderboard from './components/leaderboard';
-import GameCard from './components/gameCard';
-import Button from './components/button';
 import GameView from './pages/gameView';
 import Home from './pages/home';
+import { GameProvider } from './contexts/GameContext';
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/game/:id" element={<GameView />} />
-      </Routes>
-    </BrowserRouter>
+    <GameProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/game/:id" element={<GameView />} />
+        </Routes>
+      </BrowserRouter>
+    </GameProvider>
   );
 }
 
diff --git a/frontend/src/js/components/gameList.js b/frontend/src/js/components/gameList.js
index 12492fb..dd1f5d9 100644
--- a/frontend/src/js/components/gameList.js
+++ b/frontend/src/js/components/gameList.js
@@ -8,8 +8,6 @@ function GameList(props){
                 <ListGameCell
                 key={game.gameId}
                 data={game}
-                selectedGame={props.selected}
-                setGame={props.toggle}
                 />
             ))}
         </div>
diff --git a/frontend/src/js/components/listGameCell.js b/frontend/src/js/components/listGameCell.js
index 377b4dc..e812b13 100644
--- a/frontend/src/js/components/listGameCell.js
+++ b/frontend/src/js/components/listGameCell.js
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GameContext } from '../contexts/GameContext';
 
 function ListGameCell(props){
-    const isSelected = props.selectedGame === props.data.gameId;
+    const { selectedGame, setSelectedGame } = useContext(GameContext);
+    const isSelected = 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)}
+        onClick={() => isSelected ? setSelectedGame(null) : setSelectedGame(props.data.gameId)}
       >
         <p>Game ID: {props.data.gameId}</p>
         <p>
diff --git a/frontend/src/js/contexts/GameContext.js b/frontend/src/js/contexts/GameContext.js
new file mode 100644
index 0000000..7babf6e
--- /dev/null
+++ b/frontend/src/js/contexts/GameContext.js
@@ -0,0 +1,16 @@
+import React, { createContext, useState } from 'react';
+
+// Create a context
+export const GameContext = createContext(null);
+
+// Context Provider
+export function GameProvider({ children }) {
+  const [selectedGame, setSelectedGame] = useState({ selectedGame: null });
+
+  return (
+    <GameContext.Provider value={{ selectedGame, setSelectedGame }}>
+      {children}
+    </GameContext.Provider>
+  );
+}
+
diff --git a/frontend/src/js/pages/home.js b/frontend/src/js/pages/home.js
index 87dd06c..5997ddb 100644
--- a/frontend/src/js/pages/home.js
+++ b/frontend/src/js/pages/home.js
@@ -1,11 +1,12 @@
-import React, { useState} from 'react';
+import React, { useContext } from 'react';
 import Leaderboard from '../components/leaderboard';
 import GameList from '../components/gameList';
 import Button from '../components/button';
+import { GameContext } from '../contexts/GameContext';
 
 
 function Home(){
-    const [selectedGame, setSelectedGame] = useState(null);
+    let {selectedGame, setSelectedGame} = useContext(GameContext);
 
     const games = [
         {
@@ -29,7 +30,7 @@ function Home(){
     return (
         <div className="min-h-full h-full flex flex-row">
             <Leaderboard />
-            <GameList games={games} selected={selectedGame} toggle={setSelectedGame}/>
+            <GameList games={games}/>
             <div className="flex flex-col">
                 <Button displayValue="New Game" link="/game/1"/>
                 <Button displayValue="Join Game" link={`/game/${selectedGame}`} disabled={selectedGame ? false : true}/>