improve big board sizing (new layout) for the main game for all screens

ultimate-ttt · Apr 24, 2019 · 1bdd5d9 · 1bdd5d9
1 parent 1cfe0bb
commit 1bdd5d9
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 74 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,15 +1,16 @@
 import { configure } from '@storybook/react'
 
-import '../src/index.css';
-import '../src/icons/icons.css';
-
 import '@material/button/dist/mdc.button.min.css';
 import '@material/icon-button/dist/mdc.icon-button.css';
 import '@material/list/dist/mdc.list.css';
 import '@material/card/dist/mdc.card.css';
-import '@rmwc/icon/icon.css';
 import '@material/typography/dist/mdc.typography.css';
 
+import '@rmwc/icon/icon.css';
+
+import '../src/index.css';
+import '../src/icons/icons.css';
+
 import '../../icons/x.svg';
 import '../../icons/o.svg';
 import '../../icons/draw.svg';

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -10,8 +10,8 @@ import '@material/button/dist/mdc.button.min.css';
 import '@material/icon-button/dist/mdc.icon-button.css';
 import '@material/list/dist/mdc.list.css';
 import '@material/card/dist/mdc.card.css';
-import '@rmwc/icon/icon.css';
 import '@material/typography/dist/mdc.typography.css';
+import '@rmwc/icon/icon.css';
 
 export class App extends React.Component {
   render() {

diff --git a/src/components/Board/BigBoard/BigBoard.test.tsx b/src/components/Board/BigBoard/BigBoard.test.tsx
@@ -93,4 +93,21 @@ describe('BigBoard', function() {
       });
     });
   });
+
+  it('should add the given className', () => {
+    const playerMoved = jest.fn(() => {});
+    const activeBoards = [{ x: 0, y: 0 }];
+
+    const bigBoard = shallow(
+      <BigBoard
+        currentPlayer={Player.Cross}
+        board={unfinishedBoardMock}
+        activeBoards={activeBoards}
+        onPlayerMoved={playerMoved}
+        className={'myClassName'}
+      />,
+    );
+
+    expect(bigBoard.hasClass('myClassName')).toBe(true);
+  });
 });
diff --git a/src/components/Board/BigBoard/BigBoard.tsx b/src/components/Board/BigBoard/BigBoard.tsx
@@ -7,6 +7,7 @@ import {
 } from '../../../state/AppState';
 import { arePointsEqual, Point } from '../../../util';
 import styles from './BigBoard.module.css';
+import classNames from 'classnames';
 
 interface BigBoardProps {
   currentPlayer: Player;
@@ -19,6 +20,7 @@ interface BigBoardProps {
     tileY: number,
   ) => void;
   markTileSpecially?: MarkSpecially;
+  className?: string;
 }
 
 export class BigBoard extends React.Component<BigBoardProps> {
@@ -95,6 +97,11 @@ export class BigBoard extends React.Component<BigBoardProps> {
   };
 
   render() {
-    return <div className={styles.bigBoard}>{this.createSmallBoards()}</div>;
+    const { className } = this.props;
+    return (
+      <div className={classNames(styles.bigBoard, className)}>
+        {this.createSmallBoards()}
+      </div>
+    );
   }
 }
diff --git a/src/components/GameFinishedDisplay/GameFinished.module.css b/src/components/GameFinishedDisplay/GameFinished.module.css
@@ -1,24 +1,18 @@
 .winnerText {
-  margin: 0 0 0.5rem;
+  margin: 0 1em 0 0;
+}
+
+.winnerIcon {
+  vertical-align: bottom;
 }
 
 .restartAlignment {
-  display: grid;
+  display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 1rem;
 }
 
-@media only screen and (min-width: 505px) {
-  .restartAlignment {
-    grid-template-columns: auto auto;
-  }
-
-  .winnerText {
-    margin: 0 1em 0 0;
-  }
-}
-
 .hidden {
   opacity: 0;
   visibility: hidden;

diff --git a/src/components/GameFinishedDisplay/GameFinishedDisplay.tsx b/src/components/GameFinishedDisplay/GameFinishedDisplay.tsx
@@ -19,7 +19,6 @@ interface GameFinishedDisplayState {
   winnerText: string | JSX.Element;
 }
 
-// TODO: refactor to function component sometime.
 export class GameFinishedDisplay extends React.Component<
   GameFinishedDisplayProps,
   GameFinishedDisplayState
@@ -55,27 +54,28 @@ export class GameFinishedDisplay extends React.Component<
         return (
           <>
             <Icon
-              className={classNames(
-                styles.floatLeft,
-                styles.winnerIconContainer,
-              )}
               icon={{
                 icon: winner === Winner.Circle ? 'o' : 'x',
                 size: 'large',
               }}
-            />
-            <span className={styles.floatRight}>wins!</span>
+              className={styles.winnerIcon}
+            />{' '}
+            wins!
           </>
         );
       case Winner.Draw:
-        return `It's a draw!`;
+        return "It's a draw!";
 
       // Reservation so that the board doesn't shift down
       default: {
         return (
           <>
-            <Icon icon={{ icon: 'x', size: 'large' }} />
-            <span className={styles.floatRight}>reservation</span>
+            <Icon
+              icon={{ icon: 'x', size: 'xlarge' }}
+              className={styles.winnerIcon}
+            />
+            resrv
+            {/* This doesn't get shown to anyone, screenreaders included.*/}
           </>
         );
       }
@@ -98,7 +98,7 @@ export class GameFinishedDisplay extends React.Component<
           [styles.visible]: visible,
         })}
       >
-        <Typography use="headline5" className={styles.winnerText}>
+        <Typography use="headline4" className={styles.winnerText}>
           {winnerText}
         </Typography>
         <Button dense={true} raised={true} onClick={this.tryRestart}>

diff --git a/src/components/GameFinishedDisplay/__snapshots__/GameFinishedDisplay.test.tsx.snap b/src/components/GameFinishedDisplay/__snapshots__/GameFinishedDisplay.test.tsx.snap
@@ -6,22 +6,19 @@ exports[`GameFinished should match snapshot when circle wins 1`] = `
 >
   <Typography
     className="winnerText"
-    use="headline5"
+    use="headline4"
   >
     <Icon
-      className="floatLeft winnerIconContainer"
+      className="winnerIcon"
       icon={
         Object {
           "icon": "o",
           "size": "large",
         }
       }
     />
-    <span
-      className="floatRight"
-    >
-      wins!
-    </span>
+     
+    wins!
   </Typography>
   <withRipple(Button)
     dense={true}
@@ -39,22 +36,19 @@ exports[`GameFinished should match snapshot when cross wins 1`] = `
 >
   <Typography
     className="winnerText"
-    use="headline5"
+    use="headline4"
   >
     <Icon
-      className="floatLeft winnerIconContainer"
+      className="winnerIcon"
       icon={
         Object {
           "icon": "x",
           "size": "large",
         }
       }
     />
-    <span
-      className="floatRight"
-    >
-      wins!
-    </span>
+     
+    wins!
   </Typography>
   <withRipple(Button)
     dense={true}
@@ -72,7 +66,7 @@ exports[`GameFinished should match snapshot when draw 1`] = `
 >
   <Typography
     className="winnerText"
-    use="headline5"
+    use="headline4"
   >
     It's a draw!
   </Typography>
@@ -92,21 +86,18 @@ exports[`GameFinished should match snapshot when no one wins 1`] = `
 >
   <Typography
     className="winnerText"
-    use="headline5"
+    use="headline4"
   >
     <Icon
+      className="winnerIcon"
       icon={
         Object {
           "icon": "x",
-          "size": "large",
+          "size": "xlarge",
         }
       }
     />
-    <span
-      className="floatRight"
-    >
-      reservation
-    </span>
+    resrv
   </Typography>
   <withRipple(Button)
     dense={true}

diff --git a/src/index.css b/src/index.css
@@ -10,10 +10,6 @@
 
 html,
 body {
-  /* From medium: https://medium.design/system-shock-6b1dc6d6596f */
-  font-family: -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto',
-    'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
-
   margin: 0;
   padding: 0;
 }
@@ -24,7 +20,6 @@ body,
 .centerAll,
 .centerHorizontal {
   height: 100%;
-  width: 100%;
 }
 
 .centerAll {

diff --git a/src/views/Game/Game.module.css b/src/views/Game/Game.module.css
@@ -1,10 +1,13 @@
 .gameWrapper {
   display: grid;
-  width: 50%;
   margin-top: 1em;
   margin-bottom: 1em;
 
-  font-size: 7px;
+  font-size: 9px;
+}
+
+.bigBoardSize {
+  width: 80vmin;
 }
 
 @media only screen and (min-width: 500px) {

diff --git a/src/views/Game/Game.tsx b/src/views/Game/Game.tsx
@@ -19,24 +19,23 @@ interface GameProps {
   ) => void;
 }
 
-export class Game extends React.Component<GameProps> {
-  render() {
-    const { currentPlayer, board, activeBoards, onPlayerMoved } = this.props;
+export function Game(props: GameProps) {
+  const { currentPlayer, board, activeBoards, onPlayerMoved } = props;
 
-    return (
-      <div className="centerAll">
-        <div className={styles.gameWrapper}>
-          <GameFinishedDisplay />
-          <BigBoard
-            currentPlayer={currentPlayer}
-            board={board}
-            activeBoards={activeBoards}
-            onPlayerMoved={onPlayerMoved}
-          />
-        </div>
+  return (
+    <div className="centerAll">
+      <div className={styles.gameWrapper}>
+        <GameFinishedDisplay />
+        <BigBoard
+          currentPlayer={currentPlayer}
+          board={board}
+          activeBoards={activeBoards}
+          onPlayerMoved={onPlayerMoved}
+          className={styles.bigBoardSize}
+        />
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 const mapStateToProps = (state: AppState) => ({

diff --git a/src/views/Game/__snapshots__/Game.test.tsx.snap b/src/views/Game/__snapshots__/Game.test.tsx.snap
@@ -986,6 +986,7 @@ exports[`Game should match snapshot 1`] = `
           },
         ]
       }
+      className="bigBoardSize"
       currentPlayer={0}
       onPlayerMoved={[MockFunction]}
     />