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:
- I can make the white text of her action a shade of red. My concern is this would make the text harder to read.
- 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.
- 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: