networked drawings & words to tell stories and do other stuff
9 entries
First: Oct 19, 2020
1 contributor
ah man I gotta dive into this!
This was really fun to play with! It’s f...
These links are cool too man, I love you...

I can't wait to share this next iteration! It's so much more fun with drawings added. I think the UI is more sensible, too. It de-emphasizes story forking, which I think confused a lot of people.

Found a scary security problem. There's some place I'm outputting text that comes from users, and I'm rendering it as unescaped HTML. This is a problem because it essentially allows users to rewrite the code of your website.

See how the screenshot looks extremely broken? Like there's code exploded out on the page and everything? This happened because I copied the page's source code and pasted it into the text input, just to see what happens. What happens is that a piece of data that's only ever meant to be plain text rendered within a textarea and within a p is allowed to break outside of those and render other HTML on the page. Whenever this is possible, you've got a problem to solve.

This could be leveraged by a malicious user to entirely replace a page. Maybe they use it to spoof a legit-looking Google login page and swipe passwords? I dunno, but it's a problem.

There's some place in my code where I'm allowing unescaped HTML. I think it's where I use EJS to render a JSON object in the page's body. I do this to pass data from the server that's immediately accessible from the client. The escaping probably should be handled after being received by the server and before being saved to the database. That way I have a system that prevents untrusted stuff from persisting in the database.

This probably needs to be accounted for on the Mongo side to actually be secure, but that's not really where I wanna spend time right now.

After fully losing steam on this project, I'm picking it back up.

I got stuck because I realized how poorly I handled all persistent data. All posts (called them "passages" internally, which was stupid) exist within a single MongoDB collection. Rooms aren't an actual thing. A post without a parent ID is inferred to be a "Room". I'm not 100% sure what the structure should be, but I do know this ain't it.

Fixing this would mean breaking all stories, which would be a bummer.

I decided to stave off these data issues in order to actually make progress. Adding drawings to these stories was kind of the whole thing that made this idea feel special. So I'm going forward with getting drawings implemented. Starting quick and dirty, then I'll make improvements.

Last night I stripped down cadavre-exquis to re-familiarize myself with how the client and server talk to each other. This could still be stripped down into a much simpler demo, but this was enough for my purposes.

Right now I've modified the mush client to include the drawing canvas form, and added an endpoint to the mush server to accept image uploads. It's too jank to merge right now, but I hope to get it done enough to merge by tonight or tomorrow morning. :)


the text input now autosaves changes. it was easy to forget to save stuff before.

Later update: I removed autosave eventually. I wish I would have written down why!

I've been sending the app to people to get their takes & ideas on https://mush-pre.glitch.me

Somebody said it "feels like writing into the void" since you don't really get feedback on stuff you've written unless somebody happens to add on to it, and you happen to notice. Good point!

I wanna create situations where you end up in the same room as people, and see the things that they add in real time. I want it to feel more like a multiplayer game rather than a forum.

I think we're all a little starved for synchronous communication right now, aren't we?


web mush thing


Version 1! This tool can be used to read and write forking stories. When you hit the end of a branch, you're prompted to write the next scene. Take a look at old man to see what I mean.

The tool's quite confusing right now. And it's all plain HTML, so it's a little lifeless. I am working on rewriting the front end to make it more reactive.

Ideally you'll see others using the tool at the same time as you. I'd like to be able to jump to the page other people are on, and see changes as they make them. Think Google Docs' anonymous animals.

Don't get too attached to any stories or edits you make in here. The next iteration will change the data structure I have currently, so everything's gonna get wiped out.


cadavre exquis

draw in the box to add to the drawing above

A while ago I tried writing a story (complete with photographs) via instagram story polls. So I'd present a fork in possible input decisions ("fight or run? slash or kick? reload from last checkpoint or no?"), and then make each decision by choosing the most popular option. It was fun to think through multiple potential outcomes at once, and consider where the story might go based on what decisions are made by The Masses. I think I was adding to the story daily. I photographed each frame, but I wish I would have drawn them instead. Would have been less effort.

Unrelated, I attended Roguelike Celebration a couple weeks ago. We had a lil zoom breakout room about virtual meeting spaces.

Both of these things rattling in my head together formed an idea. It got me thinking about building a game/tool like a MUSH with a minimal web interface instead of a command line interface. I'm picturing something like this:

You're presented with a story. You take actions by clicking buttons. The story unfolds based on the actions you take. You make several decisions that fork the story. (I wrote an example story in TWINE here: http://tilde.town/~emu/old-man.html) So eventually you hit a dead end in the story. But then you are prompted for the next action to take. Now you type in what you'd like to do instead of selecting it from a list. And then when you take that action, you're asked to describe what happens after taking that action. So bascially, you're guided by prompts to add to the story that you were just reading.

The MUSH idea comes in because this is meant to be a shared among a network of people. Ideas you add to the story become canon, and visible for other people to see.

Also, while building https://cadavre-exquis.emu.media, I wrote some JS that functions as a drawing pad which can submit its contents through a POST coming from an HTML form element. I believe I can reuse this code to add drawing tools on top of the interface I described. So the story is illustrated. You are prompted not only to write what happens in a scene, but to draw illustrations for it.

figma prototype, telling an incomplete version of the story from the TWINE link above: https://www.figma.com/proto/1EaWYw82F0pY7HbVyRRhti/graphical-mush-prototype?scaling=min-zoom&node-id=4%3A1

emu mush