New UI

[olistic]

The proposal is to use blessed for a revamped UI. This will probably allow lots of improvements, but the main motivation for the change would be a better play log:

Requirements

• [ ] Print level header (~~~ level 4 ~~~ in the example) in the first row of the screen, fixed.
• [ ] Print warrior status (life and score) and floor map below the header, also fixed. The status and the map will be re-rendered whenever they change.
• [ ] Print play log below the fixed elements, in a scrollable section filling the rest of the screen.
• [ ] The play log automatically scrolls down when the log grows bigger than the terminal size, always following the play.
• [ ] In epic mode, between level and level, the old play is cleared and the new level takes its place. The player can always use the --level CLI option to only play one level and analyze the output.

Not for now

• Changing the dialogs before and after the playback.
• Step by step playback. I envision this being a possibility, with play, pause, step back and step forward functions, but let's leave it for a future PR.

Feedback?

[jeroenrinzema]

I have experience with blessed. If you want can I start working on this.

[olistic]

@jeroenrinzema Sure, that'd be awesome! I updated the description so you can have a better idea. Let me know if you still want to do it and I'll mark this as claimed. Thanks!

[jeroenrinzema]

I'll get started with it! Just for clarification do you want to use the current UI layout in epic mode?

[jeroenrinzema]

I have build this so far in a small prototyping env. What do you think?

[olistic]

@jeroenrinzema That's beautiful!

I wonder if it would visually separate the elements better if we print a separator row (printSeparator() function) at the end of the fixed section:

~~~~~~~~~~ level 1 ~~~~~~~~~~
♥ 20
♦ 0
╔══════╗
║@    >║
╚══════╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   <-- New separator row
<LOG STARTS HERE>

That way it doesn't seem that the floor map belongs to the first lines in the log if their turn header happens to be hidden, like in your example. What do you think?

[jeroenrinzema]

Looks good! I will implement it.

[olistic]

@jeroenrinzema

Just for clarification do you want to use the current UI layout in epic mode?

No, also the new one. Currently, epic mode prints one level after the other:

^ Finishing level 8 and starting level 9 right after it.

Now, with blessed you will create a screen that will fill the entire terminal, right? So when one level ends and the next level starts, where do you print the new level? You could:

a. Abandon the current blessed screen, leaving the contents printed in the terminal and creating a new screen for the new level, which would then result in an output similar to what we currently have (I would prefer this option, but I don't know if it's possible). b. Clear the current blessed elements (level header, status, floor map and log) and re-use them to print the new level. This is what I meant when I said "In epic mode, between level and level, the old play is cleared and the new level takes its place" in the description. c. Other options?

[jeroenrinzema]

@olistic I was thinking about option A this should automatically work since I am constructing the level layout in the Game.js@playLevel(levelNumber) method

[olistic]

@jeroenrinzema Perfect!!!

[jeroenrinzema]

I got a beta version of the new UI that is ready to be tested. I still need to write documentation and tests and clean up the code here and there.

[olistic]

@jeroenrinzema Feel free to open a PR at this point! Just put in the description that is a work in progress