"Eliana, you just announced your new game 'normal_fantasies.exe', but how did you go about recreating Facebook's interface in Twine, anyway?"

Good question! Here's a thread full of behind-the-scenes info & details!

#gamedev #indiedev #interactivefiction #visualnovel

First of all, almost every element you see is a div. Text in a Facebook-looking post? Div. Choices in a message box? Div. Facebook circular icons? Div.

I made a lot of custom CSS so I could wrap things in divs. :3

Here, have a look at my code. This is one the many divs. This div is used for the choices in the messaging box!

And on the right is the final image of the messaging box with the choice button element.

Also, here's what that CSS code looks like in action:

Another example: as you can see in the screenshot above, the Facebook post itself is wrapped in a border. Here's a closer image of that:

The Facebook post element is wrapped in a custom div I made called "facebook_post". Here's what that looks like in the code:

And here's what the screenshot above looks like in the code (as you can see, there are more divs in action than just "facebook_post")!

There's also a span too. :3

Ok, that's enough about div's--let's talk about how I created the different elements surrounding the Facebook posts--the bars on top & on the sides!

So, all of those different elements are basically the Twine sidebar duplicated & then moved around. I found a line of Javascript on the Twine forums that allows you to duplicate the Twine sidebar, so I took that & ran with it. :3

Here's what that Javascript looks in one case:

But duplicated the sidebar wouldn't automatically move it to where it needed to be! And so, I had to write a LOT of custom CSS to make the new sidebars go where I wanted them to go.

Here's the CSS for the right sidebar, along with the final appearance:

In the case of the blue bar at the top (the one that says "Facebook, Friends | Messages", since that "sidebar" was very different than the others, it required a lot of new coding. Here's a little of its CSS (there's more, but too much to show!)

And right is what it looks like

And the messaging box? Yeah, that's technically also a sidebar too!

But it doesn't really function like one--it only appears when the player clicks "Messages", & it disappears when the player clicks the "x" on top, so you'd be forgiven for thinking otherwise. ;)

Anyway, here's a preview of the CSS of the messaging bar. There's a lot more CSS (to customize the buttons, etc.), but this is the base code.

And here's 2 images of the final messaging box:

Finally, I'll end with some in-development images of Facebook in Twine! These are circa 2018 (yes, it's taken me that long to make a game with this framework I made, rip xD)

Here's the earliest screenshot. As you can see, I was focusing on just the center passages elements & no sidebars yet.

That purple bar off to the left? A top sidebar test. (I put my test elements in bright colors to differentiate them.)

Also, there are no images whatsoever yet.

Here's the same image with that sidebar working a little better. It's still purple & says "test test test", but it's almost where I want it to be. Now to move it up a little more...

In this one, I've customized Twine's default sidebar (on the left) to fit the game's interface, & have gotten the top (blue) "sidebar" to where it needs to be. I'm now trying to create the messaging box--that's what that "test test test" thing is.

In here, I've moved the messaging box over so it's not all the way to the right, but it still needs a lot of work. xD

I've also created the right sidebar & added elements to it! :D

In this one, I've gotten the messaging box to where it should be on the screen, & am testing the appearance of text & the <hr> element in the box.

(For those who don't know, <hr> creates a line break on the page.)

In this screenshot, I'm adding buttons to the messaging box that you can click on to open new messages. I'm currently testing the appearance of that.

This one shows that I've gotten the messaging box to look like it should...but due to a z-index error, it's appearing behind the right sidebar. It's also way too big!

In this screenshot, the messaging box is finally properly fitted (though still not final), & I've created some new divs to make what appears to be messaging bubbles around the text in the box. So, I'm testing those bubbles!

This one has something a little different--choices in how you respond to Facebook posts! There are 2 choices--"You do you." & "Ok, that's nasty". These choices affect your relationship with the characters as well.

In this one, I'm FINALLY adding images to it! As you can see, the circular icon image is appearing in the center instead of on the left, which is not how it should be. Um, oops.

Last dev screenshot: I'm trying to get the Facebook blue bar to go down as you scroll, but not only is that not working properly, due to a z-index error, it's appearing BEHIND the left sidebar!

I ended up fixing that, by the way. Here’s a gif showing it off!

And that’s it! Let me know if you have any questions; I’m happy to answer!

Addendum: Someone on Curious Cat asked why I made the "Facebook in Twine" framework in the first place. Here's my answer: https://twitter.com/TheStorysinger/status/1378088938317963268

Addendum 2: I'm using the "Facebook in Twine" framework for my upcoming game, normal_fantasies.exe

Follow here & @StorysingPrsnts for updates on the game.