styling for cup

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lodash": "^4.17.15",
+    "mdbreact": "^4.21.0",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dice-complete": "^1.2.0",

src/App.css

@@ -1,3 +1,5 @@
 .App {
   text-align: center;
+  background-color: rgba(0,0,0,0.8);
+  height: 100vw;
 }

src/common/button/Button.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import fp from 'lodash/fp';
+import { MDBBtn } from 'mdbreact';
+import defaultStyles from './Button.module.scss';
+
+const StyledButton = props => (
+    <MDBBtn
+        color={props.color}
+        className={props.styles.Button}
+        onClick={props.onClick}
+        type={props.type}
+        disabled={props.disabled}
+    >
+        {props.text}
+    </MDBBtn>
+);
+
+StyledButton.defaultProps = {
+    color: 'primary',
+    onClick: fp.noop,
+    styles: defaultStyles,
+    text: 'Button',
+    type: '',
+    disabled: false
+};
+
+StyledButton.propTypes = {
+    color: PropTypes.string,
+    onClick: PropTypes.func,
+    styles: PropTypes.objectOf(PropTypes.string),
+    text: PropTypes.string,
+    type: PropTypes.string,
+    disabled: PropTypes.bool
+};
+
+export default StyledButton;

src/common/button/Button.module.scss

@@ -0,0 +1,3 @@
+.Button{
+    height: auto;
+  }

src/common/dropdown/Dropdown.jsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import {
+    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
+} from 'mdbreact';
+import PropTypes from 'prop-types';
+import fp from 'lodash/fp';
+
+const Dropdown = props => {
+    const clickHandler = useCallback(item => () => props.onItemClick(item), [props]);
+
+    return (
+        <MDBDropdown disabled={props.disabled}>
+            <MDBDropdownToggle color={props.color}>
+                {props.title}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu basic>
+                {props.items.map(item => (
+                    <MDBDropdownItem onClick={clickHandler(item)}>{item}</MDBDropdownItem>
+                ))}
+            </MDBDropdownMenu>
+        </MDBDropdown>
+    );
+};
+
+Dropdown.defaultProps = {
+    color: 'primary',
+    title: 'Dropdown',
+    items: [],
+    onItemClick: fp.noop,
+    disabled: false
+};
+
+Dropdown.propTypes = {
+    color: PropTypes.string,
+    title: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.string),
+    onItemClick: PropTypes.func,
+    disabled: PropTypes.bool
+};
+
+export default Dropdown;

src/perudo/Dice.jsx

@@ -47,4 +47,4 @@ Dice.propTypes = {
     dieSize: PropTypes.number
 };
 
-export default Dice;
+export default Dice;

src/perudo/Perudo.jsx

@@ -1,10 +1,13 @@
-
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable no-plusplus */
 import fp from 'lodash/fp';
 import React, {
     useState, useCallback, createRef, useEffect, useLayoutEffect
 } from 'react';
 import PropTypes from 'prop-types';
 
+import Shaker from './Shaker';
 import Button from '../common/button/Button';
 import Dice from './Dice';
 import styles from './Perudo.module.scss';
@@ -35,19 +38,19 @@ const Perudo = props => {
         getRefs();
         setRolled(true);
         rollDice();
-    }, [numOfDice, getRefs, rollDice]);
+    }, [numOfDice]);
 
     const reduceDice = useCallback(() => {
         setNumOfDice(numOfDice - 1);
         setRolls([]);
         getRefs();
         props.onLoseDice();
-    }, [numOfDice, props, getRefs]);
+    }, [numOfDice, props.onLoseDice]);
 
     const toggleHidden = useCallback(() => { setHidden(!hidden); }, [hidden]);
 
-    useEffect(() => { rollDice(); }, [rolled, rollDice]);
-    useLayoutEffect(() => { getRefs(); }, [numOfDice, getRefs]);
+    useEffect(() => { rollDice(); }, [rolled]);
+    useLayoutEffect(() => { getRefs(); }, [numOfDice]);
 
     return (
         <div className={styles.perudoContainer}>
@@ -76,15 +79,12 @@ const Perudo = props => {
                     </div>
                 )
                 : (
-                    <div
-                        className={styles.perudoCup}
-                        style={{ borderBottom: `300px solid ${props.faceColor}` }}
+                    <Shaker
+                        topColor={props.topColor}
+                        faceColor={props.faceColor}
+                        outlineColor={props.outlineColor}
                         onClick={readyForRoll}
-                    >
-                        <div className={styles.cupTitle}>
-                            <div className={styles.cupText} style={{ color: `${props.dotColor}` }}>Roll the Dice!</div>
-                        </div>
-                    </div>
+                    />
                 )}
             <div className={styles.valueContainer} style={hidden ? { visibility: 'hidden' } : { visibility: 'unset' }}>
                 {rolls.map((value, i) => (
@@ -98,6 +98,7 @@ const Perudo = props => {
 Perudo.defaultProps = {
     dotColor: '#ffffff',
     faceColor: '#FF6347',
+    topColor: '#CF503A',
     outlineColor: '#8B0000',
     outline: false,
     numOfDice: 5,
@@ -108,11 +109,12 @@ Perudo.defaultProps = {
 Perudo.propTypes = {
     dotColor: PropTypes.string,
     faceColor: PropTypes.string,
+    topColor: PropTypes.string,
     outlineColor: PropTypes.string,
     outline: PropTypes.bool,
     numOfDice: PropTypes.number,
     onLoseDice: PropTypes.func,
     dieSize: PropTypes.number
 };
 
-export default Perudo;
+export default Perudo;

src/perudo/Perudo.module.scss

@@ -1,9 +1,7 @@
-
 .perudoContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 30px;
 }
 
 .buttonContainer {
@@ -24,22 +22,7 @@
     padding: 5px;
 }
 
-.perudoCup {
-	border-left: 40px solid transparent;
-    border-right: 40px solid transparent;
-    border-radius: 10px;
-	height: 0;
-    width: 250px;
-    color: white;
-    text-align: center;
-    font-size: 20px;
-    cursor: pointer;
-    .cupTitle {
-        margin-top: 200px;
-    }
-}
-
 .currentGuess {
     color: white;
     font-size: 30px;
-} 
+}

src/perudo/PerudoContainer.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useCallback } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -15,7 +14,11 @@ const PerudoContainer = ({ submitGuess, currentGuess, ...props }) => {
     const [quantity, setQuantity] = useState('');
     const [value, setValue] = useState('');
 
-    const submitBid = useCallback(() => { submitGuess({ quantity, value }); }, [quantity, value]);
+    const submitBid = useCallback(() => {
+        if ((quantity >= currentGuess.quantity && value > currentGuess.value) || (quantity > currentGuess.quantity)) {
+            submitGuess({ quantity, value });
+        } else alert('invalid guess');
+    }, [quantity, value]);
 
     return (
         numOfDice > 0 ? (

src/perudo/Shaker.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import PropTypes from 'prop-types';
+import fp from 'lodash/fp';
+
+import styles from './Shaker.module.scss';
+
+const Shaker = props => (
+    <div className={styles.perudoCup} onClick={props.onClick}>
+        <div className={styles.top} style={{ backgroundColor: `${props.topColor}`, boxShadow: `0px 1px ${props.outlineColor}` }} />
+        <div
+            className={styles.middle}
+            style={{ borderBottom: `300px solid ${props.faceColor}` }}
+        />
+        <div className={styles.bottomRidge} style={{ backgroundColor: `${props.faceColor}` }} />
+        <div className={styles.bottom} style={{ backgroundColor: `${props.faceColor}` }} />
+        <div className={styles.bottomLip} style={{ backgroundColor: `${props.topColor}` }} />
+    </div>
+);
+
+Shaker.defaultProps = {
+    onClick: fp.noop,
+    faceColor: '#FF6347',
+    topColor: '#CF503A',
+    outlineColor: '#8B0000'
+};
+
+Shaker.propTypes = {
+    onClick: PropTypes.func,
+    faceColor: PropTypes.string,
+    topColor: PropTypes.string,
+    outlineColor: PropTypes.string
+};
+
+
+export default Shaker;

src/perudo/Shaker.module.scss

@@ -0,0 +1,63 @@
+.perudoCup {
+    margin: 60px 0;
+    position: relative;
+    cursor: pointer;
+}
+
+.middle {
+	border-left: 40px solid transparent;
+    border-right: 40px solid transparent;
+    border-radius: 10px;
+	height: 0;
+    width: 170px;
+    text-align: center;
+    font-size: 20px;
+}
+
+.top {
+    width: 170px;
+	height: 50px;
+	-moz-border-radius: 85px / 25px;
+	-webkit-border-radius: 85px / 25px;
+	border-radius: 85px / 25px;
+    position:absolute;
+    top: -25px;
+    margin-left: 40px;
+}
+
+.bottom {
+    width: 256px;
+	height: 70px;
+	-moz-border-radius: 125px / 35px;
+	-webkit-border-radius: 125px / 35px;
+	border-radius: 125px / 35px;
+    position: absolute;
+    top: 250px;
+    z-index: 2;
+    margin-left: -3px;
+}
+
+.bottomRidge {
+    width: 246px;
+	height: 70px;
+	-moz-border-radius: 125px / 35px;
+	-webkit-border-radius: 125px / 35px;
+	border-radius: 125px / 35px;
+    position: absolute;
+    top: 243px;
+    z-index: 3;
+    margin-left: 2px;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+}
+
+.bottomLip {
+    width: 254px;
+	height: 70px;
+	-moz-border-radius: 125px / 35px;
+	-webkit-border-radius: 125px / 35px;
+	border-radius: 125px / 35px;
+    position: absolute;
+    top: 255px;
+    box-shadow: 0px 10px 5px grey;
+    margin-left: -2px;
+}

src/perudo/actions.js

@@ -1,4 +1,3 @@
-
 export const SUBMIT_GUESS_STARTED = 'SUBMIT_GUESS_STARTED';
 export const SUBMIT_GUESS_SUCCESS = 'SUBMIT_GUESS_SUCCESS';
 export const SUBMIT_GUESS_ERROR = 'SUBMIT_GUESS_ERROR';

src/perudo/reducer.js

@@ -1,4 +1,3 @@
-
 import * as actions from './actions';
 
 const initState = {