Hacked together some tag highlighting in the Twine editor, if anyone's interested.

kelpsie

The lack of organizational tools in Twine drives me up the wall, so I threw together a quick and dirty (very dirty) way to at least organize by passage tags.

Before: http://i.imgur.com/IQdSbOE.png
After: http://i.imgur.com/w6GlXQB.png

You just copy and paste the following code into the javascript console (press F12), and press enter.

function highlight()
{
	
	vuexStore.state.story.stories.forEach(function (story) {
		if (story.name == document.title) {
			story.passages.forEach(function (passage) {
				passage.tags.forEach(function (tag) {
					if (tagColors.hasOwnProperty(tag)) {
						[].forEach.call(document.getElementsByClassName("passage"),
							function (el) {
								if (el.getElementsByClassName(
									"title")[0].getElementsByClassName(
									"text")[0].innerText == passage.name) {
									el.style.color = tagColors[tag];
								}
							}
						);
					}
				});
			});
		}

	});
}

var tagColors = {
	"Default":"",
	"Setup":"red",
	"Event":"cyan"};

window.setInterval(highlight, 1000);

Anything with the tag "Setup" will be highlighted red. Anything tagged "Event" will by highlighted cyan.
Those are just the examples I left in the code, though. just go into the javascript console and change the tagColors variable to your liking.
For instance:

tagColors["Forest"] = "green";

Then anything tagged "Forest" will be highlighted in green.

The highlight doesn't go away if you remove the tag, though. Either tag the passage as "Default", or click the home button on the bottom left, if you want to reset the highlights. Like I said, dirty.

kelpsie

https://pastebin.com/MCzbthr4

Here's a more sane version. Also it does coloured shadows, instead of title color.

http://i.imgur.com/yhC2dUp.png

Kosmo

I still don't get how to use it. o_o

greyelf

Kosmo wrote: »

I still don't get how to use it. o_o

WARNING: The current version of @kelpsie's hack only works if you are using one of the install-able releases of the Twine 2 application, it does not work if you are using one of the web-browser based releases.

NOTE: The following is a set of more detailed instructions on how to install this hack for those wishing to, they should not be taken as either an encouragement or an endorsement for people to do so. I leave that decision up to the individual.

1. Run the Twine 2 application and open a story you wish to test either the Passage Title Colouring or Passage Frame Colouring technique on.

2. Open the application's built-in (Chrome) Developer Tools window by pressing the F12 function key on your keyboard.

3. There should be a panel labelled Console in the lower left corner of the Tools window, if there isn't then select the Console tab on the menu bar across the top of the Tools window.

note: The last instruction was written from a Windows user's point-of-view, the may need translating for people using another operating system but the point of them is to obtain access to the Javascript Console built into the Developer Tools.

4. Choose which of the two colouring techniques you want to try then click on the relevant pastebin link below.
a. Passage Title Colouring or b. Passage Frame Colouring

note: The code contained in both of the above pastebins is the same as the code supplied by @kelpsie but it has had all the white-space and line-breaks removed to make it easier to enter into the Console.

5. Highlight the contents of the RAW Paste Data section of the relevant pastbin page and copy the highlighted code into your clipboard.

note: How you do that depends on which operating system you are using, I will assume you know how to do this.

6. Paste that code into the active/last line within the Tools Console, then press the ENTER key on your keyboard. You have now created a temporary function named highlight which will persist within the Twine 2 application unto you close the application down.

7. Enter a set of tag colours pairs into the Tools Console.

These will be used later by the highlight function to colour the relevant part of each passage shown in the Story/Passage Map. Each pair is made up of:
a. The name of the passage tag you wish to use to mark a set of passages.
b. The CSS color value you want the marked set of passages to have.

The following is a copy of the relevant section of @kelpsie's example. It assigns no colour as a default, it associates red to passages tagged with Setup, and it associates cyan to passages tagged with Event.
You can replace both the Tag Names and the Color Values with your own values.

var tagColors={"Default":"","Setup":"red","Event":"cyan"};

... remember to press the ENTER key after you have finished typing/cut-n-pasting your tag colour pairs in.


8. Activate the highlight function.

The following code creates a timer event which will continuously call the highlight function every second until you close down the Twine 2 application. This code needs to also be entered into the Tools Console.

note: The 1000 value is the number of milliseconds (1000th of a second) between each invocation of the highlight function, you can increase this value if you wish to.

window.setInterval(highlight, 1000);

... remember to press the ENTER key after you have finished typing/cut-n-pasting the above activation code into the console.


WARNING: You will need to do all of the above steps each time you run the Twine 2 application, as this hack is not permanent.

kelpsie

Great writeup. I forget sometimes the extent to which things need to be explained to people with different skillsets.

Gryphbear

Fascinating. Could be useful when you actually start a new project. Unfortunately I have way way way too many Passages to tag lol, but... I might do this for mine as a workaround trying to see at a glance what kind of Passages are what. Alright, I've copied it to a document so I can use it if I feel like.

Kosmo

Thany you very much, greyelf and kelpsie! This is really great!