Merge 'Enforced rendering with the rendering resource'

See merge request !10

src/components/edge.rs

@@ -21,17 +21,16 @@ pub fn draw_edges(
     #[resource] rendering: &mut resources::Rendering,
 ) {
     // TODO: Replace by proper API
-    let ctx = &mut rendering.ctx;
     for edge in <&Edge>::query().iter(world) {
         let mut positions = <&components::Position>::query();
         let pos1 = positions.get(world, edge.node1).unwrap();
         let pos2 = positions.get(world, edge.node2).unwrap();
 
-        ctx.begin_path();
-        ctx.set_line_width(7.0);
-        ctx.set_stroke_style(&"#2a005e".into());
-        ctx.move_to(pos1.0.x as f64, pos1.0.y as f64);
-        ctx.line_to(pos2.0.x as f64, pos2.0.y as f64);
-        ctx.stroke();
+        rendering.begin_path();
+        rendering.set_line_width(7.0);
+        rendering.set_stroke_style(&resources::Color::with_rgb(0.164, 0.0, 0.367));
+        rendering.move_to(pos1.0.x as f64, pos1.0.y as f64);
+        rendering.line_to(pos2.0.x as f64, pos2.0.y as f64);
+        rendering.stroke();
     }
 }

src/components/node.rs

@@ -53,61 +53,59 @@ pub fn draw_nodes(
     #[resource] clock: &resources::Clock,
 ) {
     // TODO: Replace by proper API
-    let ctx = &mut rendering.ctx;
-    ctx.begin_path();
-    ctx.set_fill_style(&"#100e23".into());
-    ctx.arc(
+    rendering.begin_path();
+    rendering.set_fill_style(&resources::Color::with_rgb(0.63, 0.54, 0.137));
+    rendering.arc(
         pos.0.x as f64,
         pos.0.y as f64,
         10.0,
         0.0,
         std::f64::consts::TAU,
-    )
-    .unwrap();
-    ctx.fill();
+    );
+    rendering.fill();
 
-    ctx.begin_path();
-    ctx.set_line_width(5.0);
-    ctx.set_stroke_style(&"#41008b".into());
-    ctx.arc(
+    rendering.begin_path();
+    rendering.set_line_width(5.0);
+    rendering.set_stroke_style(&resources::Color::with_rgb(0.254, 0.0, 0.543));
+    rendering.arc(
         pos.0.x as f64,
         pos.0.y as f64,
         10.0,
         0.0,
         std::f64::consts::TAU,
-    )
-    .unwrap();
-    ctx.stroke();
+    );
+    rendering.stroke();
 
     let time = clock.wall_time();
+    let node_color = resources::Color::with_hex_string("#6800e7").unwrap();
     if let Some(amount_completed) = node.amount_completed(time) {
-        ctx.begin_path();
-        ctx.set_stroke_style(&"#6800e7".into());
-        ctx.arc(
+        rendering.begin_path();
+        rendering.set_stroke_style(&node_color);
+        rendering.arc(
             pos.0.x as f64,
             pos.0.y as f64,
             18.0,
             0.0,
             std::f64::consts::TAU * amount_completed,
-        )
-        .unwrap();
-        ctx.stroke();
+        );
+        rendering.stroke();
     }
 
     if let Some(ping_time) = node.ping_time {
         let radius = (time - ping_time) * 180.0 + 18.0;
-        let transparency = (1.0 - (time - ping_time) * 2.0).max(0.0).powi(2);
+        let alpha = (1.0 - (time - ping_time) * 2.0).max(0.0).powi(2);
+        let mut ring_color = node_color.clone();
+        ring_color.alpha = alpha;
 
-        ctx.begin_path();
-        ctx.set_stroke_style(&format!("#6800e7{:02x}", (transparency * 255.0) as u8).into());
-        ctx.arc(
+        rendering.begin_path();
+        rendering.set_stroke_style(&ring_color);
+        rendering.arc(
             pos.0.x as f64,
             pos.0.y as f64,
             radius,
             0.0,
             std::f64::consts::TAU,
-        )
-        .unwrap();
-        ctx.stroke();
+        );
+        rendering.stroke();
     }
 }

src/components/thesun.rs

@@ -11,43 +11,39 @@ pub fn draw_thesun(
     #[resource] clock: &resources::Clock,
 ) {
     // TODO: Replace by proper API
-    let ctx = &mut rendering.ctx;
-    ctx.begin_path();
-    ctx.set_fill_style(&"#b239ff".into());
-    ctx.arc(
+    rendering.begin_path();
+    rendering.set_fill_style(&resources::Color::with_rgb(0.695, 0.223, 1.0));
+    rendering.arc(
         pos.0.x as f64,
         pos.0.y as f64,
         30.0,
         0.0,
         std::f64::consts::TAU,
-    )
-    .unwrap();
-    ctx.fill();
+    );
+    rendering.fill();
 
     let now = clock.wall_time();
-    ctx.set_line_width(10.0);
+    rendering.set_line_width(10.0);
 
-    ctx.begin_path();
-    ctx.set_stroke_style(&"#67029f".into());
-    ctx.arc(
+    rendering.begin_path();
+    rendering.set_stroke_style(&resources::Color::with_rgb(0.402, 0.008, 0.621));
+    rendering.arc(
         pos.0.x as f64,
         pos.0.y as f64,
         40.0,
         0.0 + now,
         0.4 * std::f64::consts::TAU + now,
-    )
-    .unwrap();
-    ctx.stroke();
+    );
+    rendering.stroke();
 
-    ctx.begin_path();
-    ctx.set_stroke_style(&"#440069".into());
-    ctx.arc(
+    rendering.begin_path();
+    rendering.set_stroke_style(&resources::Color::with_rgb(0.266, 0.0, 0.410));
+    rendering.arc(
         pos.0.x as f64,
         pos.0.y as f64,
         55.0,
         4.0 - now,
         4.0 + 0.66 * std::f64::consts::TAU - now,
-    )
-    .unwrap();
-    ctx.stroke();
+    );
+    rendering.stroke();
 }

src/resources/camera.rs

+use nalgebra;
+
+pub struct Camera {
+    pub position: nalgebra::Point2<f64>,
+    pub size: nalgebra::Vector2<f64>,
+}
+
+impl Camera {
+    pub fn new(width: f64, height: f64) -> Self {
+        Camera {
+            position: nalgebra::Point2::new(0.0, 0.0),
+            size: nalgebra::Vector2::new(width, height),
+        }
+    }
+
+    pub fn draw_coordinate(&self) -> nalgebra::Point2<f64> {
+        -(self.position + self.size / 2.0)
+    }
+}

src/resources/mod.rs

+mod camera;
 mod clock;
 mod rendering;
 
+pub use camera::Camera;
 pub use clock::Clock;
+pub use rendering::Color;
 pub use rendering::ImageHandle;
 pub use rendering::Rendering;

src/resources/rendering.rs

@@ -3,8 +3,120 @@ use anyhow::Context;
 use wasm_bindgen::JsCast;
 use web_sys;
 
+fn get_hex_color_format(value: &str) -> u32 {
+    let valid_characters = [
+        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'A', 'B',
+        'C', 'D', 'E', 'F',
+    ];
+    let (hash_tag, value) = value.split_at(1);
+    if hash_tag == "#" {
+        value
+            .chars()
+            .map(|character| {
+                if valid_characters.contains(&character) {
+                    1
+                } else {
+                    0
+                }
+            })
+            .fold(0, |acc, x| acc * x + 1)
+    } else {
+        0
+    }
+}
+
+#[derive(Copy, Clone, Debug)]
+pub struct Color {
+    pub red: f64,
+    pub green: f64,
+    pub blue: f64,
+    pub alpha: f64,
+}
+
+impl Color {
+    pub fn with_rgba(red: f64, green: f64, blue: f64, alpha: f64) -> Self {
+        Color {
+            red,
+            green,
+            blue,
+            alpha,
+        }
+    }
+    pub fn with_rgb(red: f64, green: f64, blue: f64) -> Self {
+        Color {
+            red,
+            green,
+            blue,
+            alpha: 1.0,
+        }
+    }
+    pub fn with_hex_string(hex_string: &str) -> Option<Self> {
+        match get_hex_color_format(hex_string) {
+            3 => {
+                let number = u16::from_str_radix(hex_string.get(1..4).unwrap(), 16).unwrap();
+                let r = (number & 0xF00) >> 8;
+                let g = (number & 0x0F0) >> 4;
+                let b = number & 0x00F;
+                Some(Self::with_rgb(
+                    r as f64 / 15.0,
+                    g as f64 / 15.0,
+                    b as f64 / 15.0,
+                ))
+            }
+            4 => {
+                let number = u16::from_str_radix(hex_string.get(1..5).unwrap(), 16).unwrap();
+                let r = (number & 0xF000) >> 12;
+                let g = (number & 0x0F00) >> 8;
+                let b = (number & 0x00F0) >> 4;
+                let a = number & 0x000F;
+                Some(Self::with_rgba(
+                    r as f64 / 15.0,
+                    g as f64 / 15.0,
+                    b as f64 / 15.0,
+                    a as f64 / 15.0,
+                ))
+            }
+            6 => {
+                let number = u32::from_str_radix(hex_string.get(1..7).unwrap(), 16).unwrap();
+                let r = (number & 0xFF0000) >> 16;
+                let g = (number & 0x00FF00) >> 8;
+                let b = number & 0x0000FF;
+                Some(Self::with_rgb(
+                    r as f64 / 255.0,
+                    g as f64 / 255.0,
+                    b as f64 / 255.0,
+                ))
+            }
+            8 => {
+                let number = u32::from_str_radix(hex_string.get(1..9).unwrap(), 16).unwrap();
+                let r = (number & 0xFF000000) >> 24;
+                let g = (number & 0x00FF0000) >> 16;
+                let b = (number & 0x0000FF00) >> 8;
+                let a = number & 0x000000FF;
+                Some(Self::with_rgba(
+                    r as f64 / 255.0,
+                    g as f64 / 255.0,
+                    b as f64 / 255.0,
+                    a as f64 / 255.0,
+                ))
+            }
+            _ => None,
+        }
+    }
+
+    pub fn as_color_string(&self) -> String {
+        format!(
+            "#{:02X}{:02X}{:02X}{:02X}",
+            (self.red * 255.0) as u8,
+            (self.green * 255.0) as u8,
+            (self.blue * 255.0) as u8,
+            (self.alpha * 255.0) as u8,
+        )
+    }
+}
+
 pub struct Rendering {
-    pub ctx: web_sys::CanvasRenderingContext2d,
+    ctx: web_sys::CanvasRenderingContext2d,
     images: Vec<web_sys::HtmlImageElement>,
 }
 
@@ -52,4 +164,47 @@ impl Rendering {
             .map_err(JsError::from)?;
         Ok(())
     }
+
+    pub fn set_fill_style(&self, color: &Color) {
+        self.ctx.set_fill_style(&color.as_color_string().into());
+    }
+    pub fn set_stroke_style(&self, color: &Color) {
+        self.ctx.set_stroke_style(&color.as_color_string().into());
+    }
+
+    pub fn fill_rect(&self, x: f64, y: f64, width: f64, height: f64) {
+        self.ctx.fill_rect(x, y, width, height);
+    }
+
+    pub fn begin_path(&self) {
+        self.ctx.begin_path();
+    }
+
+    pub fn stroke(&self) {
+        self.ctx.stroke();
+    }
+
+    pub fn arc(&self, x: f64, y: f64, radius: f64, start_angle: f64, end_angle: f64) {
+        self.ctx.arc(x, y, radius, start_angle, end_angle).unwrap();
+    }
+
+    pub fn fill(&self) {
+        self.ctx.fill();
+    }
+
+    pub fn set_line_width(&self, width: f64) {
+        self.ctx.set_line_width(width);
+    }
+
+    pub fn move_to(&self, x: f64, y: f64) {
+        self.ctx.move_to(x, y);
+    }
+
+    pub fn line_to(&self, x: f64, y: f64) {
+        self.ctx.line_to(x, y);
+    }
+
+    pub fn set_transform(&self, a: f64, b: f64, c: f64, d: f64, e: f64, f: f64) {
+        self.ctx.set_transform(a, b, c, d, e, f).unwrap();
+    }
 }

src/states/heaven.rs

@@ -97,8 +97,8 @@ impl state::State for HeavenState {
     fn update(&mut self) -> state::Transition {
         {
             let rendering = self.resources.get_mut::<resources::Rendering>().unwrap();
-            rendering.ctx.set_fill_style(&"#100e23".into());
-            rendering.ctx.fill_rect(0.0, 0.0, 1920.0, 1080.0);
+            rendering.set_fill_style(&resources::Color::with_rgb(0.0625, 0.06, 0.125));
+            rendering.fill_rect(0.0, 0.0, 1920.0, 1080.0);
         }
 
         self.node_schedule

src/states/ingame.rs

 use crate::resources;
 use crate::state;
 use crate::svg_loader;
+use crate::systems;
 use crate::utils;
 
 pub struct InGameState {
@@ -12,13 +13,23 @@ pub struct InGameState {
 
 impl InGameState {
     pub fn new(level: svg_loader::SvgLevel) -> InGameState {
+        let mut rendering = resources::Rendering::new("game-canvas").unwrap();
+        let foreground = rendering.register_image(level.foreground_image);
+        let background = rendering.register_image(level.background_image);
+
         let mut resources = legion::Resources::default();
         resources.insert(resources::Clock::new());
-        resources.insert(resources::Rendering::new("game-canvas").unwrap());
+        resources.insert(rendering);
+        resources.insert(resources::Camera::new(1920.0, 1080.0));
 
         let world = legion::World::default();
 
-        let schedule = legion::Schedule::builder().build();
+        let schedule = legion::Schedule::builder()
+            .add_system(systems::moving_system())
+            .add_thread_local(systems::camera_system())
+            .add_thread_local(systems::draw_level_layer_system(background))
+            .add_thread_local(systems::draw_level_layer_system(foreground))
+            .build();
 
         InGameState {
             gui_svg: utils::get_element_by_id("ingame-ui").unwrap(),
@@ -36,17 +47,35 @@ impl state::State for InGameState {
             .set_property("display", "block")
             .unwrap();
 
-        let rendering = resources::Rendering::new("game-canvas").unwrap();
-        rendering.ctx.set_fill_style(&"#100e23".into());
-        rendering.ctx.fill_rect(0.0, 0.0, 1920.0, 1080.0);
-
-        state::Transition::Sleep
+        state::Transition::Loop
     }
 
     fn deinit(&mut self) {
+        self.resources.get::<resources::Rendering>()
+            .unwrap()
+            .set_transform(
+                1.0, 0.0, 0.0, 1.0, 0.0, 0.0);
         self.gui_svg
             .style()
             .set_property("display", "none")
             .unwrap();
     }
+
+    fn update(&mut self) -> state::Transition {
+        {
+            let rendering = self.resources.get::<resources::Rendering>().unwrap();
+            rendering.set_fill_style(&resources::Color::with_hex_string("#100e23").unwrap());
+            rendering.fill_rect(0.0, 0.0, 1920.0, 1080.0);
+        }
+        self.schedule.execute(&mut self.world, &mut self.resources);
+        let done = {
+            let camera = self.resources.get::<resources::Camera>().unwrap();
+            camera.position.x > 50.0
+        };
+        if done {
+            state::Transition::Pop
+        } else {
+            state::Transition::Loop
+        }
+    }
 }

src/states/level_loading.rs

@@ -57,8 +57,8 @@ impl state::State for LevelLoadingState {
     fn update(&mut self) -> state::Transition {
         {
             let rendering = self.resources.get_mut::<resources::Rendering>().unwrap();
-            rendering.ctx.set_fill_style(&"#100e23".into());
-            rendering.ctx.fill_rect(0.0, 0.0, 1920.0, 1080.0);
+            rendering.set_fill_style(&resources::Color::with_rgb(0.0625, 0.06, 0.125));
+            rendering.fill_rect(0.0, 0.0, 1920.0, 1080.0);
         }
 
         self.node_schedule

src/svg_loader.rs

@@ -188,4 +188,12 @@ impl SvgLevel {
             }
         }
     }
+
+    pub fn width(&self) -> u32 {
+        self.foreground_image.width()
+    }
+
+    pub fn height(&self) -> u32 {
+        self.foreground_image.height()
+    }
 }

src/systems/camera.rs

+use crate::resources;
+
+#[legion::system]
+pub fn camera(
+    #[resource] rendering: &resources::Rendering,
+    #[resource] camera: &resources::Camera,
+) {
+    let pos = -camera.position + camera.size / 2.0;
+    rendering.set_transform(1.0, 0.0, 0.0, 1.0, pos.x, pos.y);
+}

src/systems/mod.rs

+mod camera;
 mod level;
+mod moving;
 
+pub use camera::camera_system;
 pub use level::draw_level_layer_system;
+pub use moving::moving_system;

src/systems/moving.rs

+use crate::resources;
+
+#[legion::system]
+pub fn moving(#[resource] camera: &mut resources::Camera) {
+    camera.position.x += 0.1;
+}

www/testlevel.svg

@@ -11,22 +11,22 @@
    inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
    id="svg8"
    version="1.1"
-   viewBox="0 0 801 1000"
-   height="1000"
-   width="801">
+   viewBox="0 0 800 1200"
+   height="1200"
+   width="800">
   <defs
      id="defs2" />
   <sodipodi:namedview
-     inkscape:window-maximized="1"
-     inkscape:window-y="27"
-     inkscape:window-x="72"
-     inkscape:window-height="1199"
-     inkscape:window-width="1702"
+     inkscape:window-maximized="0"
+     inkscape:window-y="64"
+     inkscape:window-x="73"
+     inkscape:window-height="1075"
+     inkscape:window-width="1522"
      showgrid="false"
      inkscape:document-rotation="0"
      inkscape:current-layer="layer2"
      inkscape:document-units="px"
-     inkscape:cy="475.47154"
+     inkscape:cy="1158.6807"
      inkscape:cx="385.02049"
      inkscape:zoom="1"
      inkscape:pageshadow="2"
@@ -56,7 +56,7 @@
      inkscape:label="background"
      id="layer3"
      inkscape:groupmode="layer"
-     transform="translate(0,-123.4919)">
+     transform="translate(0,76.5081)">
     <rect
        style="fill:#ffc800;fill-opacity:1;stroke:#5a0000;stroke-width:5.06790447;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect6217"
@@ -76,7 +76,7 @@
      inkscape:groupmode="layer"
      inkscape:label="collider"
      style="display:none"
-     transform="translate(0,-123.4919)">
+     transform="translate(0,76.5081)">
     <circle
        id="path3794"
        cx="632.52637"
@@ -117,7 +117,7 @@
      inkscape:label="foreground"
      id="layer2"
      inkscape:groupmode="layer"
-     transform="translate(0,-123.4919)">
+     transform="translate(0,76.5081)">
     <path
        sodipodi:type="star"
        style="fill:#ff0000;fill-opacity:1;stroke:#ff0000;stroke-width:4.76499987;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"