Historical tile placements appear in wrong order

[sambrenner]

First, thanks for building this, I love the game and perhaps might soon try learning CJS...

Anyway, I found an issue when going back through move history. See the screenshot below, the highlighted tiles should be in the order 9-2-4 from top to bottom, but when I hover to view the history they are placed in a different order.

For reference, here's the un-hovered board:

I'll try and see if I can recreate it.

[jrheard]

Hey, thanks for the bug report! The screenshots are very helpful, and also it feels really good to know that people enjoyed this game :)

What you're seeing here is a thorny design/UI bug I've been having trouble figuring out how to deal with, and I'd love your input on the best way of addressing it. Here's the relevant context:

• When you mouse over an old move's score, the game goes into viewing-historical-move mode, and shows you what tiles you played during that move.
• If this particular historical move was optimal (i.e. the highest-scoring move you could have made for that turn), the game shows your move in green.
• If this particular historical move was non-optimal, the game shows you the move you did make in orange, and also it shows you the move you should have made in green.

Sometimes, the orange and green moves will overlap! In this situation, I draw the green move on top of the orange move, and just make it a little bit transparent.

This usually works OK, but can lead to confusing behavior, especially in situations like yours. In your case, the game's trying to tell you that you played 9 2 4, and that you should have played 2 4 9 instead for a higher score - if you squint, you can see the 9 2 4 peeking out from behind the 2 4 9 in your first screenshot.

This behavior isn't very clear to the end user (it's not obvious what's happening, and it looks like a bug!), and even when the user does know that this behavior exists, it can be hard to squint past the green move to see what the orange move was.

Here are some ideas for ways I could address this problem:

1. Tweak the opacity value used for drawing "ghostly" green cells - right now that value is 0.75, but 0.65 might work better.
2. Maybe using different colors would make this easier to read/understand?
3. Don't draw two different numbers on top of each other like this - instead, change the viewing-historical-move UI so that it periodically swaps between showing the orange move and the green move, like a tag (I hate this idea), or maybe it has a "show optimal move" button and a "show actual move" button (I also don't like this idea, it feels like clunky behavior).
4. ?????

Option 1 is my favorite because it's simplest, but it also feels like it might be insufficient. What would you do in this situation? Do you have any suggestions for other ways of making this particular bit of UI more clear?

[sambrenner]

Oh of course! Yes, now I notice it on the rest of my non-optimal moves (of which there are plenty) - I can't believe I didn't notice that before.

It makes more sense when the two tiles aren't on top of each other since the colors assist in signifying optimal and non-optimal. Maybe when they're stacked you could do a split-square like this?

You might also want to treat the text differently (bold for optimal, regular for your move) since a colorblind person might not be able to differentiate the two colors.

Another idea could be to pulse the opacity of the ghostly element in and out with a CSS animation (I would be happy to do that and PR for you).

[jrheard]

I love both of these ideas, they're way better than the options I was considering. I'd extremely love a PR with the CSS opacity pulsing you describe - when we see it in action, if it feels like it solves the problem then we can just go with that approach; otherwise I'll implement the split-square solution the next time I sit down to hack on this project. Thanks!