update docs
This commit is contained in:
+20
-20
@@ -125,10 +125,10 @@ r: reset q: quit
|
||||
|
||||
## Timer
|
||||
|
||||
A countdown timer demonstrating async commands with `tick`.
|
||||
A countdown timer demonstrating async commands with `after`.
|
||||
|
||||
**Features:**
|
||||
- Async tick command
|
||||
- Async timer command
|
||||
- State machine (running/paused/done)
|
||||
- Conditional rendering
|
||||
- Pause/resume functionality
|
||||
@@ -153,21 +153,21 @@ A countdown timer demonstrating async commands with `tick`.
|
||||
[model nil]
|
||||
(let [paused (not (:paused model))]
|
||||
[(assoc model :paused paused)
|
||||
(when-not paused (tui/tick 1000))]))
|
||||
(when-not paused (tui/after 1000 :timer-tick))]))
|
||||
|
||||
;; Reset with 'r'
|
||||
(tui/key= msg "r")
|
||||
[{:seconds initial-seconds :paused false :done false}
|
||||
(tui/tick 1000)]
|
||||
(tui/after 1000 :timer-tick)]
|
||||
|
||||
;; Handle tick
|
||||
(= msg :tick)
|
||||
;; Handle timer tick
|
||||
(= msg :timer-tick)
|
||||
(if (:paused model)
|
||||
[model nil]
|
||||
(let [new-seconds (dec (:seconds model))]
|
||||
(if (pos? new-seconds)
|
||||
[{:seconds new-seconds :paused false :done false}
|
||||
(tui/tick 1000)]
|
||||
(tui/after 1000 :timer-tick)]
|
||||
[{:seconds 0 :paused false :done true} nil])))
|
||||
|
||||
:else
|
||||
@@ -201,7 +201,7 @@ A countdown timer demonstrating async commands with `tick`.
|
||||
(tui/run {:init {:seconds initial-seconds :paused false :done false}
|
||||
:update update-fn
|
||||
:view view
|
||||
:init-cmd (tui/tick 1000)}))
|
||||
:init-cmd (tui/after 1000 :timer-tick)}))
|
||||
```
|
||||
|
||||
### Output
|
||||
@@ -242,10 +242,10 @@ space: pause/resume r: reset q: quit
|
||||
|
||||
### Key Concepts
|
||||
|
||||
1. **Tick command**: `(tui/tick 1000)` sends `:tick` after 1 second
|
||||
2. **Initial command**: `:init-cmd` starts the first tick
|
||||
1. **After command**: `(tui/after 1000 :timer-tick)` sends `:timer-tick` after 1 second
|
||||
2. **Initial command**: `:init-cmd` starts the first timer
|
||||
3. **State machine**: Track `paused` and `done` states
|
||||
4. **Conditional ticks**: Only schedule next tick when not paused
|
||||
4. **Pause control**: Only schedule next `after` when not paused
|
||||
|
||||
---
|
||||
|
||||
@@ -373,11 +373,11 @@ j/k: move space: toggle enter: confirm q: quit
|
||||
|
||||
## Spinner
|
||||
|
||||
An animated loading spinner demonstrating fast tick-based animation.
|
||||
An animated loading spinner demonstrating fast timer-based animation.
|
||||
|
||||
**Features:**
|
||||
- Multiple spinner styles
|
||||
- Fast animation (80ms ticks)
|
||||
- Fast animation (80ms intervals)
|
||||
- Tab to cycle styles
|
||||
- State machine (loading/done)
|
||||
|
||||
@@ -419,10 +419,10 @@ An animated loading spinner demonstrating fast tick-based animation.
|
||||
;; Reset with 'r'
|
||||
(tui/key= msg "r")
|
||||
[{:style-idx (:style-idx model) :frame 0 :done false}
|
||||
(tui/tick 80)]
|
||||
(tui/after 80 :spinner-frame)]
|
||||
|
||||
;; Handle tick
|
||||
(= msg :tick)
|
||||
;; Handle spinner frame
|
||||
(= msg :spinner-frame)
|
||||
(if (:done model)
|
||||
[model nil]
|
||||
(let [style-key (nth spinner-order (:style-idx model))
|
||||
@@ -430,7 +430,7 @@ An animated loading spinner demonstrating fast tick-based animation.
|
||||
interval (get-in spinners [style-key :interval])
|
||||
next-frame (mod (inc (:frame model)) (count frames))]
|
||||
[(assoc model :frame next-frame)
|
||||
(tui/tick interval)]))
|
||||
(tui/after interval :spinner-frame)]))
|
||||
|
||||
:else
|
||||
[model nil]))
|
||||
@@ -458,7 +458,7 @@ An animated loading spinner demonstrating fast tick-based animation.
|
||||
(tui/run {:init {:style-idx 0 :frame 0 :done false}
|
||||
:update update-fn
|
||||
:view view
|
||||
:init-cmd (tui/tick 80)}))
|
||||
:init-cmd (tui/after 80 :spinner-frame)}))
|
||||
```
|
||||
|
||||
### Output
|
||||
@@ -498,10 +498,10 @@ tab: change style space: complete r: restart q: quit
|
||||
|
||||
### Key Concepts
|
||||
|
||||
1. **Fast ticks**: Use short intervals (80-100ms) for smooth animation
|
||||
1. **Fast timers**: Use short intervals (80-100ms) for smooth animation
|
||||
2. **Frame-based animation**: Cycle through an array of frames
|
||||
3. **Multiple styles**: Store different spinner configurations
|
||||
4. **Stop animation**: Stop scheduling ticks when done
|
||||
4. **Stop animation**: Stop scheduling timers when done
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user