Textbased RPG: in a battle, how can I distinguish between your actions and the enemy?

Question

In my game, the way my battles work is you attack and sometimes the enemy attacks in return. It's always one on one. Here's how this looks:

The first line is your action, the rest is the enemy's. Your action and hers are called a "round".

At the bottom is an event log of the battle's history. If you click on it, it'll open up and allow you to scroll. Here's how it would look if she attacked more than once:

The rounds are separated by that horizontal line.

In my opinion, it's difficult to tell your actions from hers. In the future, your actions will be multiple lines just like hers, and that will make it even more difficult. What's a good way to distinguish your actions from hers while still being able to distinguish individual rounds?

I've come up with a few ideas of my own:

1. I can make the white text of her action a shade of red. My concern is this would make the text harder to read.
2. I can zebra stripe rounds / actions. I'm concerned doing this could make the log more confusing. e.g., "Does a zebra stripe represent an action or a round?" If this is the right way to go, I don't know whether the actions or rounds should be zebra striped.
3. This isn't necessarily a fleshed out idea, but maybe it would be better to come up with some solution that doesn't use a horizontal line at all?

FWIW, this game is written in HTML.

This may help with context:

This animated gif may help with context

Answer 1

The optimal strategy with most visual design problems is to use a combination of strategies, since using just one can often lead to other issues (as you suggested). In addressing the proposals you have made, the final solution will still need to be tested and validated against the end-users.

I can make the white text of her action a shade of red. My concern is this would make the text harder to read.

You will want to reserve the colour red for special purposes rather than something that is used commonly as it has the effect of drawing unnecessarily attention to it.

I can zebra stripe rounds / actions.

This may cause issues because if you have light/dark themes then the visuals will be reversed and then be confusing. There are also other potential issues as you have pointed out.

This isn't necessarily a fleshed out idea, but maybe it would be better to come up with some solution that doesn't use a horizontal line at all?

The horizontal line again is not a visual element that should be used too frequently as it will lose its effects. But based on the ideas and the fact that it is implemented in HTML, are there any reasons against using some of these strategies in combination?

• Use of icons and symbols to differentiate, but only if you don't get a lot of line items per round otherwise it will have the same issue. An alternate will be to use a letter instead.
• Use of colour on a solid shape in front of the text rather than applying colour to the entire text to avoid the readability issue mentioned before.
• Use of different font size or style while still keeping the same text colour