black-desk / mahjim

a tool to generate mahjong image
83 stars 13 forks source link

Render as html/markdown pieces (Support more complie targets) #2

Open Ledenel opened 4 years ago

Ledenel commented 4 years ago

A really impressive project! It's the first DSL aimed at layout mahjong tiles to my best knowledge. And it is really simple and beautiful.

I'm planning to integrate it into my project, which could generate a single HTML report from a tenhou.net replay (tenhou-record-check): https://github.com/Ledenel/auto-white-reimu

the report looks like this: image

The problem is that if I use link like <img src=http://localhost:8080/_534m3|6688m3306679p>, it may display well , but the HTML report is no-longer self-contained. So the report is difficult to share.

I use base64 to embed individal mahjong tiles as css classes in my orginal inplementation , something like:

.pic6m {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAYAAACEYr13AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAADASURBVDhPpZMxDgIhEEVhTyDn0J5aG1qv4C28lZZU9vTeg73BupPMxC8MmxVeQubDMn9+SNYuK5fnyfTwur6NPT+OC++7sPf5NmYQYxw38N7z9svBOVbGzDmz+iWlZCbWFdQka4vKgCZvrZLKAKe2NNJMgJdJdyVAWufqIzqeRBW1RmVAF/M6SSpqzaQywItUUdO3kmYCAht2JyBwqqA1E6oBTStTYBqkmYCWxJaqsSuBNMsZMvw7TyEElv8TQjAfVhCDIyuoJMkAAAAASUVORK5CYII=");
            }

and reference them in report content to control report size.

But this project only suport png output, so embed every hand would make the HTML report size uncontrollable.

Similar problem may happen when developing a Mahjong forum, or an universe mahjong replay viewer (my future plans), which could cause a lot of http requests, eating a huge amount of network traffic.

So if this project support render as html/markdown pieces (may combined with CSS Sprites/a static css file to embed as a cachable css headers <link rel="stylesheet" type="text/css" href="http://localhost:8080/css_sprites.css">) it would be great.

black-desk commented 4 years ago

This project is currently mainly aimed at bloggers. The person who provided these pictures even wrote it in Microsoft Word. For them, embedding html in the document is not a painless solution, so this project is design to rendered as png. At present, the grammar of this project is not stable, for example, I can't think of a good way to present "摸切立直". I might make disruptive changes in the future. I will leave this issue in the todo list. It is a good idea, thank you