codecombat/app/views/play/level/LevelFlagsView.coffee
Matt Lott 68cca74b43 Real-time multiplayer initial commit
Simple matchmaking, synchronous multiplayer PVP, flags!

Rough matchmaking is under the game menu multiplayer tab, for ladder
games only.  After creating a 2-person game there, you can exit that
modal and real-time cast to play against each other.

If you’re the first person to cast, you’ll sit at the real-time level
playback view waiting until the other player casts.  When they do, you
both should start the real-time playback (and start placing flags like
crazy people).

If in a multiplayer session, the real-time simulation runs the players’
code against each other.  Your multiplayer opponent’s name should be up
near the level name.

Multiplayer sessions are stored completely in Firebase for now, and
removed if both players leave the game.  There’s plenty of bugs,
synchronization issues, and minimal polish to add before we push it to
master.
2014-08-28 23:34:07 -07:00

106 lines
3.8 KiB
CoffeeScript

CocoView = require 'views/kinds/CocoView'
template = require 'templates/play/level/level-flags-view'
{me} = require 'lib/auth'
RealTimeCollection = require 'collections/RealTimeCollection'
module.exports = class LevelFlagsView extends CocoView
id: 'level-flags-view'
template: template
subscriptions:
'playback:real-time-playback-started': 'onRealTimePlaybackStarted'
'playback:real-time-playback-ended': 'onRealTimePlaybackEnded'
'surface:stage-mouse-down': 'onStageMouseDown'
'god:new-world-created': 'onNewWorld'
'god:streaming-world-updated': 'onNewWorld'
'surface:remove-flag': 'onRemoveFlag'
'realtime-multiplayer:joined-game': 'onJoinedMultiplayerGame'
'realtime-multiplayer:left-game': 'onLeftMultiplayerGame'
events:
'click .green-flag': -> @onFlagSelected color: 'green', source: 'button'
'click .black-flag': -> @onFlagSelected color: 'black', source: 'button'
'click .violet-flag': -> @onFlagSelected color: 'violet', source: 'button'
shortcuts:
'g': -> @onFlagSelected color: 'green', source: 'shortcut'
'b': -> @onFlagSelected color: 'black', source: 'shortcut'
'v': -> @onFlagSelected color: 'violet', source: 'shortcut'
'esc': -> @onFlagSelected color: null, source: 'shortcut'
'delete, del, backspace': 'onDeletePressed'
constructor: (options) ->
super options
@world = options.world
onRealTimePlaybackStarted: (e) ->
@realTime = true
@$el.show()
@flags = {}
@flagHistory = []
onRealTimePlaybackEnded: (e) ->
@onFlagSelected color: null
@realTime = false
@$el.hide()
@multiplayerSession?.set 'state', 'coding'
onFlagSelected: (e) ->
return unless @realTime
color = if e.color is @flagColor then null else e.color
@flagColor = color
Backbone.Mediator.publish 'level:flag-color-selected', color: color
@$el.find('.flag-button').removeClass('active')
@$el.find(".#{color}-flag").addClass('active') if color
onStageMouseDown: (e) ->
return unless @flagColor and @realTime
pos = x: e.worldPos.x, y: e.worldPos.y
flag = player: me.id, team: me.team, color: @flagColor, pos: pos, time: @world.dt * @world.frames.length, active: true
@flags[@flagColor] = flag
@flagHistory.push flag
@realTimeFlags?.create flag
Backbone.Mediator.publish 'level:flag-updated', flag
#console.log 'trying to place flag at', @world.age, 'and think it will happen by', flag.time
onDeletePressed: (e) ->
return unless @realTime
Backbone.Mediator.publish 'surface:remove-selected-flag', {}
onRemoveFlag: (e) ->
delete @flags[e.color]
flag = player: me.id, team: me.team, color: e.color, time: @world.dt * @world.frames.length, active: false
@flagHistory.push flag
Backbone.Mediator.publish 'level:flag-updated', flag
#console.log e.color, 'deleted at time', flag.time
onNewWorld: (event) ->
return unless event.world.name is @world.name
@world = @options.world = event.world
onJoinedMultiplayerGame: (item) ->
@realTimeFlags = new RealTimeCollection('multiplayer_level_sessions/' + item.id + '/flagHistory')
@realTimeFlags.on 'add', @onRealTimeMultiplayerFlagAdded
onLeftMultiplayerGame: () ->
@multiplayerState = null
if @multiplayerSession
@multiplayerSession.off()
@multiplayerSession = null
if @realTimeFlags
@realTimeFlags.off()
@realTimeFlags = null
onRealTimeMultiplayerFlagAdded: (e) =>
if e.get('player') != me.id
# TODO: what is @flags used for?
# Build local flag from Backbone.Model flag
flag =
player: e.get('player')
team: e.get('team')
color: e.get('color')
pos: e.get('pos')
time: e.get('time')
active: e.get('active')
@flagHistory.push flag
Backbone.Mediator.publish 'level:flag-updated', flag