BattleSim/client/app/js/views/battles/battle_view.coffee

1403 lines
47 KiB
CoffeeScript

class @BattleView extends Backbone.View
battle_template: JST['battle']
user_info_template: JST['battle_user_info']
action_template: JST['battle_actions']
team_preview_template: JST['battle_team_preview']
battle_end_template: JST['battle_end']
battle_controls_template: JST['battle_controls']
SPEEDS:
Instant: 0
Fast: 1
Medium: 1.5
Slow: 2
events:
'click .move': 'makeMove'
'click .switch': 'switchPokemon'
'click .mega-evolve': 'megaEvolve'
'click .cancel': 'cancelAction'
# After battle ends
'click .save-replay': 'saveReplay'
'click .save-log': 'saveLog'
'click .return-to-lobby': 'returnToLobby'
# Team arrangement
'click .arrange_pokemon' : 'togglePokemonOrSwitch'
'click .submit_arrangement': 'submitTeamPreview'
# Battle controls
'change .battle-speed': 'changeBattleSpeed'
initialize: (options) =>
@chatView = null
@lastMove = null
@skip = null
@room = PokeBattle.rooms?.add(id: @model.id, users: [])
try
@speed = Number(window.localStorage.getItem('battle_speed'))
catch
@speed ||= 1
@listenTo(@model, 'change:teams[*].pokemon[*].status', @handleStatus)
@listenTo(@model, 'change:teams[*].pokemon[*].percent', @handlePercent)
@listenTo(@model, 'change:finished', @handleEnd)
@listenTo(@model.collection, 'remove', @handleRemoval) if @model.collection
@battleStartTime = $.now()
@timers = []
@timerUpdatedAt = []
@timerFrozenAt = []
@timerIterations = 0
@countdownTimers()
@render()
render: =>
@renderChat()
# rendering the battle depends on a protocol being received
this
renderBattle: =>
locals =
yourTeam : @model.getTeam()
opponentTeam : @model.getOpponentTeam()
numActive : @model.numActive
yourIndex : @model.get('index')
window : window
@$('.battle_pane').html @battle_template(locals)
@renderPokemon()
@renderControls()
this
renderPokemon: ($images, callback) =>
$images ||= @$('.preload')
battle = @model
self = this
$images.each ->
$this = $(this)
$pokemon = $this.closest('.pokemon')
[player, slot] = [$pokemon.data('team'), $pokemon.data('slot')]
front = $pokemon.hasClass('top')
species = $this.data('species')
forme = $this.data('forme')
shiny = $this.data('shiny')
gen = battle.get('generation').toUpperCase()
{id} = window.Generations[gen].SpeciesData[species]
url = PokemonSprite(id, forme, front: front, shiny: shiny)
scale = if front then 0.7 else 0.9
self.addPokemonImage $this, url, scale: scale, callback: ($image) ->
image = $image[0]
{width, height} = image
[x, y] = self.getPokemonPosition(player, slot)
x -= (width >> 1)
y -= (height >> 1)
y += 30 if !front
$image.css(top: y, left: x).show()
callback?($image)
this
renderControls: =>
html = @battle_controls_template(speeds: @SPEEDS, currentSpeed: @speed)
@$el.find('.battle-controls').html(html)
this
renderChat: =>
@chatView = new ChatView(
el: @$('.chat')
model: @room
noisy: true
).render()
this
# TODO: Support 2v2
renderActions: (validActions = []) =>
locals =
yourTeam : @model.getTeam()
validActions : validActions[0] || {}
window : window
$actions = @$('.battle_actions')
$actions.html @action_template(locals)
pokemon = @model.getPokemon(@model.get('index'), 0)
$button = $actions.find('.mega-evolve')
if pokemon.canMegaEvolve()
$button.removeClass("hidden")
else
$button.addClass('disabled')
$actions.find('.move.button').each (i, el) =>
$this = $(el)
moveName = $this.data('move-id')
gen = @model.get('generation').toUpperCase()
moveData = window.Generations[gen]?.MoveData[moveName]
@movePopover($this, moveName, moveData)
$actions.find('.switch.button').each (i, el) =>
$this = $(el)
slot = $this.data('slot')
pokemon = @model.getPokemon(@model.get('index'), slot)
@pokemonPopover($this, pokemon)
this
renderWaiting: =>
$actions = @$('.battle_actions')
$actions.find('.move.button').popover('destroy')
$actions.html """<div class="well well-battle-actions">
Waiting for opponent...
<a class="cancel">Cancel</a>
</div>"""
renderUserInfo: =>
locals =
yourTeam : @model.getTeam()
opponentTeam : @model.getOpponentTeam()
numActive : @model.numActive
yourIndex : @model.get('index')
window : window
$userInfo = @$('.battle_user_info')
$userInfo.find('.pokemon_icon').popover('destroy')
$userInfo.html @user_info_template(locals)
$userInfo.find('.pokemon_icon').each (i, el) =>
$this = $(el)
team = $this.data('team')
slot = $this.data('slot')
pokemon = @model.getPokemon(team, slot)
#@pokemonPopover($this, pokemon)
@renderTimers()
this
movePopover: ($this, moveName, move) =>
console.log(moveName)
{type, damage} = move
damageFriendly = move.damage[0].toUpperCase() + move.damage.substr(1)
targetFriendly = move.target[0].toUpperCase() + move.target.substr(1)
displayName = []
displayName.push(moveName)
displayName.push("""<img src="#{TypeSprite(type)}" alt="#{type}"/>
<img src="#{CategorySprite(move.damage)}" alt="#{damageFriendly}"/>
<img src="#{TargetSprite(move)}" alt="#{targetFriendly}"/>""")
options =
title: displayName.join('<br>')
html: true
content: JST['move_hover_info']({window, move})
trigger: 'hover'
animation: false
placement: 'top'
container: 'body'
$this.popover(options)
pokemonPopover: ($this, pokemon) =>
if @isIllusioned(pokemon)
pokemon = pokemon.getTeam().attributes.pokemon.at(pokemon.getTeam().attributes.pokemon.length - 1)
displayName = pokemon.get('species')
displayName += " @ #{pokemon.get('item')}" if pokemon.has('item')
displayName += "<br>"
for type in pokemon.getForme().types
displayName += """<img src="#{TypeSprite(type)}" alt="#{type}"/>"""
options =
title: displayName
html: true
content: JST['battle_hover_info']({window, pokemon})
trigger: 'hover'
animation: false
container: 'body'
$this.popover(options)
renderTeamPreview: =>
locals =
battle : @model
window : window
yourTeam : @model.getTeam()
@$('.battle_container').append @team_preview_template(locals)
@$('.battle_teams').find('.arrange_team .pokemon_icon').each (i, el) =>
$this = $(el)
slot = $this.data('index')
pokemon = @model.getPokemon(@model.get('index'), slot)
@pokemonPopover($this, pokemon)
togglePokemonOrSwitch: (e) =>
$currentTarget = $(e.currentTarget)
$activePokemon = @$('.arrange_pokemon.active')
if $currentTarget.is('.active')
$activePokemon.removeClass('active')
else if $activePokemon.length > 0
$activePokemon.removeClass('active')
@swapElements($currentTarget.get(0), $activePokemon.get(0))
else
$currentTarget.addClass('active')
swapElements: (element1, element2) ->
[parent1, next1] = [element1.parentNode, element1.nextSibling]
[parent2, next2] = [element2.parentNode, element2.nextSibling]
parent1.insertBefore(element2, next1)
parent2.insertBefore(element1, next2)
submitTeamPreview: (e) =>
$currentTarget = $(e.currentTarget)
return if $currentTarget.hasClass('disabled')
$currentTarget.addClass('disabled')
$teamPreview = @$('.battle_teams')
indices = for element in @$('.arrange_team .pokemon_icon')
$(element).data('index')
@model.arrangeTeam(indices)
$teamPreview.transition(opacity: 0, 250, => @removeTeamPreview())
removeTeamPreview: =>
$teamPreview = @$('.battle_teams')
$teamPreview.remove()
floatPercent: (player, slot, percent) =>
return if @skip?
kind = (if percent >= 0 then "" else "red")
percentText = "#{percent}"
percentText = "+#{percentText}" if percent >= 0
percentText += "%"
@floatText(player, slot, percentText, kind)
floatText: (player, slot, text, kind = "") =>
return if @skip?
$sprite = @$sprite(player, slot)
[x, y] = @getPokemonPosition(player, slot)
$text = $('<span/>').addClass("percentage #{kind}").text(text)
$text.hide().appendTo(@$('.battle_pane'))
x -= $text.width() / 2
y -= 20
$text.css(position: 'absolute', top: y, left: x).show()
if kind == 'red'
$text.transition(top: "+=30", 1000, 'easeOutCubic')
$text.delay(1000)
$text.transition(opacity: 0, 1000, -> $text.remove())
else
$text.transition(top: "-=30", 1000, 'easeOutCubic')
$text.delay(1000)
$text.transition(opacity: 0, 1000, -> $text.remove())
switchIn: (player, slot, fromSlot, done) =>
$oldPokemon = @$pokemon(player, slot)
$newPokemon = @$pokemon(player, fromSlot)
$newSprite = @$sprite(player, fromSlot)
pokemon = @model.getPokemon(player, slot)
@renderUserInfo()
# Prepare old/new pokemon
$oldPokemon.attr('data-slot', fromSlot)
$newPokemon.attr('data-slot', slot)
$newPokemon.removeClass('hidden')
@pokemonPopover($newSprite, pokemon)
pokemon.set('beeninbattle', true)
@cannedText('SENT_OUT', player, player, slot)
if @skip?
$oldPokemon.css(opacity: 0)
$newPokemon.css(opacity: 1)
done()
return
# Create and position pokeball
[x, y] = @getPokemonPosition(player, slot)
$pokeball = @makePokeball(x, y)
$pokeball.css(opacity: 0)
$pokeball.appendTo(@$(".battle_pane"))
# Start animations
$oldPokemon.css(opacity: 0)
$newPokemon.css(opacity: 0)
$pokeball.css(opacity: 1)
releasePokemon = =>
$pokeball.css(opacity: 0)
$newSprite
.transition(y: -15, scale: .1, 0)
.transition(scale: 1, 250 * @speed)
.transition y: 0, 250 * @speed, 'out', =>
@removePokeball($pokeball)
setTimeout(done, 500 * @speed)
$newPokemon.transition(opacity: 1)
setTimeout(releasePokemon, 250 * @speed)
switchOut: (player, slot, done) =>
$pokemon = @$pokemon(player, slot)
$sprite = @$sprite(player, slot)
@cannedText('WITHDREW', player, player, slot)
if @skip?
$pokemon.addClass('hidden')
$sprite.popover('destroy')
done()
return
width = $sprite.width()
height = $sprite.height()
$sprite.transition(scale: 0.1, x: width >> 1, y: height, 150 * @speed)
$pokemon.transition opacity: 0, 250 * @speed, ->
$pokemon.addClass('hidden').css(opacity: 1)
$sprite.popover('destroy')
$sprite.transition(scale: 1, x: 0, y: 0, 0)
setTimeout(done, 250 * @speed)
makePokeball: (x, y) =>
$pokeball = $("""<div class="pokeball"/>""")
$pokeball.css(top: y, left: x)
size = 22
$pokeball.width(size).height(size)
func = ->
$pokeball.css(backgroundPositionY: -10 - func.counter * 40)
func.counter = (func.counter + 1) % 8
func.counter = 1
id = setInterval(func, 40)
$pokeball.data('animation-id', id)
$pokeball
removePokeball: ($pokeball) =>
id = $pokeball.data('animation-id')
clearTimeout(id)
$pokeball.remove()
logMove: (player, slot, moveName, done) =>
owner = @model.getTeam(player).escape('owner')
pokemon = @model.getPokemon(player, slot)
@addMoveMessage(owner, pokemon, moveName)
@lastMove = moveName
done()
moveSuccess: (player, slot, targetSlots, moveName, done) =>
return done() if @skip?
gen = @model.get('generation').toUpperCase()
moveData = window.Generations[gen]?.MoveData[moveName]
if !moveData
console.error("Could not display animation for #{moveName} as it does not
exist in #{gen}.")
done()
return
[targetPlayer, targetSlot] = targetSlots[0]
$attacker = @$sprite(player, slot)
$defender = @$sprite(targetPlayer, targetSlot)
[ax, ay] = @getPokemonPosition(player, slot)
[dx, dy] = @getPokemonPosition(targetPlayer, targetSlot)
front = @isFront(player)
scale = (if front then 1.3 else 1/1.3)
if moveName == 'Earthquake'
speed = @speed
$attacker.add($defender).each (index) ->
$(this).transition(x: -75, 62.5 * speed, 'easeInOutCubic')
.transition(x: 75, 125 * speed, 'easeInOutCubic')
.transition(x: -30, 125 * speed, 'easeInOutCubic')
.transition(x: 30, 125 * speed, 'easeInOutCubic')
.transition(x: 0, 62.5 * speed, 'easeInOutCubic')
setTimeout(done, 500 * @speed)
else if 'contact' in moveData.flags
# Simple attack animation
# Tackling the opponent
$attacker
.transition(x: dx - ax, y: dy - ay, scale: scale, 250 * @speed, 'in')
.transition(x: 0, y: 0, scale: 1, 250 * @speed, 'out')
$defender.delay(400 * @speed)
.transition(x: (if front then -16 else 8), 50 * @speed, 'easeOutCubic')
.transition(x: 0, 50 * @speed, 'easeInOutCubic')
setTimeout(done, 500 * @speed)
else if moveData['power'] > 0
# Non-contact attacking move
# Projectile
$projectile = @$projectile(player, slot, moveData)
[transX, transY] = [(dx - ax), (dy - ay)]
$projectile
.transition(x: transX / 2, y: transY / 2, scale: (scale + 1) / 2, 200 * @speed, 'easeOutCubic')
.transition(x: transX, y: transY, scale: scale, 200 * @speed, 'easeOutCubic')
.transition(opacity: 0, 100 * @speed, -> $projectile.remove())
$defender.delay(400 * @speed)
.transition(x: -4, 0, 'linear').delay(50 * @speed)
.transition(x: 4, 0, 'linear').delay(50 * @speed)
.transition(x: 0, 0, 'linear')
setTimeout(done, 500 * @speed)
else if player != targetPlayer || slot != targetSlot
# This is a non-attacking move that affects another pokemon
# S-shaped movement
$projectile = @$projectile(player, slot, moveData)
[transX, transY] = [(dx - ax), (dy - ay)]
$projectile
.transition(x: transX * 2 / 3, y: transY / 3, 150 * @speed, 'easeInOutSine')
.transition(x: transX / 3, y: transY * 2 / 3, 100 * @speed, 'easeInOutSine')
.transition(x: transX, y: transY, 150 * @speed, 'easeInOutSine')
.transition opacity: 0, 100 * @speed, 'easeInOutSine', ->
$projectile.remove()
setTimeout(done, 500 * @speed)
else
# Side-to-side movement
$attacker = @$sprite(player, slot)
$attacker
.transition(x: -16, 125 * @speed, 'easeInOutSine')
.transition(x: 16, 250 * @speed, 'easeInOutSine')
.transition(x: 0, 125 * @speed, 'easeInOutSine')
setTimeout(done, 500 * @speed)
cannedText: (cannedString, args...) =>
@parseCannedText(CannedText[cannedString], args, ->)
parseCannedText: (cannedInteger, args, done) =>
cannedTextName = CannedMapReverse[cannedInteger]
cannedText = @getCannedText(cannedTextName, args)
@addLog(cannedText)
@actOnCannedText(cannedTextName, cannedText, done)
# Some canned text requires special actions.
# For example, misses require a delay, and also prints to the battle pane.
actOnCannedText: (cannedTextName, cannedText, done) =>
return done() if @skip?
switch cannedTextName
when 'MOVE_MISS', 'JUMP_KICK_MISS', 'MOVE_FAIL', 'IMMUNITY'
@addSummary(cannedText)
setTimeout(done, 500 * @speed)
when 'PARALYZE_CONTINUE', 'FREEZE_CONTINUE', 'SLEEP_CONTINUE',\
'SUN_END', 'RAIN_END', 'SAND_END', 'HAIL_END',\
'SAND_CONTINUE', 'HAIL_CONTINUE'
@addSummary(cannedText, newline: true)
done()
else
@addSummary(cannedText)
done()
getCannedText: (cannedTextName, args) =>
cannedText = 'Please refresh to see this text!'
genIndex = ALL_GENERATIONS.indexOf(@model.get('generation'))
language = 'en'
# Run through inheritance chain of generations to find the canned text
for i in [genIndex..0] by -1
generation = ALL_GENERATIONS[i]
if CannedMap[generation]?[language]?[cannedTextName]
cannedText = CannedMap[generation][language][cannedTextName]
break
# Replace special characters in the canned text with the arguments
cannedText.replace /\$([a-z]+|\d+)/g, (match, p1, index) =>
switch p1
when 'p'
[player, slot] = args.splice(0, 2)
pokemon = @model.getPokemon(player, slot)
if @isIllusioned(pokemon)
pokemon = pokemon.getTeam().attributes.pokemon.at(pokemon.getTeam().attributes.pokemon.length - 1)
pokemon.escape('name')
when 't'
[player] = args.splice(0, 1)
@model.getTeam(player).escape('owner')
when 'ts'
[player] = args.splice(0, 1)
text = if @isFront(player)
"the opposing team"
else
"your team"
# Capitalize the text if necessary
text = "#{text[0].toUpperCase()}#{text[1...]}" if index == 0
text
else
[text] = args.splice(0, 1)
text
activateAbility: (player, slot, abilityName, done) =>
return done() if @skip?
pokemon = @model.getPokemon(player, slot)
isFront = @isFront(player)
$ability = $('<div/>').addClass('ability_activation')
$ability.html("#{pokemon.escape('name')}'s <strong>#{abilityName}</strong>")
$ability.addClass((if isFront then 'front' else 'back'))
$ability.width(1)
$ability.appendTo(@$('.battle_pane'))
$ability
.transition(opacity: 1, width: 150, 100 * @speed, 'easeInQuad')
.delay(3000)
.transition opacity: 0, 300 * @speed, 'easeInQuad', ->
$ability.remove()
setTimeout(done, 500 * @speed)
changeSprite: (player, slot, species, forme, done) =>
$spriteContainer = @$spriteContainer(player, slot)
$sprite = @$sprite(player, slot)
$spriteContainer.data('species', species)
$spriteContainer.data('forme', forme)
if @skip?
@renderPokemon $spriteContainer, ->
$sprite.popover('destroy')
$sprite.remove()
done()
return
$sprite.fadeOut 200 * @speed, =>
@renderPokemon $spriteContainer, ($image) ->
$sprite.popover('destroy')
$sprite.remove()
$image.hide().fadeIn(200 * @speed)
# Don't waste time changing the sprite if we can't see it.
if @model.getPokemon(player, slot).isFainted()
done()
else
setTimeout(done, 400 * @speed)
changeName: (player, slot, newName, done) =>
nameBox = @$pokemon(player, slot).find('.pokemon-name')
nameBox.html newName
done()
changeWeather: (newWeather, done) =>
$overlays = @$('.battle_overlays')
$overlays.find('.weather').transition(opacity: 0, 500 * @speed, -> $(this).remove())
[overlayWidth, overlayHeight] = [600, 300]
$weather = switch newWeather
when Weather.RAIN
$weather = $("<div/>").addClass("battle_overlay weather rain")
for i in [0...100]
dropLeft = _.random(-300, overlayWidth)
dropTop = _.random(-2 * overlayHeight - 100, overlayHeight)
$drop = $('<div class="drop"></div>')
$drop.css(left: dropLeft, top: dropTop)
$weather.append($drop)
$overlays.append($weather)
$weather
when Weather.SUN
$weather = $("<div/>").addClass("battle_overlay weather sun")
for i in [0...10]
millisecs = Math.floor(Math.random() * 3000) + 'ms'
$ray = $('<div class="ray"></div>')
$ray.css(left: Math.floor(Math.random() * overlayWidth))
$ray.css({
'-webkit-animation-delay': millisecs
'-moz-animation-delay': millisecs
'-ms-animation-delay': millisecs
'-o-animation-delay': millisecs
'animation-delay': millisecs
})
$weather.append($ray)
$overlays.append($weather)
$weather
when Weather.SAND
$weather = $("<div/>").addClass("battle_overlay weather sand")
[width, height] = [overlayWidth, overlayHeight]
[sandWidth, sandHeight] = [600, 600]
streams = []
for x in [-(2 * width)..width] by sandWidth
for y in [-(2 * height)...height] by sandHeight
percentX = Math.floor(100 * x / width) + "%"
percentY = Math.floor(100 * y / height) + "%"
streams.push([percentX, percentY])
for [left, top] in streams
$sand = $('<div class="sand_overlay"/>')
$sand.css({left, top})
$weather.append($sand)
$overlays.append($weather)
$weather
when Weather.HAIL
$weather = $("<div/>").addClass("battle_overlay weather hail")
for i in [0...100]
hailstoneLeft = _.random(-300, overlayWidth)
hailstoneTop = _.random(-2 * overlayHeight, overlayHeight)
$hailstone = $('<div class="hailstone"></div>')
size = Math.floor(Math.random() * 5) + 5
$hailstone.width(size)
$hailstone.height(size)
$hailstone.css(left: hailstoneLeft, top: hailstoneTop)
$weather.append($hailstone)
$overlays.append($weather)
$weather
else $()
$weather.transition(opacity: 1, 500 * @speed)
done()
attachPokemon: (player, slot, attachment, done) =>
pokemon = @model.getPokemon(player, slot)
$pokemon = @$pokemon(player, slot)
switch attachment
when 'SubstituteAttachment'
$spriteContainer = @$spriteContainer(player, slot)
$spriteContainer.addClass('fade')
substituteUrl = (if @isFront(player) then "substitute" else "subback")
substituteUrl = "../Sprites/battle/#{substituteUrl}.gif"
@addPokemonImage $pokemon, substituteUrl, callback: ($image) =>
[x, y] = @getPokemonPosition(player, slot)
$image.addClass('substitute')
width = $image.width()
height = $image.height()
x -= (width >> 1)
y -= (height >> 1)
yOffset = 200
$image.css(position: 'absolute', left: x, top: y)
$image.show()
return done() if @skip?
setTimeout ->
$image
.transition(y: -yOffset, 0)
.transition(y: 0, 200 * @speed, 'easeInQuad')
.transition(y: -yOffset >> 3, 100 * @speed, 'easeOutQuad')
.transition(y: 0, 100 * @speed, 'easeInQuad')
, 0
setTimeout(done, 500 * @speed)
when 'ConfusionAttachment'
@addPokemonEffect($pokemon, "confusion", "Confusion")
@addLog("#{pokemon.escape('name')} became confused!")
done()
when 'ProtectAttachment', 'KingsShieldAttachment', 'SpikyShieldAttachment'
@cannedText('PROTECT_CONTINUE', player, slot)
@attachScreen(player, slot, 'pink', 0, done)
when 'Air Balloon'
@addPokemonEffect($pokemon, "balloon", "Balloon")
@addLog("#{pokemon.escape('name')} floats in the air with its Air Balloon!")
done()
when 'Paralyze'
pokemon.set('status', 'paralyze')
done()
when 'Burn'
pokemon.set('status', 'burn')
done()
when 'Poison'
pokemon.set('status', 'poison')
done()
when 'Toxic'
pokemon.set('status', 'toxic')
done()
when 'Freeze'
pokemon.set('status', 'freeze')
done()
when 'Sleep'
pokemon.set('status', 'sleep')
done()
else
done()
attachTeam: (player, attachment, done) =>
$battlePane = @$('.battle_pane')
isFront = @isFront(player)
switch attachment
when "StealthRockAttachment"
$div = $("<div/>").addClass("field-#{player} team-stealth-rock")
if isFront
[ oldX, oldY ] = [ "20%", "80%" ]
[ newX, newY ] = [ "67%", "45%" ]
else
[ oldX, oldY ] = [ "80%", "20%" ]
[ newX, newY ] = [ "34%", "81%" ]
if @skip?
$div.css(top: newY, left: newX, opacity: .5)
$battlePane.prepend($div)
done()
else
$div.css(top: oldY, left: oldX, opacity: 0)
$div.transition(top: newY, left: newX, opacity: 1, 500 * @speed)
.delay(1000 * @speed).transition(opacity: .5)
$battlePane.prepend($div)
setTimeout(done, 500 * @speed)
when "ToxicSpikesAttachment"
$div = $("<div/>").addClass("field-#{player} team-toxic-spikes")
previousLayers = @$(".field-#{player}.team-toxic-spikes").length
if isFront
oldY = "80%"
oldX = "20%"
newY = switch previousLayers
when 0 then "51%"
when 1 then "50%"
newX = switch previousLayers
when 0 then "77%"
when 1 then "73%"
else
oldY = "30%"
oldX = "80%"
newY = switch previousLayers
when 0 then "87%"
when 1 then "86%"
newX = switch previousLayers
when 0 then "23%"
when 1 then "27%"
if @skip?
$div.css(top: newY, left: newX, opacity: .5)
$battlePane.prepend($div)
done()
else
$div.css(top: oldY, left: oldX, opacity: 0)
$div.transition(top: newY, left: newX, opacity: 1, 500 * @speed)
.delay(1000 * @speed).transition(opacity: .5)
$battlePane.prepend($div)
setTimeout(done, 500 * @speed)
when "SpikesAttachment"
$div = $("<div/>").addClass("field-#{player} team-spikes")
previousLayers = @$(".field-#{player}.team-spikes").length
if isFront
oldY = "80%"
oldX = "20%"
newY = switch previousLayers
when 0 then "49%"
when 1 then "52%"
when 2 then "50%"
newX = switch previousLayers
when 0 then "87%"
when 1 then "84%"
when 2 then "82%"
else
oldY = "30%"
oldX = "80%"
newY = switch previousLayers
when 0 then "85%"
when 1 then "88%"
when 2 then "86%"
newX = switch previousLayers
when 0 then "13%"
when 1 then "16%"
when 2 then "18%"
if @skip?
$div.css(top: newY, left: newX, opacity: .5)
$battlePane.prepend($div)
done()
else
$div.css(top: oldY, left: oldX, opacity: 0)
$div.transition(top: newY, left: newX, opacity: 1, 500 * @speed)
.delay(1000 * @speed).transition(opacity: .5)
$battlePane.prepend($div)
setTimeout(done, 500 * @speed)
when "StickyWebAttachment"
$div = $("<div/>").addClass("field-#{player} team-sticky-web")
if isFront
[ oldX, oldY ] = [ "0%", "50%" ]
[ newX, newY ] = [ "65%", "10%" ]
else
[ oldX, oldY ] = [ "65%", "10%" ]
[ newX, newY ] = [ "0%", "50%" ]
if @skip?
$div.css(top: newY, left: newX, opacity: .5)
$battlePane.prepend($div)
done()
else
$div.css(top: oldY, left: oldX, opacity: 0)
$div.animate(top: newY, left: newX, opacity: 1, 1000 * @speed, 'easeOutElastic')
.delay(1000 * @speed).animate(opacity: .2)
$battlePane.prepend($div)
setTimeout(done, 500 * @speed)
when "ReflectAttachment"
@cannedText('REFLECT_START', player)
@attachScreen(player, 'blue', 10, done)
when "LightScreenAttachment"
@cannedText('LIGHT_SCREEN_START', player)
@attachScreen(player, 'yellow', 5, done)
else
done()
attachBattle: (attachment, done) =>
done()
attachScreen: (player, slot, klass, offset, done=->) =>
if arguments.length == 4
[slot, klass, offset, done] = [null, slot, klass, offset]
finalSize = 100
halfSize = (finalSize >> 1)
$screen = $("<div/>").addClass("team-screen #{klass} field-#{player}")
$screen.addClass("slot-#{slot}") if slot
[x, y] = @getPokemonPosition(player, 0)
x += offset
y += offset
$screen.css(left: x, top: y).appendTo(@$('.battle_pane'))
if @skip?
$screen.css(width: finalSize, height: finalSize)
$screen.css(x: -halfSize, y: -halfSize)
done()
else
$screen
.transition(width: finalSize, x: -halfSize, 250 * @speed, 'easeInOutCubic')
.transition(height: finalSize, y: -halfSize, 250 * @speed, 'easeInOutCubic')
setTimeout(done, 500 * @speed)
unattachScreen: (player, slot, klass, done=->) =>
if arguments.length == 3
[slot, klass, done] = [null, slot, klass]
selector = ".team-screen.#{klass}.field-#{player}"
selector += ".slot-#{slot}" if slot
$selector = @$(selector)
$selector.fadeOut(500 * @speed, -> $selector.remove())
done()
boost: (player, slot, deltaBoosts, options = {}) =>
pokemon = @model.getPokemon(player, slot)
if @isIllusioned(pokemon)
pokemonName = pokemon.getTeam().attributes.pokemon.at(pokemon.getTeam().attributes.pokemon.length - 1).attributes.name
else
pokemonName = pokemon.escape('name')
stages = pokemon.get('stages')
$pokemon = @$pokemon(player, slot)
$effects = $pokemon.find('.pokemon-effects')
posFloatText = []
negFloatText = []
for stat, delta of deltaBoosts
previous = stages[stat]
stages[stat] += delta
# Boost log message
unless options.silent
message = @makeBoostMessage(pokemonName, stat, delta, stages[stat])
@addLog(message) if message
# Boost in the view
abbreviatedStat = switch stat
when "attack" then "Att"
when "defense" then "Def"
when "speed" then "Spe"
when "specialAttack" then "Sp.A"
when "specialDefense" then "Sp.D"
when "accuracy" then "Acc."
when "evasion" then "Eva."
else stat
amount = stages[stat]
amount = "+#{amount}" if amount > 0
finalStat = "#{amount} #{abbreviatedStat}"
$effect = @addPokemonEffect($pokemon, "boost #{stat}", finalStat)
if amount < 0
$effect.addClass('negative')
negFloatText.push("#{delta} #{abbreviatedStat}")
else if amount > 0
$effect.removeClass('negative')
posFloatText.push("+#{delta} #{abbreviatedStat}")
else # amount == 0
$effect.remove()
# Boost text messages
if options.floatText
if negFloatText.length > 0
@floatText(player, slot, negFloatText.join('/'), 'red')
if posFloatText.length > 0
@floatText(player, slot, posFloatText.join('/'))
true
makeBoostMessage: (pokemonName, stat, amount, currentBoost) ->
stat = switch stat
when "attack" then "Attack"
when "defense" then "Defense"
when "speed" then "Speed"
when "specialAttack" then "Special Attack"
when "specialDefense" then "Special Defense"
when "accuracy" then "Accuracy"
when "evasion" then "Evasion"
else stat
if amount > 0
if amount == 12
"#{pokemonName} cut its own HP and maximized its #{stat}!"
else
adverb = "" if amount == 1
adverb = " sharply" if amount == 2
adverb = " drastically" if amount >= 3
"#{pokemonName}'s #{stat} rose#{adverb}!"
else if amount < 0
adverb = "" if amount == -1
adverb = " harshly" if amount == -2
adverb = " severely" if amount <= -3
"#{pokemonName}'s #{stat}#{adverb} fell!"
else if currentBoost == 6
"#{pokemonName}'s #{stat} won't go any higher!"
else if currentBoost == -6
"#{pokemonName}'s #{stat} won't go any lower!"
unattachPokemon: (player, slot, effect, done) =>
pokemon = @model.getPokemon(player, slot)
$pokemon = @$pokemon(player, slot)
switch effect
when 'SubstituteAttachment'
$spriteContainer = @$spriteContainer(player, slot)
$spriteContainer.removeClass('fade')
$substitute = $pokemon.find('.substitute').first()
if @skip?
$substitute.remove()
done()
else
$substitute.transition y: 300, opacity: 0, 300 * @speed, ->
$substitute.remove()
setTimeout(done, 300 * @speed)
when 'ProtectAttachment', 'KingsShieldAttachment', 'SpikyShieldAttachment'
@unattachScreen(player, slot, 'pink', done)
when 'Air Balloon'
$pokemon.find(".pokemon-effect.balloon").remove()
@addLog("#{pokemon.escape('name')}'s Air Balloon popped!")
done()
when 'ConfusionAttachment'
$pokemon.find(".pokemon-effect.confusion").remove()
done()
when 'Paralyze'
pokemon.set('status', null)
done()
when 'Burn'
pokemon.set('status', null)
done()
when 'Poison'
pokemon.set('status', null)
done()
when 'Toxic'
pokemon.set('status', null)
done()
when 'Freeze'
pokemon.set('status', null)
done()
when 'Sleep'
pokemon.set('status', null)
done()
else
done()
setBoosts: (player, slot, boosts) =>
pokemon = @model.getPokemon(player, slot)
stages = pokemon.get('stages')
for stat of boosts
boosts[stat] -= stages[stat]
@boost(player, slot, boosts, silent: true)
resetBoosts: (player, slot) =>
pokemon = @model.getPokemon(player, slot)
pokemon.resetBoosts()
$pokemon = @$pokemon(player, slot)
$pokemon.find('.boost').remove()
handlePercent: (pokemon) =>
$pokemon = @$pokemon(pokemon)
$info = $pokemon.find(".pokemon-info")
$allHP = $info.find('.hp')
$hpText = $info.find('.hp-text')
percent = pokemon.getPercentHP()
if percent <= 20
$allHP.css(backgroundColor: "#f00")
else if percent <= 50
$allHP.css(backgroundColor: "#ff0")
else
$allHP.css(backgroundColor: "#0f0")
$allHP.width("#{percent}%")
$hpText.text("#{percent}%")
deltaPercent = (percent - pokemon.previous('percent'))
[player, slot] = [$pokemon.data('team'), $pokemon.data('slot')]
@floatPercent(player, slot, deltaPercent)
handleStatus: (pokemon, status) =>
$pokemon = @$pokemon(pokemon)
if status?
$effects = $pokemon.find('.pokemon-effects')
display = @mapStatusForDisplay(status)
@addPokemonEffect($pokemon, status, display)
else
$pokemon.find(".pokemon-effect.#{pokemon.previous('status')}").remove()
showSpinner: =>
@$('.battle_actions .show_spinner').removeClass('hidden')
mapStatusForDisplay: (status) =>
switch status
when "burn" then "BRN"
when "paralyze" then "PAR"
when "poison" then "PSN"
when "toxic" then "TOX"
when "freeze" then "FRZ"
when "sleep" then "SLP"
addPokemonEffect: ($pokemon, klass, text) =>
$effects = $pokemon.find(".pokemon-effects")
$effect = $effects.find(".pokemon-effect.#{klass.replace(/\s+/g, '.')}")
return $effect if !text
if $effect.length == 0
$effect = $("<div class='pokemon-effect #{klass}'>#{text}</div>")
$effect.appendTo($effects)
else
$effect.text(text)
$effect
unattachTeam: (player, attachment, done) =>
$battlePane = @$('.battle_pane')
switch attachment
when "StealthRockAttachment"
$battlePane.find(".field-#{player}.team-stealth-rock").remove()
done()
when "ToxicSpikesAttachment"
$battlePane.find(".field-#{player}.team-toxic-spikes").remove()
done()
when "SpikesAttachment"
$battlePane.find(".field-#{player}.team-spikes").remove()
done()
when "StickyWebAttachment"
$battlePane.find(".field-#{player}.team-sticky-web").remove()
done()
when 'ReflectAttachment'
@cannedText('REFLECT_END', player)
@unattachScreen(player, 'blue', done)
when 'LightScreenAttachment'
@cannedText('LIGHT_SCREEN_END', player)
@unattachScreen(player, 'yellow', done)
else
done()
unattachBattle: (effect, done) =>
done()
updateTimers: (timers) =>
now = $.now()
for timer, index in timers
@timers[index] = timer
@timerUpdatedAt[index] = now
renderTimers: =>
for i in [0..1]
@renderTimer(i)
countdownTimers: =>
@renderTimers()
diff = ($.now() - @battleStartTime - @timerIterations * 1000)
@timerIterations++
@countdownTimersId = setTimeout(@countdownTimers, 1000 - diff)
renderTimer: (index) =>
$info = @$playerInfo(index)
$remainingTimer = $info.find('.remaining-timer')
$frozenTimer = $info.find('.frozen-timer')
timeRemaining = @timers[index] - $.now() + @timerUpdatedAt[index]
if !timeRemaining && timeRemaining != 0 # Falsy, but not 0.
$remainingTimer.addClass('hidden')
else
$remainingTimer.removeClass('hidden')
$remainingTimer.text PokeBattle.humanizeTime(timeRemaining)
# Change timer class
if timeRemaining <= 1 * 60 * 1000
$frozenTimer.addClass("battle-timer-low")
$remainingTimer.addClass("battle-timer-low")
else
$frozenTimer.removeClass("battle-timer-low")
$remainingTimer.removeClass("battle-timer-low")
# Ensure frozen timer displays right
if @timerFrozenAt[index]
$frozenTimer.text PokeBattle.humanizeTime(@timerFrozenAt[index])
$frozenTimer.removeClass('hidden')
$remainingTimer.addClass('battle-timer-small')
if @showSecondaryTimer
$remainingTimer.removeClass('hidden')
else
$remainingTimer.addClass('hidden')
else
$frozenTimer.addClass('hidden')
$remainingTimer.removeClass('battle-timer-small hidden')
# There are two ways your timer can stop:
# 1. When you have no actions and you're waiting. e.g. opponent used U-turn.
# 2. When you select a move.
# The two cases differ; only display a secondary timer in the 2nd case.
pauseTimer: (index, timeSinceLastAction) =>
now = $.now()
@timerFrozenAt[index] = @timers[index] - (now - @timerUpdatedAt[index])
# Update timerUpdatedAt, because it only knows about when the timers are
# were updated locally.
@timerUpdatedAt[index] -= timeSinceLastAction if timeSinceLastAction
@showSecondaryTimer = timeSinceLastAction?
@renderTimer(index)
resumeTimer: (index) =>
delete @timerFrozenAt[index]
@renderTimer(index)
$playerInfo: (index) =>
$userInfo = @$('.battle_user_info')
if index == @model.get('index')
return $userInfo.find('.left')
else
return $userInfo.find('.right')
announceWinner: (player, done) =>
owner = @model.getTeam(player).escape('owner')
message = "#{owner} won!"
@announceWin(message, done)
announceForfeit: (player, done) =>
owner = @model.getTeam(player).escape('owner')
message = "#{owner} has forfeited!"
@announceWin(message, done)
announceTimer: (player, done) =>
owner = @model.getTeam(player).escape('owner')
message = "#{owner} was given the timer win!"
@announceWin(message, done)
announceExpiration: (done) =>
message = "The battle expired!"
@announceWin(message, done)
announceWin: (message, done) =>
@chatView.print("<h3>#{message}</h3>")
@addSummary(message, newline: true)
@model.set('finished', true)
done()
handleEnd: (battle, end) =>
if @shouldRenderEnd()
@disableButtons()
@$('.battle_actions').html(@battle_end_template({window}))
clearTimeout(@countdownTimersId)
handleRemoval: (battle) =>
if battle == @model
@remove()
shouldRenderEnd: =>
PokeBattle.primus?
saveReplay: (e) =>
$replayButton = $(e.currentTarget)
return if $replayButton.is('.disabled')
$replayButton.addClass('disabled')
$replayButton.find('.show_spinner').removeClass('hidden')
PokeBattle.primus.send 'saveReplay', @model.id, (error, replayId) =>
$replayButton.find('.show_spinner').addClass('hidden')
if error
@chatView.announce("error", error)
else
relativeUrl = "/replays/#{replayId}"
absoluteUrl = "#{window.location.protocol}//#{window.location.host}"
absoluteUrl += relativeUrl
@chatView.announce("success", "Your replay was saved! Share the link: #{absoluteUrl}.")
saveLog: =>
log = []
$children = @$('.messages').children()
$children.each ->
$this = $(this)
isHeader = /H\d/i.test(@tagName)
log.push "" if isHeader
log.push $this.text()
log.push "" if isHeader
log = [ log.join('\n') ]
fileName = (@model.get('teams').map((team) -> team.escape('owner'))).join(" vs ")
fileName += ".txt"
blob = new Blob(log, type: "text/plain;charset=utf-8", endings: "native")
saveAs(blob, fileName)
returnToLobby: =>
PokeBattle.navigation.focusLobby()
changeBattleSpeed: (e) =>
@speed = Number($(e.currentTarget).val()) || 1
try
window.localStorage.setItem('battle_speed', @speed)
catch
$pokemon: (player, slot) =>
if arguments.length == 1
pokemon = player
@model.get('teams').forEach (team, playerIndex) ->
index = team.indexOf(pokemon)
if index != -1
player = playerIndex
slot = index
return
@$(".pokemon[data-team='#{player}'][data-slot='#{slot}']")
$spriteContainer: (player, slot) =>
@$pokemon(player, slot).find('.sprite')
$sprite: (player, slot) =>
@$spriteContainer(player, slot).find('img')
$projectile: (player, slot, moveData) =>
$projectile = $('<div/>').addClass('projectile')
$projectile.addClass(moveData['type'].toLowerCase())
$projectile.appendTo(@$(".battle_pane"))
[x, y] = @getPokemonPosition(player, slot)
$projectile.css(left: x, top: y)
$projectile
isFront: (player) =>
@model.get('index') != player
faint: (player, slot, done) =>
$pokemon = @$pokemon(player, slot)
$sprite = @$sprite(player, slot)
if @skip?
$sprite.popover('destroy')
$sprite.remove()
done()
return
$sprite.transition y: 100, opacity: 0, 250 * @speed, 'ease-in', ->
$sprite.popover('destroy')
$sprite.remove()
setTimeout(done, 250 * @speed)
@renderUserInfo()
resetPopovers: =>
return if !@model.teams
for player in [0...2]
for slot in [0...@model.numActive]
$pokemon = @$pokemon(player, slot)
pokemon = @model.getPokemon(player, slot)
$sprite = @$sprite(player, slot)
$sprite.popover('destroy')
@pokemonPopover($sprite, pokemon)
enableButtons: (validActions) =>
if validActions
@renderActions(validActions)
@resumeTimer(@model.get('index'))
else
# We didn't get any actions; we must be already waiting.
@disableButtons()
disableButtons: =>
@$('.battle_actions .switch.button').popover('destroy')
@renderWaiting()
addMoveMessage: (owner, pokemon, moveName) =>
if @isIllusioned(pokemon)
lastpokemon = pokemon.getTeam().attributes.pokemon.at(pokemon.getTeam().attributes.pokemon.length - 1)
pokemon = lastpokemon
@chatView.print("<p class='move_message'>#{owner}'s #{@pokemonHtml(pokemon)} used <strong>#{moveName}</strong>!</p>")
@addSummary("#{owner}'s #{pokemon.escape('name')} used <strong>#{moveName}</strong>!", newline: true, big: true)
isIllusioned: (pokemon) =>
illusionmons = ['Zoroark', 'Zorua']
console.log(pokemon.getIllu())
return true if (pokemon.attributes.species in illusionmons) and pokemon.attributes.percent == 100 and @model.attributes.turn <= 1
return true if pokemon.getIllu()
return false
addLog: (message) =>
@chatView.print("<p>#{message}</p>")
addSummary: (message, options = {}) =>
return if @skip?
$summary = @$('.battle_summary')
$summary.show()
$p = $summary.children().last()
if $p.length == 0 || $p.is('.newline') || options.newline
$p = $("<p/>").html(message).hide()
$p.addClass('newline') if options.newline
$p.addClass('big') if options.big
$p.appendTo($summary)
else
html = $p.html()
$p.html("#{html} #{message}")
$p.slideDown(200)
# Remove the summaries over time if we can see the full log.
return unless @chatView.$el.is(':visible')
removeP = ->
$p.slideUp 200, ->
$p.remove()
$summary.hide() if $summary.is(':empty')
setTimeout(removeP, 4000)
beginTurn: (turn, done) =>
@chatView.print("<h2>Turn #{turn}</h2>")
@model.set('turn', turn)
done()
continueTurn: (done) =>
@$('.battle_summary').empty().hide()
offset = @$('.battle_pane').offset().top + @$el.scrollTop()
offset -= @$el.offset().top
@$el.scrollTop(offset)
done()
makeMove: (e) =>
forSlot = 0
$target = $(e.currentTarget)
moveName = $target.data('move-id')
if $target.hasClass('disabled')
console.log "Cannot use #{moveName}."
return
console.log "Making move #{moveName}"
pokemon = @model.getPokemon(@model.get('index'), 0)
@showSpinner()
@model.makeMove(moveName, forSlot, @afterSelection.bind(this, pokemon))
switchPokemon: (e) =>
forSlot = 0
$target = $(e.currentTarget)
toSlot = $target.data('slot')
if $target.hasClass('disabled')
console.log "Cannot switch to #{toSlot}."
return
console.log "Switching to #{toSlot}"
toSlot = parseInt(toSlot, 10)
pokemon = @model.getPokemon(@model.get('index'), 0)
@showSpinner()
@model.makeSwitch(toSlot, forSlot, @afterSelection.bind(this, pokemon))
cancelAction: (e) =>
@$('.battle_actions').html """
<div class="well well-battle-actions">Canceling...</div>
"""
pokemon = @model.getPokemon(@model.get('index'), 0)
@model.makeCancel()
@afterAction(pokemon)
megaEvolve: (e) =>
$target = $(e.currentTarget)
$target.toggleClass('pressed')
pokemon = @model.getPokemon(@model.get('index'), 0)
pokemon.set('megaEvolve', $target.hasClass("pressed"))
afterSelection: (pokemon) =>
@disableButtons()
@pauseTimer(@model.get('index'), 0)
@afterAction(pokemon)
afterAction: (pokemon) =>
pokemon.set('megaEvolve', false)
preloadImages: =>
gen = window.Generations[@model.get('generation').toUpperCase()]
teams = @model.get('teams').map (team, playerIndex) =>
front = @isFront(playerIndex)
team.get('pokemon').map (pokemon) ->
species = pokemon.get('species')
forme = pokemon.get('forme')
shiny = pokemon.get('shiny')
{id} = gen.SpeciesData[species]
formes = gen.FormeData[species]
formeNames = _.keys(formes)
formeNames = _.filter formeNames, (formeName) ->
forme == formeName || formes[formeName].isBattleOnly
for formeName in formeNames
PokemonSprite(id, formeName, front: front, shiny: shiny)
# First pokemon of each team is loaded first, then second, etc.
pokemonUrls = _.flatten(_.zip(teams...))
for pokemonUrl in pokemonUrls
image = new Image()
image.src = pokemonUrl
addPokemonImage: ($div, url, options = {}) =>
scale = options.scale || 1
image = new Image()
$image = $(image)
$image.load =>
{width, height} = image
if scale != 1
width *= scale
height *= scale
$image.width(width)
$image.height(height)
options.callback?($image)
image.src = url
$image.hide().appendTo($div)
getPokemonPosition: (player, slot) =>
if player == @model.get('index')
[96, 208]
else
[332, 108]
remove: =>
clearTimeout(@countdownTimersId)
super()
pokemonHtml: (pokemon) =>
"<a class='pokemon-link' href='#{pokemon.getPokedexUrl()}'
target='_blank'>#{pokemon.escape('name')}</a>"
setVisibleTeam: =>
battle = @model
battle.set('visibleteam', true)