fix dom syntax

base/App/Syntax.kind

@@ -18,34 +18,42 @@ App.Syntax.tick: App.Tick<App.Syntax.State>
 App.Syntax.post: App.Post<App.Syntax.State>
   App.no_post<App.Syntax.State>
 
+
+
+App.Syntax.card(name: String, hp: Int): DOM
+  <div style="border: 2px solid black; padding: 5px">
+    <p>"Herói: " | name</p>
+    <p>"HP: "| Int.show(hp)</p>
+  </div>
+
 // Render function
 App.Syntax.draw: App.Draw<App.Syntax.State>
   (state)
     let team = "azul"
-    let lista = [0,1,2,3]
-    
+    let heroes = [{"croni", +25}, {"cyclope", +30}, {"lela", +15}, {"octoking", +40}]
     <div id="asd" style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;" >
-      if String.eql(team, "azul") then
-        <p style="font-size: 2rem">"É do time azul"</p>
-      else
-        <p style="font-size: 2rem">"Não é do time azul"</p>
       
-      // if Nat.eql(1,1) then
-      //   <p style="font-size: 2rem">String.to_upper("aparece if")</p>
-      // else
-      //   <p style="font-size: 2rem">String.to_upper("")</p>
-      
-      for i in lista:
-        <p>"return"</p>
-      
-      // <div display: contents>
-      //   <p>Nat.show(i)</p>
-      //   <p>Nat.show(i)</p>
-      //   <p>Nat.show(i)</p>
-      //   <p>Nat.show(i)</p>
+      for i in heroes:
+        <p>{ App.Syntax.card(i@fst, i@snd) }</p>
+
+      // <div id="teste-else">
+      //   if String.eql(team, "azul") then
+      //     <p style="font-size: 2rem">"É do time azul"</p>
+      //   else
+      //     <p style="font-size: 2rem">"Não é do time azul"</p>
+      // </div>
+
+      // <div id="teste-if">
+      //   if Nat.eql(1,1) then
+      //     <p style="font-size: 2rem">String.to_upper("Aparece if")</p>
+      //   else
+      //     <p style="font-size: 2rem">String.to_upper("Não aparece if")</p>
+      // </div>
+      
+      // <div id="teste-for">
+      //   for i in [0,1,2,3]:
+      //     <p>"Paragrafo numero " | Nat.show(i)</p>
       // </div>
-      // for i in [0,1,2,3]:
-      //   <p>Nat.show(i)</p>
 
       // <p>"Sempre aparece"</p>
     </div>

base/Kind/Parser/dom.kind

@@ -5,29 +5,28 @@ Kind.Parser.dom.node: Parser<Kind.Term>
   Kind.Parser.block("DOM.node", Parser {
     Kind.Parser.text("<")
     
-    //name of tag
+    // name of tag
     get tag = Kind.Parser.name1
     Kind.Parser.spaces
 
-    //props and style
-    get props = Parser.many!(Parser.first_of!([
-      Kind.Parser.dom.prop
-    ]))
+    // props and style
+    get props = Parser.many!(Kind.Parser.dom.prop)
     let props = Kind.Parser.dom.gen_prop(props)
     Kind.Parser.text(">")
 
-    //children
+    // children
     get children = Parser.many!(Parser.first_of!([
       Kind.Parser.dom.for
       Kind.Parser.if
       Kind.Parser.dom.node,
-      Kind.Parser.dom.text,
+      Kind.Parser.dom.leaf,
     ]))
     let children = Kind.Parser.dom.transform_children(children)
 
-    //end of tag
+    // end of tag
     Kind.Parser.text("</"| tag |">")
-
+    
+    // creation of dom 
     let term = Kind.Term.ref("DOM.node")
     let term = Kind.Term.app(term, Kind.Term.str(tag))
     let term = Kind.Term.app(term, props@fst)
@@ -37,25 +36,27 @@ Kind.Parser.dom.node: Parser<Kind.Term>
     return term
   })
 
+// for..in of dom 
 Kind.Parser.dom.for: Parser<Kind.Term>
   Kind.Parser.block("for_dom", Parser {
+
+    // read variable
     Kind.Parser.text("for ")
     get elem = Kind.Parser.name1
-    log(elem)
+    // read list
     Kind.Parser.text("in")
     get list = Kind.Parser.term
-    // create DOM wrapper node with style display: contents
+    
+    // helpers
     let empty_list      = Kind.Term.app(Kind.Term.ref("List.nil"), Kind.Term.hol(Bits.e))
     let list_cons       = Kind.Term.app(Kind.Term.ref("List.cons"), Kind.Term.hol(Bits.e))
     let empty_map       = Kind.Term.app(Kind.Term.ref("Map.new"),  Kind.Term.hol(Bits.e))
-    let display_content = Kind.Term.app(Kind.Term.ref("Map.set"),  Kind.Term.hol(Bits.e))
-    let display_content = Kind.Term.app(display_content, Kind.Term.str("display"))
-    let display_content = Kind.Term.app(display_content, Kind.Term.str("contents"))
-    let display_content = Kind.Term.app(display_content, empty_map)
-
-
+    
+    // read return 
     Kind.Parser.text(":")
     get loop = Kind.Parser.dom
+
+    // put all elements inside one list [] 
     let term = Kind.Term.ref("List.fold")
     let term = Kind.Term.app(term, Kind.Term.hol(Bits.e))
     let term = Kind.Term.app(term, list)
@@ -63,15 +64,23 @@ Kind.Parser.dom.for: Parser<Kind.Term>
     let term = Kind.Term.app(term, empty_list)
     let lamb = Kind.Term.lam(elem, (i) Kind.Term.lam("placeholder", (b) Kind.Term.app(Kind.Term.app(list_cons, loop), b)))
     let term = Kind.Term.app(term, lamb)
+    
+    // create DOM wrapper node with style display: contents
+    // this node will contain all nodes generated by the for
+    let display_content = Kind.Term.app(Kind.Term.ref("Map.set"),  Kind.Term.hol(Bits.e))
+    let display_content = Kind.Term.app(display_content, Kind.Term.str("display"))
+    let display_content = Kind.Term.app(display_content, Kind.Term.str("contents"))
+    let display_content = Kind.Term.app(display_content, empty_map)
 
     let root = Kind.Term.ref("DOM.node")
     let root = Kind.Term.app(root, Kind.Term.str("div"))
     let root = Kind.Term.app(root, empty_map)
-    let root = Kind.Term.app(root, empty_map)
+    let root = Kind.Term.app(root, display_content)
     let root = Kind.Term.app(root, term)
     return root
   })
 
+// transform list of Kind.Term in a Kind.Term representing a list
 Kind.Parser.dom.transform_children(a: List<Kind.Term>): Kind.Term
   case a {
     nil: 
@@ -81,46 +90,70 @@ Kind.Parser.dom.transform_children(a: List<Kind.Term>): Kind.Term
       let term = Kind.Term.app(term, a.head)
       let term = Kind.Term.app(term, Kind.Parser.dom.transform_children(a.tail))
       term
-      
   }
 
-Kind.Parser.dom.text: Parser<Kind.Term>
-  Kind.Parser.block("DOM_text", Parser {
-    let term = Kind.Term.ref("DOM.text")
-    get name = Kind.Parser.term
-    let term = Kind.Term.app(term, name)
+Kind.Parser.dom.leaf: Parser<Kind.Term>
+  Kind.Parser.block("DOM_leaf", Parser {
+    Parser.first_of!([
+      Kind.Parser.dom.dynamic,
+      Kind.Parser.dom.text
+    ])
+  })
+
+
+Kind.Parser.dom.dynamic: Parser<Kind.Term>
+  Kind.Parser.block("DOM_dynamic", Parser {
+    Kind.Parser.text("{")
+    get term = Kind.Parser.term
+    Kind.Parser.text("}")
     return term
   })
 
+// parsers dom text
+// it is the leaf
+Kind.Parser.dom.text: Parser<Kind.Term>
+  Kind.Parser.block("DOM_text", Parser {
+    let term = Kind.Term.ref("DOM.text")
+    get expr = Kind.Parser.term
+    let term = Kind.Term.app(term, expr)
+    return term
+  })
+
+// parses nothing
 Kind.Parser.dom.none: Parser(DOM)
   Parser {
     Kind.Parser.text("")
     return DOM.text("")
   }
 
+// prop type
 Prop: Type
   Pair<String, Kind.Term>
 
+// parser one prop
 Kind.Parser.dom.prop: Parser<Prop>
   Parser {
-    get prop = Kind.Parser.name1
+    get prop  = Kind.Parser.name1
     Kind.Parser.text("=")
     get value = Kind.Parser.term
     Kind.Parser.spaces
     return Pair.new!!(prop, value)
   }
 
-Kind.Parser.dom.dynamic_prop: Parser<Prop>
-  Parser {
-    get prop = Kind.Parser.name1
-    Kind.Parser.text("=")
-    Kind.Parser.text("{")
-    get value = Kind.Parser.term
-    Kind.Parser.text("}")
-    Kind.Parser.spaces
-    return Pair.new!!(prop, value)
-  }
+// Kind.Parser.dom.dynamic_prop: Parser<Prop>
+//   Parser {
+//     get prop = Kind.Parser.name1
+//     Kind.Parser.text("=")
+//     Kind.Parser.text("{")
+//     get value = Kind.Parser.term
+//     Kind.Parser.text("}")
+//     Kind.Parser.spaces
+//     return Pair.new!!(prop, value)
+//   }
 
+// get list of props and parses into a pair
+// first pos of pair will be a Kind.Term of a map of props
+// second pos of pair will be a Kind.Term of a map of styles
 Kind.Parser.dom.gen_prop(values: List<Prop>): Pair<Kind.Term, Kind.Term>
   let empty_list = Kind.Term.app(Kind.Term.ref("List.nil"), Kind.Term.hol(Bits.e))
   let empty_map  = Kind.Term.app(Kind.Term.ref("Map.new") , Kind.Term.hol(Bits.e))
@@ -131,8 +164,8 @@ Kind.Parser.dom.gen_prop(values: List<Prop>): Pair<Kind.Term, Kind.Term>
   let term_prop = Kind.Term.app(term_prop, list_prop)
   {term_prop, styles}
 
+// "parser" style string to Map of styles
 Kind.Parser.dom.style(styles: String): Map<String>
-  let styles = String.remove_spaces(styles)
   let aux = String.split(styles, ";")
   let map_result = {}
   for style in aux with map_result:
@@ -140,11 +173,15 @@ Kind.Parser.dom.style(styles: String): Map<String>
     Maybe {
       get a = prop[0]
       get b = prop[1]
-      return map_result{a} <- b
+      let a = String.trim(a)
+      return map_result{a} <- String.trim(b)
     } <> map_result
   
   map_result
 
+// get list of props and parses into a pair
+// first pos of pair will be a Kind.Term of a map of props
+// second pos of pair will be a Kind.Term of a map of styles
 Kind.Parser.dom.gen_prop.go(values: List<Prop>, result: Pair<Kind.Term, Kind.Term>): Pair<Kind.Term, Kind.Term>
   case values {
     nil: result

base/Kind/Parser/term.kind

@@ -44,6 +44,7 @@ Kind.Parser.term: Parser(Kind.Term)
       Kind.Parser.switch
       Kind.Parser.goal
       Kind.Parser.hole
+      Kind.Parser.dom
       Kind.Parser.float.64
       Kind.Parser.float.32
       Kind.Parser.machine_integer.signed(256)

base/String/drop_while.kind

@@ -0,0 +1,8 @@
+String.drop_while(f: Char -> Bool, xs: String): String
+  case xs{
+    nil : String.nil
+    cons: case f(xs.head){
+      true : String.drop_while(f,xs.tail)
+      false: xs
+      }
+  }

base/String/not_empty.kind

@@ -1,5 +1,5 @@
-String.not_empty(xs: String): Type
+String.not_empty(xs: String): Bool
   case xs{
-    nil : Empty
-    cons: Unit
+    nil : false
+    cons: true
   }

base/String/trim.kind

@@ -0,0 +1,3 @@
+// only remove spaces
+String.trim(xs: String): String
+  String.join(" ", List.filter!(String.not_empty, String.split(xs, " ")))

base/Test.kind

@@ -1,13 +1,12 @@
 Test: _
   let a = 
-    <div class="container" another=String.to_upper("alo") style="display: flex;" > 
+    <div class="container" another=String.to_upper("alo") style="display: flex; justify-content: center; border: 1px solid black" > 
       <p id="ddadad asda" class="asd" >"asd"</p> 
       <div class="main">"asd ad asd"</div> 
     </div>
   
   case a {
     node:
-      a.style{"display"} <> "falhou"
+      list = Map.to_list!(a.style)
+      List.show!(Pair.show!!(String.show, String.show), list)
   } default ""
-
-List.for!([0,1,2,3])!(DOM.node("div", {}, {"display":"contents"}, []), (x, y) DOM.)