New frontend

[JeanJPNM]

Closes #165.
Closes #163.
Closes #162.

Implements the new frotend using the Svelte Kit framework, uses Codemirror for the editors, and Lezer for the grammars used for syntax highlighting.

The original pages have been temporarily moved under /legacy to facilitate the reviewing process, they may be deleted before merging this pull request. The original pages and their controllers have been removed.

Development workflow

To run the frontend, you must have nodejs 22 or greater installed.

cd webapp/frontend
# install dependencies
npm install
# run the development server
npm run dev

This will open the local development server on localhost:5173.

Then you must start the spring boot as well, since the frontend makes API calls to it.

Building

To build the frontend, run

cd webapp/frontend
npm run build

This will generate html for the pages and put them into webapp/src/main/resources/static, which should be picked up by spring boot and served.

After this you can run spring boot locally or through docker compose.

[cardillan]

I've been playing with the new frontend for a while, and it works great. There are only a few things I'd really want changed; the rest is nice-to-have stuff, on your consideration whether to spend time on it or not.

Issues

These issues need to be resolved for the next version:

• The current line in the editor is highlighted, which makes any text selection made on the current line invisible. Can we give the selection coloring a higher priority or remove the highlighting of the current line?
• The button to copy the results to the clipboard is missing (see the old implementation).
• MlogWatcher integration: this hinges on the implementation of the new interface, but I'm now finished (if you could review the methods and parameters I've created, it would be great. I've also created a release of Mlog Watcher mod in my forked repo for easier developing). I'd like to have these buttons available:
  • Mindcode compiler - two buttons on/near the results area:
    • Send mlog to the selected processor - method update_selected_processor
    • Update all processors on the map - method update_processors_on_map, version selection parameter: compatible (giving somehow access to all three ways to upgrade processors would be nice, but I don't want to overcomplicate things)
  • Mlog Decompiler - source area:
    • Load code from the selected processor - method extract_selected_processor_code
  • Schematic compiler - results area:
    • Send schematic to the library - method put_schematic_in_library (overwrite set to true)
  • Schematic decompiler - source area:
    • Load selected schematics - method extract_selected_schematic (only returns a schematic when the schematic's detail screen is displayed in a running game).
• Both the Mlog Decompiler and Schematic decompiler will be enhanced to allow running the mlog/schematic on the emulator. All four pages therefore should contain the same three buttons: "Process", "Process and run", "Clear" (or "Start with a new thing", but Clear is shorter and might be better for mobiles). I've got this implemented in the command-line client, and I can start to work on implementing it in the backend.

Change to the layout

This is basically #163 updated a bit. I'm not well-versed in UI design, so it is possible that these ideas aren't the best ones.

• A "toolbar" on the top containing
  • a logo or a title ("Mindcode" for now)
  • tool selection (Mindcode compiler, Mlog decompiler, Schemacode compiler, Schemacode decompiler - preferably in a dropdown box)
  • the buttons (compile, compile and run, clear)
  • settings
    • target selection
    • maybe more in the future (port number for MlogWatcher integration?)
  • examples (preferably in a dropdown box)
• A tabbed area containing only the source panel (left/top when reflown), the tab title corresponding to the selected tool (Mindcode source/Mlog code/Schemacode definition/Encoded schematic),
• An area for error messages under the source panel (instances of CompilerMessage). When reflown for mobiles, the error messages remain below the source area. Not shown when there aren't any compiler messages.
• A tabbed area holding the results, with these tabs:
  • Primary output (the title corresponds to the type of data it holds: Mlog code/Decompiled Mindcode/Encoded schematic/Decompiled schematic)
  • Emulator outputs (title "Emulator output", instances of EmulatorMessage)
  • Compiler/tool outputs (titled "Processing" or something like this, would contain the messages currently displayed under the results area)
  • In the future, more tabs might get added, e.g., one for each message box/logic display that was filled with data during run, or an image of the resulting schematic)
• Footer (maybe?)
  • version
  • links to the project page and documentation

These are quite radical changes to the page layout. It might not be feasible, or it might be too much work. The most important changes that I'd really like to have are:

• Putting compiler messages immediately below the source area, even on mobiles.
• Using drop-down boxes for the tool and examples selections to save screen space
• The current header - with the text specific to each tool - could be completely dropped or be made to disappear (a close box or something). The example selection could be hidden with it.

Nice to have

More or less in the order of priority:

• When clicking on an error message, switch focus to the source editor so that a cursor appears and I can start editing at the place of the error. I guess this could be good on mobiles, where scrolling might be required to get to the error message position, risking losing the location to an accidental click.
• Allow undoing (Ctrl-Z) changes to the source code caused by clicking on an example or the "Start with a new..." button (if possible).
• Could the line numbers start at 0 in the text areas that contain mlog (the results of the Mindcode compiler and the input of an mlog decompiler)?
• Clear the results editor when starting the compilation.
• Indicate that a compilation is running (some "busy" animation in the middle of the results editor).
• After selecting an example, get it automatically compiled.
• Syntax highlighting
  • Use specific syntax highlight for built-in variables (e.g. @coal) if possible.
  • Update Mindcode's mlog block syntax to reflect that literals are recognized using the same rules as in the Mindcode itself. For example, 1.5e10 is a valid literal. (Very very low priority.)

[cardillan]

@JeanJPNM Should you need the latest MlogWatcher mod for development/testing, it's available on the Actions page, e.g. https://github.com/Sharlottes/MlogWatcher/actions/runs/21562595822
I don't intend to do any further changes to the API at this point.

[cardillan]

@JeanJPNM Would it be possible to make these additional changes?

1. Move the Compiler messages item to the end of the selector list in the Output tab. The goal is for the emulator output to be displayed first if it was generated.
2. When the Compile button is used, select the Code tab in the right panel. When the Compile and run button is used, select the Output tab. Similarly for the other actions (build, decompile). Again, the goal is to display the emulator output first if it was run, otherwise display the output code.
3. Previously, we've renamed the code output tabs to just Code to save space. If possible, I'd like to use different names depending on the action:
   • Mindcode Compiler: Mlog Code
   • Mlog Decompiler: Decompiled Mindcode
   • Schematic Builder: Encoded Schematic
   • Schematics Decompiler: Decompiled Schematic
4. Add an Undo button next to the Clear button in the input tab pane header. If possible, only make the button enabled when an undo action is available. (This is minor, but I believe it would draw attention to the fact the undo history is now completely preserved. Only do this if you think it is a good idea and it's not too complicated.)
5. ETA: add a way to minimize or hide the message shown below the toolbar in the last three tools. Especially on mobile it takes a lot of space. Also, the messages in the decompilers have gray background, while the schematic builder has a white background. I'd prefer the gray one there too.

Apart from the Mlog Watcher URL, this is all I'd want to do for now.

[JeanJPNM]

Also, the messages in the decompilers have gray background, while the schematic builder has a white background. I'd prefer the gray one there too.

I don't understand, all compiler messages have the same background. Perphaps you mean the encoded input/output editors? Since all of their content is in a single wrapped line, it makes it appear as if those editors have a different background color, but it's just that they are highlighting the selected line that happens to be very large.

[cardillan]

Sorry for the confusion, I meant this box below the toolbar:

In the Mlog Decompiler and Schemacode Decompiler, its background is gray-ish.

[JeanJPNM]

I made all the changes except for the undo button, because I believe that preserving the undo history is the default behavior for most sites nowadays, so most people would quickly notice it.