#coding question

(This is only a half-joke, the joke being I have the worlds worst executive disfunction and also so much ambition)

Hello, I have a question, maybe some of you have an answer / solution for it.

With the NPF posts, the default post type is always "text". In a theme, it kind of looks, well, silly if everything has a text indicator, even when the only content is an image or video.

I tried several things with CSS (tragically you cannot nest the :has() selector it seems) and consulted with ChatGPT due to my very limited knowledge of JavaScript. The result is something like in the JS Fiddle below.

While the code works in the JS Fiddle, it does not work in my theme, as can be seen in the example post below:

Thank you in advance for any suggestions, help, solutions to make this thing work! <3

Hi Anon,

@nyehilismwriting created 2 templates for Sugarcube but I think you mean this one, right? (fyi you'd probably have a better explanation coming from its creator directly ;)

The notification macro is Chapel's Notify Macro (demo, explanation and code). You need to have both JavaScript and CSS code in your game (in Story Javascrip and Story Stylesheet respectively). The template provides both, but make sure first you didn't delete it by mistake. If one is missing, it won't work.

In the template, the notifications are linked to the Achievements setting (see code below). If that setting is enabled, the notifications on the template will appear. If not, it won't. That's because the Notify macro is nested in an <<if>> statement (if X is true, then Y; else Z).

<<if settings.achievements>><<notify 3s>>Achievements active!<</notify>><</if>>

To have a notification appear without having to faff about in the settings, just only use the Notify Macro code.

<<notify 3s>>Notification Text<</notify>>

Though, I would advise you to have an option for people to disable the notification (for accessibility/animation trigger/etc...). To do that, you have 2 options (that I know of):

have the setting linked to the CSS code (1)

wrap the notify macro in an <> statement (above or 2)

1- Setting linked to CSS

With this case, you can use the Notify Macro plainly (<<notify>>text<</notify>>).

When triggered, the Notify macro adds a CSS class to the code "open", which makes the notification appear. Normally, the code looks like this:

#notify.open { right : 0; }

Since we don't want it to be displayed, we need to create another CSS class and tell the program not to show the notification if it is enabled. The CSS would then look like this:

html.nonotif #notify.open { display: none; }

and the JScrip code for the Setting should look like this:

var settingNoNotificationHandler = function () {     if (settings.nonotif) { // is true         $("html").addClass("nonotif");     }     else { // is false         $("html").removeClass("nonotif");     } };     Setting.addToggle("nonotif", {     label : "<b>Disable Notification</b>",     default : false,     onInit   : settingNoNotificationHandler,     onChange : settingNoNotificationHandler });

Edit: Code can be copied from here.

2- Settings/<<if>>

Right now, the template links the notification to the Achievements setting. If you want a separate setting for the Notification itself, you can just copy the JavaScript code from the Achievements setting and change the name:

Setting.addToggle("notifications", { label : "Enable Notification.", default : true, });

And the code in the passage should look like:

<<if settings.notifications>><<notify 3s>>Notification active!<</notify>><</if>>