A few changes to flags UX.

app/lib/surface/SpriteBoss.coffee

@@ -283,6 +283,7 @@ module.exports = class SpriteBoss extends CocoClass
     return @dragged = 0 if @dragged > 3
     @dragged = 0
     sprite = if e.sprite?.thang?.isSelectable then e.sprite else null
+    return if @flagCursorSprite and sprite?.thangType.get('name') is 'Flag'
     @selectSprite e, sprite
 
   onStageMouseDown: (e) ->
@@ -325,6 +326,8 @@ module.exports = class SpriteBoss extends CocoClass
   onFlagColorSelected: (e) ->
     @removeSprite @flagCursorSprite if @flagCursorSprite
     @flagCursorSprite = null
+    for flagSprite in @spriteArray when flagSprite.thangType.get('name') is 'Flag'
+      flagSprite.imageObject.cursor = if e.color then 'crosshair' else 'pointer'
     return unless e.color
     @flagCursorSprite = new FlagSprite @thangTypeFor('Flag'), @createSpriteOptions(thangID: 'Flag Cursor', color: e.color, team: me.team, isCursor: true, pos: e.pos)
     @addSprite @flagCursorSprite, @flagCursorSprite.thang.id, @spriteLayers['Floating']
@@ -349,11 +352,15 @@ module.exports = class SpriteBoss extends CocoClass
         foundExactMatch = true
         @pendingFlags.splice(i, 1)
         @removeSprite pendingFlag
+    e.sprite.imageObject.cursor = if @flagCursorSprite then 'crosshair' else 'pointer'
     null
 
   onRemoveSelectedFlag: (e) ->
-    return unless @selectedSprite and @selectedSprite.thangType.get('name') is 'Flag' and @selectedSprite.thang.team is me.team
+    # Remove the selected sprite if it's a flag, or any flag of the given color if a color is given.
-    Backbone.Mediator.publish 'surface:remove-flag', color: @selectedSprite.thang.color
+    flagSprite = _.find [@selectedSprite].concat(@spriteArray), (sprite) ->
+      sprite and sprite.thangType.get('name') is 'Flag' and sprite.thang.team is me.team and (sprite.thang.color is e.color or not e.color) and not sprite.notOfThisWorld
+    return unless flagSprite
+    Backbone.Mediator.publish 'surface:remove-flag', color: flagSprite.thang.color
 
   # Marks
 

app/styles/play/level.sass

@@ -17,8 +17,14 @@ body.is-playing
       width: 100%
       canvas#surface
         margin: 0 auto
-    #control-bar-view, #playback-view
+    #control-bar-view
       width: 100%
+    #playback-view
+      $flags-width: 200px
+      width: 90%
+      width: -webkit-calc(100% - $flags-width)
+      width: calc(100% - $flags-width)
+      left: $flags-width
     #code-area, #thang-hud, #goals-view
       display: none
       visibility: hidden

app/styles/play/level/level-flags-view.sass

@@ -4,8 +4,11 @@
 #level-flags-view
   display: none
   position: absolute
-  top: 42px
+  bottom: 0
-  left: 1%
+  left: 0
+  width: 200px
+  // Width must match level.sass playback offset
+  z-index: 1
   @include transition(box-shadow .2s linear)
   @include user-select(none)
   padding: 4px
@@ -19,11 +22,32 @@
   .flag-button
     margin: 3px
     font-size: 14px
+    position: relative
+    padding: 2px 15px 18px 15px
+    margin-left: 5px
+
+    .glyphicon
+      font-size: 24px
+
+    .flag-shortcut
+      text-decoration: underline
 
     &.green-flag
-      color: darkgreen
+      .glyphicon, .flag-shortcut
+        color: hsl(120, 50%, 50%)
     &.black-flag
-      color: black
+      .glyphicon, .flag-shortcut
+        color: hsl(0, 0%, 25%)
     &.violet-flag
-      color: violet
+      .glyphicon, .flag-shortcut
+        color: hsl(300, 50%, 50%)
 
+    .flag-caption
+      position: absolute
+      background-color: rgba(0, 0, 0, 0.1)
+      color: black
+      bottom: 0
+      left: 0
+      width: 100%
+      border-bottom-right-radius: 6px
+      border-bottom-left-radius: 6px

app/templates/play/level/level-flags-view.jade

@@ -1,9 +1,15 @@
-button.flag-button.btn.btn-xs.green-flag(title="g: Place a green flag")
+button.flag-button.btn.btn-lg.green-flag(title="G: Place a green flag")
   span.glyphicon.glyphicon-flag
-  | g
+  span.flag-caption
-button.flag-button.btn.btn-xs.black-flag(title="b: Place a black flag")
+    span.flag-shortcut G
+    | reen
+button.flag-button.btn.btn-lg.black-flag(title="B: Place a black flag")
   span.glyphicon.glyphicon-flag
-  | b
+  span.flag-caption
-button.flag-button.btn.btn-xs.violet-flag(title="v: Place a violet flag")
+    span.flag-shortcut B
+    | lack
+button.flag-button.btn.btn-lg.violet-flag(title="V: Place a violet flag")
   span.glyphicon.glyphicon-flag
-  | v
+  span.flag-caption
+    span.flag-shortcut V
+    | iolet

app/views/play/level/LevelFlagsView.coffee

@@ -43,8 +43,7 @@ module.exports = class LevelFlagsView extends CocoView
 
   onFlagSelected: (e) ->
     return unless @realTime
-    return if @flagColor is e.color and e.source is 'shortcut'
+    color = if e.color is @flagColor then null else e.color
-    color = if e.source is 'button' and e.color is @flagColor then null else e.color
     @flagColor = color
     Backbone.Mediator.publish 'level:flag-color-selected', color: color
     @$el.find('.flag-button').removeClass('active')
@@ -62,7 +61,6 @@ module.exports = class LevelFlagsView extends CocoView
   onDeletePressed: (e) ->
     return unless @realTime
     Backbone.Mediator.publish 'surface:remove-selected-flag', {}
-    @onFlagSelected color: null, source: 'shortcut'
 
   onRemoveFlag: (e) ->
     delete @flags[e.color]