codecombat/app/lib/surface/Mark.coffee

CocoClass = require 'lib/CocoClass'
Camera = require './Camera'
ThangType = require 'models/ThangType'
markThangTypes = {}

module.exports = class Mark extends CocoClass
  subscriptions: {}
  alpha: 1

  constructor: (options) ->
    super()
    options ?= {}
    @name = options.name
    @lank = options.lank
    @camera = options.camera
    @layer = options.layer
    @thangType = options.thangType
    @listenTo @layer, 'new-spritesheet', @onLayerMadeSpriteSheet
    console.error @toString(), 'needs a name.' unless @name
    console.error @toString(), 'needs a camera.' unless @camera
    console.error @toString(), 'needs a layer.' unless @layer
    @build()

  destroy: ->
    createjs.Tween.removeTweens @sprite if @sprite
    @sprite?.parent?.removeChild @sprite
    if @markLank
      @layer.removeLank(@markLank)
      @markLank.destroy()
    @lank = null
    super()

  toString: -> "<Mark #{@name}: Sprite #{@lank?.thang?.id ? 'None'}>"

  onLayerMadeSpriteSheet: ->
    return unless @sprite
    return @update() if @markLank
    # rebuild sprite for new sprite sheet
    @layer.removeChild @sprite
    @sprite = null
    @build()
    @layer.addChild @sprite
    @layer.updateLayerOrder()
#    @updatePosition()
    @update()
    
  toggle: (to) ->
    to = !!to
    return @ if to is @on
    return @toggleTo = to unless @sprite
    @on = to
    delete @toggleTo
    if @on
      if @markLank
        @layer.addLank(@markLank)
      else
        @layer.addChild @sprite
        @layer.updateLayerOrder()
    else
      if @markLank
        @layer.removeLank(@markLank)
      else
        @layer.removeChild @sprite
      if @highlightTween
        @highlightDelay = @highlightTween = null
        createjs.Tween.removeTweens @sprite
        @sprite.visible = true
    @

  setLayer: (layer) ->
    return if layer is @layer
    wasOn = @on
    @toggle false
    @layer = layer
    @toggle true if wasOn

  setLank: (lank) ->
    return if lank is @lank
    @lank = lank
    @build()
    @

  build: ->
    unless @sprite
      if @name is 'bounds' then @buildBounds()
      else if @name is 'shadow' then @buildShadow()
      else if @name is 'debug' then @buildDebug()
      else if @name.match(/.+(Range|Distance|Radius)$/) then @buildRadius(@name)
      else if @thangType then @buildSprite()
      else console.error 'Don\'t know how to build mark for', @name
      @sprite?.mouseEnabled = false
    @

  buildBounds: ->
    @sprite = new createjs.Container()
    @sprite.mouseChildren = false
    style = @lank.thang.drawsBoundsStyle
    @drawsBoundsIndex = @lank.thang.drawsBoundsIndex
    return if style is 'corner-text' and @lank.thang.world.age is 0

    # Confusingly make some semi-random colors that'll be consistent based on the drawsBoundsIndex
    colors = (128 + Math.floor(('0.'+Math.sin(3 * @drawsBoundsIndex + i).toString().substr(6)) * 128) for i in [1 ... 4])
    color = "rgba(#{colors[0]}, #{colors[1]}, #{colors[2]}, 0.5)"
    [w, h] = [@lank.thang.width * Camera.PPM, @lank.thang.height * Camera.PPM * @camera.y2x]

    if style in ['border-text', 'corner-text']
      @drawsBoundsBorderShape = shape = new createjs.Shape()
      shape.graphics.setStrokeStyle 5
      shape.graphics.beginStroke color
      if style is 'border-text'
        shape.graphics.beginFill color.replace('0.5', '0.25')
      else
        shape.graphics.beginFill color
      if @lank.thang.shape in ['ellipsoid', 'disc']
        shape.drawEllipse 0, 0, w, h
      else
        shape.graphics.drawRect -w / 2, -h / 2, w, h
      shape.graphics.endStroke()
      shape.graphics.endFill()
      @sprite.addChild shape

    if style is 'border-text'
      text = new createjs.Text '' + @drawsBoundsIndex, '20px Arial', color.replace('0.5', '1')
      text.regX = text.getMeasuredWidth() / 2
      text.regY = text.getMeasuredHeight() / 2
      text.shadow = new createjs.Shadow('#000000', 1, 1, 0)
      @sprite.addChild text
    else if style is 'corner-text'
      return if @lank.thang.world.age is 0
      letter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[@drawsBoundsIndex % 26]
      text = new createjs.Text letter, '14px Arial', '#333333'   # color.replace('0.5', '1')
      text.x = -w / 2 + 2
      text.y = -h / 2 + 2
      @sprite.addChild text
    else
      console.warn @lank.thang.id, 'didn\'t know how to draw bounds style:', style

    if w > 0 and h > 0 and style is 'border-text'
      @sprite.cache -w / 2, -h / 2, w, h, 2
    @lastWidth = @lank.thang.width
    @lastHeight = @lank.thang.height

  buildShadow: ->
    shapeName = if @lank.thang.shape in ['ellipsoid', 'disc'] then 'ellipse' else 'rect'
    key = "#{shapeName}-shadow"
    SHADOW_SIZE = 10
    unless key in @layer.spriteSheet.getAnimations()
      shape = new createjs.Shape()
      shape.graphics.beginFill "rgba(0,0,0)"
      bounds = [-SHADOW_SIZE/2, - SHADOW_SIZE/2, SHADOW_SIZE, SHADOW_SIZE]
      if shapeName is 'ellipse'
        shape.graphics.drawEllipse bounds...
      else
        shape.graphics.drawRect bounds...
      shape.graphics.endFill()
      @layer.addCustomGraphic(key, shape, bounds)
    alpha = @lank.thang?.alpha ? 1 
    width = (@lank.thang?.width ? 0) + 0.5
    height = (@lank.thang?.height ? 0) + 0.5
    longest = Math.max width, height
    actualLongest = @lank.thangType.get('shadow') ? longest
    width = width * actualLongest / longest
    height = height * actualLongest / longest
    width *= Camera.PPM
    height *= Camera.PPM * @camera.y2x  # TODO: doesn't work with rotation
    @sprite = new createjs.Sprite(@layer.spriteSheet)
    @sprite.gotoAndStop(key)
    @sprite.mouseEnabled = false
    @sprite.alpha = alpha
    @baseScaleX = @sprite.scaleX = width / (@layer.resolutionFactor * SHADOW_SIZE)
    @baseScaleY = @sprite.scaleY = height / (@layer.resolutionFactor * SHADOW_SIZE)

  buildRadius: (range) ->
    alpha = 0.15
    colors =
      voiceRange: "rgba(0,145,0,#{alpha})"
      visualRange: "rgba(0,0,145,#{alpha})"
      attackRange: "rgba(145,0,0,#{alpha})"

    # Fallback colors which work on both dungeon and grass tiles
    extraColors = [
      "rgba(145,0,145,#{alpha})"
      "rgba(0,145,145,#{alpha})"
      "rgba(145,105,0,#{alpha})"
      "rgba(225,125,0,#{alpha})"
    ]

    # Find the index of this range, to find the next-smallest radius
    rangeNames = @lank.ranges.map((range, index) ->
      range['name']
    )
    i = rangeNames.indexOf(range)

    @sprite = new createjs.Shape()

    fillColor = colors[range] ? extraColors[i]
    @sprite.graphics.beginFill fillColor

    # Draw the outer circle
    @sprite.graphics.drawCircle 0, 0, @lank.thang[range] * Camera.PPM

    # Cut out the hollow part if necessary
    if i+1 < @lank.ranges.length
      @sprite.graphics.arc 0, 0, @lank.ranges[i+1]['radius'], Math.PI*2, 0, true

    @sprite.graphics.endFill()

    strokeColor = fillColor.replace '' + alpha, '0.75'
    @sprite.graphics.setStrokeStyle 2
    @sprite.graphics.beginStroke strokeColor
    @sprite.graphics.arc 0, 0, @lank.thang[range] * Camera.PPM, Math.PI*2, 0, true
    @sprite.graphics.endStroke()

    # Add perspective
    @sprite.scaleY *= @camera.y2x

  buildDebug: ->
    shapeName = if @lank.thang.shape in ['ellipsoid', 'disc'] then 'ellipse' else 'rect'
    key = "#{shapeName}-debug"
    DEBUG_SIZE = 10
    unless key in @layer.spriteSheet.getAnimations()
      shape = new createjs.Shape()
      shape.graphics.beginFill 'rgba(171,205,239,0.5)'
      bounds = [-DEBUG_SIZE / 2, -DEBUG_SIZE / 2, DEBUG_SIZE, DEBUG_SIZE]
      if shapeName is 'ellipse'
        shape.graphics.drawEllipse bounds...
      else
        shape.graphics.drawRect bounds...
      shape.graphics.endFill()
      @layer.addCustomGraphic(key, shape, bounds)

    @sprite = new createjs.Sprite(@layer.spriteSheet)
    @sprite.gotoAndStop(key)
    PX = 3
    [w, h] = [Math.max(PX, @lank.thang.width * Camera.PPM), Math.max(PX, @lank.thang.height * Camera.PPM) * @camera.y2x]  # TODO: doesn't work with rotation
    @sprite.scaleX = w / (@layer.resolutionFactor * DEBUG_SIZE)
    @sprite.scaleY = h / (@layer.resolutionFactor * DEBUG_SIZE)

  buildSprite: ->
    console.log 'build sprite?'
    if _.isString @thangType
      thangType = markThangTypes[@thangType]
      return @loadThangType() if not thangType
      @thangType = thangType

    return @listenToOnce(@thangType, 'sync', @onLoadedThangType) if not @thangType.loaded
    console.log 'loaded, so go ahead!'
    Lank = require './Lank'
    # don't bother with making these render async for now, but maybe later for fun and more complexity of code
    markLank = new Lank @thangType
    markLank.queueAction 'idle'
    @sprite = markLank.sprite
    @markLank = markLank
    @listenTo @markLank, 'new-sprite', (@sprite) ->
    console.log 'oh yes, all done', markLank, @markLank

  loadThangType: ->
    name = @thangType
    @thangType = new ThangType()
    @thangType.url = -> "/db/thang.type/#{name}"
    @listenToOnce(@thangType, 'sync', @onLoadedThangType)
    @thangType.fetch()
    markThangTypes[name] = @thangType

  onLoadedThangType: ->
    console.log 'on loaded thang type...', @name
    @build()
    @update() if @markLank
    @toggle(@toggleTo) if @toggleTo?
    Backbone.Mediator.publish 'sprite:loaded', {sprite: @}

  update: (pos=null) ->
    return false unless @on and @sprite
    return false if @lank? and not @lank.thangType.isFullyLoaded()
    @sprite.visible = not @hidden
    @updatePosition pos
    @updateRotation()
    @updateScale()
    if @name is 'highlight' and @highlightDelay and not @highlightTween
      @sprite.visible = false
      @highlightTween = createjs.Tween.get(@sprite).to({}, @highlightDelay).call =>
        @sprite.visible = true
        @highlightDelay = @highlightTween = null
    @updateAlpha @alpha if @name in ['shadow', 'bounds']
    true

  updatePosition: (pos) ->
    if @lank?.thang and @name in ['shadow', 'debug', 'target', 'selection', 'repair']
      pos = @camera.worldToSurface x: @lank.thang.pos.x, y: @lank.thang.pos.y
    else
      pos ?= @lank?.sprite
    return unless pos
    @sprite.x = pos.x
    @sprite.y = pos.y
    if @statusEffect or @name is 'highlight'
      offset = @lank.getOffset 'aboveHead'
      @sprite.x += offset.x
      @sprite.y += offset.y
      @sprite.y -= 3 if @statusEffect

  updateAlpha: (@alpha) ->
    return if not @sprite or @name is 'debug'
    if @name is 'shadow'
      worldZ = @lank.thang.pos.z - @lank.thang.depth / 2 + @lank.getBobOffset()
      @sprite.alpha = @alpha * 0.451 / Math.sqrt(worldZ / 2 + 1)
    else if @name is 'bounds'
      @drawsBoundsBorderShape?.alpha = Math.floor @lank.thang.alpha  # Stop drawing bounds as soon as alpha is reduced at all
    else
      @sprite.alpha = @alpha

  updateRotation: ->
    if @name is 'debug' or (@name is 'shadow' and @lank.thang?.shape in ['rectangle', 'box'])
      @sprite.rotation = -@lank.thang.rotation * 180 / Math.PI

  updateScale: ->
    if @name is 'bounds' and ((@lank.thang.width isnt @lastWidth or @lank.thang.height isnt @lastHeight) or (@lank.thang.drawsBoundsIndex isnt @drawsBoundsIndex))
      oldMark = @sprite
      @buildBounds()
      oldMark.parent.addChild @sprite
      oldMark.parent.swapChildren oldMark, @sprite
      oldMark.parent.removeChild oldMark

    if @markLank?
      @markLank.scaleFactor = 1.2
      @markLank.updateScale()

    if @name is 'shadow' and thang = @lank.thang
      @sprite.scaleX = @baseScaleX * (thang.scaleFactor ? thang.scaleFactorX ? 1)
      @sprite.scaleY = @baseScaleY * (thang.scaleFactor ? thang.scaleFactorY ? 1)

    return unless @name in ['selection', 'target', 'repair', 'highlight']

    # scale these marks to 10m (100px). Adjust based on lank size.
    factor = 0.3 # default size: 3m width, most commonly for target when pointing to a location

    if @lank?.sprite
      width = @lank.sprite.getBounds()?.width or 0
      width /= @lank.options.resolutionFactor
      # all targets should be set to have a width of 100px, and then be scaled accordingly
      factor = width / 100 # normalize
      factor *= 1.1 # add margin
      factor = Math.max(factor, 0.3) # lower bound
    @sprite.scaleX *= factor
    @sprite.scaleY *= factor

    if @name in ['selection', 'target', 'repair']
      @sprite.scaleY *= @camera.y2x  # code applies perspective

  stop: -> @markLank?.stop()
  play: -> @markLank?.play()
  hide: -> @hidden = true
  show: -> @hidden = false