feat(tickertape): implement ticker tape model and functionality

[nick-popovic]

Ticker Tape Model in Bubble Tea

Overview

The tickertape.Model is used in a Bubble Tea application to create a scrolling ticker tape effect. Here's a summary of its usage:

Initialization

• The Model struct is initialized with text, position, and ticker width.
• The Init method starts the ticking process by returning a command that triggers periodic updates.

Updating

• The Update method handles incoming messages:
  • WindowSizeMsg updates the ticker width.
  • tickMsg updates the position of the ticker tape and schedules the next tick.
• The UpdateText method allows updating the text of the ticker tape.
• The UpdateWidth method allows updating the width of the ticker tape.

Rendering

• The View method generates the current view of the ticker tape based on the position and width.

Integration

• In the main application model, an instance of tickertape.Model is created and managed.
• The main model's Update method delegates relevant messages to the ticker tape model's Update method.
• The main model's View method includes the ticker tape's view.
• To use this model inside the parent/main model, you need to update you parent/main model's Init method. Example can be found here https://gist.github.com/nick-popovic/2f2dd4f94f5daff52b54edbbcd41164a

Example

demo:
https://github.com/user-attachments/assets/9709d089-f7dd-45be-96d3-7bb96ec0c7b7

This setup allows the ticker tape to scroll text across the screen, updating its position at regular intervals.

[caarlos0]

should probably use ansi.Truncate and ansi.TruncateLeft here 🤔

[nick-popovic]

Yeah I was building an app to manage stock portfolios on the CLI and I thought this was an interesting addition ☺️

I'll have a look at your recommendation in more detail when I'm back from work (still learning how to use this framework 😅)

[caarlos0]

cool!

to clarify, ansi is from here: https://pkg.go.dev/github.com/charmbracelet/x/ansi

[nick-popovic]

sorry, accidentally re-requested review XD - disregard

[caarlos0]

this looks fun!

[meowgorithm]

Agreed, this is a fun one. @nick-popovic do you have any example code we can use to help get a feel for this one? The URL above is returning a 404.

[nick-popovic]

@meowgorithm thanks for the catch! I edited the link in my main comment above. Here is the link to the following:
demo code: https://gist.github.com/nick-popovic/2f2dd4f94f5daff52b54edbbcd41164a
demo gif: https://github.com/user-attachments/assets/9709d089-f7dd-45be-96d3-7bb96ec0c7b7

[meowgorithm]

I'd make this private, rename it to width, and put getter and setters over it called Width and SetWidth.

[meowgorithm]

I'd also make this a getter and setter: Text, SetText.

[meowgorithm]

Per my comment about getters and setters, I'd change this function to a setter.

[meowgorithm]

Thanks for your patient with this one, @nick-popovic. I think it's generally good and just needs a few final things to keep ticking from ticking out of control. I'd look at spinner as a guide.

1. The ticker should have an ID. See here for how we auto-generate IDs on models. The ID rejects ticks from other tickers of the same type.
2. Tick messages also need a what's called tag to keep the animation throttled at the right speed in cases where too many. Here is an example of how we're rejecting messages based on ID and tag.
3. I'd add a Step value for increasing the "speed" at which the ticker moves in terms of the number of cells. By default, I'd make it 1.