diff --git a/src/App.js b/src/App.js
index 9e93684..09fc5e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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";
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 5f9c5b7..8ec1050 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -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",
}}
>
-
+
About
-
+
Home
-
+
FAQ
diff --git a/src/components/Link.js b/src/components/Link.js
new file mode 100644
index 0000000..a94b5ce
--- /dev/null
+++ b/src/components/Link.js
@@ -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 (
+
+
+
+ );
+}
+
+export default Link;
diff --git a/src/components/StartStreamButton.js b/src/components/StartStreamButton.js
index b2f8703..12e4b15 100644
--- a/src/components/StartStreamButton.js
+++ b/src/components/StartStreamButton.js
@@ -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.
- See FAQ for more information.
+ See FAQ for more information.
);
@@ -33,7 +35,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
Ensure "Share audio" is selected when sharing.
- See FAQ for more information.
+ See FAQ for more information.
);
diff --git a/src/routes/About.js b/src/routes/About.js
index 0d86c94..790371a 100644
--- a/src/routes/About.js
+++ b/src/routes/About.js
@@ -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() {
Made by two people in Melbourne, Australia.{" "}
- Mitch and{" "}
- Nicola were looking
- for an easy way to continue their d{"&"}d campaign as in-person
- interaction becomes harder during the COVID-19 crisis.
+ Mitch{" "}
+ and{" "}
+
+ Nicola
+ {" "}
+ were looking for an easy way to continue their d{"&"}d campaign as
+ in-person interaction becomes harder during the COVID-19 crisis.
Contact
For questions or feedback email{" "}
- contact@owlbear.rodeo
+
+ contact@owlbear.rodeo
+
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.js
index 0fa0285..03a548a 100644
--- a/src/routes/FAQ.js
+++ b/src/routes/FAQ.js
@@ -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{" "}
-
+
Browser Compatibility chart
- {" "}
+ {" "}
on the Mozilla Developer Network.
@@ -87,9 +87,9 @@ function FAQ() {
Owlbear Rodeo uses peer to peer connections to send data between the
players. Specifically the{" "}
-
+
WebRTC API
- {" "}
+ {" "}
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. As
@@ -104,20 +104,20 @@ function FAQ() {
user experience so we have decided against it at this time.
The good news is that Safari will still work if the two devices are
connected to a separate network as we make use of{" "}
-
+
TURN
- {" "}
+ {" "}
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{" "}
-
+
bug report
- {" "}
+ {" "}
on the Webkit site or this{" "}
-
+
blog post
-
+
.
@@ -126,7 +126,10 @@ function FAQ() {
Owlbear Rodeo uses WebRTC to communicate between players. Ensure your
browser supports WebRTC. A list of supported browsers can be found{" "}
- here.
+
+ here
+
+ .
diff --git a/src/routes/Game.js b/src/routes/Game.js
index d91d63f..e2c7488 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -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() {
setPeerError(null)}>
- {peerError} See FAQ for more information.
+ {peerError} See FAQ for more information.