diff --git a/app/assets/images/level/info_icons.png b/app/assets/images/level/info_icons.png deleted file mode 100644 index de9ecfb6f..000000000 Binary files a/app/assets/images/level/info_icons.png and /dev/null differ diff --git a/app/assets/images/level/prop_health.png b/app/assets/images/level/prop_health.png deleted file mode 100644 index 87f3c8407..000000000 Binary files a/app/assets/images/level/prop_health.png and /dev/null differ diff --git a/app/assets/images/level/prop_inventory.png b/app/assets/images/level/prop_inventory.png deleted file mode 100644 index 37f147521..000000000 Binary files a/app/assets/images/level/prop_inventory.png and /dev/null differ diff --git a/app/assets/images/level/prop_pos.png b/app/assets/images/level/prop_pos.png deleted file mode 100644 index d3461a8e2..000000000 Binary files a/app/assets/images/level/prop_pos.png and /dev/null differ diff --git a/app/assets/images/level/prop_target.png b/app/assets/images/level/prop_target.png deleted file mode 100644 index 0f2b411ac..000000000 Binary files a/app/assets/images/level/prop_target.png and /dev/null differ diff --git a/app/styles/play/level/hud.sass b/app/styles/play/level/hud.sass index 7858f0365..4f6a5fea3 100644 --- a/app/styles/play/level/hud.sass +++ b/app/styles/play/level/hud.sass @@ -95,14 +95,35 @@ height: 100px @include user-select(text) - .prop - img - margin-right: 5px - width: 16px - height: 16px - .text-prop width: 50% + + .prop-label-icon + $iconSize: 16px + display: inline-block + width: $iconSize + height: $iconSize + margin-right: 5px + background: transparent url(/images/level/hud_info_icons.png) no-repeat + background-size: auto $iconSize + float: left + + &.prop-label-icon-pos + background-position-x: -1 * $iconSize + &.prop-label-icon-target + background-position-x: -2 * $iconSize + &.prop-label-icon-inventory + background-position-x: -3 * $iconSize + &.prop-label-icon-visualRange + background-position-x: -4 * $iconSize + &.prop-label-icon-attackDamage + background-position-x: -5 * $iconSize + &.prop-label-icon-attackRange + background-position-x: -6 * $iconSize + &.prop-label-icon-maxSpeed + background-position-x: -7 * $iconSize + &.prop-label-icon-gold + background-position-x: -8 * $iconSize .prop-value.bar-prop width: 100px diff --git a/app/templates/play/level/hud_prop.jade b/app/templates/play/level/hud_prop.jade index fcccab38e..705377d92 100644 --- a/app/templates/play/level/hud_prop.jade +++ b/app/templates/play/level/hud_prop.jade @@ -1,6 +1,6 @@ .prop(name="#{prop}") if hasIcon - img.prop-label(src="/images/level/prop_#{prop}.png", alt="#{prop}") + span(class="prop-label prop-label-icon prop-label-icon-#{prop}") else span.prop-label #{prop}: diff --git a/app/views/play/level/hud_view.coffee b/app/views/play/level/hud_view.coffee index f4580660b..7b036c433 100644 --- a/app/views/play/level/hud_view.coffee +++ b/app/views/play/level/hud_view.coffee @@ -247,7 +247,7 @@ module.exports = class HUDView extends View return null # included in the bar context = prop: prop - hasIcon: prop in ["health", "pos", "target", "inventory", "gold"] + hasIcon: prop in ["health", "pos", "target", "inventory", "gold", "visualRange", "attackDamage", "attackRange", "maxSpeed"] hasBar: prop in ["health"] $(prop_template(context))