Wireframing and restructure

src/components/global.css

@@ -0,0 +1,41 @@
+:root {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+div.main_container {
+	height: 95vh;
+	width: 98vw;
+	display: grid;
+	grid-template-columns: [left] 1fr [right] 1fr;
+	grid-template-rows: [upper] 2fr [lower] 1fr;
+
+	column-gap: 1vw;
+	row-gap: 1vh;
+}
+
+div.tree {
+	grid-column: left / left;
+	grid-row: upper / upper;
+	width: 100%;
+	height: 100%;
+	border: 2px solid green;
+}
+
+div.transfer_menu {
+	grid-column: left / left;
+	grid-row: lower / lower;
+	width: 100%;
+	height: 100%;
+	border: 2px solid orange;
+}
+
+div.plate_container {
+	border: 2px dashed purple;
+	grid-column: right / right;
+	grid-row: upper / 3;
+}

src/components/main_window.rs

@@ -0,0 +1,22 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use super::plates::plate_container::PlateContainer;
+use super::tree::Tree;
+use super::transfer_menu::TransferMenu;
+
+static STYLE: &'static str = include_str!("global.css");
+
+pub fn MainWindow(cx: Scope) -> Element {
+    cx.render(rsx! {
+        style { STYLE },
+        div {
+            class: "main_container",
+            Tree {},
+            TransferMenu {},
+            PlateContainer {
+                source_dims: (24,16),
+                destination_dims: (24,16)
+            }
+        }
+    })
+}

src/components/mod.rs

@@ -1 +1,4 @@
-pub mod source_plate;
+pub mod plates;
+pub mod main_window;
+pub mod tree;
+pub mod transfer_menu;

src/components/plates/destination_plate.rs

@@ -0,0 +1,40 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+#[inline_props]
+pub fn DestinationPlate(cx: Scope, width: u8, height: u8) -> Element {
+    cx.render(rsx! {
+        div {
+            class: "dest_plate",
+            table {
+                for i in 1..=cx.props.height {
+                    tr {
+                        draggable: "false",
+                        for j in 1..=cx.props.width {
+                            DestPlateCell {i: i, j: j}
+                        }
+                    }
+                },
+            }
+        }
+    })
+}
+
+#[inline_props]
+fn DestPlateCell(cx: Scope<PlateCellProps>, i: u8, j: u8, color: Option<String>) -> Element {
+    let color_string = match color {
+        Some(c) => c.clone(),
+        None => "None".to_string(),
+    };
+
+    cx.render(rsx! {
+        td {
+            class: "plate_cell",
+            draggable: "false",
+            style: "background: {color_string}",
+            div {
+                class: "plate_cell_inner"
+            }
+        }
+    })
+}

src/components/plates/mod.rs

@@ -0,0 +1,3 @@
+pub mod source_plate;
+pub mod destination_plate;
+pub mod plate_container;

src/components/plates/plate.css

@@ -1,16 +1,14 @@
 table, tr, td {
-	box-sizing: border-box;
 	user-select: none; /* Prevents dragging issue */
 	border-spacing: 0px;
 }
 td.plate_cell {
-	width: 30px;
+	height: 2vmin;
-	height: 30px;
 	background: none;
 }
 
 div.plate_cell_inner {
-	width: 90%;
+	aspect-ratio: 1 / 1;
 	height: 90%;
 	border-radius: 50%;
 	border: 2px solid black;

src/components/plates/plate_container.css

@@ -0,0 +1,15 @@
+div.plate_container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+div.source_plate, div.dest_plate {
+	width: 100%;
+}
+div.source_plate {
+	border: 2px solid red;
+}
+div.dest_plate {
+	border: 2px solid blue;
+}

src/components/plates/plate_container.rs

@@ -0,0 +1,20 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use super::source_plate::SourcePlate;
+use super::destination_plate::DestinationPlate;
+
+static STYLE: &'static str = include_str!("plate_container.css");
+
+#[inline_props]
+pub fn PlateContainer(cx: Scope, source_dims: (u8,u8), destination_dims: (u8,u8)) -> Element {
+    cx.render(rsx! {
+        style { STYLE }
+        div {
+            class: "plate_container",
+            SourcePlate {width: source_dims.0,
+                         height: source_dims.1},
+            DestinationPlate {width: destination_dims.0,
+                              height: destination_dims.1}
+        }
+    })
+}

src/components/plates/source_plate.rs

@@ -22,9 +22,9 @@ pub fn SourcePlate(cx: Scope<SourcePlateProps>) -> Element {
     });
 
     cx.render(rsx! {
-        style {
+        div{
-            vec![STYLE].into_iter().map(|s| rsx!{s}) // This is stupid
+            class: "source_plate",
-        }
+            style { STYLE }
             SourcePlateSelectionIndicator {}
             SourcePlateSelectionController {}
             table {
@@ -38,6 +38,7 @@ pub fn SourcePlate(cx: Scope<SourcePlateProps>) -> Element {
                     }
                 },
             }
+        }
     })
 }
 

src/components/transfer_menu.rs

@@ -0,0 +1,11 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+#[inline_props]
+pub fn TransferMenu(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            class: "transfer_menu",
+        }
+    })
+}

src/components/tree.rs

@@ -0,0 +1,11 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+#[inline_props]
+pub fn Tree(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            class: "tree",
+        }
+    })
+}

src/lib.rs

@@ -2,7 +2,7 @@
 mod components;
 mod data;
 
-use components::source_plate::SourcePlate;
+use components::main_window::MainWindow;
 use dioxus::prelude::*;
 
 #[cfg(debug_assertions)]
@@ -10,13 +10,7 @@ use data::*;
 
 pub fn App(cx: Scope) -> Element {
     cx.render(rsx! {
-        div {
+        MainWindow {}
-            "Shrimp"
-            SourcePlate {
-                width: 24,
-                height: 18,
-            }
-        }
     })
 }