feat: uploading files to Meteor (not using it yet)

Cargo.toml

@@ -17,13 +17,9 @@ tracing = "0.1.40"
 console_error_panic_hook = "0.1.7"
 tracing-wasm = "0.2.1"
 tracing-log = "0.2.0"
-web-sys = { version = "0.3", features = [
-	"WebGlBuffer",
-	"WebGl2RenderingContext",
-	"WebGlVertexArrayObject",
-	"WebGlProgram",
-	"WebGlShader",
-] }
+web-sys = { version = "0.3.69", features = ["WebGlBuffer", "WebGl2RenderingContext", "WebGlVertexArrayObject", "WebGlProgram", "WebGlShader", "HtmlInputElement", "FileList", "File", "FileReader"] }
+aphelion-util = { git = "https://github.com/orbit-systems/aphelion-util", version = "0.1.2" }
+thaw = { version = "0.2.5", features = ["csr"] }
 
 [dev-dependencies]
 wasm-bindgen = "0.2"

public/styles.css

@@ -35,9 +35,8 @@ h6 {
     padding: 2rem;
 }
 
-p,
-button {
-    margin: var(--size-6);
+p {
+    margin: 1 auto;
 }
 
 body > picture,

src/components/meteor.rs

@@ -0,0 +1,23 @@
+use leptos::*;
+use thaw::{Button, FileList, Upload};
+use web_sys::File;
+
+/// Displays the Meteor emulator text output.
+#[component]
+pub fn MeteorOutput(
+    _started: ReadSignal<bool>,
+    _binary: ReadSignal<Option<File>>,
+) -> impl IntoView {
+    view! {
+        <textarea class="meteor-output" name="output" rows="24" cols="80" disabled></textarea>
+    }
+}
+
+#[component]
+pub fn MeteorFileInput(#[prop(into)] callback: Callback<FileList, ()>) -> impl IntoView {
+    view! {
+        <Upload custom_request=callback accept=".bin,application/octet-stream">
+            <Button>"Load binary"</Button>
+        </Upload>
+    }
+}

src/components/mod.rs

@@ -1 +1 @@
-pub mod meteor_component;
+pub mod meteor;

src/lib.rs

@@ -7,9 +7,10 @@ use crate::pages::home::Home;
 
 // Modules
 mod components;
+mod meteor;
 mod pages;
 
-/// An app router which renders the homepage and handles 404's
+/// The main function for the app.
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.

src/meteor.rs

@@ -1 +1,3 @@
+use aphelion_util::io::Port;
 
+const _OUTPUT: Port = Port(10);

src/pages/home.rs

@@ -1,10 +1,25 @@
 use leptos::*;
+use thaw::FileList;
+use tracing::info;
+use web_sys::File;
 
-use crate::components::meteor_component::Meteor;
+use crate::components::meteor::{MeteorFileInput, MeteorOutput};
 
 /// Default Home Page
 #[component]
 pub fn Home() -> impl IntoView {
+    // Tracking Meteor state
+    let (meteor_started, _set_meteor_started) = create_signal(false);
+    let (meteor_binary, set_meteor_binary) = create_signal::<Option<File>>(None);
+
+    // let meteor_message = use_message();
+
+    let file_upload_callback = move |file_list: FileList| {
+        let file = file_list.get(0).expect("file is none");
+        set_meteor_binary(Some(file));
+        info!("Binary uploaded to Meteor.");
+    };
+
     view! {
         <ErrorBoundary fallback=|errors| {
             view! {
@@ -20,17 +35,30 @@ pub fn Home() -> impl IntoView {
                             .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                             .collect_view()
                     }}
-
                 </ul>
             }
         }>
 
             <div class="container">
                 <h1>"nova"</h1>
 
-                <Meteor/>
+                <MeteorOutput _started=meteor_started _binary=meteor_binary />
+
+                <MeteorFileInput callback=file_upload_callback />
             </div>
 
+            <p>
+                "Nova uses port 10 for its serial output and port 11 for its serial input. "
+                "GPU support is planned."
+            </p>
+
+            <div class="asm">
+                <p>
+                    "Nova's assembler is currently unimplemented."
+                    <br />
+                    "Please use the binary input box to upload an assembled/compiled Aphelion binary file."
+                </p>
+            </div>
         </ErrorBoundary>
     }
 }