Firebase integration; user accounts; persistent storage; deck improve…

…ments; et al. (#265) (close #118, #125, #187, #188, #205, #206, #211, #221, #257, #259, #266, #267) * Login + logout using firebase auth * minor * persistent storage of cards and decks * Refactor auth handling; listen to firebase data in a smarter way; handle log out better * minor reorg * Major refactor: user and layout state now both stored in state.global; username support * MustBeLoggedIn * minor * Login styling * minor tweaks * minor * Index parsed sentences in firebase for later lookup * Don't indexParsedSentence if not logged in * Refactor how decks work (they store card ids now), allow incomplete decks, fix bugs with decks * Consistent IDs for built-in cards * Fix sorting bug * fix tests * boy am I dumb * Relative websocket path * Copy Deck support * Replace duplicate cards * lint * minor fixes * Logging of random targets (fix #257) * and bump to v0.5 because this branch now contains all the v0.5 milestones * created login dialog * made logout work and added profile button to top right when logged in * minor * moved logout button to top right popover; minor style changes to Decks; moved search to top in Deck and Collection; submit login form on enter * fixed pixelation issue in Firefox * minor
wordbots · May 2, 2017 · b2285c8 · b2285c8
1 parent afd823f
commit b2285c8
Show file tree

Hide file tree

Showing 53 changed files with 1,121 additions and 734 deletions.
diff --git a/npm-debug.log.628292960 b/npm-debug.log.628292960
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wordbots",
-  "version": "0.4.0-alpha",
+  "version": "0.5.0-alpha",
   "apiHost": "10.0.0.9",
   "apiPort": "3000",
   "description": "A card-and-board game that showcases card game semantic parsing",
@@ -40,6 +40,7 @@
     "express": "4.15.2",
     "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "0.11.1",
+    "firebase": "^3.8.0",
     "image-webpack-loader": "^3.3.0",
     "json-loader": "^0.5.4",
     "jsx-loader": "^0.13.2",
@@ -51,7 +52,6 @@
     "react": "^15.5.4",
     "react-addons-perf": "^15.4.2",
     "react-bar-chart": "^0.1.2",
-    "react-cookie": "^2.0.6",
     "react-dom": "^15.5.4",
     "react-ga": "^2.2.0",
     "react-helmet": "^5.0.3",
@@ -70,7 +70,6 @@
     "redux-logger": "3.0.1",
     "redux-multi": "0.1.12",
     "redux-thunk": "2.2.0",
-    "redux-undo": "0.6.1",
     "repng": "^1.0.0",
     "seed-random": "^2.2.0",
     "shuffle-array": "^1.0.1",

diff --git a/src/common/actions/collection.js b/src/common/actions/collection.js
@@ -1,5 +1,6 @@
 export const CLOSE_EXPORT_DIALOG = 'CLOSE_EXPORT_DIALOG';
 export const DELETE_DECK = 'DELETE_DECK';
+export const DUPLICATE_DECK = 'DUPLICATE_DECK';
 export const EDIT_DECK = 'EDIT_DECK';
 export const EXPORT_CARDS = 'EXPORT_CARDS';
 export const IMPORT_CARDS = 'IMPORT_CARDS';
@@ -20,6 +21,13 @@ export function deleteDeck(deckId) {
   };
 }
 
+export function duplicateDeck(deckId) {
+  return {
+    type: DUPLICATE_DECK,
+    payload: { deckId }
+  };
+}
+
 export function editDeck(deckId) {
   return {
     type: EDIT_DECK,

diff --git a/src/common/actions/global.js b/src/common/actions/global.js
@@ -0,0 +1,31 @@
+export const FIREBASE_DATA = 'FIREBASE_DATA';
+export const LOGGED_IN = 'LOGGED_IN';
+export const LOGGED_OUT = 'LOGGED_OUT';
+export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
+
+export function firebaseData(data) {
+  return {
+    type: FIREBASE_DATA,
+    payload: { data }
+  };
+}
+
+export function loggedIn(user) {
+  return {
+    type: LOGGED_IN,
+    payload: { user }
+  };
+}
+
+export function loggedOut() {
+  return {
+    type: LOGGED_OUT
+  };
+}
+
+export function toggleSidebar(value) {
+  return {
+    type: TOGGLE_SIDEBAR,
+    payload: { value }
+  };
+}
diff --git a/src/common/actions/layout.js b/src/common/actions/layout.js
diff --git a/src/common/actions/user.js b/src/common/actions/user.js
diff --git a/src/common/api/user.js b/src/common/api/user.js
diff --git a/src/common/components/NavMenu.js b/src/common/components/NavMenu.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
-import { bool } from 'prop-types';
+import { bool, object } from 'prop-types';
 import { NavLink } from 'react-router-dom';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import FontIcon from 'material-ui/FontIcon';
 
 export default class NavMenu extends Component {
   static propTypes = {
-    open: bool
+    open: bool,
+    user: object
   };
 
   renderLink(path, text, icon) {
@@ -19,7 +20,6 @@ export default class NavMenu extends Component {
       </NavLink>
     );
   }
-
   render() {
     return (
       <Drawer

diff --git a/src/common/components/Sprite.js b/src/common/components/Sprite.js
@@ -38,11 +38,11 @@ export default class Sprite extends PureComponent {
 
       if (this.props.output === 'html') {
         return (
-          <img src={dataURL} width={size * (this.props.scale || 1)} height={size * (this.props.scale || 1)} style={{imageRendering: 'pixelated'}} />
+          <img className="wb-sprite" src={dataURL} width={size * (this.props.scale || 1)} height={size * (this.props.scale || 1)} style={{imageRendering: 'pixelated'}} />
         );
       } else if (this.props.output === 'svg') {
         return (
-          <image xlinkHref={dataURL} width={1} height={1} style={{imageRendering: 'pixelated'}} />
+          <image className="wb-sprite" xlinkHref={dataURL} width={1} height={1} style={{imageRendering: 'pixelated'}} />
         );
       }
     } else {

diff --git a/src/common/components/cards/ActiveDeck.js b/src/common/components/cards/ActiveDeck.js
@@ -1,18 +1,20 @@
 import React, { Component } from 'react';
-import { array, func, string } from 'prop-types';
+import { array, bool, func, string } from 'prop-types';
 import FontIcon from 'material-ui/FontIcon';
 import TextField from 'material-ui/TextField';
 import RaisedButton from 'material-ui/RaisedButton';
 import { sortBy } from 'lodash';
 
 import { groupCards } from '../../util/cards';
+import MustBeLoggedIn from '../users/MustBeLoggedIn';
 
 // Widget representing the deck currently being created or modified.
 export default class ActiveDeck extends Component {
   static propTypes = {
     id: string,
     cards: array,
     name: string,
+    loggedIn: bool,
 
     onCardClick: func,
     onSaveDeck: func
@@ -86,15 +88,17 @@ export default class ActiveDeck extends Component {
           </div>
         )}
 
-        <RaisedButton
-          label="Save Deck"
-          labelPosition="before"
-          secondary
-          disabled={this.state.name === '' || this.props.cards.length !== 30}
-          icon={<FontIcon className="material-icons">save</FontIcon>}
-          style={{width: '100%', marginTop: 20}}
-          onClick={() => { this.props.onSaveDeck(this.props.id, this.state.name, this.props.cards.map(c => c.id)); }}
-        />
+        <MustBeLoggedIn loggedIn={this.props.loggedIn}>
+          <RaisedButton
+            label="Save Deck"
+            labelPosition="before"
+            secondary
+            disabled={!this.state.name}
+            icon={<FontIcon className="material-icons">save</FontIcon>}
+            style={{width: '100%', marginTop: 20}}
+            onClick={() => { this.props.onSaveDeck(this.props.id, this.state.name, this.props.cards.map(c => c.id)); }}
+          />
+        </MustBeLoggedIn>
       </div>
     );
   }

diff --git a/src/common/components/cards/CardCreationForm.js b/src/common/components/cards/CardCreationForm.js
@@ -13,6 +13,7 @@ import 'whatwg-fetch';
 
 import { CREATABLE_TYPES, TYPE_ROBOT, TYPE_EVENT, typeToString } from '../../constants';
 import { getSentencesFromInput, requestParse } from '../../util/cards';
+import MustBeLoggedIn from '../users/MustBeLoggedIn';
 
 import NumberField from './NumberField';
 
@@ -27,6 +28,7 @@ export default class CardCreationForm extends Component {
     health: number,
     energy: number,
     isNewCard: bool,
+    loggedIn: bool,
 
     onSetName: func,
     onSetType: func,
@@ -78,7 +80,7 @@ export default class CardCreationForm extends Component {
 
   get nameError() {
     if (!this.props.name || this.props.name === '[Unnamed]') {
-      return 'A name is required.';
+      return 'This card needs a name!';
     }
   }
 
@@ -89,26 +91,48 @@ export default class CardCreationForm extends Component {
   }
 
   get costError() {
+    if (!parseInt(this.props.energy)) {
+      return 'Invalid cost.';
+    }
+
     if (this.props.energy < 0 || this.props.energy > 20) {
       return 'Not between 0 and 20.';
     }
   }
 
   get attackError() {
-    if (this.robot && (this.props.attack < 0 || this.props.attack > 10)) {
-      return 'Not between 0 and 10.';
+    if (this.robot) {
+      if (!parseInt(this.props.attack)) {
+        return 'Invalid attack.';
+      }
+
+      if (this.props.attack < 0 || this.props.attack > 10) {
+        return 'Not between 0 and 10.';
+      }
     }
   }
 
   get healthError() {
-    if (!this.event && (this.props.health < 1 || this.props.health > 10)) {
-      return 'Not between 1 and 10.';
+    if (!this.event) {
+      if (!parseInt(this.props.health)) {
+        return 'Invalid health.';
+      }
+
+      if (this.props.health < 1 || this.props.health > 10) {
+        return 'Not between 1 and 10.';
+      }
     }
   }
 
   get speedError() {
-    if (this.robot && (this.props.speed < 0 || this.props.speed > 3)) {
-      return 'Not between 0 and 3.';
+    if (this.robot) {
+      if (!parseInt(this.props.speed)) {
+        return 'Invalid speed.';
+      }
+
+      if (this.props.speed < 0 || this.props.speed > 3) {
+        return 'Not between 0 and 3.';
+      }
     }
   }
 
@@ -223,13 +247,15 @@ export default class CardCreationForm extends Component {
               onChange={v => { this.props.onSetAttribute('speed', v); }} />
           </div>
 
-          <RaisedButton
+          <MustBeLoggedIn loggedIn={this.props.loggedIn}>
+            <RaisedButton
             primary
             fullWidth
             label={this.props.isNewCard ? 'Save Edits' : 'Add to Collection'}
             disabled={!this.isValid}
             style={{marginTop: 20}}
             onTouchTap={e => { this.props.onAddToCollection(); }} />
+          </MustBeLoggedIn>
         </Paper>
       </div>
     );

diff --git a/src/common/components/cards/CardTable.js b/src/common/components/cards/CardTable.js
@@ -97,7 +97,7 @@ export default class CardTable extends Component {
               adjustForCheckbox={false}
               displaySelectAll={false}
               enableSelectAll={false}
-              style={{backgroundColor: '#f44336'}}>
+            >
               <TableRow>
                 <TableHeaderColumn width={130}>Name</TableHeaderColumn>
                 <TableHeaderColumn width={70}>Type</TableHeaderColumn>