Autocomplete interface

[nwinter]

One of the reasons that method names are so long (attackNearbyEnemy) is that we've always been planning to add really good autocomplete, so that players don't actually have to type that stuff out. I'm not even just talking about tab-completing identifiers, either--that's something that beginners may not know they can do. We could go all out like jsdares does and obey the Victorian commandment to get something on the screen as soon as possible:

(@janpaul123, you followed the vision--how did that end up working for beginner jsdares players?)

So how will we do it? There are two parts:

1. Knowing which completions we could use.
2. Showing the autocomplete UI.

For finding completions, our secret weapon will be Aether, since it should know not only which properties are available on this, but also through runtime introspection can actually know any property available on anything, what its type is, and what its current value is. I've opened a related issue over on that project to get that part of it ready.

For autocomplete UI, I hadn't thought too much about it beyond starting with something simple and trying to evolve it toward the screenshots above while iterating through some UX tests. Developing the interface is what this issue (in the main CodeCombat project) is about.

I found a couple potentially useful links for doing autocomplete within ACE:

• Codiad's autocomplete
• A StackOverflow question about it

I'm guessing we'll probably want something weird enough that we won't really go through ACE for it, though.

[janpaul123]

I think the autocomplete box in jsdares worked pretty well, I have seen most novice learners use it without any problems. Most people start typing "robot." by example, and then see the autocomplete box. Some people copy/paste lines from the example, but eventually they discover the autocomplete box too.

It's a flexible interface for discovering new methods (not just the ones in an example). It also scales nicely to real-world programming, although there autocomplete boxes are often not as nice (no preview, or no context-awareness) ;-)

If you're going to do this, I would like to suggest doing it a bit better than jsdares and show some more information, e.g. little icons (like Bret Victor proposes), or named arguments instead of just numbers, or small method descriptions.

[GlenDC]

Yeah many people expect this, including me. A lot of people already get frustrated when nothing happens after pressing CTRL+Space ( a code assist combination in many IDE's ). so maybe show a message box (maybe just when you do CTRL+SPACE) that tells that the auto complete function is not yet implemented but will be done soon.

[nwinter]

@tips48 has started integrating ACE's new autocomplete to get started, but we'll need a way to feed in the available properties from Aether.

[nwinter]

@tips48 how far did you end up getting with this? Care to share any progress?

[karolrybak]

It would be enough to allow to click-insert spells from available spells interface. Right now it's tedious to write commands, therefore inherently not fun for my kids :/.

[nwinter]

@dkundel has been working on this with Zatanna.

[dkundel]

BTW I think we can close this issue? We got the autocomplete and the click to insert snippets part.

[nwinter]

Yeah, it's largely done. I see a few issues remaining with it:

1. Autocomplete often inserts invalid code

I should be able to select the autocompletion even after typing this and have it work. It should also do the semicolon for me.

2. Autocomplete requires semi-advanced keypresses

I have to press either tab-tab, down-tab, or down-enter to trigger the first autocomplete snippet. I would prefer it if we can let them also just press tab to do the first one (or even enter if what they have typed couldn't be a valid end of line). Glen mentioned Ctrl+Space–I'm not sure how common that is, but if it's really standard, we might try to support it. I think it will conflict with keyboard input method selection shortcuts a lot of the time, though.

3. Autocomplete z-layering goes above spell palette

Should be easy to fix.

4. Autocomplete tries to complete when typing in a comment or string

5. Autocomplete maybe shouldn't autocomplete numbers

While it's cool that it can do that, this seems like it would be useful less of the time than it would be confusing.

At some point soon I think we're going to need to make the snippet insertion much smarter to take advantage of the available methods and only insert valid code (especially on iPad), but we can do that one in a separate issue.

[dkundel]

1. Is kind of difficult to fix. I have it in mind but for now the quickest (appropriate) fix would be to actually not prefix with this. and I left out the semicolon because sometimes you want to have multiple statement in the same line (i.e. in an if statement). The problem is that some people actually reference this as $this or similar which gives it a different degree of complexity also with respect of parsing and understanding the code. The question is how much benefit this would give. Alternatively we could wrap the this. as an argument using the ${1:this.} syntax and this way you can quickly remove the statement.
2. I'll look into that. I need to copy paste the default code again and override it similar as I did it with other parts of the ace code but it should be doable.
3. Shall be fixed. Just need to find the z-index of the spell palette
4. If I end up copy and pasting the code from ace to Zatanna then I can add this as well. For now I only included the code that leaves out information from the commented section to be offered as autocomplete suggestions.
5. I thought I excluded them already but I'll add it.