Sfoglia il codice sorgente

Reorganizing the bottom of the summary page, which allows removal of reset game button

Kirk Trombley 5 anni fa
parent
commit
ca07e04a9b

+ 2 - 1
client/src/components/screens/HomePage.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import HeaderAndFooter from '../util/HeaderAndFooter';
 import GameCreationForm from '../util/GameCreationForm';
+import { dispatch } from '../../domain/gameStore';
 
 export default () => (
   <HeaderAndFooter>
-    <GameCreationForm/>
+    <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>
   </HeaderAndFooter>
 );

+ 13 - 17
client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -29,12 +29,12 @@ const ScoreBoard = styled.div`
   margin-top: 2em;
 `
 
-const LowerContainer = styled.div`
+const LinkedGameContainer = styled.div`
   display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-  margin: 1em;
+  justify-content: center;
+  width: 100%;
+  margin-top: 1em;
+  margin-bottom: 10em;
 `
 
 const Label = styled.span`
@@ -71,20 +71,16 @@ export default () => {
               .map((data) => <PlayerScoreTile key={data.name} {...data} />)
           }
         </ScoreBoard>
-        {
-          linkedGame
-            ? (
-                <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
+        <LinkedGameContainer>
+          {
+            linkedGame
+              ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
                   Continue to Linked Game Lobby
                 </StyledButton>
-              )
-            : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
-        }
-        <LowerContainer>
-          <Label>This page can be directly linked with:</Label>
-          <Label><ClickToCopy text={getUrl(gameId)} /></Label>
-          <StyledButton onClick={dispatch.resetGame}>Return to Start</StyledButton>
-        </LowerContainer>
+              : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
+          }
+        </LinkedGameContainer>
+        <Label><ClickToCopy text={getUrl(gameId)}>Click here to copy a link to this summary!</ClickToCopy></Label>
       </Container>
     </HeaderAndFooter>
   );

+ 0 - 2
client/src/components/util/GameCreationForm.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import ms from "pretty-ms";
 import Loading from "./Loading";
-import { dispatch } from "../../domain/gameStore";
 import Button from "./Button";
 import { createGame } from "../../domain/apiMethods";
 import Dropdown from "./Dropdown";
@@ -40,7 +39,6 @@ export default ({ afterCreate }) => {
   const onCreateGame = async () => {
     setLoading(true);
     const gameId = await createGame(timer, rounds);
-    await dispatch.goToLobby(gameId);
     if (afterCreate) {
       afterCreate(gameId);
     }

+ 1 - 5
client/src/domain/gameStore.js

@@ -28,7 +28,7 @@ export const [
 }, {
   setPlayerName: ([set], playerName) => set({ playerName }),
   goToLobby: ([set], gameId) => set({ 
-    gameId, 
+    gameId,
     playerId: null,
     gameState: PRE_ROUND,
   }),
@@ -60,8 +60,4 @@ export const [
     gameId: gameId || get.gameId(),
     gameState: POST_GAME,
   }),
-  resetGame: ([set]) => set({
-    playerId: null,
-    gameState: PRE_GAME,
-  }),
 });