hi, I'm amos! πŸ¦€ I make articles & videos about how computers work πŸ»β€β„ cool bear's less cool counterpart ✨ be kind


Zarkonnen
@Zarkonnen

Here's some example code for making choose your own adventure style interactions using pure inline CSS that works in Chosts.

Of interest to @everest @nora and @fasterthanlime I imagine.

<div style="position: relative;">
	<details>
		<summary>Hello</summary>
		<div style="position: absolute; left: 0; top: 0; width: 400px; height: 400px; background: white;">
			<p>Welcome to Fake Twine!</p>
			<details>
				<summary>Option 1</summary>
				<div style="position: absolute; left: 0; top: 0; width: 400px; height: 400px; background: white;">You have chosen option 1.</div>
			</details>
			<details>
				<summary>Option 2</summary>
				<div style="position: absolute; left: 0; top: 0; width: 400px; height: 400px; background: white;">You have chosen option 2.</div>
			</details>
		</div>
	</details>
</div>

fasterthanlime
@fasterthanlime

it would be a shame if someone else were nerdsniped into writing a compiler that takes a twine story and compiles it into that format


You must log in to comment.

in reply to @fasterthanlime's post:

This inspired me to have a go at a different way to approach this, though still - unless we get inline stylesheets (for checkbox:checked ~ game #id), the only obvious way to do variables is to make it so that an item is a summary and everything it unlocks is inside its details, which isn't very nice for putting new things inside text.

That, or you "bake" different versions of each "page" for every combination of variables.