Issue 7799: Timestamps in game log

[heyshiloh]

Hello,

This PR contains an initial implementation of #7799

closes #7799

Description of change

• Creates user account setting log-timestamps, and enables saving user preference from account settings page and in-game settings tab
• Uses selected option to conditionally wrap user and system generated log messages in timestamp-wrapper or timestamp-wrapper-system
• Adjusts new and existing CSS to ensure visual quality with and without this feature

Methodology

• Per discussion, timestamp has been added to the right of username and is formatted to contain the time without AM/PM
• Conditional div structure ensures that this feature does not implement unnecessary div/span nesting
• For the sake of consistency across modules, js/Date. was used to format. Previous implementations of this library were left with comments stating that this was not preferable, but it will be easier to adjust all implementations of js/Date. to a preferred library that it would to find all instances of date string formatting

Local dev and testing environment
IDE: IntelliJ IDEA
OS: MacOS 13.2.1
Browser: Google Chrome
Lein version readout: Leiningen 2.11.2 on Java 21.0.4 OpenJDK 64-Bit Server VM

Next Steps and considerations

• We could implement a toggle on the top right of the chat box to allow users to adjust this setting quickly during a game
• Should this be off by default? What is the process through which new features are rolled out?

This is my first PR to this repository and I would be interested in joining the slack channel to continue the conversation!

Thank you for your time

Shiloh

[NBKelly]

Hi, that's a pretty good start, but I do worry it makes the log a bit harder to read.

I think we could do several things:

• Add an option for displaying them (the relevant files are src/cljs/nr/account.cljs (your settings page), src/cljs/nr/gameboard/options.cljs (the settings tab in game) and src/clj/we/auth.cljs (setting the key in the profile as something that we're allowed to send to the frontend so we can read it).
• Once there's a profile key, you can wrap the timestamp like:

(when (get-in @app-state [:options :timestamps-enabled])
  ...)

• We could put them on the same line as the text (I think that screenshot Larrea posted is pretty nice - dimmer than the text you really care about, and without adding vertical space. I think if they're in the same div that should just work.

Don't be afraid to experiment with the css a little. If you find something that you think looks nice, there's a good chance others will think the same.

Noah probably has a few more ideas or opinions.

[heyshiloh]

@NBKelly Thank you for your feedback!

What if we added the toggle as a little clock button or a clickable text option on the top right corner of the log? I think having the toggle in-game accessible would be best for its use case. Otherwise i will get it into account options and apply the feature flag as such

having the log above the text was a personal readability preference, the change to inline would be minimal and I will implement that if that is your preference!

[NBKelly]

Hi, the settings tab in the panel is accessible in game, but a little clock in the top-right corner actually sounds very nice. Pick whatever you like (or do both, you can make them use the same keys) and find something that looks nice.

Inline is my preference though for the actual display though, it's just more compact so the busier gamestates dont get harder to parse.

[heyshiloh]

timestamps inline, working on setting/toggle

[heyshiloh]

setting on/off

[NoahTheDuke]

Could you move the timestamp to the right of the username? I think that would both look better (consistent username location with it on or off) and match how other applications work (like Slack).

[heyshiloh]

shored up css added options

[heyshiloh]

@NoahTheDuke do you mean for all instances (system & user) or for the user inputted log messages?

because of the way system messages are formatted with the highlight and text replacement logic, it would require more invasive changes to adjust those

user submitted messages should be no problem for this

[NoahTheDuke]

Just the user messages.

[heyshiloh]

@NoahTheDuke thoughts?

im in a war with css about spacing but i will work that out (when i moved it, things have changed 😅)

[NoahTheDuke]

The inconsistency is a little annoying, but I'm not sure how to solve it without making each system message 2 lines (something like "[system] [timestamp]\ntest2 uses x to y!"), so it's probably fine.

[heyshiloh]

@NoahTheDuke I'll take a look at what it would take to separate out the system logs. I agree that consistency would be nice to have

[NBKelly]

I'm not sure how much of a pain it is, but I think the AM/PM part of the timestamp is essentially junk information, so that could probably be removed in formatting.

[heyshiloh]

css final-ish

[heyshiloh]

moved timestamp to the right, finalize css to ensure visual quality with and without setting

[heyshiloh]

cleaned code updated PR description ready for review