mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-03-14 07:00:01 -04:00
Added DuelStatsView for ladder matches.
This commit is contained in:
Nick Winter
parent
96b838da03
commit
78605ef459
10 changed files with 269 additions and 8 deletions
|
|
@ -45,9 +45,12 @@ $level-resize-transition-time: 0.5s
|
|||
.team-gold
|
||||
font-size: 2vw
|
||||
line-height: 2vw
|
||||
img
|
||||
width: 1.8vw
|
||||
heighT: 1.8vw
|
||||
img
|
||||
width: 1.8vw
|
||||
height: 1.8vw
|
||||
#duel-stats-view
|
||||
right: calc(1% + 100px)
|
||||
bottom: 50px
|
||||
#control-bar-view .title
|
||||
left: 20%
|
||||
width: 60%
|
||||
|
|
|
|||
129
app/styles/play/level/duel-stats-view.sass
Normal file
129
app/styles/play/level/duel-stats-view.sass
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
@import "app/styles/mixins"
|
||||
@import "app/styles/bootstrap/variables"
|
||||
|
||||
#duel-stats-view
|
||||
position: absolute
|
||||
right: 44.3%
|
||||
bottom: 133px
|
||||
z-index: 3
|
||||
@include transition(opacity .2s linear)
|
||||
@include user-select(none)
|
||||
padding: 4px 10px 0 4px
|
||||
background: transparent url(/images/level/hud_background.png) no-repeat
|
||||
background-size: 100% auto
|
||||
border-radius: 4px
|
||||
|
||||
width: 500px
|
||||
height: 60px
|
||||
display: flex
|
||||
flex-direction: row
|
||||
|
||||
&:hover
|
||||
opacity: 0.1
|
||||
|
||||
.player-container
|
||||
width: 50%
|
||||
height: 50px
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
text-transform: uppercase
|
||||
font-family: $headings-font-family
|
||||
font-weight: bold
|
||||
font-size: 18px
|
||||
color: hsla(4,80%,51%,1)
|
||||
text-shadow: 0px 1px 0px black, 0px -1px 0px black, 1px 0px 0px black, -1px 0px 0px black
|
||||
|
||||
&.team-humans
|
||||
padding-right: 10px
|
||||
|
||||
&.team-ogres
|
||||
padding-left: 10px
|
||||
flex-direction: row-reverse
|
||||
color: hsla(205,100%,51%,1)
|
||||
|
||||
.player-name
|
||||
text-align: right
|
||||
|
||||
.player-health
|
||||
flex-direction: row-reverse
|
||||
|
||||
.health-bar-container .health-bar
|
||||
background: hsla(205,100%,51%,1)
|
||||
|
||||
|
||||
.player-portrait
|
||||
margin: 0 12px
|
||||
|
||||
.thang-avatar-view
|
||||
width: 30px
|
||||
|
||||
.player-name
|
||||
height: 50%
|
||||
text-align: left
|
||||
|
||||
.player-health
|
||||
//width: 100px
|
||||
height: 50%
|
||||
display: flex
|
||||
flex-direction: row
|
||||
line-height: 16px
|
||||
height: 18px
|
||||
//position: absolute
|
||||
//right: 35px
|
||||
//top: 23px
|
||||
|
||||
.health-icon
|
||||
$iconSize: 16px
|
||||
display: inline-block
|
||||
width: $iconSize
|
||||
height: $iconSize
|
||||
background: transparent url(/images/level/hud_info_icons.png) no-repeat
|
||||
background-size: auto $iconSize
|
||||
//float: left
|
||||
|
||||
.health-bar-container
|
||||
width: 100px
|
||||
display: inline-block
|
||||
margin: 1px 5px
|
||||
height: 16px
|
||||
background: rgb(32, 27, 21)
|
||||
padding: 4px
|
||||
border-radius: 8px
|
||||
border: 0
|
||||
overflow: hidden
|
||||
|
||||
.health-bar
|
||||
background: rgb(234, 35, 45)
|
||||
width: 100%
|
||||
height: 8px
|
||||
border-radius: 4px
|
||||
|
||||
.health-value
|
||||
vertical-align: top
|
||||
|
||||
//&.team-humans .team-gold
|
||||
// color: hsla(4,80%,51%,1)
|
||||
//
|
||||
//&.team-ogres .team-gold
|
||||
// color: hsla(205,100%,51%,1)
|
||||
//
|
||||
//.team-gold
|
||||
// font-size: 1.4vw
|
||||
// line-height: 1.4vw
|
||||
// margin: 0
|
||||
// color: hsla(205,0%,51%,1)
|
||||
// display: inline-block
|
||||
// padding: 0px 4px
|
||||
//
|
||||
// img
|
||||
// width: 1.2vw
|
||||
// height: 1.2vw
|
||||
// border-radius: 2px
|
||||
// padding: 0.1vw
|
||||
// margin-top: -0.2vw
|
||||
// margin-right: 0.1vw
|
||||
//
|
||||
// .gold-amount
|
||||
// display: inline-block
|
||||
// min-width: 20px
|
||||
|
|
@ -12,6 +12,10 @@
|
|||
display: none
|
||||
#gold-view
|
||||
right: 1%
|
||||
#duel-stats-view
|
||||
right: 230px
|
||||
bottom: 80px
|
||||
@include scale(2)
|
||||
|
||||
#control-bar-view
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@
|
|||
|
||||
#multiplayer-status-view
|
||||
|
||||
#duel-stats-view
|
||||
|
||||
#playback-view
|
||||
|
||||
#thang-hud
|
||||
|
|
|
|||
18
app/templates/play/level/duel-stats-view.jade
Normal file
18
app/templates/play/level/duel-stats-view.jade
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
for player in players
|
||||
div(class="player-container team-" + player.team)
|
||||
.player-portrait
|
||||
.thang-avatar-placeholder
|
||||
.player-info
|
||||
.player-name= player.name
|
||||
.player-health
|
||||
.health-icon
|
||||
.health-bar-container
|
||||
.health-bar
|
||||
.health-value
|
||||
//.player-gold
|
||||
// .team-gold
|
||||
// img(src="/images/level/gold_icon.png", alt="", draggable="false")
|
||||
// .gold-amount
|
||||
.player-power
|
||||
|
||||
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
div(class="team-gold team-" + team)
|
||||
img(src="/images/level/gold_icon.png", alt="")
|
||||
img(src="/images/level/gold_icon.png", alt="", draggable="false")
|
||||
div(class="gold-amount team-" + team)
|
||||
|
|
|
|||
|
|
@ -9,5 +9,6 @@
|
|||
#canvas-top-gradient.gradient
|
||||
#gold-view.secret.expanded
|
||||
#level-chat-view
|
||||
#duel-stats-view
|
||||
#playback-view
|
||||
#thang-hud
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ ControlBarView = require './level/ControlBarView'
|
|||
PlaybackView = require './level/LevelPlaybackView'
|
||||
GoalsView = require './level/LevelGoalsView'
|
||||
GoldView = require './level/LevelGoldView'
|
||||
DuelStatsView = require './level/DuelStatsView'
|
||||
VictoryModal = require './level/modal/VictoryModal'
|
||||
InfiniteLoopModal = require './level/modal/InfiniteLoopModal'
|
||||
|
||||
|
|
@ -179,8 +180,8 @@ module.exports = class SpectateLevelView extends RootView
|
|||
|
||||
@insertSubView new GoldView {}
|
||||
@insertSubView new HUDView {level: @level}
|
||||
worldName = utils.i18n @level.attributes, 'name'
|
||||
@controlBar = @insertSubView new ControlBarView {worldName: worldName, session: @session, level: @level, supermodel: @supermodel, spectateGame: true}
|
||||
@insertSubView new DuelStatsView level: @level, session: @session, otherSession: @otherSession, supermodel: @supermodel, thangs: @world.thangs if @level.get('type') in ['hero-ladder', 'course-ladder']
|
||||
@insertSubView @controlBar = new ControlBarView {worldName: utils.i18n(@level.attributes, 'name'), session: @session, level: @level, supermodel: @supermodel, spectateGame: true}
|
||||
|
||||
# callbacks
|
||||
|
||||
|
|
|
|||
102
app/views/play/level/DuelStatsView.coffee
Normal file
102
app/views/play/level/DuelStatsView.coffee
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
CocoView = require 'views/core/CocoView'
|
||||
template = require 'templates/play/level/duel-stats-view'
|
||||
ThangAvatarView = require 'views/play/level/ThangAvatarView'
|
||||
utils = require 'core/utils'
|
||||
|
||||
# TODO:
|
||||
# - if a hero is dead, a big indication that they are dead
|
||||
# - each hero's current action?
|
||||
# - if one player is you, an indicator that it's you?
|
||||
# - indication of which team won (not always hero dead--ties and other victory conditions)
|
||||
# - army composition or power or attack/defense (for certain levels): experiment with something simple, not like the previous unit list thing
|
||||
|
||||
module.exports = class DuelStatsView extends CocoView
|
||||
id: 'duel-stats-view'
|
||||
template: template
|
||||
|
||||
subscriptions:
|
||||
#'surface:gold-changed': 'onGoldChanged'
|
||||
'god:new-world-created': 'onNewWorld'
|
||||
'surface:frame-changed': 'onFrameChanged'
|
||||
|
||||
constructor: (options) ->
|
||||
super options
|
||||
options.thangs = _.filter options.thangs, 'inThangList'
|
||||
unless options.otherSession
|
||||
options.otherSession = get: (prop) -> {
|
||||
creatorName: $.i18n.t 'ladder.simple_ai'
|
||||
team: if options.session.get('team') is 'humans' then 'ogres' else 'humans'
|
||||
heroConfig: options.session.get('heroConfig')
|
||||
}[prop]
|
||||
#@teamGold = {}
|
||||
#@teamGoldEarned = {}
|
||||
|
||||
getRenderData: (c) ->
|
||||
c = super c
|
||||
c.players = @players = (@formatPlayer team for team in ['humans', 'ogres'])
|
||||
c
|
||||
|
||||
formatPlayer: (team) ->
|
||||
p = team: team
|
||||
session = _.find [@options.session, @options.otherSession], (s) -> s.get('team') is team
|
||||
p.name = session.get 'creatorName'
|
||||
p.heroThangType = (session.get('heroConfig') ? {}).thangType or '529ffbf1cf1818f2be000001'
|
||||
p.heroID = if team is 'ogres' then 'Hero Placeholder 1' else 'Hero Placeholder'
|
||||
p
|
||||
|
||||
afterRender: ->
|
||||
super()
|
||||
for player in @players
|
||||
@buildAvatar player.heroID, player.team
|
||||
|
||||
buildAvatar: (heroID, team) ->
|
||||
@avatars ?= {}
|
||||
return if @avatars[team]
|
||||
thang = _.find @options.thangs, id: heroID
|
||||
@avatars[team] = avatar = new ThangAvatarView thang: thang, includeName: false, supermodel: @supermodel
|
||||
@$find(team, '.thang-avatar-placeholder').replaceWith avatar.$el
|
||||
avatar.render()
|
||||
|
||||
onNewWorld: (e) ->
|
||||
@thangs = _.filter e.world.thangs, 'inThangList'
|
||||
|
||||
onFrameChanged: (e) ->
|
||||
@update()
|
||||
|
||||
update: ->
|
||||
for player in @players
|
||||
# etc.
|
||||
thang = @avatars[player.team].thang
|
||||
@updateHealth thang
|
||||
|
||||
updateHealth: (thang) ->
|
||||
$health = @$find thang.team, '.player-health'
|
||||
console.log 'updating health for', thang.id, thang.health, thang.maxHealth, 'with el', $health
|
||||
$health.find('.health-bar').css 'width', Math.max(0, Math.min(100, 100 * thang.health / thang.maxHealth)) + '%'
|
||||
utils.replaceText $health.find('.health-value'), Math.round thang.health
|
||||
|
||||
$find: (team, selector) ->
|
||||
@$el.find(".player-container.team-#{team} " + selector)
|
||||
|
||||
destroy: ->
|
||||
avatar.destroy() for team, avatar of @avatars ? {}
|
||||
super()
|
||||
|
||||
#onGoldChanged: (e) ->
|
||||
# return if @teamGold[e.team] is e.gold and @teamGoldEarned[e.team] is e.goldEarned
|
||||
# @teamGold[e.team] = e.gold
|
||||
# @teamGoldEarned[e.team] = e.goldEarned
|
||||
# goldEl = @$find e.team, '.gold-amount'
|
||||
# text = '' + e.gold
|
||||
# if e.goldEarned and e.goldEarned > e.gold
|
||||
# text += " (#{e.goldEarned})"
|
||||
# goldEl.text text
|
||||
# @updateTitle()
|
||||
#
|
||||
#updateTitle: ->
|
||||
# for team, gold of @teamGold
|
||||
# if @teamGoldEarned[team]
|
||||
# title = "Team '#{team}' has #{gold} now of #{@teamGoldEarned[team]} gold earned."
|
||||
# else
|
||||
# title = "Team '#{team}' has #{gold} gold."
|
||||
# @$find(team, '.player-gold').attr 'title', title
|
||||
|
|
@ -32,6 +32,7 @@ LevelPlaybackView = require './LevelPlaybackView'
|
|||
GoalsView = require './LevelGoalsView'
|
||||
LevelFlagsView = require './LevelFlagsView'
|
||||
GoldView = require './LevelGoldView'
|
||||
DuelStatsView = require './DuelStatsView'
|
||||
VictoryModal = require './modal/VictoryModal'
|
||||
HeroVictoryModal = require './modal/HeroVictoryModal'
|
||||
InfiniteLoopModal = require './modal/InfiniteLoopModal'
|
||||
|
|
@ -246,8 +247,8 @@ module.exports = class PlayLevelView extends RootView
|
|||
@insertSubView new LevelDialogueView {level: @level, sessionID: @session.id}
|
||||
@insertSubView new ChatView levelID: @levelID, sessionID: @session.id, session: @session
|
||||
@insertSubView new ProblemAlertView session: @session, level: @level, supermodel: @supermodel
|
||||
worldName = utils.i18n @level.attributes, 'name'
|
||||
@controlBar = @insertSubView new ControlBarView {worldName: worldName, session: @session, level: @level, supermodel: @supermodel}
|
||||
@insertSubView new DuelStatsView level: @level, session: @session, otherSession: @otherSession, supermodel: @supermodel, thangs: @world.thangs if @level.get('type') in ['hero-ladder', 'course-ladder']
|
||||
@insertSubView @controlBar = new ControlBarView {worldName: utils.i18n(@level.attributes, 'name'), session: @session, level: @level, supermodel: @supermodel}
|
||||
#_.delay (=> Backbone.Mediator.publish('level:set-debug', debug: true)), 5000 if @isIPadApp() # if me.displayName() is 'Nick'
|
||||
|
||||
initVolume: ->
|
||||
|
|
|
|||
Loading…
Reference in a new issue