Fixed merge conflict.

app/lib/AudioPlayer.coffee

@@ -89,8 +89,10 @@ class AudioPlayer extends CocoClass
 
   playSound: (name, volume=1, delay=0, pos=null) ->
     audioOptions = {volume: (me.get('volume') ? 1) * volume, delay: delay}
-    unless @camera is null or pos is null
+    filename = if _.string.startsWith(name, '/file/') then name else '/file/' + name
-      audioOptions = @applyPanning audioOptions, pos
+    unless (filename of cache) and createjs.Sound.loadComplete filename
+      @soundsToPlayWhenLoaded[name] = audioOptions.volume
+    audioOptions = @applyPanning audioOptions, pos if @camera and pos
     instance = createjs.Sound.play name, audioOptions
     instance
 

app/lib/surface/CocoSprite.coffee

@@ -678,14 +678,14 @@ module.exports = CocoSprite = class CocoSprite extends CocoClass
     label = @addLabel 'dialogue', Label.STYLE_DIALOGUE
     label.setText e.blurb or '...'
     sound = e.sound ? AudioPlayer.soundForDialogue e.message, @thangType.get 'soundTriggers'
-    @instance?.stop()
+    @dialogueSoundInstance?.stop()
-    if @instance = @playSound sound, false
+    if @dialogueSoundInstance = @playSound sound, false
-      @instance.addEventListener 'complete', -> Backbone.Mediator.publish 'dialogue-sound-completed'
+      @dialogueSoundInstance.addEventListener 'complete', -> Backbone.Mediator.publish 'dialogue-sound-completed'
     @notifySpeechUpdated e
 
   onClearDialogue: (e) ->
     @labels.dialogue?.setText null
-    @instance?.stop()
+    @dialogueSoundInstance?.stop()
     @notifySpeechUpdated {}
 
   setNameLabel: (name) ->
@@ -733,6 +733,7 @@ module.exports = CocoSprite = class CocoSprite extends CocoClass
     return null unless sound
     delay = if withDelay and sound.delay then 1000 * sound.delay / createjs.Ticker.getFPS() else 0
     name = AudioPlayer.nameForSoundReference sound
+    AudioPlayer.preloadSoundReference sound
     instance = AudioPlayer.playSound name, volume, delay, @getWorldPosition()
     #console.log @thang?.id, 'played sound', name, 'with delay', delay, 'volume', volume, 'and got sound instance', instance
     instance

app/lib/surface/CoordinateDisplay.coffee

@@ -11,7 +11,9 @@ module.exports = class CoordinateDisplay extends createjs.Container
     super()
     @initialize()
     @camera = options.camera
-    console.error 'CoordinateDisplay needs camera.' unless @camera
+    @layer = options.layer
+    console.error @toString(), 'needs a camera.' unless @camera
+    console.error @toString(), 'needs a layer.' unless @layer
     @build()
     @show = _.debounce @show, 125
     Backbone.Mediator.subscribe(channel, @[func], @) for channel, func of @subscriptions
@@ -21,6 +23,8 @@ module.exports = class CoordinateDisplay extends createjs.Container
     @show = null
     @destroyed = true
 
+  toString: -> '<CoordinateDisplay>'
+
   build: ->
     @mouseEnabled = @mouseChildren = false
     @addChild @background = new createjs.Shape()
@@ -30,6 +34,7 @@ module.exports = class CoordinateDisplay extends createjs.Container
     @label.shadow = new createjs.Shadow('#000000', 1, 1, 0)
     @background.name = 'Coordinate Display Background'
     @pointMarker.name = 'Point Marker'
+    @layer.addChild @
 
   onMouseOver: (e) -> @mouseInBounds = true
   onMouseOut: (e) -> @mouseInBounds = false

app/lib/surface/CoordinateGrid.coffee

@@ -0,0 +1,94 @@
+CocoClass = require 'lib/CocoClass'
+
+module.exports = class CoordinateGrid extends CocoClass
+  subscriptions:
+    'level-toggle-grid': 'onToggleGrid'
+
+  shortcuts:
+    'ctrl+g, ⌘+g': 'onToggleGrid'
+
+  constructor: (options, worldSize) ->
+    super()
+    options ?= {}
+    @camera = options.camera
+    @layer = options.layer
+    @textLayer = options.textLayer
+    console.error @toString(), 'needs a camera.' unless @camera
+    console.error @toString(), 'needs a layer.' unless @layer
+    console.error @toString(), 'needs a textLayer.' unless @textLayer
+    @build worldSize
+
+  destroy: ->
+    super()
+
+  toString: -> '<CoordinateGrid>'
+
+  build: (worldSize) ->
+    worldWidth = worldSize[0] ? 80
+    worldHeight = worldSize[1] ? 68
+    @gridContainer = new createjs.Container()
+    @gridShape = new createjs.Shape()
+    @gridContainer.addChild @gridShape
+    @gridContainer.mouseEnabled = false
+    @gridShape.alpha = 0.125
+    @gridShape.graphics.setStrokeStyle 1
+    @gridShape.graphics.beginStroke 'blue'
+    gridSize = Math.round(worldWidth / 20)
+    wopStart = x: 0, y: 0
+    wopEnd = x: worldWidth, y: worldHeight
+    supStart = @camera.worldToSurface wopStart
+    supEnd = @camera.worldToSurface wopEnd
+    wop = x: wopStart.x, y: wopStart.y
+    @labels = []
+    linesDrawn = 0
+    while wop.x <= wopEnd.x
+      sup = @camera.worldToSurface wop
+      @gridShape.graphics.mt(sup.x, supStart.y).lt(sup.x, supEnd.y)
+      if ++linesDrawn % 2
+        t = new createjs.Text(wop.x.toFixed(0), '16px Arial', 'blue')
+        t.textAlign = 'center'
+        t.textBaseline = 'bottom'
+        t.x = sup.x
+        t.y = supStart.y
+        t.alpha = 0.75
+        @labels.push t
+      wop.x += gridSize
+      if wopEnd.x < wop.x <= wopEnd.x - gridSize / 2
+        wop.x = wopEnd.x
+    linesDrawn = 0
+    while wop.y <= wopEnd.y
+      sup = @camera.worldToSurface wop
+      @gridShape.graphics.mt(supStart.x, sup.y).lt(supEnd.x, sup.y)
+      if ++linesDrawn % 2
+        t = new createjs.Text(wop.y.toFixed(0), '16px Arial', 'blue')
+        t.textAlign = 'left'
+        t.textBaseline = 'middle'
+        t.x = 0
+        t.y = sup.y
+        t.alpha = 0.75
+        @labels.push t
+      wop.y += gridSize
+      if wopEnd.y < wop.y <= wopEnd.y - gridSize / 2
+        wop.y = wopEnd.y
+    @gridShape.graphics.endStroke()
+    bounds = x: supStart.x, y: supEnd.y, width: supEnd.x - supStart.x, height: supStart.y - supEnd.y
+    return unless bounds?.width and bounds.height
+    @gridContainer.cache bounds.x, bounds.y, bounds.width, bounds.height
+
+  showGrid: ->
+    return if @gridShowing()
+    @layer.addChild @gridContainer
+    @textLayer.addChild label for label in @labels
+
+  hideGrid: ->
+    return unless @gridShowing()
+    @layer.removeChild @gridContainer
+    @textLayer.removeChild label for label in @labels
+
+  gridShowing: ->
+    @gridContainer?.parent?
+
+  onToggleGrid: (e) ->
+    e?.preventDefault?()
+    if @gridShowing() then @hideGrid() else @showGrid()
+

app/lib/surface/IndieSprite.coffee

@@ -26,6 +26,8 @@ module.exports = IndieSprite = class IndieSprite extends CocoSprite
     thang.getActionName = -> thang.action
     thang.acts = true
     thang.isSelectable = true
+    thang.team = options.team
+    thang.teamColors = options.teamColors
     thang
 
   onNoteGroupStarted: => @scriptRunning = true

app/lib/surface/SpriteBoss.coffee

@@ -111,7 +111,7 @@ module.exports = class SpriteBoss extends CocoClass
     unless thangType = @thangTypeFor indieSprite.thangType
       console.warn "Need to convert #{indieSprite.id}'s ThangType #{indieSprite.thangType} to a ThangType reference. Until then, #{indieSprite.id} won't show up."
       return
-    sprite = new IndieSprite thangType, @createSpriteOptions {thangID: indieSprite.id, pos: indieSprite.pos, sprites: @sprites, colorConfig: indieSprite.colorConfig}
+    sprite = new IndieSprite thangType, @createSpriteOptions {thangID: indieSprite.id, pos: indieSprite.pos, sprites: @sprites, team: indieSprite.team, teamColors: @world.getTeamColors()}
     @addSprite sprite, sprite.thang.id
 
   createOpponentWizard: (opponent) ->

app/lib/surface/Surface.coffee

@@ -12,6 +12,7 @@ CountdownScreen = require './CountdownScreen'
 PlaybackOverScreen = require './PlaybackOverScreen'
 DebugDisplay = require './DebugDisplay'
 CoordinateDisplay = require './CoordinateDisplay'
+CoordinateGrid = require './CoordinateGrid'
 SpriteBoss = require './SpriteBoss'
 PointChooser = require './PointChooser'
 RegionChooser = require './RegionChooser'
@@ -24,7 +25,7 @@ module.exports = Surface = class Surface extends CocoClass
   surfaceLayer: null
   surfaceTextLayer: null
   screenLayer: null
-  gridLayer: null  # TODO: maybe
+  gridLayer: null
 
   spriteBoss: null
 
@@ -56,8 +57,6 @@ module.exports = Surface = class Surface extends CocoClass
     'level-set-playing': 'onSetPlaying'
     'level-set-debug': 'onSetDebug'
     'level-toggle-debug': 'onToggleDebug'
-    'level-set-grid': 'onSetGrid'
-    'level-toggle-grid': 'onToggleGrid'
     'level-toggle-pathfinding': 'onTogglePathFinding'
     'level-set-time': 'onSetTime'
     'level-set-surface-camera': 'onSetCamera'
@@ -75,7 +74,6 @@ module.exports = Surface = class Surface extends CocoClass
 
   shortcuts:
     'ctrl+\\, ⌘+\\': 'onToggleDebug'
-    'ctrl+g, ⌘+g': 'onToggleGrid'
     'ctrl+o, ⌘+o': 'onTogglePathFinding'
 
   # external functions
@@ -103,6 +101,8 @@ module.exports = Surface = class Surface extends CocoClass
     @dimmer?.destroy()
     @countdownScreen?.destroy()
     @playbackOverScreen?.destroy()
+    @coordinateDisplay?.destroy()
+    @coordinateGrid?.destroy()
     @stage.clear()
     @musicPlayer?.destroy()
     @stage.removeAllChildren()
@@ -126,10 +126,6 @@ module.exports = Surface = class Surface extends CocoClass
 
     @showLevel()
     @updateState true if @loaded
-    # TODO: synchronize both ways of choosing whether to show coords (@world via UI System or @options via World Select modal)
-    if @world.showCoordinates and @options.coords and not @coordinateDisplay
-      @coordinateDisplay = new CoordinateDisplay camera: @camera
-      @surfaceTextLayer.addChild @coordinateDisplay
     @onFrameChanged()
     Backbone.Mediator.publish 'surface:world-set-up'
 
@@ -364,6 +360,9 @@ module.exports = Surface = class Surface extends CocoClass
 
   onNewWorld: (event) ->
     return unless event.world.name is @world.name
+    @onStreamingWorldUpdated event
+
+  onStreamingWorldUpdated: (event) ->
     @casting = false
     @spriteBoss.play()
 
@@ -390,22 +389,21 @@ module.exports = Surface = class Surface extends CocoClass
   # initialization
 
   initEasel: ->
-    # takes DOM objects, not jQuery objects
+    @stage = new createjs.Stage(@canvas[0])  # Takes DOM objects, not jQuery objects.
-    @stage = new createjs.Stage(@canvas[0])
     canvasWidth = parseInt @canvas.attr('width'), 10
     canvasHeight = parseInt @canvas.attr('height'), 10
-    @camera?.destroy()
+    @camera = AudioPlayer.camera = new Camera @canvas
-    @camera = new Camera @canvas
-    AudioPlayer.camera = @camera
     @layers.push @surfaceLayer = new Layer name: 'Surface', layerPriority: 0, transform: Layer.TRANSFORM_SURFACE, camera: @camera
     @layers.push @surfaceTextLayer = new Layer name: 'Surface Text', layerPriority: 1, transform: Layer.TRANSFORM_SURFACE_TEXT, camera: @camera
-    @layers.push @screenLayer = new Layer name: 'Screen', layerPriority: 2, transform: Layer.TRANSFORM_SCREEN, camera: @camera
+    @layers.push @gridLayer = new Layer name: 'Grid', layerPriority: 2, transform: Layer.TRANSFORM_SURFACE, camera: @camera
+    @layers.push @screenLayer = new Layer name: 'Screen', layerPriority: 3, transform: Layer.TRANSFORM_SCREEN, camera: @camera
     @stage.addChild @layers...
     @surfaceLayer.addChild @cameraBorder = new CameraBorder bounds: @camera.bounds
     @screenLayer.addChild new Letterbox canvasWidth: canvasWidth, canvasHeight: canvasHeight
     @spriteBoss = new SpriteBoss camera: @camera, surfaceLayer: @surfaceLayer, surfaceTextLayer: @surfaceTextLayer, world: @world, thangTypes: @options.thangTypes, choosing: @options.choosing, navigateToSelection: @options.navigateToSelection, showInvisible: @options.showInvisible
-    @countdownScreen ?= new CountdownScreen camera: @camera, layer: @screenLayer
+    @countdownScreen = new CountdownScreen camera: @camera, layer: @screenLayer
-    @playbackOverScreen ?= new PlaybackOverScreen camera: @camera, layer: @screenLayer
+    @playbackOverScreen = new PlaybackOverScreen camera: @camera, layer: @screenLayer
+    @initCoordinates()
     @stage.enableMouseOver(10)
     @stage.addEventListener 'stagemousemove', @onMouseMove
     @stage.addEventListener 'stagemousedown', @onMouseDown
@@ -416,6 +414,11 @@ module.exports = Surface = class Surface extends CocoClass
     createjs.Ticker.setFPS @options.frameRate
     @onResize()
 
+  initCoordinates: ->
+    @coordinateGrid ?= new CoordinateGrid {camera: @camera, layer: @gridLayer, textLayer: @surfaceTextLayer}, @world.size()
+    @coordinateGrid.showGrid() if @world.showGrid or @options.grid
+    @coordinateDisplay ?= new CoordinateDisplay camera: @camera, layer: @surfaceTextLayer if @world.showCoordinates or @options.coords
+
   onResize: (e) =>
     return if @destroyed
     oldWidth = parseInt @canvas.attr('width'), 10
@@ -450,7 +453,6 @@ module.exports = Surface = class Surface extends CocoClass
     Backbone.Mediator.publish 'registrar-echo-states'
     @updateState true
     @drawCurrentFrame()
-    @showGrid() if @options.grid  # TODO: pay attention to world grid setting (which we only know when world simulates)
     createjs.Ticker.addEventListener 'tick', @tick
     Backbone.Mediator.publish 'level:started'
 
@@ -460,67 +462,6 @@ module.exports = Surface = class Surface extends CocoClass
   initAudio: ->
     @musicPlayer = new MusicPlayer()
 
-  # grid; should probably refactor into separate class
-
-  showGrid: ->
-    return if @gridShowing()
-    unless @gridLayer
-      @gridLayer = new createjs.Container()
-      @gridShape = new createjs.Shape()
-      @gridLayer.addChild @gridShape
-      @gridLayer.z = 90019001
-      @gridLayer.mouseEnabled = false
-      @gridShape.alpha = 0.125
-      @gridShape.graphics.beginStroke 'blue'
-      gridSize = Math.round(@world.size()[0] / 20)
-      unless gridSize > 0.1
-        return console.error 'Grid size is', gridSize, 'so we can\'t draw a grid.'
-      wopStart = x: 0, y: 0
-      wopEnd = x: @world.size()[0], y: @world.size()[1]
-      supStart = @camera.worldToSurface wopStart
-      supEnd = @camera.worldToSurface wopEnd
-      wop = x: wopStart.x, y: wopStart.y
-      while wop.x < wopEnd.x
-        sup = @camera.worldToSurface wop
-        @gridShape.graphics.mt(sup.x, supStart.y).lt(sup.x, supEnd.y)
-        t = new createjs.Text(wop.x.toFixed(0), '16px Arial', 'blue')
-        t.x = sup.x - t.getMeasuredWidth() / 2
-        t.y = supStart.y - 10 - t.getMeasuredHeight() / 2
-        t.alpha = 0.75
-        @gridLayer.addChild t
-        wop.x += gridSize
-      while wop.y < wopEnd.y
-        sup = @camera.worldToSurface wop
-        @gridShape.graphics.mt(supStart.x, sup.y).lt(supEnd.x, sup.y)
-        t = new createjs.Text(wop.y.toFixed(0), '16px Arial', 'blue')
-        t.x = 10 - t.getMeasuredWidth() / 2
-        t.y = sup.y - t.getMeasuredHeight() / 2
-        t.alpha = 0.75
-        @gridLayer.addChild t
-        wop.y += gridSize
-      @gridShape.graphics.endStroke()
-      bounds = @gridLayer.getBounds()
-      return unless bounds?.width and bounds.height
-      @gridLayer.cache bounds.x, bounds.y, bounds.width, bounds.height
-    @surfaceLayer.addChild @gridLayer
-
-  hideGrid: ->
-    return unless @gridShowing()
-    @gridLayer.parent.removeChild @gridLayer
-
-  gridShowing: ->
-    @gridLayer?.parent?
-
-  onToggleGrid: (e) ->
-    # TODO: figure out a better way of managing grid / debug so it's not split across PlaybackView and Surface
-    e?.preventDefault?()
-    if @gridShowing() then @hideGrid() else @showGrid()
-    flag = $('#grid-toggle i.icon-ok')
-    flag.toggleClass 'invisible', not @gridShowing()
-
-  onSetGrid: (e) ->
-    if e.grid then @showGrid() else @hideGrid()
-
   onToggleDebug: (e) ->
     e?.preventDefault?()
     Backbone.Mediator.publish 'level-set-debug', {debug: not @debug}

app/lib/world/thang.coffee

@@ -167,7 +167,7 @@ module.exports = class Thang
     {CN: @constructor.className, id: @id}
 
   getSpriteOptions: ->
-    colorConfigs = @world?.getTeamColors() or {}
+    colorConfigs = @teamColors or @world?.getTeamColors() or {}
     options = {colorConfig: {}}
     if @team and teamColor = colorConfigs[@team]
       options.colorConfig.team = teamColor

app/locale/en.coffee

@@ -355,7 +355,6 @@
 
   play_level:
     done: "Done"
-    grid: "Grid"
     customize_wizard: "Customize Wizard"
     home: "Home"
     stop: "Stop"

app/locale/pt-PT.coffee

@@ -358,7 +358,7 @@ module.exports = nativeDescription: "Português (Portugal)", englishDescription:
     grid: "Grelha"
     customize_wizard: "Personalizar Feiticeiro"
     home: "Início"
-#    stop: "Stop"
+    stop: "Parar"
     game_menu: "Menu do Jogo"
     guide: "Guia"
     restart: "Reiniciar"
@@ -499,9 +499,9 @@ module.exports = nativeDescription: "Português (Portugal)", englishDescription:
     space: "Espaço"
     enter: "Enter"
     escape: "Esc"
-#    shift: "Shift"
+    shift: "Shift"
     cast_spell: "Lançar feitiço atual."
-#    run_real_time: "Run in real time."
+    run_real_time: "Correr em tempo real."
     continue_script: "Saltar o script atual."
     skip_scripts: "Saltar todos os scripts saltáveis."
     toggle_playback: "Alternar entre Jogar e Pausar."

app/schemas/models/user.coffee

@@ -25,19 +25,19 @@ phoneScreenFilter =
   title: 'Phone screened'
   type: 'boolean'
   description: 'Whether the candidate has been phone screened.'
-schoolFilter = 
+schoolFilter =
   title: 'School'
   type: 'string'
   enum: ['Top School', 'Other']
-locationFilter = 
+locationFilter =
   title: 'Location'
   type: 'string'
   enum: ['Bay Area', 'New York', 'Other US', 'International']
-roleFilter = 
+roleFilter =
   title: 'Role'
   type: 'string'
   enum: ['Web Developer', 'Software Developer', 'Mobile Developer']
-seniorityFilter = 
+seniorityFilter =
   title: 'Seniority'
   type: 'string'
   enum: ['College Student', 'Recent Grad', 'Junior', 'Senior']
@@ -45,7 +45,12 @@ visa = c.shortString
   title: 'US Work Status'
   description: 'Are you authorized to work in the US, or do you need visa sponsorship? (If you live in Canada or Australia, mark authorized.)'
   enum: ['Authorized to work in the US', 'Need visa sponsorship']
+<<<<<<< HEAD
   
+=======
+  default: 'Authorized to work in the US'
+
+>>>>>>> master
 _.extend UserSchema.properties,
   email: c.shortString({title: 'Email', format: 'email'})
   firstName: c.shortString({title: 'First Name'})
@@ -56,7 +61,7 @@ _.extend UserSchema.properties,
   photoURL: {type: 'string', format: 'image-file', title: 'Profile Picture', description: 'Upload a 256x256px or larger image to serve as your profile picture.'}
 
   facebookID: c.shortString({title: 'Facebook ID'})
-  githubID: c.shortString({title: 'GitHub ID'})
+  githubID: {type: 'integer', title: 'GitHub ID'}
   gplusID: c.shortString({title: 'G+ ID'})
 
   wizardColor1: c.pct({title: 'Wizard Clothes Color'})
@@ -200,7 +205,7 @@ _.extend UserSchema.properties,
     phoneScreenFilter:
       title: 'Phone screen filter values'
       type: 'array'
-      items: 
+      items:
         type: 'boolean'
     schoolFilter:
       title: 'School filter values'
@@ -208,32 +213,32 @@ _.extend UserSchema.properties,
       items:
         type: schoolFilter.type
         enum: schoolFilter.enum
-    locationFilter: 
+    locationFilter:
       title: 'Location filter values'
       type: 'array'
       items:
         type: locationFilter.type
         enum: locationFilter.enum
-    roleFilter: 
+    roleFilter:
       title: 'Role filter values'
       type: 'array'
       items:
         type: roleFilter.type
         enum: roleFilter.enum
-    seniorityFilter: 
+    seniorityFilter:
       title: 'Seniority filter values'
       type: 'array'
       items:
         type: roleFilter.type
         enum: seniorityFilter.enum
-    visa: 
+    visa:
       title: 'Visa filter values'
       type: 'array'
       items:
         type: visa.type
         enum: visa.enum
   })
-    
+
   points: {type: 'number'}
   activity: {type: 'object', description: 'Summary statistics about user activity', additionalProperties: c.activity}
   stats: c.object {additionalProperties: false},

app/schemas/subscriptions/play.coffee

@@ -29,9 +29,6 @@ module.exports =
   'level-set-debug':
     {} # TODO schema
 
-  'level-set-grid':
-    {} # TODO schema
-
   'level:restarted':
     {} # TODO schema
 

app/styles/editor/level/thangs_tab.sass

@@ -6,8 +6,8 @@ $mobile: 1050px
   $addPaletteIconColumns: 3
   $extantThangsWidth: 300px
   $addPaletteIconWidth: 40px
-  $addPaletteIconPadding: 2px
+  $addPaletteIconPadding: 0px
-  $addPaletteIconMargin: 2px
+  $addPaletteIconMargin: 4px
   $addPaletteWidth: ($addPaletteIconWidth + 2 * $addPaletteIconPadding + 2 * $addPaletteIconMargin) * $addPaletteIconColumns + 20
 
   #toggle
@@ -198,15 +198,26 @@ $mobile: 1050px
       padding: $addPaletteIconPadding
       margin: $addPaletteIconMargin
       cursor: pointer
+      width: $addPaletteIconWidth
+      height: $addPaletteIconWidth
 
       img
+        position: absolute
         width: $addPaletteIconWidth
         height: $addPaletteIconWidth
         transition: box-shadow 0.25s ease-out
 
+      &:hover
+        $hoverScaleIncreaseFactor: 0.2
+        outline: 1px dotted blue
+        img
+          left: -($hoverScaleIncreaseFactor / 2) * $addPaletteIconWidth
+          top: -($hoverScaleIncreaseFactor / 2) * $addPaletteIconWidth
+          width: (1 + $hoverScaleIncreaseFactor) * $addPaletteIconWidth
+          height: (1 + $hoverScaleIncreaseFactor) * $addPaletteIconWidth
+
       &.selected
-        border: 1px solid blue
+        outline: 1px solid blue
-        margin: $addPaletteIconPadding - 1px
         @include box-shadow(0px 5px 25px rgba(79, 79, 213, 0.6))
         background: #add8e6
 

app/templates/editor/level/add_thangs.jade

@@ -5,6 +5,6 @@ div.editor-nano-container.nano
     for group in groups
       h4= group.name
       for thangType in group.thangs
-        div.add-thang-palette-icon(data-thang-type=thangType.get('name'))
+        div.add-thang-palette-icon(data-thang-type=thangType.get('name'), title=thangType.get('name'))
-          img(title="Add " + thangType.get('name'), src=thangType.getPortraitURL(), alt="")
+          img(src=thangType.getPortraitURL(), alt="")
       div.clearfix

app/templates/play/level/playback.jade

@@ -37,10 +37,6 @@ button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
     li.selectable#view-keyboard-shortcuts
       i.icon-info-sign
       span(data-i18n="play_level.keyboard_shortcuts") Key Shortcuts
-    li(title="Ctrl/Cmd + G: Toggle grid display").selectable#grid-toggle
-      i.icon-th
-      span(data-i18n="play_level.grid") Grid
-      i.icon-ok.secret.invisible
     li.selectable#edit-wizard-settings
       i.icon-user
       span(data-i18n="play_level.customize_wizard") Customize Wizard

app/views/editor/level/thangs/AddThangsView.coffee

@@ -56,6 +56,10 @@ module.exports = class AddThangsView extends CocoView
 
   afterRender: ->
     super()
+    @buildAddThangPopovers()
+
+  buildAddThangPopovers: ->
+    @$el.find('#thangs-list .add-thang-palette-icon').tooltip(container: 'body', animation: false)
 
   runSearch: (e) =>
     if e?.which is 27

app/views/play/level/DialogueAnimator.coffee

@@ -7,6 +7,9 @@ module.exports = class DialogueAnimator
   constructor: (html, @jqueryElement) ->
     d = $('<div></div>').html(html)
     @childrenToAdd = _.map(d[0].childNodes, (e) -> return e)
+    @t0 = new Date()
+    @charsAdded = 0
+    @charsPerSecond = 50
 
   tick: ->
     if not @charsToAdd and not @childAnimator
@@ -26,19 +29,28 @@ module.exports = class DialogueAnimator
     nextElem = @childrenToAdd[0]
     @childrenToAdd = @childrenToAdd[1..]
     if nextElem.nodeName is '#text'
-      @charsToAdd = _.string.chars(nextElem.nodeValue)
+      @charsToAdd = nextElem.nodeValue
     else
       value = nextElem.innerHTML
       newElem = $(nextElem).html('')
       @jqueryElement.append(newElem)
       if value
+        @charsAdded += @childAnimator.getCharsAdded() if @childAnimator
         @childAnimator = new DialogueAnimator(value, newElem)
 
   addSingleChar: ->
-    @jqueryElement.html(@jqueryElement.html() + @charsToAdd[0])
+    elapsed = (new Date()) - @t0
-    @charsToAdd = @charsToAdd[1..]
+    nAdded = @getCharsAdded()
+    nToHaveBeenAdded = Math.round @charsPerSecond * elapsed / 1000
+    nToAdd = Math.min nToHaveBeenAdded - nAdded, @charsToAdd.length
+    @jqueryElement.html(@jqueryElement.html() + @charsToAdd.slice(0, nToAdd))
+    @charsToAdd = @charsToAdd.slice(nToAdd)
     if @charsToAdd.length is 0
       @charsToAdd = null
+    @charsAdded += nToAdd
+
+  getCharsAdded: ->
+    @charsAdded + (@childAnimator?.charsAdded ? 0)
 
   done: ->
     return false if @childrenToAdd.length > 0

app/views/play/level/LevelHUDView.coffee

@@ -197,7 +197,7 @@ module.exports = class LevelHUDView extends CocoView
       @lastResponses = null
     @bubble.append($("<h3>#{@speaker ? 'Captain Anya'}</h3>"))
     @animator = new DialogueAnimator(message, @bubble)
-    @messageInterval = setInterval(@addMoreMessage, 20)
+    @messageInterval = setInterval(@addMoreMessage, 1000 / 30)  # 30 FPS
 
   addMoreMessage: =>
     if @animator.done()

app/views/play/level/LevelPlaybackView.coffee

@@ -18,8 +18,6 @@ module.exports = class LevelPlaybackView extends CocoView
     'level-scrub-back': 'onScrubBack'
     'level-set-volume': 'onSetVolume'
     'level-set-debug': 'onSetDebug'
-    'level-set-grid': 'onSetGrid'
-    'level-toggle-grid': 'onToggleGrid'
     'surface:frame-changed': 'onFrameChanged'
     'god:new-world-created': 'onNewWorld'
     'god:streaming-world-updated': 'onNewWorld'
@@ -30,7 +28,6 @@ module.exports = class LevelPlaybackView extends CocoView
 
   events:
     'click #debug-toggle': 'onToggleDebug'
-    'click #grid-toggle': 'onToggleGrid'
     'click #edit-wizard-settings': 'onEditWizardSettings'
     'click #edit-editor-config': 'onEditEditorConfig'
     'click #view-keyboard-shortcuts': 'onViewKeyboardShortcuts'
@@ -188,11 +185,6 @@ module.exports = class LevelPlaybackView extends CocoView
     flag = $('#debug-toggle i.icon-ok')
     Backbone.Mediator.publish('level-set-debug', {debug: flag.hasClass('invisible')})
 
-  onToggleGrid: ->
-    return if @shouldIgnore()
-    flag = $('#grid-toggle i.icon-ok')
-    Backbone.Mediator.publish('level-set-grid', {grid: flag.hasClass('invisible')})
-
   onEditWizardSettings: ->
     Backbone.Mediator.publish 'edit-wizard-settings'
 
@@ -316,10 +308,6 @@ module.exports = class LevelPlaybackView extends CocoView
     flag = $('#debug-toggle i.icon-ok')
     flag.toggleClass 'invisible', not e.debug
 
-  onSetGrid: (e) ->
-    flag = $('#grid-toggle i.icon-ok')
-    flag.toggleClass 'invisible', not e.grid
-
   # to refactor
 
   hookUpScrubber: ->