From 603e75aafcf3fcb8e5be548322b7f07ec8b6ff85 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sat, 4 Jun 2022 13:44:49 -0500
Subject: [PATCH] coordinating shared state

---
 client/src/App.jsx                    | 46 +++++++++++++++++++--------
 client/src/components/LeaderBoard.jsx |  0
 client/src/components/PlayerCard.jsx  |  7 ++++
 client/src/styles.css                 |  7 ++++
 index.js                              | 17 +++++++++-
 5 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/LeaderBoard.jsx
 create mode 100644 client/src/components/PlayerCard.jsx
 create mode 100644 client/src/styles.css

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8a8a204..8dc227f 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,31 +1,51 @@
 import { useState, useEffect } from 'react'
-import logo from './logo.svg'
 import io from 'socket.io-client'
-// import './App.css'
+
+import PlayerCard from './components/PlayerCard';
+
+import "./styles.css";
 
 function App() {
   const [socket, setSocket] = useState();
+  const [state, setState] = useState({
+    socket: null,
+    players: null,
+    id: null,
+  })
 
   useEffect(() => {
     const newSocket = io("http://localhost:8000");
-    setSocket(newSocket);
+    setState({...state, socket: newSocket});
 
     return () => newSocket.close();
-  }, [setSocket]);
+  }, []);
 
   useEffect(() => {
-    if (!socket) return;
-    socket.on('connection', (data) => {
-      console.log('connected!' + data);
-    })
-  }, [socket]);
+    if (state.socket) {
+      state.socket.on('connect', (data) => {
+        console.log("connection to Express successful!");
+        console.log(data);
+
+        setState({
+          ...state,
+          id: state.socket.id,
+          players: data
+        });
+
+        // state.socket.emit('connect', null);
+      })
+    }
+  }, [state.socket]);
 
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-      </header>
+      <h1>Hello Vite + React!</h1>
+      {<h2>Your socket ID is: {state.id || ''}</h2>}
+      {<h3>Active players: {state.players || ''}</h3>}
+
+      <div className="players">
+        <PlayerCard name="Me" votes={null} />
+      </div>
     </div>
   )
 }
diff --git a/client/src/components/LeaderBoard.jsx b/client/src/components/LeaderBoard.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/PlayerCard.jsx b/client/src/components/PlayerCard.jsx
new file mode 100644
index 0000000..8a56051
--- /dev/null
+++ b/client/src/components/PlayerCard.jsx
@@ -0,0 +1,7 @@
+export default function PlayerCard({ name, votes }) {
+    return (
+        <>
+        <h1>Name: {name}</h1>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/client/src/styles.css b/client/src/styles.css
new file mode 100644
index 0000000..cbcc291
--- /dev/null
+++ b/client/src/styles.css
@@ -0,0 +1,7 @@
+.App {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: lightgray;
+    height: max(900px, 100vh);
+}
\ No newline at end of file
diff --git a/index.js b/index.js
index bbba620..90fe7c2 100644
--- a/index.js
+++ b/index.js
@@ -13,12 +13,27 @@ const io = socketIO(server, {
     }
 });
 
+let players = [];
+
 server.listen(8000, (err) => {
     if (err) console.log(err);
     console.log("Listening on 8000");
     
     io.on('connection', (socket) => {
+        if (players.length === 0) players.push(socket.id);
+
         console.log('new client connected.');
-        socket.emit('connection', 'data');
+        console.log(`players: ${players}`);
+        console.log('');
+
+        socket.emit('connection', players);
+
+        socket.on('disconnect', () => {
+            let found = players.indexOf(socket.id);
+            players = players.splice(found, 0, '');
+            console.log(`player ${socket.id} disconnected`);
+            console.log(`players: ${players}`);
+            console.log('');
+        })
     });
 })