Well, making the TUI has gone quite well.

While I initially thought that Vue seemed weird for doing TUIs, it’s actually not that bad. No wonder Ink is so popular. (Though I’m liking Vue more than I like React, and Ink felt kinda clunky at times when I first tried it)

If you want to do TUIs with TypeScript/JavaScript, I’d recommend you give Vue TermUI a try. It also supports the Vue Router, so it’s easy to make a lot of pages and then navigate through them.

The data show in the video is just mock data. So it still doesn’t use the actual API, though progress have gone quite well without many hiccups.

The send friend request button, and the accept/reject challenge buttons do use the actual API, but they just throw an error because it tries to accept/reject a challenge that doesn’t actually exist, as it’s just mock data.

The app doesn’t crash on error though, it displays the error message right below the button, that way the user can see what went wrong without having the whole app crash or any other unexpected behavior.

What remains now is making some bots, that way I can make the whole “Playing a game” page, as having mock data for the WHOLE game state is not very… easy? I mean, I’ll have to do some bots anyway, so why not do them now instead of creating some weird mock functions hahah

I also think that the icons on the authorization page feel weird. I dont know if maybe they are too big or if I should just change them to other ones. I also have to change the card after approval or denial instead of just showing the toast at the bottom, as it doesnt give feedback to the user

Below is a small video of the TUI in action: (Disclaimer: Some AI was used, primarily to create the mock data so I could focus on the TUI itself)