wip-working

src/musicplayer/ui/layout.gleam

@@ -12,15 +12,40 @@ pub type Layout {
 }
 
 pub type Section {
+  Section(String)
+
   Root
   Header
   Search
   PlaybackTime
 }
 
+// pub type Section {
+//   Root
+//   Header
+//   Search
+//   PlaybackTime
+//   Test
+
+//   Row1
+//   A
+//   B
+
+//   Row2
+//   C
+//   D
+// }
+
+pub type NodeType {
+  Container
+  Row
+  Cell
+}
+
 /// A Nodes width and height is in percentage (of the available width/height of its parent Node)
 pub type Node {
   Node(
+    t: NodeType,
     content: String,
     width_percent: Int,
     height_percent: Int,
@@ -32,30 +57,64 @@ pub fn new() -> Layout {
   let nodes =
     dict.from_list([
       #(
-        Root,
+        Section("Root"),
-        Node(content: "", width_percent: 100, height_percent: 100, children: [
-          // Header,
-          // Search,
-          PlaybackTime,
-        ]),
-      ),
-      // #(
-      //   Header,
-      //   Node(content: "Music Player", width: 50, height: 10, children: []),
-      // ),
-      // #(Search, Node(content: "", width: 50, height: 10, children: [])),
-      #(
-        PlaybackTime,
         Node(
-          content: "00:00",
+          t: Container,
+          content: "container",
+          width_percent: 100,
+          height_percent: 100,
+          children: [
+            Section("Row1"),
+            Section("Row2"),
+          ],
+        ),
+      ),
+      #(
+        Section("Row1"),
+        Node(
+          t: Row,
+          content: "row 1",
+          width_percent: 100,
+          height_percent: 50,
+          children: [
+            Section("A"),
+            Section("A"),
+          ],
+        ),
+      ),
+      #(
+        Section("A"),
+        Node(
+          t: Cell,
+          content: "cell 1",
           width_percent: 50,
           height_percent: 100,
           children: [],
         ),
       ),
+      #(
+        Section("B"),
+        Node(
+          t: Cell,
+          content: "cell 2",
+          width_percent: 50,
+          height_percent: 100,
+          children: [],
+        ),
+      ),
+      #(
+        Section("Row2"),
+        Node(
+          t: Row,
+          content: "row 1",
+          width_percent: 100,
+          height_percent: 50,
+          children: [],
+        ),
+      ),
     ])
 
-  Layout(0, 0, nodes: nodes)
+  Layout(width: 0, height: 0, nodes: nodes)
 }
 
 pub fn update_section(
@@ -100,7 +159,8 @@ pub fn render(layout: Layout) -> Nil {
     container_height,
     container_top_left_x,
     container_top_left_y,
-    Root,
+    0,
+    Section("Root"),
   )
 }
 
@@ -110,6 +170,7 @@ pub fn render_loop(
   container_height: Float,
   container_top_left_x: Int,
   container_top_left_y: Int,
+  index: Int,
   from: Section,
 ) -> Nil {
   let margin = 2.0
@@ -117,7 +178,10 @@ pub fn render_loop(
   case dict.get(layout.nodes, from) {
     Error(_) -> Nil
     Ok(node) -> {
-      list.each(node.children, fn(child) {
+      list.index_map(node.children, fn(child, i) { #(i, child) })
+      |> list.each(fn(ic: #(Int, Section)) {
+        let #(i, child) = ic
+
         let cw =
           container_width
           *. { int.to_float(node.width_percent) /. 100.0 }
@@ -132,11 +196,12 @@ pub fn render_loop(
 
         let cx = container_top_left_x + 1
         let cy = container_top_left_y + 1
-
+        render_loop(layout, cw, ch, cx, cy, i, child)
-        render_loop(layout, cw, ch, cx, cy, child)
       })
 
       logging.log("section: " <> string.inspect(from))
+      logging.log("section type: " <> string.inspect(node.t))
+      logging.log("index: " <> string.inspect(index))
       logging.log("container width: " <> float.to_string(container_width))
       logging.log("container height: " <> float.to_string(container_height))
 
@@ -150,11 +215,21 @@ pub fn render_loop(
         |> float.floor
         |> float.truncate
 
-      logging.log("width: " <> int.to_string(width))
+      logging.log("section width: " <> int.to_string(width))
-      logging.log("height: " <> int.to_string(height))
+      logging.log("section height: " <> int.to_string(height))
+
+      let #(cx, cy) = case node.t {
+        Container -> #(container_top_left_x, container_top_left_y)
+        Row -> #(
+          container_top_left_x,
+          container_top_left_y + { index * height },
+        )
+        Cell -> #(
+          container_top_left_x + { index * width },
+          container_top_left_y,
+        )
+      }
 
-      let cx = container_top_left_x
-      let cy = container_top_left_y
       logging.log("cx: " <> int.to_string(cx))
       logging.log("cy: " <> int.to_string(cy))
 

test/musicplayer/ui/layout_test.gleam

@@ -0,0 +1,87 @@
+// import gleam/dict
+// import gleam/int
+// import gleeunit
+
+// import musicplayer/ui/layout.{type Node, Layout, Section}
+
+// pub fn main() -> Nil {
+//   gleeunit.main()
+// }
+
+// pub fn foo_test() {
+//   let expected = ""
+
+//   let layout =
+//     Layout(
+//       width: 80,
+//       height: 20,
+//       nodes:,
+//       dict.from_list([
+//         #(
+//           Section("Root"),
+//           Node(
+//             t: Container,
+//             content: "container",
+//             width_percent: 100,
+//             height_percent: 100,
+//             children: [
+//               Section("Row1"),
+//               Section("Row2"),
+//             ],
+//           ),
+//         ),
+//         #(
+//           Section("Row1"),
+//           Node(
+//             t: Row,
+//             content: "row 1",
+//             width_percent: 100,
+//             height_percent: 50,
+//             children: [
+//               Section("A"),
+//               Section("B"),
+//             ],
+//           ),
+//         ),
+//         #(
+//           Section("A"),
+//           Node(
+//             t: Cell,
+//             content: "cell 1",
+//             width_percent: 50,
+//             height_percent: 100,
+//             children: [],
+//           ),
+//         ),
+//         #(
+//           B,
+//           Node(
+//             t: Cell,
+//             content: "cell 2",
+//             width_percent: 50,
+//             height_percent: 100,
+//             children: [],
+//           ),
+//         ),
+//         #(
+//           Section("Row2"),
+//           Node(
+//             t: Row,
+//             content: "row 1",
+//             width_percent: 100,
+//             height_percent: 50,
+//             children: [],
+//           ),
+//         ),
+//       ]),
+//     )
+
+//   let container_width = int.to_float(layout.width)
+//   let container_height = int.to_float(layout.height)
+//   let container_top_left_x = 1
+//   let container_top_left_y = 1
+
+//   let assert Ok(data) =
+//     layout.render_loop(layout, container_width, container_height)
+//   assert data == 123.456789
+// }