update `examples` folder

.gitignore

@@ -2,6 +2,9 @@ nimcache/
 nimblecache/
 htmldocs/
 
+# ignore akane
+templates/
+
 *.exe
 *.log
 *.db

README.md

@@ -39,7 +39,7 @@ The Nim GUI/2D framework based on OpenGL and SDL2.
 ## Features
 - Godot-like node system.
 - Runtime scene loader.
-- Build nodes with YML-like syntax.
+- Powerful node build system using YML-like syntax.
 - Stylesheets (CSS-like).
 - Android-like drawables.
 - Customizable GUI themes.
@@ -53,10 +53,11 @@ The Nim GUI/2D framework based on OpenGL and SDL2.
   build:
     - Scene scene:
       - Label hello:
-        call setSizeAnchor(1, 1)
-        call setTextAlign(0.5, 0.5, 0.5, 0.5)
-        call setText("Hello, world!")
-        call setBackgroundColor(Color(31, 45, 62))
+        call:
+          setSizeAnchor(1, 1)
+          setTextAlign(0.5, 0.5, 0.5, 0.5)
+          setText("Hello, world!")
+          setBackgroundColor(Color(31, 45, 62))
 
   addMainScene(scene)
   windowLaunch()

examples/hello_world/main.nim

@@ -4,13 +4,13 @@ Window("Hello, world!")
 
 
 build:
-  - Scene scene:
-    name: "Main"
+  - Scene main_scene:
     - Label hello:
-      call setSizeAnchor(1, 1)
-      call setTextAlign(0.5, 0.5, 0.5, 0.5)
-      call setText("Hello, world!")
-      call setBackgroundColor(Color(31, 45, 62))
+      call:
+        setSizeAnchor(1, 1)
+        setTextAlign(0.5, 0.5, 0.5, 0.5)
+        setText("Hello, world!")
+        setBackgroundColor(Color(31, 45, 62))
 
-addMainScene(scene)
+addMainScene(main_scene)
 windowLaunch()

examples/novel/main.nim

@@ -17,37 +17,43 @@ var
 
 build:
   - Scene main:
-    call rename("Main")
     - Button button:
-      call setText("New game")
-      call resize(128, 32)
-      call setAnchor(0.5, 0.5, 0.5, 0.5)
+      call:
+        setText("New game")
+        resize(128, 32)
+        setAnchor(0.5, 0.5, 0.5, 0.5)
+      @onTouch(x, y):
+        changeScene("game_scene")
+
   - Scene game_scene:
-    call rename("Game")
     - TextureRect background_image:
-      call setSizeAnchor(1, 1)
-      call setTexture(night)
-      call setTextureAnchor(0.5, 0.5, 0.5, 0.5)
       texture_mode: TEXTURE_KEEP_ASPECT_RATIO
+      call:
+        setSizeAnchor(1, 1)
+        setTexture(night)
+        setTextureAnchor(0.5, 0.5, 0.5, 0.5)
     - TextureRect charapter:
-      call setSizeAnchor(1, 1)
-      call setTexture(akiko_default)
-      call setTextureAnchor(0.5, 0.5, 0.5, 0.5)
       texture_mode: TEXTURE_KEEP_ASPECT_RATIO
       visibility: GONE
+      call:
+        setSizeAnchor(1, 1)
+        setTexture(akiko_default)
+        setTextureAnchor(0.5, 0.5, 0.5, 0.5)
     - Label dialog_text:
-      call setSizeAnchor(0.8, 0.3)
-      call setAnchor(0.1, 0.6, 0, 0)
-      call setBackgroundColor(Color(0x0e131760))
-      call setPadding(8, 8, 8, 8)
+      call:
+        setSizeAnchor(0.8, 0.3)
+        setAnchor(0.1, 0.6, 0, 0)
+        setBackgroundColor(Color(0x0e131760))
+        setPadding(8, 8, 8, 8)
       - Label name_charapter:
-        call resize(128, 32)
-        call setAnchor(0, 0, 0, 1)
-        call setBackgroundColor(Color(0x0e131760'u32))
-        call setStyle(style({
-          border-radius: "8 8 0 0"
-        }))
-        call setTextAlign(0.1, 0.5, 0.1, 0.5)
+        call:
+          resize(128, 32)
+          setAnchor(0, 0, 0, 1)
+          setBackgroundColor(Color(0x0e131760'u32))
+          setStyle(style({
+            border-radius: "8 8 0 0"
+          }))
+          setTextAlign(0.1, 0.5, 0.1, 0.5)
     - ColorRect foreground_rect:
       call setSizeAnchor(1, 1)
       color: Color(0x0e1317ff)
@@ -55,12 +61,11 @@ build:
       loop: false
       call addState(foreground_rect.color.a.addr,
                     @[(tick: 0, value: 1.0), (tick: 100, value: 0.0)])
+      @onReady():
+        animation.play()
 
 
-foreground_rect@on_ready(self):
-  animation.play()
-
-foreground_rect@on_input(self, event):
+foreground_rect@onInput(self, event):
   if event.isInputEventMouseButton() and not event.pressed:
     if stage < dialog.len():
       name_charapter.setText(dialog[stage][0])
@@ -69,11 +74,6 @@ foreground_rect@on_input(self, event):
     inc stage
 
 
-
-button.on_touch =
-  proc(self: ButtonRef, x, y: float) =
-    changeScene("Game")
-
 addMainScene(main)
 addScene(game_scene)
 windowLaunch()

examples/sample_messenger/scenes/chat.nim

@@ -15,24 +15,22 @@ gradient.setCornerColors(Color("#C9D6FF"), Color("#C9D6FF"), Color("#E2E2E2"), C
 
 build:
   - Scene (chat_scene):
-    call rename("Chat")
     - Control background:
-      call rename("background")
       call setBackground(gradient)
       call setSizeAnchor(1, 1)
 
       - Label chat:
-        call rename("chat")
         call setSizeAnchor(1, 1)
 
       - EditText message:
-        call setSizeAnchor(0.95, 0.15)
-        call setAnchor(0.5, 1, 0.5, 1.2)
-        call setStyle(style({
-          border-radius: 8,
-          border-detail: 8,
-          background-color: rgba(50, 60, 70, 0.5)
-          }))
+        call:
+          setSizeAnchor(0.95, 0.15)
+          setAnchor(0.5, 1, 0.5, 1.2)
+          setStyle(style({
+              border-radius: 8,
+              border-detail: 8,
+              background-color: rgba(50, 60, 70, 0.5)
+            }))
 
 
 proc listenChat(arg: tuple[scene: ptr SceneRef, username: ptr string, timed_chat: ptr seq[JsonNode]]) {.thread.} =
@@ -40,16 +38,16 @@ proc listenChat(arg: tuple[scene: ptr SceneRef, username: ptr string, timed_chat
   while true:
     var
       response = waitFor client.get("http://127.0.0.1:5000/getchat")
-      text = stext""
+      text = ""
     arg.timed_chat[] = parseJson(waitFor response.body())["data"].getElems
 
     var i = 0
     while i < arg.timed_chat[].len:
-      text &= (stext arg.timed_chat[][i].str & stext": " & stext arg.timed_chat[][i+1].str & stext("\n\n"))
+      text &= (arg.timed_chat[][i].str & ": " & arg.timed_chat[][i+1].str & "\n\n")
       inc i, 2
-    text.setColor(Color("#123"))
     
-    arg.scene[].getNode("background/chat").LabelRef.text = text
+    # TODO: Fix it
+    # arg.scene[].getNode("background/chat").LabelRef.setText(text)
 
     waitFor sleepAsync(100)
 

examples/sample_messenger/scenes/enter.nim

@@ -12,7 +12,6 @@ gradient.setCornerColors(Color("#cac"), Color("#cac"), Color("#acc"), Color("#ac
 
 build:
   - Scene (enter_scene):
-    call rename("Enter")
   
     - Control background:
       call setSizeAnchor(1, 1)
@@ -20,27 +19,29 @@ build:
   
       - VBox input:
         separator: 8
-        call setAnchor(0.5, 0.5, 0.5, 0.5)
-        call setChildAnchor(0.5, 0.5, 0.5, 0.5)
-        call resize(256, 256+64)
-        call setStyle(style({
-          border-radius: 8,
-          border-detail: 8,
-          background-color: rgba(100, 111, 122, 0.4)
-          }))
+        call:
+          setAnchor(0.5, 0.5, 0.5, 0.5)
+          setChildAnchor(0.5, 0.5, 0.5, 0.5)
+          resize(256, 256+64)
+          setStyle(style({
+              border-radius: 8,
+              border-detail: 8,
+              background-color: rgba(100, 111, 122, 0.4)
+            }))
   
         - EditText login:
           caret: false
-          call setTextAlign(0.5, 0.5, 0.5, 0.5)
-          call setHint("Username")
-          call setHintColor(Color("#ebebeb"))
-          call setTextColor(Color("#fff"))
-          call setStyle(style({
-            border-radius: 8,
-            border-detail: 8,
-            border-color: rgba(100, 111, 122, 0.4),
-            border-width: 1
-            }))
+          call:
+            setTextAlign(0.5, 0.5, 0.5, 0.5)
+            setHint("Username")
+            setHintColor(Color("#ebebeb"))
+            setTextColor(Color("#fff"))
+            setStyle(style({
+                border-radius: 8,
+                border-detail: 8,
+                border-color: rgba(100, 111, 122, 0.4),
+                border-width: 1
+              }))
         - Button send:
           call setText("ENTER")
 
@@ -70,4 +71,4 @@ send@onClick(self, x, y):
   if username.len > 0:
     var response = waitFor enter()
     if response:
-      changeScene("Chat")
+      changeScene("chat_scene")

examples/snake/main.nim

@@ -16,14 +16,14 @@ type
 
 build:
   - Scene main:
-    call rename("Main")
     - Canvas canvas
+
   - Scene game_over:
-    call rename("GameOverScene")
     - Label label_go:
-      text: stext"Game Over"
-      call setTextAlign(0.5, 0.5, 0.5, 0.5)
-      call setSizeAnchor(1, 1)
+      call:
+        setText("Game Over")
+        setTextAlign(0.5, 0.5, 0.5, 0.5)
+        setSizeAnchor(1, 1)
 
 var
   snake = Snake(
@@ -104,7 +104,7 @@ canvas@on_process(self):
     snake.food.x = (rand(grid_size.x.int-1) * snake.size.x.int).float
     snake.food.y = (rand(grid_size.y.int-1) * snake.size.y.int).float
   elif snake.body[0] in snake.body[1..^1]:
-    changeScene("GameOverScene")
+    changeScene("game_over")
   # draw
   for i in snake.body:
     canvas.fillRect(i.x, i.y, snake.size.x, snake.size.y, Color(1f, 1f, 1f))