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

108 lines
3.7 KiB
CoffeeScript
Raw Normal View History

CocoView = require 'views/core/CocoView'
2014-12-15 18:11:27 -05:00
GameMenuModal = require 'views/play/menu/GameMenuModal'
2014-01-03 13:32:13 -05:00
template = require 'templates/play/level/tome/problem_alert'
{me} = require 'core/auth'
2014-01-03 13:32:13 -05:00
2014-07-17 20:20:11 -04:00
module.exports = class ProblemAlertView extends CocoView
id: 'problem-alert-view'
2014-01-03 13:32:13 -05:00
className: 'problem-alert'
template: template
subscriptions:
'tome:show-problem-alert': 'onShowProblemAlert'
2014-11-09 14:36:17 -05:00
'tome:hide-problem-alert': 'onHideProblemAlert'
2014-11-18 12:36:01 -05:00
'level:restart': 'onHideProblemAlert'
2014-11-08 01:46:12 -05:00
'tome:jiggle-problem-alert': 'onJiggleProblemAlert'
'tome:manual-cast': 'onHideProblemAlert'
2014-01-03 13:32:13 -05:00
events:
2014-06-30 22:16:26 -04:00
'click .close': 'onRemoveClicked'
'click': -> Backbone.Mediator.publish 'tome:focus-editor', {}
2014-01-03 13:32:13 -05:00
constructor: (options) ->
super options
2014-12-15 18:11:27 -05:00
@level = options.level
@session = options.session
@supermodel = options.supermodel
if options.problem?
@problem = options.problem
@onWindowResize()
else
@$el.hide()
$(window).on 'resize', @onWindowResize
destroy: ->
$(window).off 'resize', @onWindowResize
super()
2014-01-03 13:32:13 -05:00
afterRender: ->
super()
if @problem?
@$el.addClass('alert').addClass("alert-#{@problem.aetherProblem.level}").hide().fadeIn('slow')
@$el.addClass('no-hint') unless @problem.aetherProblem.hint
@playSound 'error_appear'
setProblemMessage: ->
if @problem?
format = (s) -> marked(s.replace(/</g, '&lt;').replace(/>/g, '&gt;')) if s?
message = @problem.aetherProblem.message
# Add time to problem message if hint is for a missing null check
# NOTE: This may need to be updated with Aether error hint changes
if @problem.aetherProblem.hint? and /(?:null|undefined)/.test @problem.aetherProblem.hint
age = @problem.aetherProblem.userInfo?.age
if age?
if /^Line \d+:/.test message
message = message.replace /^(Line \d+)/, "$1, time #{age.toFixed(1)}"
else
message = "Time #{age.toFixed(1)}: #{message}"
@message = format message
@hint = format @problem.aetherProblem.hint
onShowProblemAlert: (data) ->
return unless $('#code-area').is(":visible")
if @problem?
if @$el.hasClass "alert-#{@problem.aetherProblem.level}"
@$el.removeClass "alert-#{@problem.aetherProblem.level}"
if @$el.hasClass "no-hint"
@$el.removeClass "no-hint"
@problem = data.problem
@lineOffsetPx = data.lineOffsetPx or 0
@$el.show()
@onWindowResize()
@setProblemMessage()
@render()
2014-11-08 01:46:12 -05:00
@onJiggleProblemAlert()
application.tracker?.trackEvent 'Show problem alert', {levelID: @level.get('slug'), ls: @session?.get('_id')}
2014-11-08 01:46:12 -05:00
onJiggleProblemAlert: ->
return unless @problem?
@$el.show() unless @$el.is(":visible")
@$el.addClass 'jiggling'
2015-09-09 17:36:05 -04:00
@playSound 'error_appear'
pauseJiggle = =>
@$el?.removeClass 'jiggling'
_.delay pauseJiggle, 1000
onHideProblemAlert: ->
return unless @$el.is(':visible')
@onRemoveClicked()
2014-01-03 13:32:13 -05:00
onRemoveClicked: ->
@playSound 'menu-button-click'
@$el.hide()
Backbone.Mediator.publish 'tome:focus-editor', {}
onWindowResize: (e) =>
# TODO: This all seems a little hacky
if @problem?
levelContentWidth = $('.level-content').outerWidth(true)
goalsViewWidth = $('#goals-view').outerWidth(true)
codeAreaWidth = $('#code-area').outerWidth(true)
# problem alert view has 20px padding
@$el.css('max-width', levelContentWidth - codeAreaWidth - goalsViewWidth + 40 + 'px')
@$el.css('right', codeAreaWidth + 'px')
# 110px from top roughly aligns top of alert with top of first code line
# TODO: calculate this in a more dynamic, less sketchy way
@$el.css('top', (110 + @lineOffsetPx) + 'px')