Merge branch 'rahix/show-objective-status' into 'master'

Show objective status

See merge request !40

src/angel_shifts/bottle_angel.rs

@@ -4,6 +4,7 @@ use crate::entities;
 use crate::resources;
 use crate::sprites;
 use crate::svg_loader;
+use crate::utils;
 
 pub struct BottleAngelShift {
     hours: usize,
@@ -44,8 +45,19 @@ impl super::AngelShiftImpl for BottleAngelShift {
         schedule_builder: &mut legion::systems::Builder,
         level: &svg_loader::SvgLevel,
     ) {
+        // Display objective
+        let objective = utils::get_element_by_id::<web_sys::Element>("ingame-objective").unwrap();
+        objective.set_inner_html(
+            r#"
+            <text x="30" y="0" class="stats-label">Collect drop points:</text>
+            <text id="ingame-bottle-angel-stats" x="430" y="0" class="stats-number">0/4</text>
+        "#,
+        );
+        let stats =
+            utils::get_element_by_id::<web_sys::Element>("ingame-bottle-angel-stats").unwrap();
+
         entities::create_drop_points(world, level);
-        resources.insert(BottleAngelState::new(4));
+        resources.insert(BottleAngelState::new(4, stats));
 
         schedule_builder
             .add_thread_local(collect_bottledrops_system())
@@ -56,15 +68,24 @@ impl super::AngelShiftImpl for BottleAngelShift {
 pub struct BottleAngelState {
     collected_drops: usize,
     drops_in_map: usize,
+    stats_element: web_sys::Element,
 }
 
 impl BottleAngelState {
-    fn new(drops_in_map: usize) -> BottleAngelState {
+    fn new(drops_in_map: usize, stats_element: web_sys::Element) -> BottleAngelState {
         BottleAngelState {
             collected_drops: 0,
             drops_in_map,
+            stats_element,
         }
     }
+
+    fn update_stats(&self) {
+        self.stats_element.set_text_content(Some(&format!(
+            "{}/{}",
+            self.collected_drops, self.drops_in_map
+        )));
+    }
 }
 
 #[legion::system]
@@ -99,6 +120,7 @@ pub fn collect_bottledrops(
             *sprite = components::Sprite::new(sprites::Sprite::BottleDropPointEmpty);
             cmd.remove_component::<components::Matebottledrop>(entity);
             bottle_angel_state.collected_drops += 1;
+            bottle_angel_state.update_stats();
         }
     }
 }

src/angel_shifts/network_switch.rs

@@ -4,6 +4,7 @@ use crate::entities;
 use crate::resources;
 use crate::sprites;
 use crate::svg_loader;
+use crate::utils;
 
 pub struct NetworkSwitchShift {
     hours: usize,
@@ -26,15 +27,24 @@ impl NetworkSwitchShift {
 pub struct NetworkSwitchAngelState {
     reconnected_switches: usize,
     switches_in_map: usize,
+    stats_element: web_sys::Element,
 }
 
 impl NetworkSwitchAngelState {
-    fn new(switches_in_map: usize) -> NetworkSwitchAngelState {
+    fn new(switches_in_map: usize, stats_element: web_sys::Element) -> NetworkSwitchAngelState {
         NetworkSwitchAngelState {
             reconnected_switches: 0,
             switches_in_map,
+            stats_element,
         }
     }
+
+    fn update_stats(&self) {
+        self.stats_element.set_text_content(Some(&format!(
+            "{}/{}",
+            self.reconnected_switches, self.switches_in_map
+        )));
+    }
 }
 
 impl super::AngelShiftImpl for NetworkSwitchShift {
@@ -57,8 +67,17 @@ impl super::AngelShiftImpl for NetworkSwitchShift {
         schedule_builder: &mut legion::systems::Builder,
         level: &svg_loader::SvgLevel,
     ) {
+        // Display objective
+        let objective = utils::get_element_by_id::<web_sys::Element>("ingame-objective").unwrap();
+        objective.set_inner_html(
+            r#"
+            <text x="30" y="0" class="stats-label">Switches online:</text>
+            <text id="ingame-network-stats" x="430" y="0" class="stats-number">0/4</text>
+        "#,
+        );
+        let stats = utils::get_element_by_id::<web_sys::Element>("ingame-network-stats").unwrap();
         entities::create_network_switches(world, level);
-        resources.insert(NetworkSwitchAngelState::new(4));
+        resources.insert(NetworkSwitchAngelState::new(4, stats));
 
         schedule_builder
             .add_thread_local(reconnect_switches_system())
@@ -98,6 +117,7 @@ pub fn reconnect_switches(
             *sprite = components::Sprite::new(sprites::Sprite::NetworkSwitchConnected);
             cmd.remove_component::<components::NetworkSwitch>(entity);
             angel_state.reconnected_switches += 1;
+            angel_state.update_stats();
         }
     }
 }

src/states/level_loading.rs

@@ -6,6 +6,7 @@ use crate::resources;
 use crate::sprites;
 use crate::states;
 use crate::svg_loader;
+use crate::utils;
 
 pub struct LevelLoadingState {
     node_world: legion::World,
@@ -35,6 +36,10 @@ impl LevelLoadingState {
             .add_thread_local(components::draw_thesun_system())
             .build();
 
+        // Clean the objective display before the next shift
+        let objective = utils::get_element_by_id::<web_sys::Element>("ingame-objective").unwrap();
+        objective.set_text_content(None);
+
         LevelLoadingState {
             node_world,
             resources,

www/src/index.html

@@ -15,6 +15,17 @@
         <rect x="460" y="100" width="600" height="40" class="sanity-amount" id="sanity-amount" />
         <rect x="460" y="100" width="1000" height="40" class="sanity-outline" />
 
+        <defs>
+          <linearGradient id="objective-bg-gradient" x1="0" x2="0" y1="0" y2="1">
+            <stop class="objective-background stop1" offset="0%" />
+            <stop class="objective-background stop2" offset="100%" />
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="400" height="250" class="objective-background"/>
+        <text x="20" y="44" class="objective">Task:</text>
+        <g id="ingame-objective" transform="translate(20, 64) scale(0.8)">
+        </g>
+
         <g id="ingame-return-to-heaven" style="display: none">
           <defs>
             <filter id="blur-back-to-heaven">

www/src/styles.scss

@@ -55,6 +55,27 @@ div.game {
             text-anchor: middle;
         }
 
+        text.objective {
+            font-family: "Orbitron";
+            font-weight: 900;
+            fill: #ffffff;
+            font-size: 24pt;
+        }
+
+        rect.objective-background {
+            fill: url(#objective-bg-gradient);
+        }
+
+        stop.objective-background {
+            &.stop1 {
+                stop-color: transparentize(#ffffff, 0.9);
+            }
+
+            &.stop2 {
+                stop-color: transparent;
+            }
+        }
+
         rect.overlay-backdrop {
             fill: transparentize($primary1-shade3, 0.3);
         }
@@ -107,6 +128,8 @@ div.game {
             dominant-baseline: hanging;
             text-anchor: end;
 
+            fill: #ffffff;
+
             &.positive {
                 fill: $typography-2;
             }