Game Lab: S3-backed animation library

apps/src/gamelab/AnimationPicker/AnimationPickerBody.jsx

@@ -1,14 +1,17 @@
 /** Body of the animation picker dialog */
 import React from 'react';
 import Radium from 'radium';
+import Immutable from 'immutable';
 import color from '../../color';
 import gamelabMsg from '../locale';
-import animationLibrary from '../animationLibrary';
+import animationLibrary from '../animationLibrary.json';
 import ScrollableList from '../AnimationTab/ScrollableList.jsx';
 import styles from './styles';
 import AnimationPickerListItem from './AnimationPickerListItem.jsx';
 import AnimationPickerSearchBar from './AnimationPickerSearchBar.jsx';
 
+const MAX_SEARCH_RESULTS = 18;
+
 const AnimationPickerBody = React.createClass({
   propTypes: {
     is13Plus: React.PropTypes.bool,
@@ -17,7 +20,18 @@ const AnimationPickerBody = React.createClass({
     onUploadClick: React.PropTypes.func.isRequired
   },
 
+  getInitialState() {
+    return {
+      searchQuery: ''
+    };
+  },
+
+  onSearchQueryChange(evt) {
+    this.setState({searchQuery: evt.target.value});
+  },
+
   render() {
+    var pageOfResults = searchAnimations(this.state.searchQuery);
     return (
       <div>
         <h1 style={styles.title}>
@@ -28,7 +42,10 @@ const AnimationPickerBody = React.createClass({
             {gamelabMsg.animationPicker_warning()}
           </WarningLabel>
         }
-        <AnimationPickerSearchBar />
+        <AnimationPickerSearchBar
+          value={this.state.searchQuery}
+          onChange={this.onSearchQueryChange}
+        />
         <ScrollableList style={{maxHeight: 400}}> {/* TODO: Is this maxHeight appropriate? */}
           <AnimationPickerListItem
             label={gamelabMsg.animationPicker_drawYourOwn()}
@@ -40,7 +57,7 @@ const AnimationPickerBody = React.createClass({
             icon="upload"
             onClick={this.props.onUploadClick}
           />
-          {animationLibrary.map(animationProps =>
+          {pageOfResults.map(animationProps =>
             <AnimationPickerListItem
               key={animationProps.sourceUrl}
               label={`${animationProps.name} (${animationProps.frameCount})`}
@@ -63,3 +80,33 @@ export const WarningLabel = ({children}) => (
 WarningLabel.propTypes = {
   children: React.PropTypes.node
 };
+
+/**
+ * Given a search query, generate a results list of animationProps objects that
+ * can be displayed and used to add an animation to the project.
+ * @param {string} searchQuery - text entered by the user to find an animation
+ */
+function searchAnimations(searchQuery) {
+  // Make sure to generate the search regex in advance, only once.
+  // Search is case-insensitive
+  // Match any word boundary or underscore followed by the search query.
+  // Example: searchQuery "bar"
+  //   Will match: "barbell", "foo-bar", "foo_bar" or "foo bar"
+  //   Will not match: "foobar", "ubar"
+  const searchRegExp = new RegExp('(?:\\b|_)' + searchQuery, 'i');
+
+  // Generate the set of all results associated with all matched aliases
+  const resultSet = Object.keys(animationLibrary.aliases)
+      .filter(alias => searchRegExp.test(alias))
+      .reduce((resultSet, nextAlias) => {
+        return resultSet.union(animationLibrary.aliases[nextAlias]);
+      }, Immutable.Set());
+
+  // Finally alphabetize the results (for stability), take only the first
+  // MAX_SEARCH_RESULTS so we don't load too many images at once, and return
+  // the associated metadata for each result, along with
+  return resultSet
+      .sort()
+      .slice(0, MAX_SEARCH_RESULTS)
+      .map(result => animationLibrary.metadata[result]);
+}

apps/src/gamelab/AnimationPicker/AnimationPickerSearchBar.jsx

@@ -50,10 +50,20 @@ var styles = {
 };
 
 var AnimationPickerSearchBar = React.createClass({
+  propTypes: {
+    value: React.PropTypes.string.isRequired,
+    onChange: React.PropTypes.func.isRequired
+  },
+
   render: function () {
     return (
       <div>
-        <input style={styles.input} placeholder="Search for images" />
+        <input
+          style={styles.input}
+          placeholder="Search for images"
+          value={this.props.value}
+          onChange={this.props.onChange}
+        />
         <button style={styles.button}><i className="fa fa-search"></i></button>
       </div>
     );