Pixie et al… wonderful job, I am currently in the process of converting a game I started in Q5. I like what I am seeing so far, but I did bump into some issues…

1. There was no example of how to use css in the msg function. So it took a little time to work it out. This is what worked for me:
   msg(‘string to show’,{},’cssClassUsed’)

2. Is it possible to set the visibility of items? I have a remote that is under some cushions and I don’t want it to show up in the pane until the player moves the cushions.

3. I have a prolog in the game and I would like to hide the compass and other panes until it finishes. Is that possible?

4. I am moving the player from one room to another with “moveChar” it moves him, but the panes are not being updated. Ex. The compass continues to show the exits for the room moved from until I exit to another room. (This was actually an attempt to deal with not being able to hide the panes - the user starts in a blank room and is programmatically moved to the actual starting point after the prolog.)

Thanks for all your efforts!

Thanks for the comments.

1 Docs updated.

2 I would use isApparentTo on the remote, perhaps like this:

  isApparentTo:function(situation) {
    if (situation === world.LOOK && !w.cushions.moved) return false;
    return true;
  },

3 Do this in setting.setup:

    document.querySelector('#quest-map').style.display = 'none'

Do this after the prolog:

    document.querySelector('#quest-map').style.display = 'block'

4 Use world.update() to force the panes to update.

That said, it should be called anyway. Is the player object set to be the player? In particular is the "player" attribute set to true? I am aware that I am using the word "player" alot there, and it may not be clear what I mean, so let me know!

Thanks for the response!

1. Cool! Keeping up with the documentation and setting its style can be a bear! In many projects like this the documentation can be non-existent, thank you, thank you, THANK YOU, this is not the case... I see that you often times give the more complex examples for many of the functions and attributes but gloss over or ignore a simple example. I am new to both JS and QJS (but not programing as a whole so I'm not completely in the dark.) Wading through can be a steep climb. If it is possible I would like to offer some time to work on the docs as I go.

2. I'll look at this at a later date, for now I will probably try moving an Item into place from an "offstage" room if the player uncovers where an item should be.

3. This solution does not seem to work, but it could be I am trying to implement it incorrectly.

settings.setup = function() {
  document.querySelector('#quest-map').style.display = 'none'
  picture('NotMyHouse.png')
  msg("Version : " + settings.version)
  msg("Made with {link:QuestJS v.0.9:https://github.com/ThePix/QuestJS}")
  hr()
  wait()
}

if you go here: http://weuntangle.com/nmh/
you can see that the left pane is still visible with the compass etc. still there. I never implement the script you provided to turn it back on.

document.querySelector('#quest-map').style.display = 'block'

4. This does not seem to work either. This is where I am currently trying to implement worldUpdate() I have put it in two places just to see the results, but again could be a noob mistake on my part.. I have tried doing this in other locations with the same results. Play through the game "(at the above link) until you get to the Living Room.

createItem("Columbus", PLAYER(), {
  loc:"Prolog",
  synonyms:['me', 'myself'],
  examine: "Would you look at me. I'm the perfect fit for a detective. Rumpled overcoat and all.",
})

createRoom("Living_Room", {
  desc:function() {
    if (this.visited === 0) {
      world.update()
      msg("...",{},'rudy-words')
      msg("...",{},'columbus-words')
      msg("...",{},'rudy-words')
      msg("...",{},'columbus-words')
      msg("...",{},'rudy-words')
    }	
    else {
      msg("...",{},'rudy-words')
    }
    return ""
  },
  examine: "The ugly living room.",
  beforeEnter() {clearScreen()},
  north:new Exit("Kitchen"),
  south:new Exit("Foyer"),
})

createRoom("Prolog", {
  desc:function() {
    clearScreen()
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    wait()
    clearScreen()
    msg("...",{},'rudy-words')
    msg("...",{},'columbus-words')
    msg("...",{},'columbus-words')
    msg("...",{},'rudy-words')
    msg("...",{},'columbus-words')
    wait()
    clearScreen()
	w.Columbus.moveChar(w.Prolog.east)
	world.update()
    return ""
  },
  
  east:new Exit('Living_Room'),
})

5. NEW: I have noticed that the beforeFirstEnter(), beforeEnter(), afterEnter(), afterFirstEnter() functions don't really work well with the first room that the PLAYER is in (Which is kind of expected as he is already in the room when the game is created.) What is the best way to trigger actions on the first show of this room (Living_Room was the first room initially thus all the code in the desc function.

Thanks again for all your assistance
Steve

6ish. Also, I noticed that it shows the Items and exits twice when the player first enters the living room...

1 - I keep the documentation up-to-date for my own benefit as much as anything. I refer to it a lot when creating, and add examples as and when I come across them. If you want to contribute, that would be great. Or have ideas how to make it easier to find stuff, which is, I suspect, the biggest problem now.

3 - Apologies, bad copy-and-paste by me; I forgot to correct the CSS ID. It should be be "#panes", not "#quest-map":

document.querySelector('#panes').style.display = 'none'

4 - My bad again. world.update() updates the game world! I should have said:

endTurnUI(true)

5 - I think beforeEnter does work at the start of the game (does for me anyway!), but it is happening before your introductory text. I am not sure if that is coming from Living_Room, or is it from prologue and you move the player? I would put the prologue in settings.setup, and then use Living_Room.desc for the actual room description.

I have to admit, I am not sure that that will work quite as you want, but if there are issues doing it that way, I would consider that a bug, and in need of fixing. So let me know how it goes!

6 - I am going to hope resolving 5 will fix this. I have not seen that in my example games. It could be related to moving from prologue - if that is happening.

By the way, give your objects names in lower case ("sofa" not "Sofa"); if they start with a capital, Quest will assume they are proper names.

Awesome! Thanks for all the info and the tip on capitalization.

hhhmmm... Okay, 3 and 4 are resolved, sort of. If all I do is turn off the panes it works, but no matter where I have tried to turn the panes back on, it turns the panes on even for the time that I am showing the prolog. Columbus and Rudy are moved etc. I am assuming then that wait() is only a UI wait and not a programmatic pause. the JS just keeps churning until it gets to the input request after showing the Living Rooms desc. so I am not sure where to turn the panes back on.

This is the settings function now:

settings.setup = function() {
  document.querySelector('#panes').style.display = 'none'
  picture('NotMyHouse.png')
  msg("Version : " + settings.version)
  msg("Made with {link:QuestJS v.0.9:https://github.com/ThePix/QuestJS}")
  hr()
  wait()
    clearScreen()
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    wait()
    clearScreen()
	w.Rudy.loc = "Columbus"
    msg("...",{},'rudy-words')
    msg("...",{},'columbus-words')
    msg("...",{},'columbus-words')
    msg("...",{},'rudy-words')
    msg("...",{},'columbus-words')
    wait()
    clearScreen()
}

with this setup, and turning the panes back on in the Living_Room.desc function or in the afterEnter function the panes never appear to go away (Probably a quick imperceptible flicker) . If I never turn the panes back on, they do go away, though they also never return :)

6. OK, I removed the room Prologue and just put Columbus back in Living_Room, thus eliminating the moveChar. The Double directions and items issue has gone away now. I will test to see if putting a moveChar later in the game resurfaces the issue (Thus a bug).

Back to 1. I will think about the documentation a little and see what I come up with.

2. still on hold. will test sometime today probably, maybe.

-5. Yeah, I will need to think about how to address. in the mean time this does what I am looking to do....

createRoom("Living_Room", {
  desc:function() {
	if (this.visited === 1) {
	  document.querySelector('#panes').style.display = 'block'
	  msg(" '...",{},'rudy-words')
	  msg("...",{},'columbus-words')
	  msg(" ...",{},'rudy-words')
	  msg("...",{},'columbus-words')
	  msg("...",{},'rudy-words')
    }	
	else {
      msg("...",{},'rudy-words')
    }
    return ""
  },
  examine: "The ugly living room.",
  north:new Exit("Kitchen"),
  south:new Exit("Foyer"),
})

The way output works is it dumps everything in a queue, and just delays when it is displayed. However, you can use the trigger function to do what you want. It puts a function into the output queue, and the function will fire at the right time.
https://github.com/ThePix/QuestJS/wiki/Output-effects-(including-pausing)#the-trigger-function

For your beforeEnter, you may want to pout that inside your trigger function.

Heaven! It's working! Thanks so much for your assist.

This package is incredibly detailed and feature rich. your hard work is very appreciated!

Updated the files to the WIP too...

http://weuntangle.com/nmh/

One more quick bit of weirdness:

After turning the panes back on, the lists in panes do not respond to the first time I click on them (the compass though works as expected.) Ex: the first time I click on the television nothing happens, the second time I click on it, the verb list drops down.

Once I leave the living room, all is well.

Is your game uploaded to the link above?

Yes it is.

One thing I just noted. I am viewing the game using Chrome, and it does not seem to refresh the css and js files. I am going to have to see if there is a way to force a refresh without clearing my cache.... for now it's Ctrl + F5

The issue is that the items do not have the "display" CSS property set at the start; it should be set to "none".

You can fix the side pane issue by changing line 1325 in _io.js from:

        el.style.display = el.style.display === 'none' ? 'block' : 'none'

to:

        el.style.display = el.style.display === 'block' ? 'none' : 'block'

It will then assume "none" is the default. However, I have a feeling there is a reason I did it that way, so it warrants further investigation.

The "item-action" CSS class should have display:none set in default.css. I checked, and your game is using that file. However, by the time the panes are turned on the items have lost that property.

I am wondering if there is something in your code that could be deleting it? Perhaps from when you were trying to hide the panes?

Hmm...

I'll list the stuff I am using. I also made a width change to ".sub-item" . that's the only change I made in default.css

Here is the stuff I am using.

msg_styles.css

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Gaegu&family=Homemade+Apple&family=Kanit&family=La+Belle+Aurore&family=Special+Elite&display=swap');

.columbus-words {
  font-family: 'Special Elite', cursive;
}

.less-words {
  font-family: 'Fredericka the Great', cursive;
}

.ednote-words {
  font-family: 'Kanit', sans-serif;
}

.rudy-words {
  font-family: 'Gaegu', cursive;
  font-size: 20px;
}

.notes-words {
  font-family: 'Homemade Apple', cursive;
  font-size: 30px;
  line-height: 1.4;
}

.gramps-words {
  font-family: 'La Belle Aurore', cursive;
}

.pics-words {
   font-family: 'Special Elite', cursive;
  line-height: .1;
}
 

Settings.js:

"use strict"

settings.themes = ['sans-serif', 'msg_styles']
settings.title = "Not My House"
settings.subtitle = "You Might Want to Defuse that Bomb!"
settings.author = "------------"
settings.version = "0.1"
settings.thanks = []
settings.warnings = "No warnings have been set for this game."
settings.playMode = "dev"
settings.statusPane = false

code.js

"use strict"

settings.setup = function() {
  document.querySelector('#panes').style.display = 'none'
  picture('NotMyHouse.png')
  msg("Version : " + settings.version)
  msg("Made with {link:QuestJS v.0.9:https://github.com/ThePix/QuestJS}")
  hr()
  wait()
    clearScreen()
    msg("...",{},'columbus-words')
    msg("....",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    msg("...",{},'less-words')
    msg("...",{},'columbus-words')
    wait()
    clearScreen()
	trigger(function() {
	  w.Rudy.loc = "Columbus"
	  endTurnUI(true)
	  return true
	})
    msg("...",{},'columbus-words')
    msg("...",{},'columbus-words')
    msg("...",{},'rudy-words')
    msg("...|{dialogue::.columbus-words:Rudy, ...} ...",{},'columbus-words')
    wait()
    clearScreen()
	trigger(function() {
	  document.querySelector('#panes').style.display = 'block'
	  return true
	})
}

The beginning of data.js through the creation of the Living_Room items.

"use strict"

createItem("Columbus", PLAYER(), {
	loc:"Living_Room",
	synonyms:['me', 'myself'],
	examine: "I'm the perfect fit for a detective. Overcoat and all.",
})

// ---- Columbus Items 

createItem("Rudy", NPC(true), {
	loc:"Offstage",
	properName: true,
	examine:function() {
		msg("I look just the way you remember me looking.",{},'rudy-words')
	},
})

createItem("rumpled_trench_coat", WEARABLE(), {
	loc: "Columbus",
	worn: true,
	examine:function() {
		let c = 'columbus-words'
		if (w.Rudy.loc === 'Columbus') {
			msg("Every wrinkle has it's story.|Pull up a chair, this is going to take some time...",{},'rudy-words')
			msg("{once: Hey! A little ironing would make this thing look sooo much better...}",{},'columbus-words')
			msg("{once: Who are you trying to kid? You would need a steam roller to work these wrinkles out!}",{},'rudy-words')
		}
		else { msg("A well worn overcoat",{},'columbus-words') }
	},
})

// ------------------------------------------------------------------------------------------------- Living Room Begin

createRoom("Living_Room", {
	desc:function() {
		if (this.visited === 1) {
			msg(" '{b:Get a load of this place! Yuuch!}'",{},'rudy-words')
			msg("I seem to be in an old abandoned building. This room could have been so much more. Perhaps in it’s heyday it was... |Or perhaps not, back then it's stain covered sofa cushions would have been far less stained and...",{},'columbus-words')
			msg(" '{b:OMG! Is that blood!?}'",{},'rudy-words')
			msg(" 'Rudy, shut up! That's obviously ketchup on the wall.' |I bend a little closer to examine the stain more closely. Yeah, Ketchup...",{},'columbus-words')
			msg(" 'Oh, yeah, I knew that.. Yum! | Well anyway... The place is so exciting! | What a mess! |I'm sure the sofa will not be seeing your back-side any time soon.. | For me though, I wish we were laying on that couch and not on the floor right now!'",{},'rudy-words')
		}	
		else {
			msg("Here we are, in that horrible living room.",{},'rudy-words')
		}
		return ""
	},
	examine: "The ugly living room.",
	north:new Exit("Kitchen"),
	south:new Exit("Foyer"),
})

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Living Room Items

createItem("sofa", SURFACE(), FURNITURE({sit:true, recline:true}), {
	loc:"Living_Room",
	examine:function() {
		msg("Yep, it's a sofa, couch, divan, settee... Only much dirtier!",{},'rudy-words')
	},
})

createItem("tv_remote", SURFACE(), TAKEABLE(), {
	loc:'sofa',
	afterMove:function() {
		{msg("{once:Well at least it's not as filthy as the cushions are.}",{},'rudy-words')}
	},
	examine:function() {
		msg("{once:This has got to be the most complicated and confusing device known to man. Far worse than the legendary VCR clock, more diabolical then the mid 70's digital watch. Two and a half times more mind bending then a folding highchair. Infinitely ...}",{},'rudy-words')
		msg("{once:There's only two buttons Rudy, what are you going on about?}",{},'columbus-words')
		msg("{once:Well, yeah. What's your point?}",{},'rudy-words')
		msg("It is the all-powerful TV Remote!",{},'rudy-words')
	},
})

createItem("power_button", BUTTON(), {
	loc:"tv_remote",
	examine:"this is the Power button",
	onPress:function() {
		return true
	},
}),

createItem("channel_button", BUTTON(), {
	loc:"tv_remote",
	examine:"This is the Channel selector",
	onPress:function() {
		return true
	},
}),

createItem("cushions", {
	loc:"sofa",
	indefArticle:'some',
	examine:function() {
		msg("Cushions are what make a sofa. These cushions make this sofa disgusting!",{},'rudy-words')
		msg("{once:I can't believe you really feel that way Rudy.}",{},'columbus-words')
		msg("{once:I may not, but I do...}",{},'rudy-words')
	},
})

createItem("television", SURFACE(), FURNITURE({sit:false, recline:false}), SWITCHABLE(false),{
	loc:"Living_Room",
	examine:function() {
		let c = ''
		let s = ''
		if (w.Rudy.loc === 'Columbus') {
			s = "So, there could be some confusion stemming from the request to 'Look at television'. |Am I wanting to find out interesting facts about the object 'television' or am I wanting to view programs that are shown on said object 'television.'||If in fact we are simply wishing to garner useless trivia about the TV, then I would say that it is a rather old tube based audio / video device. That is missing a very important knob - the On/Off switch. It probably fell off and bounced into the sofa cushions or some such nonsense.||If however, we want to actually view programing on the above mentioned television, I would say:|{if not television.switchedon:<i>Perhaps you missed the part about an errant On/Off switch</i>}|{if television.switchedon:<i>Maybe you should review the instructions for that complicated remote of yours}"
			c = 'rudy-words'
		}
		else {
			s = "the TV is old and heavy, with a broken On/Off switch"
			c = "columbus-words"
		}
		msg(s,{},c)
	},
})

createItem("note", TAKEABLE(), READABLE(),{
	loc:'television',
	examine:function() {
		msg("How quaint! A note. I’m thinking texting is so much more convenient these days.",{},'rudy-words')
		msg("{once:A note, I should probably take, and read it.} It looks like it was written on a piece of scrap paper.",{},'columbus-words')
	},
	read:function() {
		msg("So Columbus, you smug so-n-so. You thought you could out-smart me! Well here you are in my trap! The whole building is set to go <b>KaBoom!</b> In just a few short minutes. <br/>  If I were you, I would be headin for the door right about now... <br/><br/>  Oh wait! You can’t get out that way because I have nailed two boards in an “X” on the front door! Too bad, so sad.<br/><br/> Lessiarty<br/>",{},'notes-words')
		msg("Well, I guess he told us!",{},'rudy-words')
	},
})

The issue looks to be in Quest 6, rather than your code, and related to how wait is interacting with endTurnUI(true) inside trigger. I am going to have to investigate further.

As a work around, can you leave out endTurnUI(true)? The code above would be fine, you would just have to start Rudy in the room, rather than move him there later, but that should not impact what the player sees. Of course, there may be other stuff that messes that up, but it is worth exploring.

I am not going to be around for a few days by the way.

It is fixed and uploaded to GitHub, but not part of a release yet. You can either just grab the _io.js file from GitHub or clone the whole lot. Or wait until the next release, which will probably be soon, but no promises when.

After my last reply I thought about starting Rudy in place, and that should be fine because I was able to successfully hide the panes. I am glad you were able to work out what the issue was though. I greatly appreciate your efforts and hope that what is occupying you for the next few days is a much needed vacation!

Best,
Steve

2. yay! that works... although I did it this way since I don't want to see it at all unless the cushions have been moved from the sofa:

isApparentTo:function(situation) {
	if (w.cushions.loc === 'sofa') return false;
	return true;
},

the remote is no longer visible until I move the cushions. I will need to increase my understanding of this function, but I'm good with that for now. One in game puzzle complete, a whole bunch more to go....