I want to build a game that mimics point and click games - commands being entered by the player using the display verb drop down or by the command pane.

there are currently two problems I'm struggling with:

1. I only want the Room description, object list, exit list and the last command response visible. I've tried using HidePreviousTurnOutput but this makes the room description disappear. I've tried using StartNewOutputSection and HideOutputSection but can only make that work with 'wait' however that ignores the next command chosen.

2. I want to move the Command Pane to the bottom of the screen under both the room description and the command response.

any help would be appreciated.

Hmm… that's an interesting one. I think it would require some messing around with javascript, in any case.

It would probably be easier by modifying some of the core functions. For example, at the end of the funcion ResolveNextName you could find the lines:

        // This is the bit that actually runs the commands
        do (game.pov.currentcommandpattern, "script", game.pov.currentcommandresolvedelements)

and change that to:

        ClearScreen()
        ShowRoomDescription()
        do (game.pov.currentcommandpattern, "script", game.pov.currentcommandresolvedelements)

Or… if you want it to do the same thing even if you mistype a command, you could modify HandleCommand, and add two lines at the beginning:

        ClearScreen()
        ShowRoomDescription()

HandleCommand is run immediately whenever the user hits enter on a command or clicks a command link or button; so clearing the screen and outputting the room description then would ensure that it's always at the top of the display.

The disadvantage of both of the methods above is that the description is shown before running the command. This means that if the command is "go north", the display will then contain nothing but two room descriptions.

So, how do we deal with that? It seems like it would make sense to display the room description after running the command, and then move it to the top of the display.

You'd want to set the attribute game.showdescriptiononenter to false ("Show room description when entering a room" in the editor), so that moving doesn't cause the description of the new room to be displayed twice.

Then we can use outputData (an invisible page element that contains some information useful when saving a game) to mark a position in the output.
Add a turnscript (or add to the end of the function FinishTurn if you're using the desktop editor) a little script:

// Remove everything *before* outputData (the previous turn's output).
JS.eval("$('#outputData').prevAll().remove();")

// Move outputData to put it after this turn's output
JS.eval("$('#outputData').appendTo('#divOutput');")

// Create a new div and put the current room description in it
//   setting the alignment forces the creation of a new div, to make sure we don't pick up any of the other output by mistake,
SetAlignment("left")
ShowRoomDescription()

// Move everything after divOutput (the description we just generated) to before the current turn's output
JS.eval("$('#outputData').nextAll().prependTo('#divOutput');")

// And ensure we've got a new div to hold the next turn's output:
SetAlignment("left")

When I used something like this on my game 'circus', I made the room description 'sticky' rather than clearing previous turns' output. This means that the room description sticks to the top of the screen and cannot scroll off the top, so it remains visible, but you can still scroll back if you want to. Unfortunately that approach didn't work so well, because the offline player uses a very old version of Chromium which doesn't support sticky.

That solves question 1).

I've created a turn script:

ClearScreen
ShowRoomDescription
do (game.pov.currentcommandpattern, "script", game.pov.currentcommandresolvedelements)

rather than mess around with the core functions.

I don't think that will work like you intended.

That will do the player's action, clear the screen, show the room description, and then do their action again.

This might not be obvious, but it could cause odd behaviour for some things. For example, when the player tries to pick up an item, it will pick it up the first time. So the message the player sees will always be "You are already carrying it." even if they weren't. This will cause more problems if your command involves ShowMenu, as it will try to display the men twice and that causes an error.

My third option addresses this by displaying the room description after the player's action, and then rearranging the elements on the screen. I haven't tested it, but I think this should work. It's probably the only reliable way to do this without modifying the core functions.

I want to move the Command Pane to the bottom of the screen under both the room description and the command response.

Hmm… something like this?

JS.eval("$('#commandPane').insertAfter('#divOutput').css({width: 680});")

Top of my head answer there, probably needs some tweaking.

(stuff like this would go in the "UI Initialisation Script" on the Advanced Scripts tab of the game; which you might need to enable on the "Features" tab first)

I think I've solved it!

I tried method 3 but that behaved oddly (Sometimes showing the room description twice but not always - yes, I had automatically generate room descriptions to false)

So I went back to basics and set a variable game.response to store the the output; for example the object description is set to run script with the script being:

game.response = "Something"

and the turn script being:

ClearScreen
ShowRoomDescription
msg (game.response)

I can use the run a script option on exits to do the same.

JS.eval("$('#commandPane').insertAfter('#divOutput').css({width: 680});")

That worked perfectly.

Thank you for your help.

yes, I had automatically generate room descriptions to false

You mean "Show room description when entering a room"?

"automatically generate room descriptions" just turns off the "You can see" and "You can go" lines.