Moved to browser routing
This commit is contained in:
parent
de4b2b6647
commit
ad7c1fc8c7
@ -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";
|
||||
|
@ -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
13
src/components/Link.js
Normal 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;
|
@ -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>
|
||||
);
|
||||
|
@ -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 />
|
||||
|
@ -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,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>
|
||||
|
Loading…
Reference in New Issue
Block a user