74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import React, { useEffect, useState, createContext } from "react";
|
|
import axios from "axios";
|
|
import { io } from "socket.io-client";
|
|
import { Beforeunload } from "react-beforeunload";
|
|
import {
|
|
BrowserRouter as Router,
|
|
Route,
|
|
Redirect,
|
|
Switch,
|
|
} from "react-router-dom";
|
|
|
|
import Gameboard from "./components/Gameboard";
|
|
import NameInput from "./components/NameInput";
|
|
|
|
export const PlayerDataContext = createContext();
|
|
|
|
function App() {
|
|
const [playerData, setPlayerData] = useState();
|
|
const [redirect, setRedirect] = useState();
|
|
|
|
useEffect(() => {
|
|
const socket = io("http://localhost:5000", { withCredentials: true });
|
|
socket.on("client data", (data) => {
|
|
data = JSON.parse(data);
|
|
setPlayerData(data);
|
|
data.roomId != null ? setRedirect(true) : setRedirect(false);
|
|
});
|
|
}, []);
|
|
|
|
const handleExit = (e) => {
|
|
e.preventDefault();
|
|
window.addEventListener("unload", () => {
|
|
axios.post("/player/exit", { withCredentials: true });
|
|
});
|
|
};
|
|
|
|
const idCallback = () => {
|
|
axios
|
|
.get("/player/", {
|
|
withCredentials: true,
|
|
})
|
|
.then((response) => {
|
|
setPlayerData(response.data);
|
|
console.log(response.data);
|
|
setRedirect(true);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Router>
|
|
{redirect ? <Redirect to="/game" /> : <Redirect to="/login" />}
|
|
<Switch>
|
|
<Route exact path="/">
|
|
LOADING...
|
|
</Route>
|
|
<Route path="/login">
|
|
<NameInput idCallback={idCallback} />
|
|
</Route>
|
|
<Route path="/game">
|
|
{playerData ? (
|
|
<Beforeunload onBeforeunload={handleExit}>
|
|
<PlayerDataContext.Provider value={playerData}>
|
|
<Gameboard />
|
|
</PlayerDataContext.Provider>
|
|
</Beforeunload>
|
|
) : null}
|
|
</Route>
|
|
</Switch>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|