Add show total button

Teemeam · Apr 3, 2022 · 24f8c88 · 24f8c88
1 parent b264444
commit 24f8c88
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 15 deletions.
diff --git a/dist/js/bundle.js b/dist/js/bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "maxi-yatzy",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "engines": {
     "node": ">=12.14.1"
   },

diff --git a/src/js/components/Button/index.styled.js b/src/js/components/Button/index.styled.js
@@ -11,8 +11,8 @@ export const Button = styled.button`
   padding: 8px 12px;
   border: 2px solid black;
   border-radius: ${ props => props.loadDataButton ? '0 10px 10px 0' : '10px' };
-  background-color: ${ props => props.showLoadSaveMenu ? 'black' : 'white' };
-  color: ${ props => props.showLoadSaveMenu ? 'white' : 'black' };
+  background-color: ${ props => props.showLoadSaveMenu || props.showTotal ? 'black' : 'white' };
+  color: ${ props => props.showLoadSaveMenu || props.showTotal ? 'white' : 'black' };
   cursor: pointer;
   :hover {
     background-color: black;

diff --git a/src/js/components/Combinations/index.jsx b/src/js/components/Combinations/index.jsx
@@ -26,7 +26,7 @@ import chance from './../../../img/chance.svg';
 import * as s from './index.styled.js';
 
 export const Combinations = (props) => {
-  const { playerCount } = props;
+  const { playerCount, showTotal } = props;
 
   return (<s.Container playerCount={ playerCount }>
     <table>
@@ -173,14 +173,17 @@ export const Combinations = (props) => {
         <tr>
           <td className='maxi-yatzy'>maxi yatzy</td>
         </tr>
-        <tr>
-          <td className='total'>TOTAL</td>
-        </tr>
+        { showTotal && (
+          <tr>
+            <td className='total'>TOTAL</td>
+          </tr>
+        )}
       </tbody>
     </table>
   </s.Container>);
 };
 
 Combinations.propTypes = {
   playerCount: PropTypes.number.isRequired,
+  showTotal: PropTypes.bool.isRequired,
 }
diff --git a/src/js/components/PlayerColumn/index.jsx b/src/js/components/PlayerColumn/index.jsx
@@ -14,6 +14,7 @@ export const PlayerColumn = (props) => {
     bonus,
     total,
     focusedInput,
+    showTotal,
     handleFocus,
     handleBlur,
     handleKeyDown,
@@ -330,11 +331,13 @@ export const PlayerColumn = (props) => {
               onChange={ e => updateScore(player, 19, e.target.value) }/>
           </td>
         </tr>
-        <tr>
-          <td className='total'>
-            { total }
-          </td>
-        </tr>
+        { showTotal && (
+          <tr>
+            <td className='total'>
+              { total }
+            </td>
+          </tr>
+        )}
       </tbody>
     </table>
   </s.Container>);
@@ -348,6 +351,7 @@ PlayerColumn.propTypes = {
   bonus: PropTypes.number.isRequired,
   total: PropTypes.number.isRequired,
   focusedInput: PropTypes.array.isRequired,
+  showTotal: PropTypes.bool.isRequired,
   handleFocus: PropTypes.func.isRequired,
   handleBlur: PropTypes.func.isRequired,
   handleKeyDown: PropTypes.func.isRequired,

diff --git a/src/js/components/ScoreCard/index.jsx b/src/js/components/ScoreCard/index.jsx
@@ -7,6 +7,7 @@ import { GameMenu } from './../GameMenu/index.jsx';
 import { PlayerNames } from './../PlayerNames/index.jsx';
 import { Combinations } from './../Combinations/index.jsx';
 import { PlayerColumn } from './../PlayerColumn/index.jsx';
+import { ShowTotalButton } from './../ShowTotalButton/index.jsx';
 
 /* Styles */
 import * as s from './index.styled.js';
@@ -46,6 +47,7 @@ export const ScoreCard = (props) => {
   });
   const [resetRequested, setResetRequested] = useState(false);
   const [focusedInput, setFocusedInput] = useState([null, null]);
+  const [showTotal, setShowTotal] = useState(true);
 
   /* Get game data from localStorage */
   useEffect(() => {
@@ -212,6 +214,15 @@ export const ScoreCard = (props) => {
     handleRequest();
   }
 
+  /* Handle show total */
+  function handleShowTotal() {
+    if (showTotal) {
+      setShowTotal(false)
+    } else {
+      setShowTotal(true)
+    }
+  }
+
   return (<s.Container>
     <GameMenu
       data={ data }
@@ -227,7 +238,7 @@ export const ScoreCard = (props) => {
       updateName={ updateName }/>
 
     <div className='tbody-wrapper'>
-      <Combinations playerCount={ playerCount }/>
+      <Combinations playerCount={ playerCount } showTotal={ showTotal }/>
 
       {/* Player 1 column */}
       { playerCount > 0 &&
@@ -239,6 +250,7 @@ export const ScoreCard = (props) => {
           bonus={ data[0].bonus }
           total={ data[0].total }
           focusedInput={ focusedInput }
+          showTotal={ showTotal }
           handleFocus={ handleFocus }
           handleBlur={ handleBlur }
           handleKeyDown={ handleKeyDown }
@@ -255,6 +267,7 @@ export const ScoreCard = (props) => {
           bonus={ data[1].bonus }
           total={ data[1].total }
           focusedInput={ focusedInput }
+          showTotal={ showTotal }
           handleFocus={ handleFocus }
           handleBlur={ handleBlur }
           handleKeyDown={ handleKeyDown }
@@ -271,6 +284,7 @@ export const ScoreCard = (props) => {
           bonus={ data[2].bonus }
           total={ data[2].total }
           focusedInput={ focusedInput }
+          showTotal={ showTotal }
           handleFocus={ handleFocus }
           handleBlur={ handleBlur }
           handleKeyDown={ handleKeyDown }
@@ -287,12 +301,15 @@ export const ScoreCard = (props) => {
           bonus={ data[3].bonus }
           total={ data[3].total }
           focusedInput={ focusedInput }
+          showTotal={ showTotal }
           handleFocus={ handleFocus }
           handleBlur={ handleBlur }
           handleKeyDown={ handleKeyDown }
           updateScore={ updateScore }/>
       }
     </div>
+
+    <ShowTotalButton showTotal={ showTotal } handleShowTotal={ handleShowTotal }/>
   </s.Container>);
 };
 

diff --git a/src/js/components/ShowTotalButton/index.jsx b/src/js/components/ShowTotalButton/index.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/* Styles */
+import * as s from './index.styled.js';
+import { Button } from './../Button/index.styled.js';
+
+export const ShowTotalButton = (props) => {
+  const { showTotal, handleShowTotal } = props;
+
+  return (<s.Container>
+    <Button showTotal={ showTotal } onClick={ handleShowTotal }>Show total</Button>
+  </s.Container>);
+};
+
+ShowTotalButton.propTypes = {
+  showTotal: PropTypes.bool.isRequired,
+  handleShowTotal: PropTypes.func.isRequired,
+}
diff --git a/src/js/components/ShowTotalButton/index.styled.js b/src/js/components/ShowTotalButton/index.styled.js
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+  margin: 30px 0 0 0;
+  text-align: center;
+`;