diff --git a/src/components/global.css b/src/components/global.css new file mode 100644 index 0000000..e226c6c --- /dev/null +++ b/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; +} diff --git a/src/components/main_window.rs b/src/components/main_window.rs new file mode 100644 index 0000000..9eb47f1 --- /dev/null +++ b/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) + } + } + }) +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 5aca9ea..6ff64b0 100644 --- a/src/components/mod.rs +++ b/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; diff --git a/src/components/plates/destination_plate.rs b/src/components/plates/destination_plate.rs new file mode 100644 index 0000000..ccc76a1 --- /dev/null +++ b/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, i: u8, j: u8, color: Option) -> 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" + } + } + }) +} diff --git a/src/components/plates/mod.rs b/src/components/plates/mod.rs new file mode 100644 index 0000000..6bda88a --- /dev/null +++ b/src/components/plates/mod.rs @@ -0,0 +1,3 @@ +pub mod source_plate; +pub mod destination_plate; +pub mod plate_container; diff --git a/src/components/plate.css b/src/components/plates/plate.css similarity index 84% rename from src/components/plate.css rename to src/components/plates/plate.css index 91f446d..b4b4a6d 100644 --- a/src/components/plate.css +++ b/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: 30px; + height: 2vmin; background: none; } div.plate_cell_inner { - width: 90%; + aspect-ratio: 1 / 1; height: 90%; border-radius: 50%; border: 2px solid black; diff --git a/src/components/plates/plate_container.css b/src/components/plates/plate_container.css new file mode 100644 index 0000000..cb41484 --- /dev/null +++ b/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; +} diff --git a/src/components/plates/plate_container.rs b/src/components/plates/plate_container.rs new file mode 100644 index 0000000..d1b4009 --- /dev/null +++ b/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} + } + }) +} diff --git a/src/components/source_plate.rs b/src/components/plates/source_plate.rs similarity index 90% rename from src/components/source_plate.rs rename to src/components/plates/source_plate.rs index 41b9aa5..88a2536 100644 --- a/src/components/source_plate.rs +++ b/src/components/plates/source_plate.rs @@ -22,21 +22,22 @@ pub fn SourcePlate(cx: Scope) -> Element { }); cx.render(rsx! { - style { - vec![STYLE].into_iter().map(|s| rsx!{s}) // This is stupid - } - SourcePlateSelectionIndicator {} - SourcePlateSelectionController {} - table { - draggable: "false", - for i in 1..=cx.props.height { - tr { - draggable: "false", - for j in 1..=cx.props.width { - SourcePlateCell {i: i, j: j} + div{ + class: "source_plate", + style { STYLE } + SourcePlateSelectionIndicator {} + SourcePlateSelectionController {} + table { + draggable: "false", + for i in 1..=cx.props.height { + tr { + draggable: "false", + for j in 1..=cx.props.width { + SourcePlateCell {i: i, j: j} + } } - } - }, + }, + } } }) } diff --git a/src/components/transfer_menu.rs b/src/components/transfer_menu.rs new file mode 100644 index 0000000..5ac8ea9 --- /dev/null +++ b/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", + } + }) +} diff --git a/src/components/tree.rs b/src/components/tree.rs new file mode 100644 index 0000000..a70acad --- /dev/null +++ b/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", + } + }) +} diff --git a/src/lib.rs b/src/lib.rs index 8200922..a6edbc6 100644 --- a/src/lib.rs +++ b/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 { - "Shrimp" - SourcePlate { - width: 24, - height: 18, - } - } + MainWindow {} }) }