mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-02-17 08:50:58 -05:00
Implemented George's gold design.
This commit is contained in:
parent
e610ecb476
commit
a04f74de8b
6 changed files with 15 additions and 18 deletions
BIN
app/assets/images/level/gold_background.png
Normal file
BIN
app/assets/images/level/gold_background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
BIN
app/assets/images/level/gold_icon.png
Normal file
BIN
app/assets/images/level/gold_icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5.2 KiB |
|
@ -7,28 +7,31 @@
|
|||
top: 42px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
@include transition(background-color .2s linear)
|
||||
@include transition(box-shadow .2s linear)
|
||||
padding: 4px
|
||||
background: transparent url(/images/level/gold_background.png) no-repeat
|
||||
background-size: 100% 100%
|
||||
border-radius: 4px
|
||||
|
||||
&:hover
|
||||
background-color: rgba(255, 255, 255, 0.75)
|
||||
box-shadow: 2px 2px 2px black
|
||||
|
||||
.team-gold
|
||||
font-size: 16px
|
||||
margin: 0
|
||||
line-height: 20px
|
||||
color: hsla(205,0%,31%,1)
|
||||
text-shadow: 0px 1px 1px white, 0px -1px 1px white, 1px 0px 1px white, -1px 0px 1px white
|
||||
color: hsla(205,0%,51%,1)
|
||||
display: inline-block
|
||||
padding: 0px 4px
|
||||
|
||||
&.team-humans
|
||||
color: hsla(4,80%,51%,1)
|
||||
|
||||
&.team-ogres
|
||||
color: hsla(205,100%,31%,1)
|
||||
color: hsla(205,100%,51%,1)
|
||||
|
||||
&.team-allies, &.team-minions
|
||||
color: hsla(116,80%,31%,1)
|
||||
color: hsla(116,80%,51%,1)
|
||||
|
||||
img
|
||||
width: 16px
|
||||
|
@ -36,17 +39,7 @@
|
|||
border-radius: 2px
|
||||
padding: 1px
|
||||
margin-top: -1px
|
||||
@include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)
|
||||
|
||||
&.team-humans img
|
||||
@include gradient-radial-custom-stops(hsla(4,80%,74%,1), 20%, hsla(4,80%,51%,1), 70%)
|
||||
|
||||
&.team-ogres img
|
||||
@include gradient-radial-custom-stops(hsla(205,100%,74%,1), 20%, hsla(205,100%,31%,1), 70%)
|
||||
|
||||
&.team-allies img, &.team-minions img
|
||||
@include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)
|
||||
|
||||
.gold-amount
|
||||
display: inline-block
|
||||
min-width: 20px
|
||||
|
|
3
app/templates/play/level/team_gold.jade
Normal file
3
app/templates/play/level/team_gold.jade
Normal file
|
@ -0,0 +1,3 @@
|
|||
div(class="team-gold team-" + team, title="Gold: " + team)
|
||||
img(src="/images/level/gold_icon.png", alt="")
|
||||
div(class="gold-amount team-" + team)
|
|
@ -1,5 +1,6 @@
|
|||
View = require 'views/kinds/CocoView'
|
||||
template = require 'templates/play/level/gold'
|
||||
teamTemplate = require 'templates/play/level/team_gold'
|
||||
|
||||
module.exports = class GoldView extends View
|
||||
id: "gold-view"
|
||||
|
@ -13,9 +14,9 @@ module.exports = class GoldView extends View
|
|||
@$el.show()
|
||||
goldEl = @$el.find('.gold-amount.team-' + e.team)
|
||||
unless goldEl.length
|
||||
teamEl = $("<div class='team-gold team-#{e.team}' title='Gold: #{e.team}'><img src='/images/level/prop_gold.png'> <div class='gold-amount team-#{e.team}'></div></div>")
|
||||
teamEl = teamTemplate team: e.team
|
||||
@$el.append(teamEl)
|
||||
goldEl = teamEl.find('.gold-amount.team-' + e.team)
|
||||
goldEl = $('.gold-amount.team-' + e.team, teamEl)
|
||||
text = '' + e.gold
|
||||
if e.goldEarned and e.goldEarned > e.gold
|
||||
text += " (#{e.goldEarned})"
|
||||
|
|
Loading…
Reference in a new issue