Add auto-complete drop-down for crafting selection

Gruntfile.coffee

@@ -46,19 +46,21 @@ module.exports = (grunt)->
                 files: [expand:true, cwd:'./src/fonts', src:'**/*.ttf', dest:'./dist/fonts']
             images:
                 files: [expand:true, cwd:'./src/images/', src:['**/*.png', '**/*.jpg'], dest:'./dist/images']
-            mocha_styles:
-                files:
-                    './dist/css/mocha.css': ['./node_modules/mocha/mocha.css']
             scripts:
                 files:
                     './dist/js/backbone.js': ['./node_modules/backbone/backbone.js']
                     './dist/js/chai.js': ['./node_modules/chai/chai.js']
                     './dist/js/jade.js': ['./node_modules/jade/runtime.js']
                     './dist/js/jquery.js': ['./node_modules/jquery/dist/jquery.js']
+                    './dist/js/jquery-ui.js': ['./lib/jquery-ui/jquery-ui.js']
                     './dist/js/mocha.js': ['./node_modules/mocha/mocha.js']
                     './dist/js/underscore.js': ['./node_modules/backbone/node_modules/underscore/underscore.js']
             styles:
                 files: [expand:true, cwd:'./src/css', src:'**/*.scss', dest:'./dist/src/css']
+            style_extras:
+                files:
+                    './dist/css/jquery-ui.css': ['./lib/jquery-ui/jquery-ui.min.css']
+                    './dist/css/mocha.css': ['./node_modules/mocha/mocha.css']
 
         jade:
             pages:

package.json

@@ -29,7 +29,6 @@
   "dependencies": {
     "backbone": "^1.1.2",
     "chai": "^1.10.0",
-    "d3": "^3.5.2",
     "jade": "^1.8.2",
     "jquery": "^2.1.3",
     "mocha": "^2.0.1",

src/pages/index.jade

@@ -7,9 +7,13 @@
 
 extends ./layouts/basic
 
+append styles
+    link(rel="stylesheet", type="text/css", href="/css/jquery-ui.css")
+
 block content
     .page
 
 append scripts
+    script(src="/js/jquery-ui.js")
     script(src="/js/main.js")
     include ./includes/_google_analytics.jade

src/scripts/controllers/crafting_table_controller.coffee

@@ -5,7 +5,8 @@
 # All rights reserved.
 ###
 
-BaseController = require './base_controller'
+BaseController  = require './base_controller'
+{Event}         = require '../constants'
 InventoryParser = require '../models/inventory_parser'
 
 ########################################################################################################################
@@ -19,8 +20,14 @@ module.exports = class CraftingTableController extends BaseController
 
         @_parser = new InventoryParser
 
+        @model.catalog.on Event.change, => @onCatalogChanged()
+
     # Event Methods ################################################################################
 
+    onCatalogChanged: ->
+        return unless @rendered
+        @_updateNameAutocomplete()
+
     onHaveFieldChanged: ->
         return unless @rendered
 
@@ -38,6 +45,10 @@ module.exports = class CraftingTableController extends BaseController
         @model.name = @$nameField.val()
         @model.craft()
 
+    onNameFieldFocused: ->
+        return unless @rendered
+        @$nameField.autocomplete 'search'
+
     onQuantityFieldChanged: ->
         return unless @rendered
         @model.quantity = parseInt @$quantityField.find(":selected").val()
@@ -57,6 +68,8 @@ module.exports = class CraftingTableController extends BaseController
 
         super
 
+        @_updateNameAutocomplete()
+
         @onHaveFieldChanged()
         @onIncludingToolsFieldChanged()
         @onQuantityFieldChanged()
@@ -83,6 +96,20 @@ module.exports = class CraftingTableController extends BaseController
 
     events:
         'input textarea[name="have"]': 'onHaveFieldChanged'
+        'focus input[name="name"]': 'onNameFieldFocused'
         'input input[name="name"]': 'onNameFieldChanged'
         'input select[name="quantity"]': 'onQuantityFieldChanged'
         'change input[name="including_tools"]': 'onIncludingToolsFieldChanged'
+
+    # Private Methods ##############################################################################
+
+    _updateNameAutocomplete: ->
+        onChanged = => @onNameFieldChanged()
+
+        @$nameField.autocomplete
+            source:    @model.catalog.getRecipeNames()
+            delay:     0
+            minLength: 0
+            change:    onChanged
+            close:     onChanged
+            select:    onChanged

src/scripts/models/recipe_catalog.coffee

@@ -29,6 +29,19 @@ module.exports = class RecipeCatalog extends BaseModel
 
         return result
 
+    getRecipeNames: ->
+        nameHash = {}
+        for book in @books
+            for recipe in book.recipes
+                nameHash[recipe.name] = "#{recipe.name} (from #{book.modName} #{book.modVersion})"
+
+        names = (k for k, v of nameHash).sort()
+        result = []
+        for name in names
+            result.push value:name, label:nameHash[name]
+
+        return result
+
     loadBook: (url)->
         w.promise (resolve, reject)=>
             @trigger Event.load.started, this, url