Placeholder Feature: Use temporary codejar text code editor to handle initScripts and round scripts - [merged]

[benloh]

Merges dev-bl/next-gui-codeeditor -> dev-next-gui-integration

Background

The Script Wizard GUI requires a lot of context to "intelligently" guide students as they enter gemscript commands. In an ideal world, Character initScripts and Round initScript and endScripts would also use a full Script Wizard GUI to guide students.

However, building out that interface will be very time consuming, primarily because of

a) constructing the context for Character initScripts and Round scripts is not straightforward. Unlike Character scripts that are naturally contextualized by their parent blueprints, Character initScripts and Round scripts require a different level of scoping.

b) the Script Wizard GUI has a very big screen footprint, and it would be difficult to completely redo the interface to accommodate the large footprint in the time we have remaining.

The existing initScript editors are fairly limited: you can only add and edit certain properties with the UI, and more sophisticated gemscript calls are not supported at all by the UI. Moreover, with some significant infrastructure changes to the way keywords are implemented, the old UI elements are no longer tenable without a significant amount of rewrite. We really needed a solution that could supporting editing the full scripts in the UI.

Given the limited time we have remaining, we felt that we needed to develop a compromise placeholder solution.

Placeholder Solution

We anticipate that most users would set Character initScripts simply by adding a new character and dragging them into place. Any kind of actual initScript editing is rare, and primarily used in specialized blueprints, and therefore not commonly done by most novice students.

Similarly, we expect that most Round script editing would be done by experts. Novices may tweak a value here or there, but the heavy lifting is handled by experts.

Given that these scripts will primarily be edited by experts, we thought a simple text code editor would provide the most flexibility for both displaying the existing text, and enabling editing of any and all gemscript code.

This merge request introduces a revamped code editor in:

I. Script Wizard UI II. Character (Instance) initScript III. Round initScript and endScript

To Test

1. git fetch && git checkout dev-bl/next-gui-codeeditor
2. npm run build && npm run gem
3. Go to http://localhost/app/login
4. Select a project with Rounds defined. Most of the Moths projects should rounds defined, e.g. http://localhost/app/main?project=Moths-Activity-Migration

NOTE: Due to some project file changes with in the dev-next-* branches, some older projects may not open properly.

I. Script Wizard UI

The "Dev Wizard" UI prototype that used to run in a separate "GUI Wizard" application page has now been folded into the old ScriptEditor. The ScriptEditor default view is now the wizard view.

In addition, the Code view of the ScriptEditor has now been revamped to work seamlessly with the Wizard view. You can add gemscript to the Wizard view, click to the "Code" view to see the full gemscript, edit the script by hand, and then switch seamlessly back into the "Wizard" view to view your text changes.

1. Go to Main
2. Click on a character in the "CHARACTER TYPE SCRIPTS" area, e.g. "Moth"\
3. A new Script Editor window should open with the wizard UI.
4. You should be able to edit most common keywords by clicking and selecting options. (The Pragma # keywords do not work)
5. Make a few changes.
6. Click on the "CODE" tab.
7. You should see your code changes reflected in the script text.
8. Make some changes to the script text.
9. Click on the "WIZARD" tab.
10. You should see your text changes reflected in the updated Wizard.

II. Character (Instance) initScript

The old Character (Instance) Editor now supports the use of a code editor to define and update the character initScripts.

1. Go to Main
2. Click on "SETUP"
3. Click on a predefined instance in the "CHARACTERS" panel (lower left)
4. The instance editor should open up and you should see the character's initScript
5. Click "Edit" to edit the script
6. Click in the script to insert the cursor.
7. Change some text
8. Click "Cancel" -- the script should revert to the original script.
9. Click "Edit" again and change some more text.
10. Click "Save" -- the script should save and the editor close, the instance should instantly update (e.g. if you changed the x value, the instance should redraw at the new x value location)
11. Edit the text again, and this time before clicking "Save" click elsewhere on the screen to defocus the Instance Editor -- you should see a warning about unsaved changes. Clicking Cancel will revert to the original text, clicking "Save Changes" will save changes and immediately close the window.

III. Round initScript and endScript

The Rounds editors now uses the same text editor for viewing and updating the initScript and endScripts for rounds.

1. Go to Main
2. Click on "SETUP"
3. Click "Edit" on one of the round script initScript or endScripts
4. Edit the text.
5. Click "Save" to save the changes.

The next simulation run should make use of the text changes.

The code editor may be difficult to work with for longer texts. You're probably better off copying and pasting the script into another editor.

Future

If there is time remaining, and if the research team decides that this is a high priority, we can revisit the possibility of hacking in some kind of property-oriented editor for Character initScripts.

[benloh]

In GitLab by @daveseah on Jun 25, 2022, 11:32

approved this merge request

[benloh]

In GitLab by @daveseah on Jun 25, 2022, 11:32

this appears to function

[benloh]

In GitLab by @daveseah on Jun 25, 2022, 11:32

mentioned in commit 59c88633d98f88a8a2a4f20341b797fa2a010195