Merge pull request #44 from CJM1994/multiplayer/serve-prompt

Multiplayer/serve prompt

client/src/components/Multiplayer/Multiplayer.jsx

@@ -1,16 +1,45 @@
 import React from 'react';
 import './Multiplayer.scss'
-import useSocket from '../../hooks/useSocket';
-import MultiDisplay from './MultiDisplay';
-import { useEffect, useState } from "react";
+import Prompt from './Prompt';
+import VSDisplay from './VSDisplay';
+import { useEffect, useState, useRef } from "react";
+
+// Websocket functions
+const { io } = require("socket.io-client");
+const {sendMessage, updateProgress} = require('./api')
 
 export default function Multiplayer() {
 
-  useSocket();
+  const NEW_SERVER_MESSAGE_EVENT = "newServerMessage";
+  const socketRef = useRef();
+
+  useEffect(() => {
+    socketRef.current = io();
+
+    socketRef.current.on(NEW_SERVER_MESSAGE_EVENT, (message) => {
+      console.log(message);
+    });
+
+  });
+
+  // TEST VARIABLES
+  const player1 = {
+    connected: true,
+    progress: 50,
+  }
+
+  const player2 = {
+    connected: true,
+    progress: 50,
+  }
 
   return (
     <div>
-      <MultiDisplay />
+      <VSDisplay player1={player1} player2={player2} />
+      <Prompt
+        onComplete={() => sendMessage(socketRef.current, 'Prompt Complete')}
+        onProgress={(counter) => updateProgress(socketRef.current, counter)}
+        />
     </div>
   )
 

client/src/components/Multiplayer/MultiDisplay.jsx → client/src/components/Multiplayer/Prompt.jsx

@@ -4,7 +4,9 @@ import useTimer from "../../hooks/useTimer";
 import "../Main/Display.scss";
 import Lines from "../Main/Lines";
 
-export default function MultiDisplay() {
+export default function Prompt(props) {
+
+  const { onComplete, onProgress } = props;
 
   const { prompt, input, lengths, fetchPrompt, resetInput, handleKeypress, setFocus, endInput } = useKeyPress();
   const { time, running, toggleTimer, resetTimer } = useTimer();
@@ -34,7 +36,7 @@ export default function MultiDisplay() {
     setFocus(true);
   }, []);
 
-  // Set / Stop Timer
+  // On click
   useEffect(() => {
     if (!input.end) {
       if (!running && (input.keys[0].length > 0 || input.queue !== null)) {
@@ -48,9 +50,10 @@ export default function MultiDisplay() {
     }
   }, [input]);
 
-  // THIS USE EFFECT SHOULD SEND TO THE WEBSOCKET THAT USER FINISHED PROMPT
+  // On prompt complete
   useEffect(() => {
     if (input.end) {
+      onComplete(); // send complete message to websocket
       alert('PROMPT COMPLETE!!!') // This is where websocket should send
     }
   }, [input.end]);
@@ -63,6 +66,13 @@ export default function MultiDisplay() {
     };
   }, [handleKeypress]);
 
+  useEffect(() => {
+    if (counter !== 0) {
+      onProgress(counter);
+      // Can send a websocket message here to update % progress
+    }
+  }, [counter])
+
   return (
     <div className="display">
       <p>Time: {time}</p>
@@ -77,8 +87,11 @@ export default function MultiDisplay() {
             lengths={lengths}
             indexes={wrongIndexes}
             counter={counter}
+            line={input.line}
           />
         </div>
+        <p>Counter: {counter}</p>
+        <p>Errors: {wrongIndexes.length}</p>
       </div>
     </div>
   );

client/src/components/Multiplayer/VSDisplay.jsx

@@ -0,0 +1,14 @@
+
+
+export default function VSDisplay(props) {
+
+  const {player1, player2} = props;
+
+  return (
+    <div>
+      <p>Player 1: {player1.connected}, Progress: {player1.progress}</p>
+      <p>Player 2: {player2.connected}, Progress: {player2.progress}</p>
+    </div>
+  )
+
+}

client/src/components/Multiplayer/api.js

@@ -0,0 +1,9 @@
+const sendMessage = (socket, message) => {
+  socket.emit('newClientMessage', message);
+};
+
+const updateProgress = (socket, percentComplete) => {
+  socket.emit('progressUpdate', percentComplete);
+}
+
+module.exports = {sendMessage, updateProgress}

server/server.js

@@ -42,6 +42,10 @@ io.on("connection", (socket) => {
   socket.on("newClientMessage", (arg) => {
     console.log(`user ${socket.id} replied with ${arg}`);
   });
+
+  socket.on('progressUpdate', (arg) => {
+    console.log(`user ${socket.id} progressed and ${arg}`)
+  });
 });
 
 // Initialize Routes