[Feature] Symmetrical Drawing Mode in the Map Editor

[cpojer]

Many Map Editors feature symmetrical drawing modes. This task is about adding a symmetrical/mirror drawing mode for tiles, buildings and units. Here is how I imagine it could work:

Basic Modes

• Regular: Existing mode where only one tile is drawn.
• Horizontal: Each tile drawn on one side of the map is also drawn at the same location on the other side.
• Vertical: Each tile drawn at the top/bottom of the map is also drawn at the same location at the bottom/top.
• Both: Each tile drawn at one point is mirrored on both axes to the other side.

For example, with regular horizontal mode, on a map that has dimensions of 14x10 (width x height), drawing on field 4,4 it would draw on 10,4 on the other side (14-4). The "Both" mode would instead draw at 10,6 on the other side (14-4, 10-4). I imagine we may need a fifth mode that mirrors each field 3 times, so that drawing in one field will draw in each quarter of the map. For example, drawing at 4,4 would also draw at 10,4, 10,6 and 4,6.

The basic implementation as above should work for tiles. When a building or unit is selected, I think it makes most sense to rotate player/colors as more fields are drawn. Let's say I'm designing a map with pink (1) vs purple (5), with horizontal mode. The first unit would be player 1, and the second would be player 5. map.active can be used to determine the players. If the mode that draws on 4 fields is selected, and there aren't enough players on the map, I suggest doing something like new Set([...map.active, ...PlayerIDs]) and wrapping around that set while drawing.

Next to building this feature, the challenge is how to make the UX good and not confusing.

I'm not sure if there are any modes beyond this that could be useful, and I'm open to ideas.

Steps

• This task likely requires refactoring parts of DesignBehavior so that multiple positions can be updated at the same time, while still running all the tile, unit and building related validations.
• The buttons to select the drawing mode should be in DesignPanel. The state should be stored in EditorState.
• Multiple cursors likely need to be rendered to highlight every place where something will be drawn. Let's make all the mirrored ones red, and I can swap in another color later. This might be possible through MapEditor, but more likely needs to be done in DesignBehavior's component. If neither are a good option, it can go into the render function of GameMap by using editor (EditorState) and placing cursors next to the existing <Cursor />. This might actually be the cleanest option, but I'm not entirely sure without trying.

I can provide icons for the buttons. Feel free to just use any placeholders from ui/icons in the initial PR.

Note: The code of DesignBehavior is maybe less ideal than it needs to be in some places. I appreciate any refactors that bring clarity, any possibly even some extractions into athena/lib (or athena/editor/lib?) with added tests for mutations/validations, but it is not necessary for the completion of this task. I care about it not breaking, and this is one way of doing that.

Links

• Map Editor Playground

Funding

• We're using Polar.sh to distribute funds.
• You receive the reward once the issue is completed & confirmed by Nakazawa Tech.

[dkratz]

I'm taking a stab at this here: https://github.com/nkzw-tech/athena-crisis/pull/19 [WIP]

Do you have a preference on where to put the buttons? I was thinking of placing them below the "Playtest" button on the right side (vertically stacked).