heaven: Show remaining player sanity

Display how much sanity the player has left.

src/states/heaven.rs

@@ -27,6 +27,9 @@ impl HeavenState {
         });
 
         // Update the angel stats GUI elements
+        utils::get_element_by_id::<web_sys::Element>("heaven-sanity")
+            .unwrap()
+            .set_inner_html(&format!("{}%", (player.sanity * 100.0).round() as usize));
         utils::get_element_by_id::<web_sys::Element>("heaven-collected-hours")
             .unwrap()
             .set_inner_html(&format!("{}", player.collected_hours));

www/src/index.html

@@ -60,10 +60,12 @@
         <g transform="translate(250, 800)">
           <text x="0" y="-15" class="group-box-label">ANGEL STATS:</text>
 
-          <text x="30" y="30" class="stats-label">Collected hours:</text>
-          <text x="450" y="30" class="stats-number positive" id="heaven-collected-hours">?</text>
-          <text x="30" y="80" class="stats-label">Hours still needed:</text>
-          <text x="450" y="80" class="stats-number negative" id="heaven-needed-hours">?</text>
+          <text x="30" y="30" class="stats-label">Sanity remaining:</text>
+          <text x="450" y="30" class="stats-number health" id="heaven-sanity">?</text>
+          <text x="30" y="80" class="stats-label">Collected hours:</text>
+          <text x="450" y="80" class="stats-number positive" id="heaven-collected-hours">?</text>
+          <text x="30" y="130" class="stats-label">Hours still needed:</text>
+          <text x="450" y="130" class="stats-number negative" id="heaven-needed-hours">?</text>
         </g>
 
         <g transform="translate(1100, 300)">

www/src/styles.scss

@@ -130,6 +130,10 @@ div.game {
 
             fill: #ffffff;
 
+            &.health {
+                fill: $typography-1;
+            }
+
             &.positive {
                 fill: $typography-2;
             }