A highlighting macro and a scrolling code I made

Authoring Twine
1

Twine Version: Sugarcube 2.36.1

I made two code things for my latest interactive poem. One is a highlighting macro (my first ever macro) and the other is an autoscroll. I figure they may be useful to others.

(For the serious coders out there, feel free to critique my code-- just do it gently)

Autoscroll

Here’s the autoscroll first. Basically it smoothly scrolls 1000px every 250 ms trying to hit the bottom of the page - as long as you’re at the bottom of the page. If you scroll up at all (or are otherwise not at the bottom of the page) then it stops, and if you scroll back down to the bottom, the behavior continues.

It…runs a lot though…so you could up the 250ms to something else if you’re not scrolling too much (my game was a poem with timed text, so it scrolls quickly). This code runs automatically.

scrolldown.js

const userHasScrolledDown = {scroll: 0}
const story = document.getElementById('story')
const storyStyles = window.getComputedStyle(story);


window.addEventListener('scroll', function() {
    
    userHasScrolledDown.scroll = Math.abs(document.body.scrollHeight - window.scrollY - window.innerHeight + parseInt(storyStyles.getPropertyValue("margin-top")) + parseInt(storyStyles.getPropertyValue("margin-bottom")))


    }
)


function scrolldown() {

    setTimeout(function() {
        if(userHasScrolledDown.scroll <= 1) {
        window.scrollBy({top: 1000, behavior: 'smooth'});
        }
        scrolldown();
    }, 250)

}

scrolldown();

Mouseover Highlight

The second one is a mouseover highlighting macro for changing the color of text other than what you actually hovered over. In other words, if I hover over text A, both text A and text B will change color-- but hovering over text B doesn’t have to do the same.

The usage is <<highlight "[class of text you want to hover over]" "[optional class of text you want to change color without being hovered over]" "[optional hex/html color]">> The first argument denotes what class must be hovered over to change the colors for the second argument’s class. The first class will change color as well. The second class, when hovered over, will not do do the same.

The second argument and third argument can be skipped over, though you if you don’t want a second argument but want a third argument, you should put the second one in an empty quote like this <<highlight ".hoverClass" "" "color">>.

Put the . for each class or it won’t work!

You should have it in an interactive macro after all the elements with the classes you’re using have rendered, otherwise it will do nothing. Alternately you can put it in a PassageDone passage or <<done>> macro.

highlight.js - edited some syntax slightly with help of someone (maliface) on the twine discord

Macro.add('highlight', {
    handler: function () {

        const hover = $(this.args[0]);
        const highlights = $(this.args[1]);
        let color;
        if(this.args[2]){
            color = this.args[2];
        }
        else {
            color = "yellow"; // you should set a default color here (can be any valid css color)
        }

        hover.on("mouseover", (event) => {
                    hover.css({'color': color, 'transition': 'color 400ms ease-in'})
                    if(highlights.length !== 0) {
                        highlights.css({'color': color, 'transition': 'color 400ms ease-in'})
                    }
                })
                
        hover.on("mouseout", (event) => {
                    hover.css({'color': 'unset', 'transition': 'color 400ms ease-in'})
                    if(highlights.length !== 0) {
                        highlights.css({'color': 'unset', 'transition': 'color 400ms ease-in'})
                    }
                })
      }
});

Here’s an example with a twine passage - note that the classes can be combined in each element! There should only be one hover class per element. I don’t know how it would work otherwise – I think it would break! The element can have many highlight classes though.

@@.hoverTwo.highlightOne;Text 1 that will highlight Text 2 and be highlighted by text 3@@
@@.hoverThree.highlightTwo;Text 2 that will highlight Text 3 and be highlighted by text 1@@
@@.hoverOne.highlightThree;Text 3 that will highlight Text 1 and be highlighted by text 2@@

<<linkappend "Highlight on">>
<<highlight ".hoverOne" ".highlightOne" "blue">>
<<highlight ".hoverTwo" ".highlightTwo" "yellow">>
<<highlight ".hoverThree" ".highlightThree" "red">>
<</linkappend>>
GIF demonstration

highlight example2

6 Likes