fix: Add more informative game load text (#1545)

* Update text on game load * Update snapshots
ocadotechnology · Jun 28, 2021 · 83f5579 · 83f5579
1 parent e79433d
commit 83f5579
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/Pipfile.lock b/Pipfile.lock
diff --git a/game_frontend/public/handlebars_template.html b/game_frontend/public/handlebars_template.html
@@ -94,7 +94,8 @@
 
   <script>
     var appData = {
-      urlForAimmoDashboard: "{% url_for_aimmo_dashboard %}"
+      urlForAimmoDashboard: "{% url_for_aimmo_dashboard %}",
+      urlContact: "{% url 'help' %}"
     };
   </script>
 </head>

diff --git a/game_frontend/src/components/GameView/__snapshots__/index.test.js.snap b/game_frontend/src/components/GameView/__snapshots__/index.test.js.snap
@@ -47,7 +47,19 @@ exports[`<GameView /> shows the loading screen when the game is loading 1`] = `
       color="inherit"
       variant="body1"
     >
-      Building game world...
+      We are building your game... ⏱
+    </Styled(WithStyles(ForwardRef(Typography)))>
+    <Styled(WithStyles(ForwardRef(Typography)))
+      color="inherit"
+      variant="body1"
+    >
+      If the game doesn’t load after 60 seconds, please 
+      <a
+        href=""
+      >
+        contact us
+      </a>
+      .
     </Styled(WithStyles(ForwardRef(Typography)))>
   </styled.div>
   <canvas

diff --git a/game_frontend/src/components/GameView/index.js b/game_frontend/src/components/GameView/index.js
@@ -48,6 +48,9 @@ export const PositionedFindMeButton = styled(FindMeButton)`
   right: ${props => props.theme.spacing(3)}px;
 `
 
+const appData = window.appData
+const urlContact = (appData && appData.urlContact) ? appData.urlContact : ''
+
 export default class GameView extends Component {
   static propTypes = {
     connectToGame: PropTypes.func,
@@ -95,7 +98,10 @@ export default class GameView extends Component {
       <LoadingBackgroundOverlay>
         <CircularProgress color='inherit' />
         <LoadingText variant='body1' color='inherit'>
-          Building game world...
+          We are building your game... ⏱
+        </LoadingText>
+        <LoadingText variant='body1' color='inherit'>
+          If the game doesn’t load after 60 seconds, please <a href={urlContact}>contact us</a>.
         </LoadingText>
       </LoadingBackgroundOverlay>
     )