AndreyMrovol / LethalTerminalFormatter

Other
2 stars 0 forks source link

[Enhancement] Improved terminal layout concepts #13

Closed zndrmn closed 3 months ago

zndrmn commented 5 months ago

I really think that Terminal Formatter makes things look a lot more baren compared to the vanilla terminal. It also removes some information that can be pretty useful for new players.

So here's my pitch, reworked pages to be more in-line with the vanilla terminal, and added back some of the page information that got removed. I love the idea of this mod, and I think that this little concept thingy will be the perfect terminal layout/looks overhaul. I will link the concept pages as gists so that this report doesn't get flooded hehe.

I don't know how long lines can be within the terminal so some things might not fit. If you know how long lines can be, could you tell me so that I can adjust things if needed?

Differences from the top of the concept page, to the bottom. Company store:

  1. Removed the two extra spaces to the left of the header. (I think you have it so that it aligns to the right instead of the left)
  2. Readded store page info which is placed after the Company store header. (yes I know this is also where the filter settings text goes)
  3. Changed column names from: Name, Price, # On ship. to Product Name, Discount, Price, Storage. (discount was missing before)
  4. Added/reverted [ITEMS] to COMPANY ITEMS: to match the vanilla terminal. Also added a divider that should have an option to disable it for a more compact look. I also did the same thing to the other categories. (divider option Company store Concept ALT1)
  5. Readded the * NAME thing at the start of item names. Before it was just NAME without the *
  6. Added an extra 0 for single-digit numbers, and added the text Owned after the number (before/after: 1, 01 Owned.)
  7. Reverted the discount text to be the same as the vanilla terminal, plus with a compact version. (before/after/compact: -20%, (-20% OFF!), (-20%)) (compact option Company store Concept ALT2)
  8. Readded the ship decorations information
  9. Added an extra line of padding after the decorations category
  10. Changed the number of -'s at the very very bottom from 20 to 17 to match the decorations divider length above

Company store Concept Company store Concept ALT1 (removed dividers config option) Company store Concept ALT2 (compact discount config option) Company store TerminalFormatter Company store Vanilla

Differences from top to bottom, Moons catalog:

  1. Renamed Moon catalog header from MOONS CATALOGUE to EXOMOONS CATALOGUE.
  2. Readded moon page info which is placed after the Moons catalog header. (yes I know this is also where the Filter settings text goes)
  3. Added column names to match the store page. Exomoon Name, Price, Weather.
  4. For some reason the company building name and buying price weren't listed so I readded that.
  5. Readded the * MOON thing at the start of item names. Before it was just MOON without the *.
  6. Added () around the weather type to match the vanilla terminal.
  7. Added a potential option to add the moon's numbers to the front of the moon's name. (moon number option Moons catalogue Concept ALT1)
  8. Removed extra line at the bottom of the page
  9. Changed the number of -'s at the very very bottom from 20 to 17 to match the store page

Moons catalogue Concept Moons catalogue Concept ALT1 (config to enable moon numbers infront) Moons catalogue Concept ALT2 I don't think the flipped version looks that good. Moons catalogue Concept ALT3 I don't think the flipped version looks that good. (config to enable moon numbers infront) Moons catalogue TerminalFormatter Moons catalogue Vanilla

That should be everything that's different from the current version of TerminalFormmatter. I really think this will improve the mod a TON. I felt like it kinda took away from the vanilla terminal (looks/aesthetics wise at least) I hope that most of these changes can get implemented because it’ll make this mod a genuine upgrade over the vanilla terminal. (imo ofc)

Oh and about the filters kinda getting replaced. I think there should be an option for replacing the filter text for the page information. Also for some reason I didn't see the filters text in my game, which might be a bug.

AndreyMrovol commented 5 months ago

Hey, thank you for your suggestions! I'll try to respond with my design reasonings to your points:

I don't know how long lines can be within the terminal so I some things might not fit. If you know how long lines can be could you tell me so I can adjust things if needed.

IIRC the terminal is 50/51/52 characters wide, but to make sure nothing i display gets split between lines i've set all my commands to have 48 characters as an upper limit.

Also for some reason I didn't see the filters text in my game, which might be a bug.

This is a LethalLevelLoader feature, although i'm displaying its info in the header rather than at the bottom.

Design decisions

When creating the mod I wanted to display all the relevant info that you normally get from the terminal, but in a much more organized and minimalistic way: no * at every line, no () when displaying weathers - every symbol used had to have a reason to be there. My original plan was to recreate the AdvancedCompany portable store design, which i though was great at using the available space, displaying all needed informations and being easy-to-use.

That's the general overwiew why the vanilla decorations are missing (and why i'm hesitant to include it again). I completely agree that there is lots of info missing for a new player, and I'll try to adjust my design accordingly (i'll come back to that)

Also: I'm using a library called ConsoleTables, which allows me to format all things in a nicely, auto-adjusting way, but on the flipside it's not working well when there's multiple columns.

Company store

For the store I wanted to include the (in my opinion) missing and vital information: how much of a given item is already on the ship (mostly to prevent people overspending on things they already have).

Now in reference to your points:

  1. as said earlier: This is a "replacement" for the decorations that were previously there (*), and I'm using indentation to distinguish store items from the table's header
  2. (same as moons): This is where the "additional info" would normally go, so I'll think of a way to incorporate that (because I agree that the info for new player would be nice to have, but I'll try to find a place for it)
  3. Sure, I can change them (although I'm not sure I agree with your category names - I'll think about that one); the Discount column will not make it in because of the library I'm using: if i create a column Discount it's gonna create a column wide enough to contain every item in that column - in the case of Discount it's 10 characters wide (space+8+space), so it would take that space from every row in the store (not ideal); the way i'm doing it currently is to display the discount right-aligned in the Name column and to truncate the names that are too long to fit in that case.
  4. I think that both Company Store and Company Items are valid for that page, so I'm not planning on changing that
  5. as point 1
  6. This is a nice change, I'll definitely consider it
  7. I can change the discount to be in brackets (either (-20%) or [-20%])
  8. as point 2
  9. and 10. I've done that changes with a quick vibecheck, I can adjust them to match the rest of the page

From your suggested designs I think I like the ALT2 the most - it's the most "in spirit" with my initial design decisions.

Moons catalogue

The moons catalogue is an absolute disaster in a vanilla terminal and a great reason why I wanted to make this mod in a first place. I took an inspiration from ShowMoonPriceLLL, which - by simply addeing a price display to the LLL's catalogue - made it far more readable and nicer to use. I wanted to make all relevant information visible at first glance: the moon name, price and weather all aligned with each other.

Now in reference to your points:

  1. I don't see a point of setting the name to Exomoons Catalogue when the current one is clear enough, I don't think this needs changing
  2. same as the store: I'll think of a way to incorporate that
  3. Sure, I can add column names, but i'm not considering changing the order - the reason is: weather names can get very long with such mods as WeatherTweaks - when the current weather would be Eclipsed/Flooded all prices would be shifted to the right, making it more unreadable.
  4. Did i really forget about it? This will be readded
  5. and 6. same as before: no plans to add decorations
  6. I can add a toggle for that
  7. and 9. I will change that to match other pages' layout

From all your suggested layouts the Concept1 is the closest to the one I'd consider implementing.

Thanks a lot for your suggestions, I think that they will really improve this mod πŸ˜„

zndrmn commented 5 months ago

I'm so glad you're actually considering a lot of my ideas! I wasn't too sure if you would've considered anything just because of the amount of ideas I threw out there haha.

Alright so, I reduced all of the text to fit within the 48-character limit you've set. The information is kinda vague because of how little room there is, but I still think this will be decent enough for new players to get the hang of things.

I've also come up with another idea. Maybe instead of there just being one base design philosophy/layout, there could be two. One of them being the minimalistic design. (the default one) And the other being the decorated design.

Here's a quick list of the things I changed:

  1. Reduced the text to fit within the 48-character limit, renamed EXOMOONS CATALOGUE to MOONS CATALOG
    
    62-characters long                                           64-characters long
    ╔═══════════════╗   Welcome to the Company store.            ╔════════════════════╗   Welcome to the exomoons catalogue.  
    β•‘ COMPANY STORE β•‘   Use words BUY and INFO on any item.      β•‘ EXOMOONS CATALOGUE β•‘   Use ROUTE to set the autopilot route.  
    β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•   Order tools in bulk by typing a number.  β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•   Use INFO to learn about any moon.  

48-characters long 48-characters long ╔═══════════════╗ Welcome to the store: ╔═══════════════╗ Welcome to the catalog:
β•‘ COMPANY STORE β•‘ Use BUY and INFO on items. β•‘ MOONS CATALOG β•‘ Use ROUTE for ship routing.
β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• Use ≀10 to BUY in bulk. β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• Use INFO for moon data.


2. Reduced the name column length by 2 characters for the store page in order to fit the `Owned` text
3. Minimal design that'll be the default design; removed all `*`, `()`, `---` (dividers), and `Owned` text
It would be nice if there could be options to remove each decoration type. So options for `*`, `()`, `---`, and `Owned` text
4. Potential option for the decorated design.
5. Potential option to remove the page information

[**CompanyStore Concept-decorated**](https://gist.github.com/zndrmn/d6c3bb3259b9bbe3f08583fa034a6764)
[**CompanyStore Concept-minimal**](https://gist.github.com/zndrmn/cc274df505789e0353b0492ad2e26206) (default option)
[**MoonPage Concept-decorated**](https://gist.github.com/zndrmn/27ade75faed16970eec9ec577c8ff334)
[**MoonPage Concept-decorated ALT1**](https://gist.github.com/zndrmn/3beb1657413b7fa6adcaabb2c0c7ee22) (moon numbers)
[**MoonPage Concept-minimal**](https://gist.github.com/zndrmn/dddb9ffbf0de0de150c1d77362b5c95b) (default option)
[**MoonPage Concept-minimal ALT1**](https://gist.github.com/zndrmn/498ba893ed46f05936380c2cba1fad9a) (moon numbers)

To address your points: (**Company store**)

3. Would it be possible to make a fake column where it just displays the name of that column despite it not existing?
4. I don't know if I'm interpreting this right or not, but the reason why I changed the name/formatting of the categories to what they are now is because 1. `COMPANY ITEMS:` and `SHIP UPGRADES:` are the same length, which makes things look nicer imo,
and 2. I believe that `COMPANY ITEMS:` is easier to read (at a glance), and looks nicer compared to `[COMPANY ITEMS]` imo. It also matches how the vanilla terminal looks too.
(_At first I interpreted 4. as you not agreeing with what I did, but after thinking about it, I'm pretty sure you agreed with what I did. I'll still leave my explanation_)
AndreyMrovol commented 3 months ago

Hey, sorry for the delay. My "vision" for this feature would be a config-toggleable option to display additional text inside the nodes, something looking like this: image

Because LLL's Moons, Scan (and in the future Store) uses the negative space next to the header, I'm not sure if that's a good spot to put the text (although i'm open to suggestions!)

I'll try to incorporate all your suggestions in the following days and I'll keep you posted on the proposed changes for your feedback πŸ˜…

Once again - sorry for the delay; life got a little busy πŸ˜…

zndrmn commented 3 months ago

It's all good! I get that modding is just a hobby, and that sometimes things might hang for a while. Looks great so far! (also I've seen the PR; I'll be checking on it here and there)

Because LLL's Moons, Scan (and in the future Store) uses the negative space next to the header, I'm not sure if that's a good spot to put the text (although i'm open to suggestions!)

What does this mean exactly? I haven't used LLL before so ye. Does it just mean that this (line 7) won't be a good spot?

AndreyMrovol commented 3 months ago

What does this mean exactly? I haven't used LLL before so ye. Does it just mean that this (line 7) won't be a good spot?

I've played with it a little, and that's how the Store looks currently: image

My issues with that layout:

  1. I'm not very fond of how that help text looks (it's aligned to the left without a padding), but that can be fixed.

  2. That big negative space: image In my opinion it's making things harder to decipher because of the additional line with --- decorative separator

  3. The decorations are aligned with the text, instead of the screen, pushing text to the right: image

I'll try to find a way to adress them, but (because of the library i'm using) it might be impossible to pull off without rewriting everything.

zndrmn commented 3 months ago

Everything looks pretty good so far!

Is having a more compact help text next to the screen name possible? I wonder how it would look. (like in these concepts CompanyStore Concept-decorated)

Also how would the --- divider look when it's lined up with [ITEMS]? I don't know if it's possible to make different lengthed dividers with the library you are using.

[ITEMS]
-----------------
[ITEMS]
-------
AndreyMrovol commented 3 months ago

Is having a more compact help text next to the screen name possible? I wonder how it would look. (like in these concepts CompanyStore Concept-decorated)

I'll play with those tomorrow and let you know - from my previous text i've got that result: image

Which, well - you can only fit so much text in there that it becomes too short to write anything meaningful (and in case of LLL's moons catalogue something would have to be moved - either this text or preview/sort/filter option info)

Also how would the --- divider look when it's lined up with [ITEMS]? I don't know if it's possible to make different lengthed dividers with the library you are using.

It's possible, I'll check them tomorrow πŸ˜„

AndreyMrovol commented 3 months ago

I'm thinking of shortening that text even more to the point of being super concise, something like:

Use BUY and INFO on any item, use a number to order in bulk

zndrmn commented 3 months ago

Which, well - you can only fit so much text in there that it becomes too short to write anything meaningful (and in case of LLL's moons catalogue something would have to be moved - either this text or preview/sort/filter option info)

Honestly I was just thinking that if LLL is installed, it would just replace the help text entirely, but it's probably a better idea to figure out a good way to make the two work well haha.

Maybe when LLL is installed the help text can get moved below the header with the help text being Use BUY and INFO on any item, use a number to order in bulk

I really like how the help text looks next to the header a lot

AndreyMrovol commented 3 months ago

image

That's my first draft: similarly to Store, decorations are aligned inside the table and text is aligned to the screen edge.

  1. I don't think that the table header (Name,Price,Weather) is really necessary (although i might display it just in the "decorated mode")
  2. everything is misaligned, but that's because of me πŸ˜…
AndreyMrovol commented 3 months ago

Honestly I was just thinking that if LLL is installed, it would just replace the help text entirely, but it's probably a better idea to figure out a good way to make the two work well haha.

I really don't want to have conflicting expectations in my mod - if the text can be in a different place on every page, this creates confusion and unnecessary overload on the user (they have to search for that item in a different place everywhere). By having the same category of elements in the same place on every page user can intuitively find what they're looking for (since they know where to look for)

I really like how the help text looks next to the header a lot

πŸ₯Ί

zndrmn commented 3 months ago

I really don't want to have conflicting expectations in my mod - if the text can be in a different place on every page, this creates confusion and unnecessary overload on the user (they have to search for that item in a different place everywhere). By having the same category of elements in the same place on every page user can intuitively find what they're looking for (since they know where to look for)

Yeahhh makes sense πŸ‘

  1. I don't think that the table header (Name,Price,Weather) is really necessary (although i might display it just in the "decorated mode")

Yeah I think it would be best for it to only be in the decorated mode. Tho it might just be better to not have it at all; not sure how that would look.

The only thing I would maybe add/change on the store screen so far would be to add a gap between Name Price Weather, and the moon names.

Name                   Price  Weather
* 41 Experimentation   $0  
Name                   Price  Weather

* 41 Experimentation   $0  
AndreyMrovol commented 3 months ago

image

I've added the space between table header and aligned the help text on top, I think it looks quite nice πŸ˜„