Prototyping client-side features for my Four Panels drawing game

A number of years ago I created a simple paper-and-pencil drawing game to play with my niece and nephew; a one-page instruction sheet is here. Part of the fun of the game is that when you're done you have a little “artifact of play” which is the folded paper that lets other people look at what you created. An idea I'm working on is a digital version, where players will use a web interface to draw “MS Paint” types of images that will get composited the same way they do in the pencil-and-paper game, you'll be able to post the completed sets as posts to the Steem blockchain, a digital equivalent of that “artifact of play”.

I've got some elements of the client-side part of the game working in prototype form. For the “paint” part of the game I'm going to use an HTML canvas element and record the mouse movement “strokes”. In some sense it will be fine if the interface isn't a super-slick modern drawing program. Cutting through the self-defeating idea that you have to be able to make a masterpiece before you can draw is part of what the game is about, so being able to attribute any “badness” in the art to limitations in the tools could be helpful.

The other hard part of the user experience from the client side is going to be managing the transitions between player turns with appropriate slickness. I want to evoke some of the experience you get with playing with the physical paper, and I think I have some animation effects on CSS transform properties that do the door opening/closing effect pretty well. One aspect that makes it tough is that I want to maximize the useful drawing area while you're actually drawing, but you need to be able to see “more of the paper” for the door open/close animation to make sense, so I have to incorporate some zooms, and I'm also going to have some UI elements slide in and out, since I think having the UI elements of the drawing tools “lock in” the paper will make the transition seem satisfying.

One thing I'm still thinking about is how to incorporate the open/close animations into the “final” things that get posted to Steem. I'll likely be able to incorporate a “viewer” of posts from whatever site I build that runs the game that will let you easily transition between the four different combinations of images, but I want them to also work as social media posts that people will view via sites like Steemit (as silly little doodles they'll likely be the kind of thing that only friends and family would upvote, but there's always the chance of something funny going viral), and you can't use javascript or fancy CSS transforms in a Steemit post. An option might be to create snapshots of the animation running and composite it into an animated GIF server-side. (Counterpoint: many people find animated GIFs annoying). Or maybe just have the posts have “vanilla” versions of the composited images and I only display the animations if they're looked at through the game site.