Add simple routes to page
co-authored-by: mitchemmc <mitchemmc@gmail.com>
This commit is contained in:
parent
16b120f7e4
commit
a5034ef576
@ -6,6 +6,7 @@
|
|||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
"@testing-library/user-event": "^7.1.2",
|
"@testing-library/user-event": "^7.1.2",
|
||||||
|
"hookrouter": "^1.2.3",
|
||||||
"peerjs": "^1.2.0",
|
"peerjs": "^1.2.0",
|
||||||
"react": "^16.13.0",
|
"react": "^16.13.0",
|
||||||
"react-dom": "^16.13.0",
|
"react-dom": "^16.13.0",
|
||||||
|
81
src/App.js
81
src/App.js
@ -1,80 +1,23 @@
|
|||||||
import React, { useState, useRef } from "react";
|
import React, { useState, useRef } from "react";
|
||||||
|
import { useRoutes } from "hookrouter";
|
||||||
|
import { ThemeProvider } from "theme-ui";
|
||||||
|
|
||||||
import {
|
|
||||||
ThemeProvider,
|
|
||||||
Box,
|
|
||||||
Heading,
|
|
||||||
Text,
|
|
||||||
Label,
|
|
||||||
Input,
|
|
||||||
Button
|
|
||||||
} from "theme-ui";
|
|
||||||
import theme from "./theme.js";
|
import theme from "./theme.js";
|
||||||
|
import Home from "./routes/Home";
|
||||||
|
import Game from "./routes/Game";
|
||||||
|
import Join from "./routes/Join";
|
||||||
|
|
||||||
import useSession from "./useSession";
|
const routes = {
|
||||||
|
"/": () => <Home />,
|
||||||
|
"/game": () => <Game />,
|
||||||
|
"/join": () => <Join />
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [connectId, setConnectId] = useState("");
|
const route = useRoutes(routes);
|
||||||
const connectToId = () => {
|
|
||||||
const connection = peer.connect(connectId);
|
|
||||||
connection.on("open", () => {
|
|
||||||
connection.on("data", data => {
|
|
||||||
const blob = new Blob([data]);
|
|
||||||
imgRef.current = blob;
|
|
||||||
setImgSrc(URL.createObjectURL(imgRef.current));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const [imgSrc, setImgSrc] = useState("");
|
|
||||||
const imgRef = useRef(null);
|
|
||||||
const loadImage = e => {
|
|
||||||
imgRef.current = e.target.files[0];
|
|
||||||
setImgSrc(URL.createObjectURL(imgRef.current));
|
|
||||||
for (let connection of Object.values(connections)) {
|
|
||||||
connection.send(imgRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const [peer, peerId, connections] = useSession(imgRef);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<Box width={256}>
|
{route}
|
||||||
<Heading as="h3">Your ID</Heading>
|
|
||||||
<Text>{peerId}</Text>
|
|
||||||
|
|
||||||
<Box>
|
|
||||||
<img src={imgSrc} />
|
|
||||||
<Label htmlFor="image">Image</Label>
|
|
||||||
<Input
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
name="image"
|
|
||||||
id="file"
|
|
||||||
onChange={loadImage}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
as="form"
|
|
||||||
width={1 / 2}
|
|
||||||
onSubmit={e => {
|
|
||||||
e.preventDefault();
|
|
||||||
connectToId();
|
|
||||||
}}
|
|
||||||
py={3}
|
|
||||||
>
|
|
||||||
<Label htmlFor="connectId">Connect to</Label>
|
|
||||||
<Input
|
|
||||||
id="connectId"
|
|
||||||
name="connectId"
|
|
||||||
value={connectId}
|
|
||||||
onChange={e => setConnectId(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Button>Connect</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
8
src/routes/Game.js
Normal file
8
src/routes/Game.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { A } from "hookrouter";
|
||||||
|
|
||||||
|
function Game() {
|
||||||
|
return <div><A href="/">GO TO HOME</A>GAME!</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Game;
|
8
src/routes/Home.js
Normal file
8
src/routes/Home.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { A } from "hookrouter";
|
||||||
|
|
||||||
|
function Home() {
|
||||||
|
return <div><A href="/join">JOIN GAME</A>HOME!</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
8
src/routes/Join.js
Normal file
8
src/routes/Join.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { A } from "hookrouter";
|
||||||
|
|
||||||
|
function Join() {
|
||||||
|
return <div><A href="/game">GO TO GAME</A>JOIN!</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Join;
|
@ -5136,6 +5136,11 @@ hmac-drbg@^1.0.0:
|
|||||||
minimalistic-assert "^1.0.0"
|
minimalistic-assert "^1.0.0"
|
||||||
minimalistic-crypto-utils "^1.0.1"
|
minimalistic-crypto-utils "^1.0.1"
|
||||||
|
|
||||||
|
hookrouter@^1.2.3:
|
||||||
|
version "1.2.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/hookrouter/-/hookrouter-1.2.3.tgz#a65599a1be376b51734caf7c4f7f8aba59bb2c77"
|
||||||
|
integrity sha512-n0mqEBGgXIxYRNMHlwCzoyTOk0OB5Es3jwUyA3+2l5nte/52n0CMMj1bmoCabC8K43YTUEr0zzexTBfo//tq2Q==
|
||||||
|
|
||||||
hosted-git-info@^2.1.4:
|
hosted-git-info@^2.1.4:
|
||||||
version "2.8.5"
|
version "2.8.5"
|
||||||
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
|
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
|
||||||
|
Loading…
Reference in New Issue
Block a user