Code to Harlowe 3.3.3

Hello, i am a totally beginner and i am trying to do my first story on twine.

I want to add somme effects on my story like this achievement effect : https://codepen.io/djekl/pen/jqVKXV

However, when i copy past the code in stylesheet ; java script and in my html passage that doesn’t work and i don’t understand why.

I apologize if this is a stupid question but can someone explain to me what i did wrong ?

Thank you

There are a number of issues with both what you did, and with the codepen example itself, that need to be resolved.

1: The content of a project’s Story JavaScript area is processed/executed before that of the 1st Passage being shown to the end-user. This means the HTML elements targeted by that CodePen JavaScript didn’t exists at the time that code was executed, which is why that code failed.

2: The content of that CodePen’s CSS tab is written in SCSS, which is a variation of standard CSS that needs to be compiled before a web-browser will understand it.

The title area of that CSS tab has two icons (a cog and a down-arrow) to the far right of it. Selecting the down-arrow will open a context menu, and selecting its View Compiled CSS menu item will cause the content of that tab to be converted into standard CSS. The CSS is now ready to be copied into your project’s Story Stylesheet area.
note: Don’t copy the 1st rule that targets the html & body elements, as Harlowe handles setting up the default font & colours on the custom <tw-story> element instead,
eg. don’t copy this part…

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #333;
  color: #fff;
}

3: By default Harlowe will convert all line-breaks it finds within the contents of a Passage into HTML <br> elements, and this behaviour will affect the layout of the <div> structure within the CodePen HTML tag when it is copied to a Passage.

The following is a Harlowe variant of that CodePen’s HTML tab, that uses a Variable to control what is shown within the “banner”. The HTML structure is contained within a Hidden Hook so it can be “revealed” and “hidden” as needed. A link is used to trigger the “revealing”. and a (live:) macro to “hide” it again after the animation has finished.

(set: _achievement to '1,000 &ndash; CSS Achievement Banner')

(link-repeat: 'Show Achievement')[{
	(show: ?achievement)
	(live: 11s)[
		(stop:)
		(hide: ?achievement)
	]
}]

{
|achievement)[
<div class="container">
	<div class="achievement-banner animated">
		<div class="achievement-loader"></div>
		<div class="achievement-loader"></div>
		<div class="achievement-loader"></div>
		<div class="achievement-loader"></div>
		<div class="achievement-loader"></div>
		<div class="achievement-trophy xbox-icon xbox-logo"></div>

		<div class="achievement-text">
			<p class="achievement-notification">Achievement Unlocked</p>
			<p class="achievement-name"><i class="xbox-icon xbox-gamerscore"></i>_achievement</p>
		</div>
	</div>
</div>
]
}

4: The CodePen CSS was designed using specific assumptions about the HTML page the “banner” would be shown in, and some of those assumptions aren’t correct for a Harlowe based page, which how the visual effect behaves in Harlowe.
eg. the “story” area of a Harlowe page has specific paddings & width, the “passage” area is the minimum height needed to display the visual content of the ‘current’ Passage.

Some of these differences are easier to overcome than others, for instance the following CSS changes the minimum height needed behaviour just mentioned. It also assigns the same font & colours to the achievement Named Hook, which is containing the HTML of the “banner”.

tw-story, tw-passage {
	height: 100%;
	/* padding: 0; */
}

tw-hook[name="achievement"] {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 18.4px;
}

However other differences, like the placement of the “banner” within the page and how its textual content behaves within the “banner” area, will require quite a bit of trial and error to get right.

I apologise that I don’t have the time to spend doing that “trial and error”, so I will leave that up to you to do.

Thank you a lot !

You litteraly solve my probleme.

I did the motifications of height and it works perfectly !

Thank you for your time !