From 93ae3b08ea2b7927ff7e0e83580bc93c46f0a7e0 Mon Sep 17 00:00:00 2001
From: c0repwn3r <core@coredoes.dev>
Date: Wed, 12 Apr 2023 17:13:11 -0400
Subject: [PATCH] rendering work

---
 client/src/rendering/renderer.rs   |  40 +++++-
 client/src/textures/loader_slow.rs |   2 +-
 protocol/src/lib.rs                |   8 ++
 web/play.html                      | 190 ++++++++++++++++-------------
 4 files changed, 155 insertions(+), 85 deletions(-)

diff --git a/client/src/rendering/renderer.rs b/client/src/rendering/renderer.rs
index 2d4d15b72ad125ea83a9fe7b17b4b3fb1d10fade..9b192cf61fbf25b0b9acdb554cf79c97d8a99e7f 100644
--- a/client/src/rendering/renderer.rs
+++ b/client/src/rendering/renderer.rs
@@ -1,9 +1,11 @@
 use std::error::Error;
 use async_trait::async_trait;
-use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement};
+use log::debug;
+use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, HtmlImageElement};
 use crate::rendering::Renderer;
 use wasm_bindgen::{JsCast, JsValue};
 use crate::CLIENT;
+use crate::textures::TextureManager;
 
 #[derive(Debug)]
 pub struct WebRenderer {
@@ -28,6 +30,10 @@ impl Renderer for WebRenderer {
         let typed_canvas_element: HtmlCanvasElement = canvas_element.dyn_into::<web_sys::HtmlCanvasElement>().map_err(|_| ()).unwrap();
         let context = typed_canvas_element.get_context("2d").unwrap().unwrap().dyn_into::<CanvasRenderingContext2d>().unwrap();
         let client = CLIENT.read()?;
+        if client.client_data.is_none() {
+            return Err("client not yet initialized".into());
+        }
+        let client_data = client.client_data.as_ref().unwrap();
 
         context.set_transform(1f64, 0f64, 0f64, 1f64, 0f64, 0f64).map_err(|e: JsValue| e.as_string().unwrap())?;
         context.clear_rect(0f64, 0f64, typed_canvas_element.width() as f64, typed_canvas_element.height() as f64);
@@ -35,8 +41,40 @@ impl Renderer for WebRenderer {
         let camera_translate_x = -client.x + (typed_canvas_element.width() / 2) as f64;
         let camera_translate_y = -client.y + (typed_canvas_element.height() / 2) as f64;
 
+        debug!("translating to {} {}", camera_translate_x, camera_translate_y);
+
         context.translate(camera_translate_x, camera_translate_y).map_err(|e: JsValue| e.as_string().unwrap())?;
 
+        for planet in &client.planets {
+            let texture_image = document.get_element_by_id(&format!("tex-{}", planet.planet_type.as_texture_id())).unwrap().dyn_into::<HtmlImageElement>().unwrap();
+            context.draw_image_with_html_image_element_and_dw_and_dh(&texture_image, 95f64, 65f64, planet.radius*2f64, planet.radius*2f64).map_err(|e: JsValue| e.as_string().unwrap())?;
+        }
+
+        context.begin_path();
+
+        // Draw the outer circle.
+        context
+            .arc(75.0, 75.0, 50.0, 0.0, std::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, std::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, std::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, std::f64::consts::PI * 2.0)
+            .unwrap();
+
+        context.stroke();
+
         Ok(())
     }
 }
\ No newline at end of file
diff --git a/client/src/textures/loader_slow.rs b/client/src/textures/loader_slow.rs
index e48f501e39a6e49de4bcea6a118b29c9ed335d4a..f15eaae4f0682cf604f37c1f8e69ebee4e7ab368 100644
--- a/client/src/textures/loader_slow.rs
+++ b/client/src/textures/loader_slow.rs
@@ -15,6 +15,6 @@ impl TextureManager for TextureLoader {
     }
 
     fn get_texture(&self, texture_id: &str) -> Option<String> {
-        Some(format!("/../assets/final/{}/{}.png", self.size.to_string(), texture_id))
+        Some(format!("/assets/final/{}/{}.png", self.size.to_string(), texture_id))
     }
 }
\ No newline at end of file
diff --git a/protocol/src/lib.rs b/protocol/src/lib.rs
index 4afc3c80d53ca0b80bba4744322dbac2af9312a0..3c37840f29d496f176d5cb6c929f0ff44ebc9c50 100644
--- a/protocol/src/lib.rs
+++ b/protocol/src/lib.rs
@@ -79,6 +79,14 @@ pub enum PlanetType {
     Earth
 }
 
+impl PlanetType {
+    pub fn as_texture_id(&self) -> String {
+        match self {
+            PlanetType::Earth => "earth".to_string()
+        }
+    }
+}
+
 pub fn pc2s(pkt: &MessageC2S) -> Vec<u8> {
     rmp_serde::to_vec(pkt).unwrap()
 }
diff --git a/web/play.html b/web/play.html
index 641e5d32b88c77a1bf36e7b38cf9a56a0861b09d..666c6bf02348566f99a8707f2e9714d9cf738c49 100644
--- a/web/play.html
+++ b/web/play.html
@@ -6,95 +6,119 @@
     <meta charset="utf-8">
 </head>
 
-    <body>
-        <div class="chatbox">
-            <div id="chats">
+<body>
+<div class="chatbox">
+    <div id="chats">
+
+    </div>
+    <input id="chat-value" type="text" placeholder="chat text goes here"/>
+    <button id="chat-submit">submit</button>
+    <p id="status">Loading WASM module...</p>
+
+    <div id="textures" style="display: none;">
+
+    </div>
+</div>
+
+<canvas style="width: 100%; height: 100%; background-color: forestgreen;" id="canvas"></canvas>
+
+<script type="module">
+    // If you're getting build errors here | you need to run `just build_client_bundle` first, to compile client code
+    //                                     v
+    import init, {
+        rust_init,
+        send_chat,
+        update_socket,
+        set_status,
+        get_texture,
+        render_frame,
+        send_ping_pong
+    } from "./dist/starkingdoms_client.js";
+
+    init().then(() => {
+        const urlSearchParams = new URLSearchParams(window.location.search);
+
+        if (!(urlSearchParams.has("server") || urlSearchParams.has("username") || urlSearchParams.has("textures"))) {
+            window.location.href = "/index.html";
+        }
+
+        rust_init(urlSearchParams.get("server"), urlSearchParams.get("username"), urlSearchParams.get("textures")).then(() => {
+            document.getElementById("chat-submit").addEventListener("click", e => {
+                send_chat(document.getElementById("chat-value").value);
+            });
+
+            let interval_id;
+            let interval_id2;
+
+            interval_id = setInterval(() => {
+                update_socket().catch((e) => {
+                    clearInterval(interval_id);
+                    clearInterval(interval_id2);
+                    set_status("There was an error. Reload the page to reconnect.")
+                    throw e;
+                });
+            }, 5);
+
+            interval_id2 = setInterval(() => {
+                send_ping_pong().catch((e) => {
+                    clearInterval(interval_id2);
+                    clearInterval(interval_id);
+                    set_status("There was an error. Reload the page to reconnect.")
+                    throw e;
+                });
+            }, 5);
+
+            let start;
 
-            </div>
-            <input id="chat-value" type="text" placeholder="chat text goes here" />
-            <button id="chat-submit">submit</button>
-            <p id="status">Loading WASM module...</p>
+            let textures = ["autoplr_cfg", "autoplr_error", "autoplr_on", "cargo_off", "cargo_on", "earth", "ecothruster_on", "hearty", "hub_off", "hub_on", "landingleg", "landingthruster_off", "landingthruster_on", "powerhub_off", "powerhub_on", "superthruster_off", "superthruster_on", "thruster_off", "thruster_on"];
 
-            <div id="textures">
+            for (let i = 0; i < textures.length; i++) {
+                let texture = textures[i];
 
-            </div>
-        </div>
+                let fieldset_elem = document.createElement("fieldset");
+                fieldset_elem.style = "width: min-content;";
+                fieldset_elem.classList.add("texturebox")
+                let legend_elem = document.createElement("legend");
+                legend_elem.innerText = texture;
 
-        <canvas style="width: 100%; height: 100%" id="canvas"></canvas>
+                let img_elem = document.createElement("img");
+                img_elem.src = get_texture(texture);
+                img_elem.id = "tex-" + texture;
 
-        <script type="module">
-            // If you're getting build errors here | you need to run `just build_client_bundle` first, to compile client code
-            //                                     v
-            import init, { rust_init, send_chat, update_socket, set_status, get_texture, render_frame, send_ping_pong } from "./dist/starkingdoms_client.js";
-            init().then(() => {
-                const urlSearchParams = new URLSearchParams(window.location.search);
+                fieldset_elem.appendChild(legend_elem);
+                fieldset_elem.appendChild(img_elem);
+                document.getElementById("textures").appendChild(fieldset_elem);
+            }
+            if (urlSearchParams.has("showTextures")) {
+                document.getElementById("textures").style = "";
+            }
 
-                if (!(urlSearchParams.has("server") || urlSearchParams.has("username") || urlSearchParams.has("textures"))) {
-                    window.location.href = "/index.html";
+            // Textures must be fully loaded (above) before rendering can start
+            // They are all put on the DOM, in a hidden element, so they arent visible to the user unless showTextures=1
+            // but they need to have been loaded for the canvas to render them
+
+            function animateFrame(time) {
+                if (start === undefined) {
+                    start = time;
                 }
+                let delta = time - start;
 
-                rust_init(urlSearchParams.get("server"), urlSearchParams.get("username"), urlSearchParams.get("textures")).then(() => {
-                    document.getElementById("chat-submit").addEventListener("click", e => {
-                        send_chat(document.getElementById("chat-value").value);
-                    });
-
-                    let interval_id;
-                    let interval_id2;
-
-                    interval_id = setInterval(() => {
-                        update_socket().catch((e) => {
-                            clearInterval(interval_id);
-                            clearInterval(interval_id2);
-                            set_status("There was an error. Reload the page to reconnect.")
-                            throw e;
-                        });
-                    }, 5);
-
-                    interval_id2 = setInterval(() => {
-                        send_ping_pong().catch((e) => {
-                            clearInterval(interval_id2);
-                            clearInterval(interval_id);
-                            set_status("There was an error. Reload the page to reconnect.")
-                            throw e;
-                        });
-                    }, 5);
-
-                    let start;
-                    function animateFrame(time) {
-                        if (start === undefined) {
-                            start = time;
-                        }
-                        let delta = time - start;
-
-                        render_frame(delta);
-                        start = time;
-                        //requestAnimationFrame(animateFrame)
-                    }
-
-                    //requestAnimationFrame(animateFrame);
-
-                    if (urlSearchParams.has("showTextures")) {
-                        let textures = ["autoplr_cfg", "autoplr_error", "autoplr_on", "cargo_off", "cargo_on", "earth", "ecothruster_on", "hearty", "hub_off", "hub_on", "landingleg", "landingthruster_off", "landingthruster_on", "powerhub_off", "powerhub_on", "superthruster_off", "superthruster_on", "thruster_off", "thruster_on"];
-
-                        for (let i = 0; i < textures.length; i++) {
-                            let texture = textures[i];
-
-                            let fieldset_elem = document.createElement("fieldset");
-                            fieldset_elem.style = "width: min-content;";
-                            fieldset_elem.classList.add("texturebox")
-                            let legend_elem = document.createElement("legend");
-                            legend_elem.innerText = texture;
-
-                            let img_elem = document.createElement("img");
-                            img_elem.src = get_texture(texture);
-
-                            fieldset_elem.appendChild(legend_elem);
-                            fieldset_elem.appendChild(img_elem);
-                            document.body.appendChild(fieldset_elem);
-                        }
-                    }
-                });
-            })
-        </script>
-    </body>
+                try {
+                    render_frame(delta);
+                } catch (e) {
+                    console.error("error in renderFrame: "+e);
+                    return;
+                }
+                start = time;
+
+                document.getElementById("canvas").getContext("2d").drawImage(document.getElementById("tex-earth"), 0, 0, 150 -2025, 2000, 2000);
+
+                requestAnimationFrame(animateFrame);
+            }
+
+            requestAnimationFrame(animateFrame);
+        });
+    })
+</script>
+</body>
 </html>