Merge branch 'master' of https://github.com/wordbots/wordbots-core

src/common/actions/game.js

@@ -42,9 +42,10 @@ export function tutorialStep(back = false) {
   };
 }
 
-export function startSandbox() {
+export function startSandbox(card = null) {
   return {
-    type: START_SANDBOX
+    type: START_SANDBOX,
+    payload: { card }
   };
 }
 

src/common/components/ButtonInRow.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { bool, func, string } from 'prop-types';
+import RaisedButton from 'material-ui/RaisedButton';
+import FontIcon from 'material-ui/FontIcon';
+
+import Tooltip from './Tooltip';
+
+const ButtonInRow = function ({ label, icon, tooltip, onClick, disabled, width }) {
+  return (
+    <RaisedButton
+      primary
+      style={width ? { width } : {margin: '0 5px'}}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <div style={{padding: width ? 0 : '0 10px'}}>
+        <Tooltip inline text={tooltip}>
+          <FontIcon className="material-icons" style={{verticalAlign: 'middle', color: 'white'}}>
+            {icon}
+          </FontIcon>
+          <span style={{
+            fontSize: 14,
+            textTransform: 'uppercase',
+            fontWeight: '500',
+            userSelect: 'none',
+            paddingLeft: 8,
+            paddingRight: 8,
+            color: 'white'
+          }}>
+            {label}
+          </span>
+        </Tooltip>
+      </div>
+    </RaisedButton>
+  );
+};
+
+ButtonInRow.propTypes = {
+  label: string,
+  icon: string,
+  tooltip: string,
+  onClick: func,
+  disabled: bool,
+  width: string  // When width isn't explicitly set, apply margin and padding to make the button look good.
+};
+
+ButtonInRow.defaultProps = {
+  disabled: false
+};
+
+export default ButtonInRow;

src/common/components/cards/CardCreationForm.js

@@ -14,6 +14,7 @@ import { getSentencesFromInput, requestParse } from '../../util/cards';
 import { getCardTextCorpus } from '../../util/firebase';
 import { prepareBigramProbs } from '../../util/language';
 import CardTextExampleStore from '../../util/CardTextExampleStore';
+import ButtonInRow from '../ButtonInRow';
 import Tooltip from '../Tooltip';
 import MustBeLoggedIn from '../users/MustBeLoggedIn';
 
@@ -42,6 +43,7 @@ export default class CardCreationForm extends Component {
     onParseComplete: func,
     onSpriteClick: func,
     onAddToCollection: func,
+    onTestCard: func,
     onOpenDialog: func
   };
 
@@ -190,6 +192,21 @@ export default class CardCreationForm extends Component {
     this.onUpdateText(this.props.text, value);
   };
 
+  handleClickHelp = () => {
+    this.props.onOpenDialog('help');
+  };
+
+  handleClickDictionary = () => {
+    this.props.onOpenDialog('dictionary');
+  };
+
+  handleClickRandomize = () => {
+    const example = exampleStore.getExample(this.parserMode);
+    if (example) {
+      this.onUpdateText(example, this.props.type, true);
+    }
+  };
+
   onUpdateText = (text, cardType = this.props.type, dontIndex = false) => {
     const parserMode = cardType === TYPE_EVENT ? 'event' : 'object';
     const sentences = getSentencesFromInput(text);
@@ -198,24 +215,6 @@ export default class CardCreationForm extends Component {
     requestParse(sentences, parserMode, this.props.onParseComplete, !dontIndex);
   };
 
-  renderButton = (label, icon, tooltip, onClick, disabled = false) => (
-      <RaisedButton
-        primary
-        style={{width: '31%', marginBottom: 8}}
-        onClick={onClick}
-        disabled={disabled}
-      >
-        <Tooltip inline text={tooltip}>
-          <FontIcon className="material-icons" style={{verticalAlign: 'middle', color: 'white'}}>
-            {icon}
-          </FontIcon>
-          <span style={this.styles.buttonText}>
-            {label}
-          </span>
-        </Tooltip>
-      </RaisedButton>
-  )
-
   renderAttributeField(attribute, enabled = true, opts = {}) {
     return (
       <NumberField
@@ -236,20 +235,32 @@ export default class CardCreationForm extends Component {
       <div style={this.styles.container}>
         <div style={{display: 'flex', justifyContent: 'center'}}>
           <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12, width: '100%', maxWidth: 800}}>
-            {this.renderButton('Help', 'help_outline', 'Learn more about creating a card.', () => {
-              this.props.onOpenDialog('help');
-            })}
-            {this.renderButton('Dictionary', 'book',
-              'Check out all of the terms and actions that the parser supports.', () => {
-                this.props.onOpenDialog('dictionary');
-            })}
-            {this.renderButton('Randomize', 'refresh',
-              `Generate random text for the card. ${examplesLoaded ? '' : '(Loading examples ...)'}`, () => {
-              const example = exampleStore.getExample(this.parserMode);
-              if (example) {
-                this.onUpdateText(example, this.props.type, true);
-              }
-            }, !examplesLoaded)}
+            <ButtonInRow
+              label="Help"
+              icon="help_outline"
+              tooltip="Learn more about creating a card."
+              width="24%"
+              onClick={this.handleClickHelp} />
+            <ButtonInRow
+              label="Dictionary"
+              icon="book"
+              tooltip="Check out all of the terms and actions that the parser supports."
+              width="24%"
+              onClick={this.handleClickDictionary} />
+            <ButtonInRow
+              label="Randomize"
+              icon="refresh"
+              tooltip={`Generate random text for the card. ${examplesLoaded ? '' : '(Loading examples ...)'}`}
+              onClick={this.handleClickRandomize}
+              width="24%"
+              disabled={!examplesLoaded} />
+            <ButtonInRow
+              label="Test"
+              icon="videogame_asset"
+              tooltip="Test out this card in a practice game."
+              onClick={this.props.onTestCard}
+              width="24%"
+              disabled={!this.isValid} />
           </div>
         </div>
 

src/common/components/cards/DeckSummary.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import { arrayOf, bool, func, object } from 'prop-types';
 import Badge from 'material-ui/Badge';
 import Paper from 'material-ui/Paper';
-import RaisedButton from 'material-ui/RaisedButton';
 import FontIcon from 'material-ui/FontIcon';
 import { filter, sortBy } from 'lodash';
 
 import { TYPE_ROBOT, TYPE_EVENT, TYPE_STRUCTURE } from '../../constants';
 import { groupCards } from '../../util/cards';
+import ButtonInRow from '../ButtonInRow';
 import CardTooltip from '../card/CardTooltip';
 import MustBeLoggedIn from '../users/MustBeLoggedIn';
 
@@ -19,7 +19,8 @@ export default class DeckSummary extends Component {
 
     onDelete: func,
     onDuplicate: func,
-    onEdit: func
+    onEdit: func,
+    onTry: func
   };
 
   get styles() {
@@ -53,16 +54,24 @@ export default class DeckSummary extends Component {
     };
   }
 
+  get isDefaultDeck() {
+    return this.props.deck.id.startsWith('[default-');
+  }
+
   handleClickDelete = () => {
     this.props.onDelete(this.props.deck.id);
-  }
+  };
 
   handleClickDuplicate = () => {
     this.props.onDuplicate(this.props.deck.id);
-  }
+  };
 
   handleClickEdit = () => {
     this.props.onEdit(this.props.deck.id);
+  };
+
+  handleClickTry = () => {
+    this.props.onTry(this.props.deck);
   }
 
   renderCard(card, idx) {
@@ -126,27 +135,34 @@ export default class DeckSummary extends Component {
           </div>
         </div>
 
-        <div>
-          <MustBeLoggedIn loggedIn={this.props.loggedIn}>
-            <RaisedButton
-              primary
-              label="Edit"
-              disabled={deck.id.startsWith('[default-')}
-              onClick={this.handleClickEdit}
-              style={{float: 'left', marginRight: 10, width: '31%'}} />
-            <RaisedButton
-              primary
-              label="Duplicate"
-              onClick={this.handleClickDuplicate}
-              style={{float: 'left', marginRight: 10, width: '31%'}} />
-            <RaisedButton
-              primary
-              label="Delete"
-              disabled={deck.id.startsWith('[default-')}
-              onClick={this.handleClickDelete}
-              style={{float: 'left', width: '31%'}}/>
-          </MustBeLoggedIn>
-        </div>
+        <MustBeLoggedIn loggedIn={this.props.loggedIn} style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%'
+        }}>
+          <ButtonInRow
+            label="Edit"
+            icon="edit"
+            tooltip="Edit the cards in this deck."
+            onClick={this.handleClickEdit}
+            disabled={this.isDefaultDeck} />
+          <ButtonInRow
+            label="Duplicate"
+            icon="add_circle"
+            tooltip="Create a copy of this deck."
+            onClick={this.handleClickDuplicate} />
+          <ButtonInRow
+            label="Delete"
+            icon="delete"
+            tooltip="Delete this deck. This operation cannot be undone!"
+            onClick={this.handleClickDuplicate}
+            disabled={this.isDefaultDeck} />
+          <ButtonInRow
+            label="Try"
+            icon="videogame_asset"
+            tooltip="Try this deck in a practice game."
+            onClick={this.handleClickTry} />
+        </MustBeLoggedIn>
 
         <div style={{padding: '0 10px 10px 10px'}}>
           <div style={{float: 'left', marginRight: 30}}>

src/common/components/game/GameArea.js

@@ -77,8 +77,6 @@ export default class GameArea extends Component {
   /* eslint-disable react/no-unused-prop-types */
   static propTypes = {
     ...gameProps,
-
-    chatOpen: bool,
     message: string,
 
     onPassTurn: func,

src/common/components/game/VictoryScreen.js

@@ -28,7 +28,7 @@ const VictoryScreen = ({ winnerColor, winnerName, onClick }) => {
     }}>
       <div>
         <div style={{fontSize: 96}}>{`${winnerName} wins!`}</div>
-        <div>Click anywhere to return to the lobby.</div>
+        <div>Click anywhere to leave the game.</div>
       </div>
     </div>
   );

src/common/components/users/MustBeLoggedIn.js

@@ -7,7 +7,12 @@ import Tooltip from '../Tooltip';
 export default class MustBeLoggedIn extends Component {
   static propTypes = {
     loggedIn: bool,
-    children: oneOfType([arrayOf(object), object])
+    children: oneOfType([arrayOf(object), object]),
+    style: object
+  };
+
+  static defaultProps = {
+    style: {}
   };
 
   renderDisabledChild(child) {
@@ -33,13 +38,13 @@ export default class MustBeLoggedIn extends Component {
   render() {
     if (this.props.loggedIn) {
       return (
-        <div>
+        <div style={this.props.style}>
           {this.props.children}
         </div>
       );
     } else {
       return (
-        <div className="notAllowed">
+        <div className="notAllowed" style={this.props.style}>
           {React.Children.map(this.props.children, this.renderDisabledChild)}
         </div>
       );

src/common/containers/Creator.js

@@ -6,10 +6,12 @@ import { withRouter } from 'react-router';
 import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
+import { createCardFromProps } from '../util/cards';
 import RouterDialog from '../components/RouterDialog';
 import CardCreationForm from '../components/cards/CardCreationForm';
 import CardPreview from '../components/cards/CardPreview';
 import * as creatorActions from '../actions/creator';
+import * as gameActions from '../actions/game';
 
 export function mapStateToProps(state) {
   return {
@@ -49,6 +51,9 @@ export function mapDispatchToProps(dispatch) {
     },
     onAddToCollection: (props) => {
       dispatch(creatorActions.addToCollection(props));
+    },
+    onStartSandbox: (card) => {
+      dispatch(gameActions.startSandbox(card));
     }
   };
 }
@@ -75,7 +80,8 @@ export class Creator extends Component {
     onSetAttribute: func,
     onParseComplete: func,
     onSpriteClick: func,
-    onAddToCollection: func
+    onAddToCollection: func,
+    onStartSandbox: func
   };
 
   static defaultProps = {
@@ -92,6 +98,12 @@ export class Creator extends Component {
     RouterDialog.openDialog(this.props.history, dialogPath);
   }
 
+  testCard = () => {
+    const card = createCardFromProps(this.props);
+    this.props.onStartSandbox(card);
+    this.props.history.push('/sandbox');
+  }
+
   addToCollection = () => {
     this.props.onAddToCollection(this.props);
     this.props.history.push('/collection');
@@ -121,6 +133,7 @@ export class Creator extends Component {
             onParseComplete={this.props.onParseComplete}
             onSpriteClick={this.props.onSpriteClick}
             onOpenDialog={this.openDialog}
+            onTestCard={this.testCard}
             onAddToCollection={this.addToCollection} />
           <CardPreview
             name={this.props.name}