Interactive Dating Sim

[shipping]

Hi all! For Valentine's day I thought I'd do something a little bit topical and make a Dreamwidth-"friendly" mini dating sim UI. There's a working demonstration of it, as well as copious notes and a generator spreadsheet if you don't want to bother sorting through the code.

Please make sure to read all the notes carefully. Feel free to also use only a single screen if you don't want it to be interactive.

Tested on: Chrome (108, 108 for iOS), Firefox(84), Safari (14.1, 16 for iOS)

NOTES:

• Please do not remove the credit footer unless you have code credits somewhere else on your journal!
• If you are not planning on using the spreadsheet, please disable auto-formatting or you might end up with whitespace where it doesn't belong.
• This code is long, please note that the 6 sample screens is something like 9k characters and that dreamwidth entries have a maximum of 65k latin (~33k cyrillic or cn/jp/kr characters) so you will not be able to create a very long story. For that, I suggest an RPG or dating sim engine instead!

Demonstration | Code | Spreadsheet

DEMO.

(Click the arrow in the dialogue box!)

STEVE

Keep your eyes sharp. We're gonna need all the backup we can get.

▾

Roger that, Cap

Help, I'm literally a Civilian?

STEVE

You ready, soldier?

STEVE

Great, I'm glad to hear that.

I'll debrief you on the Quinjet. Wheels are up in five.

▾

You have an excellent mission. You are asked to join the Avengers.

GAME OVER. Start again?

STEVE

Sorry kid, can't stay. I'll catch you later.

▾

GAME OVER.
Start again?

CODE.

▴TOP

CONTAINER.

This is required, otherwise all your screens will display one after another, instead of allowing you to click through on "one" screen. <div style="width: 80%; margin: 0 auto; height: 500px; overflow: hidden;"> <!--ALL CODE GOES HERE--> </div><div align="right" style="width: 80%; margin: 0 auto"><a href="http://shipping.dreamwidth.org" style="text-decoration: none; letter-spacing: 2px; color: #000;text-shadow: 1px 1px 0px #fff;">CODE</a>.</div>

SCREEN WITH NO DIALOGUE (FOR OPTIONS ONLY).

INDEX the screen index for internal linking purposes.
CHARACTERPNG transparent png of the character.
BACKGROUNDURL background
<a name="INDEX"></a><div style="width: 100%; margin: 0 auto; height: 500px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; background: url(CHARACTERPNG), url(BACKGROUNDURL); background-position: center bottom, center center; background-size: contain, cover; background-repeat: no-repeat;"><!--OPTIONS GO HERE--></div>

SCREEN WITH DIALOGUE (NO ARROW).

See above for description of the first few fields.
TEXTCOLOR the color of the dialogue (shown in a slightly transparent white)
TEXTOUTLINECOLOR yes there are 4 of these... it's shown in black
BORDERCOLOR color of the thin border around name
NAMEGRADIENT1/2 there are 2 name gradients that create the gradient behind the name box.
DIALOGUEGRADIENT1/2 there are 2 dialogue gradients that create the background behind the dialogue box
WHITEBORDER this is the thick border around the dialogue box
CHARACTERNAME the character's name.
INNERGLOW the color of the glow in the dialogue box
DIALOGUETEXT the content of the dialogue
<a name="INDEX"></a><div style="width: 100%; margin: 0 auto; height: 500px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; background: url(CHARACTERPNG), url(BACKGROUNDURL); background-position: center bottom, center center; background-size: contain, cover; background-repeat: no-repeat;"><!--OPTIONS GO HERE--><div style="align-self: flex-end; padding: 10px; width: 100%; color: TEXTCOLOR;text-shadow: -1px 0 TEXTOUTLINECOLOR, 0 1px TEXTOUTLINECOLOR,1px 0 TEXTOUTLINECOLOR, 0 -1px TEXTOUTLINECOLOR"><div style="padding: 3px; max-width: 200px; margin-bottom: -8px; border-radius: calc((3vh + 3vw)/2); border: 1px solid BORDERCOLOR; z-index: 10; position: relative;background: linear-gradient(0deg, NAMEGRADIENT1 0%, NAMEGRADIENT2 100%); text-align: center; text-size: 15px; font-weight: bold;">CHARACTERNAME</div><div style="width: 95%; margin: 0 auto; padding: calc((1vh + 1vw)/2); background: linear-gradient(0deg, DIALOGUEGRADIENT1 0%, DIALOGUEGRADIENT2 100%); z-index: 1; border: 2px solid WHITEBORDER; border-radius: calc((1vh + 1vw)/2); font-size: 13px;-webkit-box-shadow: inset 0 0 1px BORDERCOLOR, inset 0 0 30px INNERGLOW;">DIALOGUETEXT</div></div></div>

SCREEN WITH DIALOGUE (ARROW).

NEXTURL the url to the next screen. Please note that if you are using an internal link (for instance linking to "index") it should have a hashtag like #index
<a name="INDEX"></a><div style="width: 100%; margin: 0 auto; height: 500px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; background: url(CHARACTERPNG), url(BACKGROUNDURL); background-position: center bottom, center center; background-size: contain, cover; background-repeat: no-repeat;"><!--OPTIONS GO HERE--><div style="align-self: flex-end; padding: 10px; width: 100%; color: TEXTCOLOR;text-shadow: -1px 0 TEXTOUTLINECOLOR, 0 1px TEXTOUTLINECOLOR,1px 0 TEXTOUTLINECOLOR, 0 -1px TEXTOUTLINECOLOR"><div style="padding: 3px; max-width: 200px; margin-bottom: -8px; border-radius: calc((3vh + 3vw)/2); border: 1px solid BORDERCOLOR; z-index: 10; position: relative;background: linear-gradient(0deg, NAMEGRADIENT1 0%, NAMEGRADIENT2 100%); text-align: center; text-size: 15px; font-weight: bold;">CHARACTERNAME</div><div style="width: 95%; margin: 0 auto; padding: calc((1vh + 1vw)/2); background: linear-gradient(0deg, DIALOGUEGRADIENT1 0%, DIALOGUEGRADIENT2 100%); z-index: 1; border: 2px solid WHITEBORDER; border-radius: calc((1vh + 1vw)/2); font-size: 13px;-webkit-box-shadow: inset 0 0 1px BORDERCOLOR, inset 0 0 30px INNERGLOW;">DIALOGUETEXT <div style="text-align: right;"><a href="NEXTURL" style="color:TEXTCOLOR;text-decoration: none;">▾</a></div></div></div></div>

OPTIONS.

See above for explanation of the fields, with the new ones as follows:
OPTIONURL the link that the option should follow. Please note that if you are using an internal link (for instance linking to "index") it should have a hashtag like #index
OPTIONTEXT the text that displays as the link to follow
<div style="margin: 0 auto; padding: calc((1vh + 1vw)/2); background: linear-gradient(0deg, DIALOGUEGRADIENT1 0%, DIALOGUEGRADIENT2 100%); z-index: 1; border: 2px solid WHITEBORDER; border-radius: calc((1vh + 1vw)/2); font-size: 13px;-webkit-box-shadow: inset 0 0 1px BORDERCOLOR, inset 0 0 30px INNERGLOW;color: "+text+";text-shadow: -1px 0 TEXTOUTLINECOLOR, 0 1px TEXTOUTLINECOLOR,1px 0 TEXTOUTLINECOLOR, 0 -1px TEXTOUTLINECOLOR"><a href="OPTIONURL" style="color:TEXTCOLOR;text-decoration: none;">OPTIONTEXT</a></div><br/>

CREDIT FOOTER.

In case you want to use only a single screen and not the container, please add this in at the end of your code to link back to this journal. <div align="right" style="width: 100%; margin: 0 auto"><a href="http://shipping.dreamwidth.org" style="text-decoration: none; letter-spacing: 2px; color: #000;text-shadow: 1px 1px 0px #fff;">CODE</a>.</div>

▴TOP

SPREADSHEET.

Since it is pretty difficult to maintain a map of internal links to make a successful set of screens, I've taken the liberty of making a spreadsheet that you can use to more easily generate code and freely test out linking things and editing the story without fear of borking the code.

You can find it here. Please make a copy and then fill in the fields. I've already populated it with the code used for the demo above, in the hopes that the syntax makes more sense by example. There's also a usage guide on one of the tabs.

As always, please enjoy!

▴TOP

Comments

PATCH NOTES

[shipping]

This is a comment to update with logs in case there are significant updates to the code. For the reason that this will be edited, please do not respond to it.

BUG REPORT - DATING SIM

[shipping]

Please report all issues to this comment and don't delete the subject so it doesn't get lost in my inbox. I'll try to resolve all issues in a timely fashion.