Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting #436

Open
hsfzxjy opened this issue Aug 1, 2023 · 7 comments
Open

Syntax highlighting #436

hsfzxjy opened this issue Aug 1, 2023 · 7 comments
Milestone

Comments

@hsfzxjy
Copy link

hsfzxjy commented Aug 1, 2023

My eyes hurt every time reading the monochromic list of code. Do you think it's a good idea to add syntax highlighting to the editor? If so, I would file a PR for this.

@jaredkrinke
Copy link
Owner

I considered something similar in #238 (switching from a vanilla <textarea> to Monaco), but decided against implementing it because it seemed like a lot of work for a game that's only played by a few people per day.

Did you have some simpler approach in mind? I'm not an expert, but I thought adding any sort of highlighting would require completely replacing the textarea with something else (and that is tricky to do well, especially across different operating systems).

@hsfzxjy
Copy link
Author

hsfzxjy commented Aug 2, 2023

I think it's possible to make a highlighted editable textarea using some technique like in https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ .

As for parsing the SIC-1 code, since SIC-1 is line-based, parsing the inserted/deleted code onchange incrementally might be a feasible and efficient approach.

I will try to work on this recently when available.

@jaredkrinke
Copy link
Owner

Hmmm... that demo doesn't work well in Firefox (new lines seem to confuse it), but I haven't looked into why. I guess I'm kind of skeptical that approach would work out well, but I haven't investigated it in depth.

@hsfzxjy
Copy link
Author

hsfzxjy commented Aug 2, 2023

Looks like it's due to white-space: nowrap. The demo is crude and definitely needs refinement, but the core idea is almost there.

@jaredkrinke
Copy link
Owner

Ok, finally found a moment to answer your original question: would I accept a PR for this? There are a couple of concerns:

  1. I haven't decided on a license for this game yet--I'm unsure if I want to use an OSI-approved license. This is something I need to sort out--and arguably should have sorted out a while ago!
  2. I'm wary of complicating text input because any bugs (e.g. the newline bug mentioned earlier in Firefox) could render the game unplayable
    1. My original thought was to use a well-tested library like Monaco because I have faith that it's tested on many browsers and operating systems (and can even handle operating system-specific key bindings)
  3. I'm actually not sure what kind of styling would make sense, given that the base game only uses 3 colors: black, green, lime. At least the font is monospace, so bold text might work

The first one is something I need to think about. The second one worries me, but doesn't seem insurmountable (although I'm not sure how to test on Safari since I don't own any macOS devices). The last one seems tractable.

Side note: I noticed a small issue with that demo in Chrome: if the text is long enough to require a scrollbar, then hitting the home/end keys doesn't scroll far enough to reveal the caret--I originally thought the caret had disappeared.

@hsfzxjy
Copy link
Author

hsfzxjy commented Aug 2, 2023

Alright, I think these concerns are reasonable.

By the way, what about making syntax highlighting an opt-in feature? We can use the original textarea by default, and provide an option to turn on syntax highlighting. In this way, most users won't be affected by the potential defects of the new editor, and those who want syntax highlighting can enjoy the new feature whilst take the risk of facing bugs/imperfect styles.

The syntax highlighed editor may still be implemented using vanilla Javascript to keep light-weight and simple, and we can gradually improve it by addressing reported issues.

@jaredkrinke jaredkrinke modified the milestone: Update 8 Aug 10, 2023
@jaredkrinke jaredkrinke added this to the Wishlist milestone Dec 30, 2023
@jaredkrinke
Copy link
Owner

With respect to concern 1 in my previous comment:

I haven't decided on a license for this game yet--I'm unsure if I want to use an OSI-approved license. This is something I need to sort out--and arguably should have sorted out a while ago!

I haven't actually updated the license yet, but I've decided (for sure) on open-sourcing the code: #458

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants