Added game provider and shared state for the app
This commit is contained in:
parent
e52f3cbdaf
commit
673320988f
@ -1,13 +1,14 @@
|
|||||||
import React, { useState, useRef } from "react";
|
import React from "react";
|
||||||
import { useRoutes } from "hookrouter";
|
import { useRoutes } from "hookrouter";
|
||||||
import { ThemeProvider } from "theme-ui";
|
import { ThemeProvider } from "theme-ui";
|
||||||
|
import { GameProvider } from "./contexts/GameContext";
|
||||||
|
|
||||||
import theme from "./theme.js";
|
import theme from "./theme.js";
|
||||||
import Home from "./routes/Home";
|
import Home from "./routes/Home";
|
||||||
import Game from "./routes/Game";
|
import Game from "./routes/Game";
|
||||||
import Join from "./routes/Join";
|
import Join from "./routes/Join";
|
||||||
|
|
||||||
const routes = {
|
const routes = {
|
||||||
"/": () => <Home />,
|
"/": () => <Home />,
|
||||||
"/game": () => <Game />,
|
"/game": () => <Game />,
|
||||||
"/join": () => <Join />
|
"/join": () => <Join />
|
||||||
@ -17,7 +18,7 @@ function App() {
|
|||||||
const route = useRoutes(routes);
|
const route = useRoutes(routes);
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
{route}
|
<GameProvider>{route}</GameProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
11
src/contexts/GameContext.js
Normal file
11
src/contexts/GameContext.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
const GameContext = React.createContext();
|
||||||
|
|
||||||
|
export function GameProvider({ children }) {
|
||||||
|
const [gameId, setGameId] = useState(null);
|
||||||
|
const value = [gameId, setGameId];
|
||||||
|
return <GameContext.Provider value={value}>{children}</GameContext.Provider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GameContext;
|
@ -1,9 +1,14 @@
|
|||||||
import React from "react";
|
import React, { useContext } from "react";
|
||||||
import { A } from "hookrouter";
|
import { A } from "hookrouter";
|
||||||
|
|
||||||
|
import GameContext from "../contexts/GameContext";
|
||||||
|
|
||||||
function Game() {
|
function Game() {
|
||||||
|
const [gameId, setGameId] = useContext(GameContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
{gameId ? `You've joined ${gameId}` : "You've started a new game"}
|
||||||
<A href="/">GO TO HOME</A>GAME!
|
<A href="/">GO TO HOME</A>GAME!
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,15 +1,28 @@
|
|||||||
import React from "react";
|
import React, { useContext } from "react";
|
||||||
import { navigate } from "hookrouter";
|
import { navigate } from "hookrouter";
|
||||||
import { Container, Flex, Button } from "theme-ui";
|
import { Container, Flex, Button } from "theme-ui";
|
||||||
|
|
||||||
|
import GameContext from "../contexts/GameContext";
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
|
const [gameId, setGameId] = useContext(GameContext);
|
||||||
|
|
||||||
|
function handleStartGame() {
|
||||||
|
setGameId(null);
|
||||||
|
navigate("/game");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleJoinGame() {
|
||||||
|
navigate("/join");
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container p={4} sx={{ maxWidth: "300px" }}>
|
<Container p={4} sx={{ maxWidth: "300px" }}>
|
||||||
<Flex sx={{ flexDirection: "column" }}>
|
<Flex sx={{ flexDirection: "column" }}>
|
||||||
<Button m={2} onClick={() => navigate("/game")}>
|
<Button m={2} onClick={handleStartGame}>
|
||||||
Start Game
|
Start Game
|
||||||
</Button>
|
</Button>
|
||||||
<Button m={2} onClick={() => navigate("/join")}>
|
<Button m={2} onClick={handleJoinGame}>
|
||||||
Join Game
|
Join Game
|
||||||
</Button>
|
</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useContext } from "react";
|
||||||
import { navigate } from "hookrouter";
|
import { navigate } from "hookrouter";
|
||||||
import { Container, Box, Label, Input, Button } from "theme-ui";
|
import { Container, Box, Label, Input, Button } from "theme-ui";
|
||||||
|
|
||||||
|
import GameContext from "../contexts/GameContext";
|
||||||
|
|
||||||
function Join() {
|
function Join() {
|
||||||
const [id, setId] = useState("");
|
const [gameId, setGameId] = useContext(GameContext);
|
||||||
|
|
||||||
function handleChange(event) {
|
function handleChange(event) {
|
||||||
setId(event.target.value);
|
setGameId(event.target.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSubmit(event) {
|
function handleSubmit(event) {
|
||||||
@ -18,7 +20,13 @@ function Join() {
|
|||||||
<Container p={4} sx={{ maxWidth: "300px" }}>
|
<Container p={4} sx={{ maxWidth: "300px" }}>
|
||||||
<Box as="form" onSubmit={handleSubmit}>
|
<Box as="form" onSubmit={handleSubmit}>
|
||||||
<Label htmlFor="id">Shove an ID in me</Label>
|
<Label htmlFor="id">Shove an ID in me</Label>
|
||||||
<Input my={4} id="id" name="id" value={id} onChange={handleChange} />
|
<Input
|
||||||
|
my={4}
|
||||||
|
id="id"
|
||||||
|
name="id"
|
||||||
|
value={gameId}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
<Button>Go ʕ•ᴥ•ʔ</Button>
|
<Button>Go ʕ•ᴥ•ʔ</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Container>
|
</Container>
|
||||||
|
Loading…
Reference in New Issue
Block a user