diff --git a/Cargo.toml b/Cargo.toml index bee8654..4f95d55 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -33,6 +33,7 @@ features = [ 'Element', 'HtmlCanvasElement', 'Window', + 'Performance', ] [features] diff --git a/src/app.rs b/src/app.rs index 9fd95be..1569139 100644 --- a/src/app.rs +++ b/src/app.rs @@ -25,7 +25,7 @@ pub fn App(cx: Scope) -> impl IntoView { // content for this welcome page
-
+
- +
} diff --git a/src/components/background.rs b/src/components/background.rs index 0a52934..87b52a2 100644 --- a/src/components/background.rs +++ b/src/components/background.rs @@ -1,9 +1,10 @@ use leptos::html::Canvas; use leptos::*; -use std::f64; use wasm_bindgen::JsCast; use wasm_bindgen::JsValue; +use web_sys::window; +use crate::space_colonization::Node; use crate::space_colonization::SpaceColonization; #[component] @@ -33,45 +34,36 @@ pub fn Background(cx: Scope, class: &'static str) -> impl IntoView { .unchecked_into::(); log!("context = {:#?}", context); context.set_stroke_style(&JsValue::from("white")); - context.set_fill_style(&JsValue::from("white")); - context.begin_path(); - - // Draw the outer circle. - context - .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0) - .unwrap(); - - // Draw the mouth. - context.move_to(110.0, 75.0); - context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap(); - - // Draw the left eye. - context.move_to(65.0, 65.0); - context - .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0) - .unwrap(); - - // Draw the right eye. - context.move_to(95.0, 65.0); - context - .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0) - .unwrap(); - - log!("before stroke"); - context.stroke(); context.set_fill_style(&JsValue::from("yellow")); log!("About to render nodes"); + let start_time = window().unwrap().performance().unwrap().now(); for n in sc.nodes.iter() { context.fill_rect(n.position.x.into(), n.position.y.into(), 5.0, 5.0); - log!("filled node at position = {:#?}", n.position); + } + + context.begin_path(); + let render_id = window().unwrap().performance().unwrap().now(); + for n in sc.nodes.iter() { + n.render(render_id, |n: &Node, child: &Node| { + context.move_to(n.position.x.into(), n.position.y.into()); + context.line_to(child.position.x.into(), child.position.y.into()); + }); } context.set_fill_style(&JsValue::from("magenta")); for a in sc.attractors.iter() { context.fill_rect(a.position.x.into(), a.position.y.into(), 5.0, 5.0); - log!("filled node at position = {:#?}", a.position); } + let end_time = window().unwrap().performance().unwrap().now(); + log!( + "Rendering {} nodes and {} attractors took {}", + sc.nodes.len(), + sc.attractors.len(), + end_time - start_time + ); + + sc.tick(); }); let class = format!("canvas {}", class); @@ -81,27 +73,3 @@ pub fn Background(cx: Scope, class: &'static str) -> impl IntoView { } } - -// #[component] -// fn ComponentA(cx: Scope) -> impl IntoView { -// let canvas = NodeRef::>::new(cx); -// let on_click = move |_| { -// // checks to see if node has been rendered -// let context = canvas.get() -// // if you're able to click the button, canvas should already be there -// .expect("canvas to have been mounted") -// // here's the getContext() call -// .get_context("2d") -// // it returns Result, ...> -// // so we massage the types a little -// .ok() -// .flatten() -// .expect("canvas to have context") -// .unchecked_into::(); -// leptos::log!("context = {:#?}", context); -// }; -// view! { cx, -// -// -// } -// } diff --git a/src/routes/home/page.rs b/src/routes/home/page.rs index dca108a..d31f400 100644 --- a/src/routes/home/page.rs +++ b/src/routes/home/page.rs @@ -6,7 +6,6 @@ use leptos_meta::*; pub fn HomePage(cx: Scope) -> impl IntoView { view! { cx, - <div class="text-white bg-indigo-950"> <div class="flex space-y-4 flex-col max-w-3xl container mx-auto"> <h1 class="text-6xl text-orange-400 font-extrabold pt-8">"NationTech"</h1> <h2 class="text-3xl">"Unconventional team for extraordinary challenges"</h2> @@ -16,6 +15,5 @@ pub fn HomePage(cx: Scope) -> impl IntoView { <p class="text-lg">"We don't cheap out, we always give our all, we always try to balance all the factors to find the best possible solution to any situation."</p> <p class="text-lg">"The status quo does not exist, we always improve, automate, look for exponential gains across the stack."</p> </div> - </div> } } diff --git a/src/routes/whymdc/page.rs b/src/routes/whymdc/page.rs index 870afb2..0fe1c3e 100644 --- a/src/routes/whymdc/page.rs +++ b/src/routes/whymdc/page.rs @@ -104,7 +104,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView { </div> </div> </div> - <div class="flex flex-col bg-indigo-950"> + <div class="flex flex-col"> <div class="p-8 w-fit h-fit mr-72 ml-72"> <div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2"> <div class="flex-col"> @@ -259,7 +259,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView { </div> </div> </div> - <div class="bg-indigo-950 h-fit p-4"> + <div class="h-fit p-4"> <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400"> <p class="text-right p-4 text-white"> "La consommation annuelle d’eau des centres de données est passée de 738.2 millions de litres en 2015 à près de 840 milliards de litres en 2021 (Holger, 2022), soit une augmentation de plus de 113 690% en 6 ans. Google révélait avoir utilisé à elle seule 16.28 milliards de litres d’eau en 2021 afin de refroidir et humidifier ses centres de données (Our Commitment to Climate-Conscious Data Center Cooling, 2022), ce qui équivaut à environ 6 400 piscines olympiques. Ces données sont préoccupantes, d’autant plus que la majorité de l’eau utilisée provient de sources potables." @@ -359,7 +359,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView { </div> </div> - <div class="flex flex-col justify-center bg-indigo-950 p-8"> + <div class="flex flex-col justify-center p-8"> <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-8"> <SectionTitle dark=true> "Impact social négatif" @@ -499,7 +499,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> - <div class="flex-col bg-indigo-950 p-8"> + <div class="flex-col p-8"> <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4"> <SectionTitle dark=true> "Energy reuse factor (ERF)" @@ -539,7 +539,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> - <div class="flex-col bg-indigo-950 p-8"> + <div class="flex-col p-8"> <div class="mx-auto h-fit w-full border-t-4 border-b-4 border-orange-400 p-4"> <SectionTitle dark=true> "Global power usage effectiveness (GPUE)" @@ -573,7 +573,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" <div class="flex flex-col"> <div class="flex flex-row"> - <div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8"> + <div class="flex w-1/2 justify-center items-center p-8"> <img src="/img/Facebook-logo.jpg" class="mx-auto mt-8 mb-8 rounded-lg w-1/2"/> </div> <div class="flex justify-center center w-1/2 bg-zinc-200"> @@ -585,7 +585,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> <div class="flex flex-row"> - <div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8"> + <div class="flex w-1/2 justify-center items-center p-8"> <img src="/img/Microsoft-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/> </div> <div class="flex justify-center center w-1/2 bg-zinc-200"> @@ -597,7 +597,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> <div class="flex flex-row"> - <div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8"> + <div class="flex w-1/2 justify-center items-center p-8"> <div class="flex h-[231.23px] w-[368px] bg-white rounded-lg"> <img src="/img/Vantage-logo.png" class="mx-auto mt-8 mb-8 h-3/4 w-3/4"/> </div> @@ -611,7 +611,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> <div class="flex flex-row"> - <div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8"> + <div class="flex w-1/2 justify-center items-center p-8"> <img src="/img/Equinix-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/> </div> <div class="flex justify-center center w-1/2 bg-zinc-200"> @@ -623,7 +623,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> <div class="flex flex-row"> - <div class="flex w-1/2 justify-center items-center bg-indigo-950 p-8"> + <div class="flex w-1/2 justify-center items-center p-8"> <img src="/img/Amazon-logo.jpg" class="h-[231.23px] mx-auto mt-8 mb-8 rounded-lg w-1/2"/> </div> <div class="flex justify-center center w-1/2 bg-zinc-200"> @@ -686,7 +686,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> - <div class="flex flex-col p-8 bg-indigo-950"> + <div class="flex flex-col p-8 "> <div class="pt-16 w-full"> <div class="h-fit w-full border-t-4 border-b-4 border-orange-400 p-8"> <SectionTitle dark=true> @@ -695,7 +695,7 @@ d=IwAR3wuxdHW8VE30FMaqZ6Iuj9Cs86bRSvmij1e_zDjM6Bwo4l71n5EKcLxqY" </div> </div> </div> - <div class="bg-indigo-950 h-fit p-4"> + <div class="h-fit p-4"> <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-4 mr-72 ml-72 border-r-8 border-blue-400"> <p class="text-right p-4 text-white"> "Comme l’illustre le schéma ci-contre décrivant le fonctionnement des MCD de NationTech, l’installation de l'infrastructure informatique ne requiert aucune déforestation ou utilisation supplémentaire de territoire. En effet, les MCD de NationTech sont intégrés aux immeubles déjà existants, contrairement aux grandes entreprises technologiques qui acquièrent d’énormes terrains afin de construire les gigantesques usines qui serviront à héberger leurs serveurs. De plus, NationTech peut aussi bien intégrer ses MCD à l’intérieur qu’à l’extérieur des immeubles bénéficiant de la récupération de l’énergie thermique, ce qui rend cette technologie facile à intégrer n’importe où, peu importe le type d’immeuble visé." diff --git a/src/routes/whymdc/page.rs.bak b/src/routes/whymdc/page.rs.bak index 0fa04c9..93bb7dd 100644 --- a/src/routes/whymdc/page.rs.bak +++ b/src/routes/whymdc/page.rs.bak @@ -89,7 +89,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView { </SectionTitle> </div> </div> - <div class="flex flex-col bg-indigo-950"> + <div class="flex flex-col"> <div class="p-8 w-fit h-fit mr-72 ml-72"> <div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2"> <div class="flex-col"> diff --git a/src/space_colonization/mod.rs b/src/space_colonization/mod.rs index 3b1b5e9..032fcd2 100644 --- a/src/space_colonization/mod.rs +++ b/src/space_colonization/mod.rs @@ -1,5 +1,15 @@ +use leptos::*; use rand::thread_rng; use rand::Rng; +use wasm_bindgen::prelude::*; +use web_sys::console; +use web_sys::window; + +#[wasm_bindgen] +extern "C" { + #[wasm_bindgen(js_namespace = window)] + fn performance() -> web_sys::Performance; +} #[derive(Debug)] pub struct Point { @@ -13,6 +23,19 @@ pub struct Attractor { pub struct Node { pub position: Point, + pub children: Vec<Node>, +} + +impl Node { + pub fn render<F>(&self, render_id: f64, render_fn: F) where F: Copy + Fn(&Node, &Node) { + for child in self.children.iter() { + render_fn(self, child); + } + + for child in self.children.iter() { + child.render(render_id, render_fn); + } + } } pub struct SpaceColonization { @@ -29,6 +52,7 @@ impl SpaceColonization { let mut nodes = Vec::new(); nodes.push(Node { position: Point { x: 100, y: 100 }, + children: Vec::new(), }); let attractors = Vec::new(); @@ -50,6 +74,8 @@ impl SpaceColonization { } fn place_attractors(&mut self) { + let start_time = window().unwrap().performance().unwrap().now(); + console::log_1(&format!("Start placing attractors {}", start_time).into()); let mut x_pos = 0; let mut y_pos = 0; while x_pos < self.max_point.x { @@ -62,6 +88,9 @@ impl SpaceColonization { x_pos += self.density; y_pos = 0; } + let end_time = window().unwrap().performance().unwrap().now(); + let elapsed = end_time - start_time; + console::log_1(&format!("Done placing attractors , took : {}", elapsed).into()); } fn get_random_point(&self, x_pos: i32, y_pos: i32) -> Point { @@ -87,4 +116,8 @@ impl SpaceColonization { .unwrap(), } } + + pub fn tick(&self) { + todo!(); + } }