Walkthrough / Gradual Hints for “EYE” by Arthur DiBianca

Playing Game Hints
1

I wrote a “walkthrough” / gradual hints for EYE by Arthur @dibianca.

Writing Invisiclues for a game like this is pretty weird. The way I implemented it, there’s a text box where you paste the list of words you’ve found so far.

The hint system will figure out the very next file that you need to find, then provide gradual hints to help you figure out the next thing to do.

Special thanks to @JoshGrams for writing up his own Eye Walkthrough in an Invisiclues style. It inspired me to build a hint web app.

7 Likes
2

This looks like just the right thing to implement my own invisiclues for my IFComp game. May I blatantly copy the design? (just the general blurring part etc. I rather prefer to start from a working example instead of blundering around “just to get it to work”) :smiley:

1 Like
3

I, myself, stole the blurring part from this very forum, using the “Blur Spoiler” feature. it works like this: spoiler.

I’ve had very good success just writing invisiclues directly on the forum, like this: https://intfiction.org/search?q=%23invisiclues%20order%3Alikes

I recommend doing the same. They’re particularly handy that way, because people can easily see how to reply to ask for clarification.

If you’d like to copy my HTML, feel free.

My hints use this CSS:

.spoiler[aria-expanded="false"] {
  filter: blur(0.5em);
  cursor: pointer;
}
.spoiler[aria-expanded="false"]:hover {
  filter: blur(0.18em);
}

All of the spoilers look like this:

<span class='spoiler' role='button' tabindex='0' aria-expanded='false'
  aria-label='Reveal hint' aria-live='polite'><span>This is the actual spoiler.</span></span>

And there’s JS on the page to make the spoilers clickable.

document.querySelectorAll('.spoiler').forEach(s => {
    s.addEventListener('click', e => {
        const target = e.currentTarget;
        if (target.getAttribute("aria-expanded") === "false") {
            target.removeAttribute("aria-label");
            target.setAttribute("aria-expanded", "true");
            target.firstElementChild.removeAttribute("aria-hidden");
            e.stopPropagation();
        }
    }, {capture: true});
    s.addEventListener('click', e => {
        const target = e.currentTarget;
        if (target.getAttribute("aria-expanded") !== "false") {
            target.setAttribute("aria-label", "Reveal hint");
            target.setAttribute("aria-expanded", "false");
            target.firstElementChild.setAttribute("aria-hidden", "true");
            e.stopPropagation();
        }
    });
    s.addEventListener('keyup', e => {
        if (e.key === 'Enter') {
            e.currentTarget.click();
        }
    }, { capture: true });
})
3 Likes
4

Cool thank your for your feedback! I think I’ll add the invisiclues as the walkthrough link to my IFComp entry for now, I don’t know if everyone judging IFComp entries is a regular member of this forum. Also it would have the added benefit in having it downloadable. When IFComp is over, I might transition in posting the walkthrough here, then it can also receive commentary/feedback from players.