Jiggle user code problem alert

app/schemas/subscriptions/tome.coffee

@@ -127,3 +127,5 @@ module.exports =
   'tome:show-problem-alert': c.object {title: 'Show Problem Alert', description: 'A problem alert needs to be shown.', required: ['problem']},
     problem: {type: 'object'}
     lineOffsetPx: {type: ['number', 'undefined']}
+
+  'tome:jiggle-problem-alert': c.object {title: 'Jiggle Problem Alert'}

app/styles/play/level/tome/problem_alert.sass

@@ -18,6 +18,55 @@
   border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
   border-width: 16px 20px
 
+  // Jiggle animation
+  // TODO: Cleanup browser compat nonsense with sass mixin
+  // TODO: http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
+  animation-duration: .4s
+  animation-name: jiggle
+  animation-play-state: running
+  animation-iteration-count: infinite
+  @keyframes jiggle
+    0%
+      transform: rotate(0deg)
+    25%
+      transform: rotate(1deg)
+    50%
+      transform: rotate(0deg)
+    75%
+      transform: rotate(-1deg)
+    100%
+      transform: rotate(0deg)
+  -moz-animation-duration: .4s
+  -moz-animation-name: jiggle
+  -moz-animation-play-state: running
+  -moz-animation-iteration-count: infinite
+  @-moz-keyframes jiggle
+    0%
+      -moz-transform: rotate(0deg)
+    25%
+      -moz-transform: rotate(1deg)
+    50%
+      -moz-transform: rotate(0deg)
+    75%
+      -moz-transform: rotate(-1deg)
+    100%
+      -moz-transform: rotate(0deg)
+  -webkit-animation-duration: .4s
+  -webkit-animation-name: jiggle
+  -webkit-animation-play-state: running
+  -webkit-animation-iteration-count: infinite
+  @-webkit-keyframes jiggle
+    0%
+      -webkit-transform: rotate(0deg)
+    25%
+      -webkit-transform: rotate(1deg)
+    50%
+      -webkit-transform: rotate(0deg)
+    75%
+      -webkit-transform: rotate(-1deg)
+    100%
+      -webkit-transform: rotate(0deg)
+
   &.no-hint
     // Since it's probably only one line, let's make it not look weird by being tiny.
     padding: 7px

app/views/play/level/tome/ProblemAlertView.coffee

@@ -9,6 +9,7 @@ module.exports = class ProblemAlertView extends CocoView
 
   subscriptions:
     'tome:show-problem-alert': 'onShowProblemAlert'
+    'tome:jiggle-problem-alert': 'onJiggleProblemAlert'
     'tome:manual-cast': 'onHideProblemAlert'
     'real-time-multiplayer:manual-cast': 'onHideProblemAlert'
 
@@ -51,6 +52,18 @@ module.exports = class ProblemAlertView extends CocoView
     @$el.show()
     @onWindowResize()
     @render()
+    @onJiggleProblemAlert()
+
+  onJiggleProblemAlert: ->
+    if @$el.is(":visible")
+      @$el.css('animation-play-state', 'running')
+      @$el.css('-moz-animation-play-state', 'running')
+      @$el.css('-webkit-animation-play-state', 'running')
+      pauseJiggle = =>
+        @$el.css('animation-play-state', 'paused')
+        @$el.css('-moz-animation-play-state', 'paused')
+        @$el.css('-webkit-animation-play-state', 'paused')
+      _.delay pauseJiggle, 2000
 
   onHideProblemAlert: ->
     @onRemoveClicked()

app/views/play/level/tome/SpellView.coffee

@@ -773,13 +773,7 @@ module.exports = class SpellView extends CocoView
 
   onAnnotationClick: ->
     # @ is the gutter element
-    msg = "Edit line #{$(@).index() + 1} to fix it."
+    Backbone.Mediator.publish 'tome:jiggle-problem-alert', {}
-    alertBox = $("<div class='alert alert-info fade in'>#{msg}</div>")
-    offset = $(@).offset()
-    offset.left -= 162  # default width of the Bootstrap alert here
-    alertBox.css(offset).css('z-index', 500).css('position', 'absolute')
-    $('body').append(alertBox.alert())
-    _.delay (-> alertBox.alert('close')), 2500
 
   onDisableControls: (e) -> @toggleControls e, false
   onEnableControls: (e) -> @toggleControls e, @writable