Show and share pictures after drawing

[SZenglein]

A neat feature would be if it was possible to download or share images after they have been drawn. Either show a gallery of drawings at the end of the game or add a small history with thumbnails somewhere on the page.

Implementation:
Either the server would cache all draw commands as long as the lobby is open or the history would be kept on the client-side, meaning history is lost when reloading. Images could be rendered client-side, so the server does not need to know the drawing algorithms.
Some storage solution would probably be necessary to scale well.

[Bios-Marcel]

I could just keep the drawing on the screen for longer. The canvas has a built-in image export feature.

[SZenglein]

That would mean a user has to be quick to export the canvas. Alternatively, the game would get unnecessarily delayed.

I think a way to at least export the last image would be more user friendly.

[Bios-Marcel]

How about posting a link into the chat where it generates the last image for you?

[Bios-Marcel]

Last image can be found at X for the duration of this round:
http://localhost:880/image/lobbyID

[SZenglein]

@Bios-Marcel that should work, but I think a small share button somewhere would be more user-friendly.

[Bios-Marcel]

Feel free to write up your whole idea properly, then I'll think about it.

[SZenglein]

What's not clear? The feature would be some way to view or share previously drawn pictures.

How it is eventually implemented doesn't really matter. If you don't think this feature is interesting please say so.

[Bios-Marcel]

Like, do you want to be able too see all of them in a gallery and then choose one. Do you want to be able to see the last one. Should it be on an extra page or a direct png download. Ofc the feature makes sense, I always make screenshots manually, lol.

[SZenglein]

I intentionally kept it open for discussion.
Ideally a UX person would help out with a nice design.

I thought of the following:

1. Very simple sharing button that allows downloading the last image. Requires very little code.
2. More complex history of the last n pictures show at the bottom as small thumbnails. Requires saving the history in the client.
3. Elaborate Gallery at the end of the game, maybe sorted by likes. Best stored in the backend in case a player disconnects.

Extensions:

• showing the pictures as they are drawn like a replay (gif)
• showing only a selection of images (liked, disliked?)
• it could be possible to keep history only client-side by implementing messaging to request history from other players in the lobby. This would allow the same state for every player, regardless of when they joined, without storing it on the server.

It mainly depends on how much time someone wants to invest, but also the storage requirements of the server.

What do you think?

[Bios-Marcel]

The history of each round is already temporarily stored in Lobby.currentDrawing. So, technically a gallery would be possible. I assume that the gallery would be the best way to go. However, the one for only sharing the last image would be easiest for now and bring instant benefit.

[Bios-Marcel]

I would simply open a new page with a drawing board where it reuses the drawing instructions and tells you how to get the image by right clicking.

[SZenglein]

Yeah, that would be the easiest way to get fast results.

Assuming you want to onboard new contributors, maybe encourage people to implement a better gallery. Web dev is unfortunately not my favorite thing, else I'd probably try it.

[Bios-Marcel]

Same thing here. I barely know what I am doing :)

[Bios-Marcel]

I've now established a small toolbar in the top-left corner of the canvas. Maybe we could add a "share" button there. I'd actually like to go for a full blown gallery of everything that has been drawn. But very simple as multiple canvasas vertically aligned along the page. Meaning we'll have one canvas for each drawing and the user can just rightclick the canvas and say export. Would this suffice?

For this we'd have to keep track of previous drawings on the backend. These will be kept as long as the lobby is alive, meaning as long as just one websocket is connected.

[SZenglein]

What I personally would also find cool is exporting drawings as gifs (which should be an extension, I know).

But generally, instead of storing drawing commands, converting to and displaying plain images might be better for performance and storage.

Would you display the gallery on top of the canvas or somewhere else?

[Bios-Marcel]

Uhm, dunno how easy the gif thing is. I'd make the gallery a new page, e.g. it's own endpoint and frontend.

[Bios-Marcel]

Relevant: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

All draw commands could be persisted in the session storage. If desired, they can be drawn into a png or even a gif.
This way, the server won't have to bear the load and the data would persist between turns and page refreshes (F5). However, closing the tab and rejoining the lobby will cause stuff to get lost. I assume that would suffice.

[Bios-Marcel]

A LITTLE LATE, BUT I AM BACK!

Started working on the gallery thing. I've already done a couple of optimisations to keep stuff small in memory / when sending it. If needed, there's more room for optimisations.

#358

Current version is done on the technical side, but the UI/UX is missing.