Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved to browser routing

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-25 00:02:06 +10:00
parent de4b2b6647
commit ad7c1fc8c7
7 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { ThemeProvider } from "theme-ui";
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import theme from "./theme.js";
import Home from "./routes/Home";

10
src/components/Footer.js
View File

@ -1,5 +1,7 @@
import React from "react";
import { Flex, Link } from "theme-ui";
import { Flex } from "theme-ui";
import Link from "./Link";
function Footer() {
return (
@ -12,13 +14,13 @@ function Footer() {
justifyContent: "center",
}}
>
<Link m={2} href="#/about" variant="footer">
<Link m={2} to="/about" variant="footer">
About
</Link>
<Link m={2} href="#/" variant="footer">
<Link m={2} to="/" variant="footer">
Home
</Link>
<Link m={2} href="#/faq" variant="footer">
<Link m={2} to="/faq" variant="footer">
FAQ
</Link>
</Flex>

13
src/components/Link.js Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import { Link as ThemeLink } from "theme-ui";
import { Link as RouterLink } from "react-router-dom";
function Link({ to, ...rest }) {
return (
<RouterLink to={to}>
<ThemeLink {...rest} />
</RouterLink>
);
}
export default Link;

8
src/components/StartStreamButton.js
View File

@ -1,7 +1,9 @@
import React, { useState } from "react";
import { IconButton, Box, Text, Link } from "theme-ui";
import { IconButton, Box, Text } from "theme-ui";
import adapter from "webrtc-adapter";
import Link from "../components/Link";
import StartStreamModal from "../modals/StartStreamModal";
function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
@ -20,7 +22,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
Browser not supported for audio sharing.
<br />
<br />
See <Link href="#/faq">FAQ</Link> for more information.
See <Link to="/faq">FAQ</Link> for more information.
</Text>
</Box>
);
@ -33,7 +35,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
Ensure "Share audio" is selected when sharing.
<br />
<br />
See <Link href="#/faq">FAQ</Link> for more information.
See <Link to="/faq">FAQ</Link> for more information.
</Text>
</Box>
);

17
src/routes/About.js
View File

@ -1,5 +1,5 @@
import React from "react";
import { Flex, Text, Link } from "theme-ui";
import { Flex, Text, Link as ExternalLink } from "theme-ui";
import Footer from "../components/Footer";
@ -37,17 +37,22 @@ function About() {
</Text>
<Text variant="body2" as="p">
Made by two people in Melbourne, Australia.{" "}
<Link href="https://mitchmccaffrey.com/">Mitch</Link> and{" "}
<Link href="https://twitter.com/nthouliss">Nicola</Link> were looking
for an easy way to continue their d{"&"}d campaign as in-person
interaction becomes harder during the COVID-19 crisis.
<ExternalLink href="https://mitchmccaffrey.com/">Mitch</ExternalLink>{" "}
and{" "}
<ExternalLink href="https://twitter.com/nthouliss">
Nicola
</ExternalLink>{" "}
were looking for an easy way to continue their d{"&"}d campaign as
in-person interaction becomes harder during the COVID-19 crisis.
</Text>
<Text my={1} mt={2} variant="heading" as="h3" sx={{ fontSize: 3 }}>
Contact
</Text>
<Text variant="body2" as="p">
For questions or feedback email{" "}
<Link href="mailto:contact@owlbear.rodeo">contact@owlbear.rodeo</Link>
<ExternalLink href="mailto:contact@owlbear.rodeo">
contact@owlbear.rodeo
</ExternalLink>
</Text>
</Flex>
<Footer />

27
src/routes/FAQ.js
View File

@ -1,5 +1,5 @@
import React from "react";
import { Flex, Text, Link, Image } from "theme-ui";
import { Flex, Text, Link as ExternalLink, Image } from "theme-ui";
import Footer from "../components/Footer";
@ -56,9 +56,9 @@ function FAQ() {
feature of the Screen Capture API. Currently the two browsers that
support this are Google Chrome and Microsoft Edge. To see if your
browser is supported see the{" "}
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
<ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
Browser Compatibility chart
</Link>{" "}
</ExternalLink>{" "}
on the Mozilla Developer Network.
</Text>
<Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
@ -87,9 +87,9 @@ function FAQ() {
<Text mb={2} variant="body2" as="p">
Owlbear Rodeo uses peer to peer connections to send data between the
players. Specifically the{" "}
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">
<ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">
WebRTC API
</Link>{" "}
</ExternalLink>{" "}
is used. WebRTC allows the sending of two types of data, the first is
media such as a camera or microphone and the second is raw data such
as chat messages or in this case the state of the game map. <br /> As
@ -104,20 +104,20 @@ function FAQ() {
user experience so we have decided against it at this time. <br />
The good news is that Safari will still work if the two devices are
connected to a separate network as we make use of{" "}
<Link href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT">
<ExternalLink href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT">
TURN
</Link>{" "}
</ExternalLink>{" "}
servers which will handle the IP sharing and are not blocked by
Safari. So if you're seeing errors and are on the same network as the
other person if possible switch to separate networks and try again.
For more information about Safari's restrictions on WebRTC see this{" "}
<Link href="https://bugs.webkit.org/show_bug.cgi?id=173052">
<ExternalLink href="https://bugs.webkit.org/show_bug.cgi?id=173052">
bug report
</Link>{" "}
</ExternalLink>{" "}
on the Webkit site or this{" "}
<Link href="https://webkit.org/blog/7763/a-closer-look-into-webrtc/">
<ExternalLink href="https://webkit.org/blog/7763/a-closer-look-into-webrtc/">
blog post
</Link>
</ExternalLink>
.
</Text>
<Text my={1} variant="heading" as="h3">
@ -126,7 +126,10 @@ function FAQ() {
<Text variant="body2" as="p">
Owlbear Rodeo uses WebRTC to communicate between players. Ensure your
browser supports WebRTC. A list of supported browsers can be found{" "}
<Link href="https://caniuse.com/#feat=rtcpeerconnection">here</Link>.
<ExternalLink href="https://caniuse.com/#feat=rtcpeerconnection">
here
</ExternalLink>
.
</Text>
</Flex>
<Footer />

5
src/routes/Game.js
View File

@ -5,7 +5,7 @@ import React, {
useCallback,
useContext,
} from "react";
import { Flex, Box, Text, Link } from "theme-ui";
import { Flex, Box, Text } from "theme-ui";
import { useParams } from "react-router-dom";
import { omit, isStreamStopped } from "../helpers/shared";
@ -17,6 +17,7 @@ import Tokens from "../components/Tokens";
import Map from "../components/Map";
import Banner from "../components/Banner";
import LoadingOverlay from "../components/LoadingOverlay";
import Link from "../components/Link";
import AuthModal from "../modals/AuthModal";
@ -320,7 +321,7 @@ function Game() {
<Banner isOpen={!!peerError} onRequestClose={() => setPeerError(null)}>
<Box p={1}>
<Text as="p" variant="body2">
{peerError} See <Link href="#/faq">FAQ</Link> for more information.
{peerError} See <Link to="/faq">FAQ</Link> for more information.
</Text>
</Box>
</Banner>