Add rubber ducks to problem alerts

Closes #4467
codecombat · Oct 2, 2017 · 7b2d850 · 7b2d850
1 parent c8b24c9
commit 7b2d850
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/app/assets/images/pages/play/duck_anya.png b/app/assets/images/pages/play/duck_anya.png
diff --git a/app/assets/images/pages/play/duck_tharin.png b/app/assets/images/pages/play/duck_tharin.png
diff --git a/app/styles/play/level/tome/problem_alert.sass b/app/styles/play/level/tome/problem_alert.sass
@@ -63,7 +63,10 @@
 
   &.alert-info
     border-image-source: url(/images/level/code_editor_info_background.png)
-
+
+  .duck-img
+    margin-right: 10px
+
 html.no-borderimage
   .problem-alert
     border-width: 0

diff --git a/app/templates/play/level/tome/problem_alert.jade b/app/templates/play/level/tome/problem_alert.jade
@@ -1,8 +1,15 @@
 button.close(type="button") &times;
-h3.problem-alert-title(data-i18n="play_level.problem_alert_title") Fix Your Code
-if view.hint
-  span.problem-title!= view.hint
-  br
-  span.problem-subtitle!= view.message
-else
-  span.problem-title!= view.message
+table
+  tr
+    if view.duckImg
+      td
+        img.duck-img(src=view.duckImg width=100)
+    td
+      h3.problem-alert-title(data-i18n="play_level.problem_alert_title") Fix Your Code
+      if view.hint
+        span.problem-title!= view.hint
+        br
+        span.problem-subtitle!= view.message
+      else
+        span.problem-title!= view.message
+
diff --git a/app/views/play/level/tome/ProblemAlertView.coffee b/app/views/play/level/tome/ProblemAlertView.coffee
@@ -7,6 +7,10 @@ module.exports = class ProblemAlertView extends CocoView
   id: 'problem-alert-view'
   className: 'problem-alert'
   template: template
+  duckImages: [
+    '/images/pages/play/duck_anya.png'
+    '/images/pages/play/duck_tharin.png'
+  ]
 
   subscriptions:
     'tome:show-problem-alert': 'onShowProblemAlert'
@@ -29,6 +33,7 @@ module.exports = class ProblemAlertView extends CocoView
       @onWindowResize()
     else
       @$el.hide()
+    @duckImg = _.sample(@duckImages)
     $(window).on 'resize', @onWindowResize
 
   destroy: ->