jaredkrinke / sic1

Single-instruction (subleq) programming game
https://jaredkrinke.itch.io/sic-1
Other
83 stars 3 forks source link

Syntax highlighting #436

Open hsfzxjy opened 1 year ago

hsfzxjy commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 8 months ago

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