Add interaction

[evktalo]

As a game designer,
I want to add interactions,
so that I can create interactive events in my game.

Acceptance criteria:

• Added interaction is added to list and redux store
• New interactions are exported
• Event (click/drag), source (item), commands (monologue etc.) and destinations (items) can be specified when adding an interaction
• Cypress test written
• When the event is click, there is no destination item
• When the event is drag, there is always a destination item

Technical notes:

• The id of each interaction is the id of the source item/furniture
• Duplicate interaction id is not allowed

Notes:
Make sure to get familiar with https://github.com/kiigame/adventure_engine/wiki/Adventure-creation-guide before starting the implementation. The interaction system in the engine is quite flexible and generic.

It is very important to consider UX before starting to implement this feature. Generic view to edit all/any kind of interactions the engine supports is probably quite difficult to design.

Consider slicing this feature. For example, certain interaction commands (monologue, inventory_add, etc) could be sliced into separate tasks. Not everything needs to be implemented at once.

Also, it is a good idea to consider separate features to add in "build-in" or "macro" interactions. There are already two examples in the editor:

• Furniture examine texts
• Doors

From engine point of view, they both are flexible, generic interactions that just happen to combine "click" ui interaction with "add_monologue" interaction command (examine texts) and "do_transition" interaction command (door), but in the editor, it is good that these can be quickly added to furniture.

Related to #29

[Svenskapojkarna]

I think this feature could be implemented by adding new tab to the left panel called interactions. In this tab, user could add interactions to items or furnitures. The options for interactions would be click and drag-and-drop. For both of these options, user could chain together different actions that happen when click or drag-and-drop occurs. This implementation could be similar to interactions.json.

When user opens the interactions tab from the left panel, inspector would show a list of already defined interactions. User could then select one interaction to be modified or deleted.

Here are few mock-ups to visualize my suggestion:

[evktalo]

This looks pretty good!

One thing I notice from mock-ups, is that timeouts have not been mentioned in this ticket yet. They're (in LZ) only used for room transitions and triggering the ending after the cutscene (search "timeout" in interaction.json for examples). Maybe both of these cases shouldn't need manually set timeout in the data. But for now I suppose it needs to be handled in the editor in some way.. just a heads-up.

[Svenskapojkarna]

Currently the user is unable to configure the transition timeout, for example when setting furniture to be a door, the user is only able to select to which room the door leads. I think we should keep to this way in interactions-tab to maintain consistency.

Although if the user sets an interaction "do_transition", he/she will also be able to set "room arrival text". Basically this way we can implement the timeout-option of monologue without need of user configuration. This timeout will be something like transitionTime + 1s. The user would see that he/she is just configuring the interaction of moving from one room to another, but under the hood there will be two interactions created and chained together:

{
    "comand": "do_transition",
    "destination": "someRoom"
},
{
    "command": "monologue",
    "textkey": {"object": "someObject", "string": "someText"},
    "timeout": "transitionTime + 1000"
}