New Log Viewer (WIP)

[smly]

A new log viewer is currently under development. The main changes will be the introduction of a 3D display and the display of the winning hand (yaku) at the end of a round.

The viewer is optimized for widescreen displays, aiming to make it easier to view match results, even on devices like smartphones.

Current work includes optimizing 3D rendering and debugging the score calculation. The update is planned for release as early as this month or next month.

Debug Display

This feature allows you to simultaneously view the game status at each step of the game and the corresponding line being loaded from the mjai log.

Round Selection

Selecting a specific round will be easier. (Note that the scores displayed on the image is not yet accurate. This will be addressed in a future update.)

Duplication Game Selection

Stay tuned!

[smly]

I'm excited to announce that a major update to the game viewer is almost ready! You can preview it now by changing the URL from "games" to "games2".

https://mjai.app/games2/82/249/0

I'm still working out a few bugs related to mobile support and score calculation (including fu calculation), but I'd love your feedback on the progress so far. Please let me know what you think!

mjai_new_player_preview.mov

[zl0v7hzr]

Hi, thanks your your great work! I think it looks good generally, but there are a few minor issues when I tried it:

1. The new log viewer reports errors if any profile image loading of the bots failed. For example, when I opened https://mjai.app/games2/82/248/0, I encountered the error: Unexpected Application Error! Could not load https://pbs.twimg.com/profile_images/1570258662769164288/EFHNwZV-_normal.png: undefined. I inspected the error and found that it was because Firefox blocked this URL, identifying it as social tracking. It would be better to ignore such errors, just like in the old log viewer.
2. The new log viewer consumed a lot of CPU, even when I did not click on the buttons of going forward, backward, or to other rounds. I think it can be optimized (at least do not redraw anything when idle, except when the viewport size changes), but I am not sure about the difficulty of optimizing with the framework you are using.

Besides these, I found some score calculation errors (which happened in fu calculation) of which you are already aware.

Finally, I have a suggestion: differentiate tedashi and tsumogiri tiles, such as rendering tsumogiri tiles with a different background color or transparency.

[smly]

Thank you so much for your valuable feedback!

Regarding the profile image loading error, I was completely unaware of this issue. I'll address this to ensure the log viewer functions correctly even when profile images can't be loaded.

On the CPU usage, I agree that optimization is needed. I'm currently using Three.js via react-three/fiber, and I haven't yet focused on rendering optimizations. I'll be looking into things like camera view frustum culling, optimizing map size, and reducing polygon counts where possible. I'll experiment with various approaches to see what performance gains can be made.

Thank you also for the suggestion about differentiating tedashi and tsumogiri tiles! That's a great idea, and I plan to implement it. I'm still relatively new to fine-tuning rendering details, so this might take a little longer, but it's definitely on my to-do list.

Thanks again!

[dkguo]

Hi Kohei,

Thank you for creating this project—it's really exciting! I have a few questions regarding this log viewer:

1. I’m sorry if I miss existing instructions. Is it possible to upload and visualize my own log files using the viewer?
2. Can the log viewer be run locally?
3. Is it possible to customize the viewer such as adding new actions or different types of debugging messages?

Thanks again for your work on this project! Looking forward to your insights.