diff --git a/client/src/pages/Join/Join.jsx b/client/src/pages/Join/Join.jsx index edc8599..ee7f4ac 100644 --- a/client/src/pages/Join/Join.jsx +++ b/client/src/pages/Join/Join.jsx @@ -1,8 +1,41 @@ import "./styles.sass"; +import {useEffect, useState} from "react"; +import Code from "@/pages/Join/states/Code"; +import {socket} from "@/common/utils/socket.js"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faHourglassHalf} from "@fortawesome/free-solid-svg-icons"; +import Input from "@/pages/Join/states/Input/index.js"; export const Join = () => { + const [state, setState] = useState("join"); + + const handleEnd = () => { + setState("end"); + } + + const onSubmissionReady = () => { + setState("input"); + } + + useEffect(() => { + socket.on("disconnect", handleEnd); + socket.on("SUBMISSION_READY", onSubmissionReady); + + return () => { + socket.off("disconnect", handleEnd); + socket.off("SUBMISSION_READY", onSubmissionReady); + } + }, []); + return ( <div className="join-page"> + {state === "join" && <Code setState={setState}/>} + {state === "waiting" && <FontAwesomeIcon icon={faHourglassHalf} bounce className="waiting-icon" /> } + {state === "input" && <Input setState={setState}/>} + {state === "end" && <div className="game-end"> + <h1>Ende</h1> + <p>Das Spiel ist vorbei!</p> + </div>} </div> );