Rudimentary flag buttons are in.

2025-03-14 07:00:01 -04:00 · 2014-08-23 19:00:35 -07:00 · 2014-08-23 19:00:35 -07:00 · 2dca4d72fc
commit 2dca4d72fc
parent f59084e651
9 changed files with 123 additions and 35 deletions
--- a/app/lib/surface/Surface.coffee
+++ b/app/lib/surface/Surface.coffee
@ -69,7 +69,6 @@ module.exports = Surface = class Surface extends CocoClass
    'camera:zoom-updated': 'onZoomUpdated'
    'playback:real-time-playback-started': 'onRealTimePlaybackStarted'
    'playback:real-time-playback-ended': 'onRealTimePlaybackEnded'
-    'level:flag-selected': 'onFlagSelected'

  shortcuts:
    'ctrl+\\, ⌘+\\': 'onToggleDebug'
@ -527,9 +526,9 @@ module.exports = Surface = class Surface extends CocoClass
  onMouseDown: (e) =>
    return if @disabled
    onBackground = not @stage.hitTest e.stageX, e.stageY
-    event = onBackground: onBackground, x: e.stageX, y: e.stageY, originalEvent: e
+    worldPos = @camera.screenToWorld x: e.stageX, y: e.stageY
+    event = onBackground: onBackground, x: e.stageX, y: e.stageY, originalEvent: e, worldPos: worldPos
    Backbone.Mediator.publish 'surface:stage-mouse-down', event
-    @placeFlag event if @realTime

  onMouseUp: (e) =>
    return if @disabled
@ -619,35 +618,16 @@ module.exports = Surface = class Surface extends CocoClass
  onRealTimePlaybackStarted: (e) ->
    @realTime = true
    @onResize()
-    @spriteBoss.selfWizardSprite?.imageObject.visible = false
-    @flags = {}
-    @flagHistory = []
+    @spriteBoss.selfWizardSprite?.toggle false

  onRealTimePlaybackEnded: (e) ->
    @realTime = false
    @onResize()
-    @spriteBoss.selfWizardSprite?.imageObject.visible = true
+    @spriteBoss.selfWizardSprite?.toggle true
+    @canvas.removeClass 'flag-selected'

  onFlagSelected: (e) ->
-    @canvas.addClass("flag-selected")
-    @flagColor = e.color
-
-  placeFlag: (e) ->
-    return unless @flagColor
-    wop = @camera.screenToWorld x: e.x, y: e.y
-    targetPos = x: wop.x, y: wop.y
-    flag = player: me.id, team: me.team, color: @flagColor, targetPos: targetPos, time: @world.dt * @world.frames.length + 1, active: true
-    @flags[@flagColor] = flag
-    @flagHistory.push flag
-    Backbone.Mediator.publish 'level:flag-updated', flag
-    console.log 'trying to place flag at', @world.dt * @currentFrame, 'and think it will happen by', flag.time
-
-  removeFlag: (e) ->
-    delete @flags[e.color]
-    console.log e.color, 'deleted'
-    flag = player: me.id, team: me.team, color: e.color, time: @world.dt * @world.frames.length + 1, active: false
-    @flagHistory.push flag
-    Backbone.Mediator.publish 'level:flag-updated', flag
+    @canvas.toggleClass 'flag-selected', Boolean(e.color)

  # paths - TODO: move to SpriteBoss? but only update on frame drawing instead of on every frame update?

--- a/app/lib/surface/WizardSprite.coffee
+++ b/app/lib/surface/WizardSprite.coffee
@ -58,6 +58,10 @@ module.exports = class WizardSprite extends IndieSprite
      name += " (#{@options.codeLanguage})"  # TODO: move on second line, capitalize properly
    super name

+  toggle: (to) ->
+    @imageObject?.visible = to
+    @labels.name?[if to then 'show' else 'hide']()
+
  onPlayerStatesChanged: (e) ->
    for playerID, state of e.states
      continue unless playerID is @thang.id
--- a/app/schemas/subscriptions/play.coffee
+++ b/app/schemas/subscriptions/play.coffee
@ -61,9 +61,9 @@ module.exports =
    type: 'object'
    additionalProperties: false
    properties:
-      color:
+      color:  # omitted if we've deselected
        type: 'string'
-        enum: ['red', 'green', 'blue']
+        enum: ['green', 'black', 'violet']

  'level:flag-updated':
    type: 'object'
@ -76,13 +76,13 @@ module.exports =
        type: 'string'
      color:
        type: 'string'
-        enum: ['red', 'green', 'blue']
+        enum: ['green', 'black', 'violet']
      time:
        type: 'number'
        minimum: 0
      active:
        type: 'boolean'
-      targetPos:
+      pos:
        type: 'object'
        additionalProperties: false
        required: ['x', 'y']
--- a/app/styles/play/level/gold.sass
+++ b/app/styles/play/level/gold.sass
@ -6,9 +6,8 @@
  position: absolute
  right: 46%
  top: 42px
-  user-select: none
-  -webkit-user-select: none
  @include transition(box-shadow .2s linear)
+  @include user-select(none)
  padding: 4px
  background: transparent url(/images/level/gold_background.png) no-repeat
  background-size: 100% 100%
--- a/app/styles/play/level/level-flags-view.sass
+++ b/app/styles/play/level/level-flags-view.sass
@ -0,0 +1,29 @@
+@import "app/styles/mixins"
+@import "app/styles/bootstrap/mixins"
+
+#level-flags-view
+  display: none
+  position: absolute
+  top: 42px
+  left: 1%
+  @include transition(box-shadow .2s linear)
+  @include user-select(none)
+  padding: 4px
+  background: transparent url(/images/level/gold_background.png) no-repeat
+  background-size: 100% 100%
+  border-radius: 4px
+
+  &:hover
+    box-shadow: 2px 2px 2px black
+
+  .flag-button
+    margin: 3px
+    font-size: 14px
+
+    &.green-flag
+      color: darkgreen
+    &.black-flag
+      color: black
+    &.violet-flag
+      color: violet
+ 
--- a/app/templates/play/level.jade
+++ b/app/templates/play/level.jade
@ -13,6 +13,8 @@
    #canvas-top-gradient.gradient
    #goals-view.secret
  
+  #level-flags-view.secret
+
  #gold-view.secret.expanded

  #level-chat-view
--- a/app/templates/play/level/level-flags-view.jade
+++ b/app/templates/play/level/level-flags-view.jade
@ -0,0 +1,9 @@
+button.flag-button.btn.btn-xs.green-flag(title="g: Place a green flag")
+  span.glyphicon.glyphicon-flag
+  | g
+button.flag-button.btn.btn-xs.black-flag(title="b: Place a black flag")
+  span.glyphicon.glyphicon-flag
+  | b
+button.flag-button.btn.btn-xs.violet-flag(title="v: Place a violet flag")
+  span.glyphicon.glyphicon-flag
+  | v
--- a/app/views/play/level/LevelFlagsView.coffee
+++ b/app/views/play/level/LevelFlagsView.coffee
@ -0,0 +1,66 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/play/level/level-flags-view'
+{me} = require 'lib/auth'
+
+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'
+
+  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'
+
+  constructor: (options) ->
+    super options
+    @world = options.world
+
+  onRealTimePlaybackStarted: (e) ->
+    @realTime = true
+    @$el.show()
+    @flags = {}
+    @flagHistory = []
+
+  onRealTimePlaybackEnded: (e) ->
+    @realTime = false
+    @$el.hide()
+
+  onFlagSelected: (e) ->
+    color = if e.source is 'button' and e.color is @flagColor then null else e.color
+    @flagColor = color
+    Backbone.Mediator.publish 'level:flag-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 + 1, active: true
+    @flags[@flagColor] = flag
+    @flagHistory.push 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
+
+  removeFlag: (e) ->
+    delete @flags[e.color]
+    console.log e.color, 'deleted'
+    flag = player: me.id, team: me.team, color: e.color, time: @world.dt * @world.frames.length + 1, active: false
+    @flagHistory.push flag
+    Backbone.Mediator.publish 'level:flag-updated', flag
+
+  onNewWorld: (event) ->
+    return unless event.world.name is @world.name
+    @world = event.world
--- a/app/views/play/level/PlayLevelView.coffee
+++ b/app/views/play/level/PlayLevelView.coffee
@ -29,6 +29,7 @@ HUDView = require './LevelHUDView'
 ControlBarView = require './ControlBarView'
 LevelPlaybackView = require './LevelPlaybackView'
 GoalsView = require './LevelGoalsView'
+LevelFlagsView = require './LevelFlagsView'
 GoldView = require './LevelGoldView'
 VictoryModal = require './modal/VictoryModal'
 InfiniteLoopModal = require './modal/InfiniteLoopModal'
@ -72,9 +73,6 @@ module.exports = class PlayLevelView extends RootView

  shortcuts:
    'ctrl+s': 'onCtrlS'
-    'r': -> Backbone.Mediator.publish 'level:flag-selected', color: 'red'
-    'g': -> Backbone.Mediator.publish 'level:flag-selected', color: 'green'
-    'b': -> Backbone.Mediator.publish 'level:flag-selected', color: 'blue'

  # Initial Setup #############################################################

@ -238,6 +236,7 @@ module.exports = class PlayLevelView extends RootView
    @insertSubView @tome = new TomeView levelID: @levelID, session: @session, otherSession: @otherSession, thangs: @world.thangs, supermodel: @supermodel
    @insertSubView new LevelPlaybackView session: @session
    @insertSubView new GoalsView {}
+    @insertSubView new LevelFlagsView world: @world
    @insertSubView new GoldView {}
    @insertSubView new HUDView {}
    @insertSubView new ChatView levelID: @levelID, sessionID: @session.id, session: @session