WIP(death): New death modal

common/locales/en/death.json

@@ -0,0 +1,6 @@
+{
+  "lostAllHealth": "You lost all your Health!",
+  "deathPenaltyDetails": "Don't despair! You lost a Level, all your Gold, and your <%= gearName %>, but you can get them all back with hard work! Good luck--you'll do great.",
+  "refillHealthTryAgain": "Refill Health & Try Again",
+  "dyingOftenTips": "Dying often? <a href='http://habitrpg.wikia.com/wiki/Death_Mechanics#Strategies_for_Staying_Alive' target='_blank'>Here are some tips!</a>"
+}

website/public/css/shared.styl

@@ -60,3 +60,7 @@ ul
   .tasks-lists .row .col-md-3
     padding-right: 0
     padding-left: 0
+
+.flex-column
+  display: flex
+  flex-direction: column

website/views/shared/modals/death.jade

@@ -1,16 +1,39 @@
-//div(modal='user.stats.hp <= 0', options='{backdrop:true, keyboard:false, backdropClick:false}')
-script(type='text/ng-template', id='modals/death.html')  
-  .modal-body.death-modal
-    .container-fluid
-      .row
-        .col-md-3
-          figure
-            .GrimReaper
-        .col-md-9
-          h2=env.t('youDied')
-      .row
-        .col-md-3
-          p
-            a.btn.btn-danger.btn-lg(ng-click='user.ops.revive({}); $close()')=env.t('continue')
-        .col-md-9
-          p=env.t('dieText')
+include ../avatar/generated_avatar
+
+script(type='text/ng-template', id='modals/death.html')
+  .modal-header
+    h4=env.t('lostAllHealth')
+  .modal-body
+    .container-fluid(ng-controller='UserCtrl')
+      .col-md-6
+        .hero-stats
+          .meter-label(tooltip=env.t('health'))
+            span.glyphicon.glyphicon-heart
+          .meter.health(tooltip='{{Math.round(user.stats.hp * 100) / 100}}')
+            .bar(ng-style='{"width": Shared.percent(user.stats.hp, Shared.maxHealth)+"%"}')
+            span.meter-text.value
+              | {{Math.ceil(user.stats.hp)}} / {{::Shared.maxHealth}}
+        figure.herobox.text-center
+          .character-sprites
+            +costumeSetting('back')
+            span(ng-class="'skin_' + profile.preferences.skin + '_sleep'")
+            span(class='{{profile.preferences.size}}_shirt_{{profile.preferences.shirt}}')
+            +costumeSetting('armor', {prefix: "profile.preferences.size + '_' + "})
+            +costumeSetting('back', {suffix: " + '_collar'"})
+            +costumeSetting('body')
+            span(class='head_0')
+            - var hairTypes = ['base', 'bangs', 'mustache', 'beard']
+            each type in hairTypes
+              span(class='hair_#{type}_{{profile.preferences.hair.#{type}}}_{{profile.preferences.hair.color}}')
+            +costumeSetting('eyewear')
+            +costumeSetting('head')
+            +costumeSetting('headAccessory')
+            span(class='hair_flower_{{profile.preferences.hair.flower}}')
+            +costumeSetting('shield')
+            +costumeSetting('weapon')
+            span(class='zzz')
+      .col-md-6
+        p(style='margin-top:4.5em')=env.t('deathPenaltyDetails', {gearName: '{{::lostItem.text()}}'})
+    .modal-footer
+      a.btn.btn-danger.btn-lg.flex-column(ng-click='user.ops.revive({}); $close()')=env.t('refillHealthTryAgain')
+      h4!=env.t('dyingOftenTips')