Integrate the join screen with chess and fix a bug: join url was wrong

SmileyJames · Jul 17, 2021 · 093f56f · 093f56f
1 parent a7c6493
commit 093f56f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/app/src/components/join-screen/JoinScreen.js b/app/src/components/join-screen/JoinScreen.js
@@ -4,7 +4,7 @@ import { Flex, Box, Link } from "rebass/styled-components";
 import QRCode from "qrcode.react";
 
 const roomCodeToUrl = (roomCode) => (
-  `${window.location.host}/guest/${roomCode}`
+  `${window.location.host}/#/guest/${roomCode}`
 );
 
 const roomCodeToHref = (roomCode) => (
@@ -54,7 +54,7 @@ function JoinScreen({ roomCode, ...props }) {
   return (
     <Flex flexWrap="wrap">
       <FullWidthColumn>
-        <Heading>How to join the game</Heading>
+        <Heading mt={3}>How to join the game</Heading>
       </FullWidthColumn>
       <HalfWidthColumn>
         <TextRoomCode roomCode={roomCode}/>

diff --git a/app/src/components/join-screen/JoinScreen.test.js b/app/src/components/join-screen/JoinScreen.test.js
@@ -17,9 +17,9 @@ describe("Join screen", () => {
     const textCode = queryByText("XVXV");
     expect(textCode).toBeInTheDocument();
 
-    expect(qrValue).toBe("http://localhost/guest/XVXV")
+    expect(qrValue).toBe("http://localhost/#/guest/XVXV")
 
     const link = getByRole("link");
-    expect(link.href).toBe("http://localhost/guest/XVXV")
+    expect(link.href).toBe("http://localhost/#/guest/XVXV")
   })
 })
diff --git a/app/src/games/chess/client/Host.js b/app/src/games/chess/client/Host.js
@@ -1,13 +1,11 @@
 import React from "react";
 import Client from "./Client";
-import { Flex, Text } from "rebass/styled-components";
+import JoinScreen from "components/join-screen"
 
 const Host = (props) => {
   if (props.connections.length < 1) {
     return (
-      <Flex justifyContent="center" p={4}>
-        <Text fontSize={4}>Join: <span>{props.roomId}</span></Text>
-      </Flex>
+      <JoinScreen roomCode={props.roomId}/>
     )
   }