Attempting a Quest 2.19 Theme for a Quest 5 Game

[KVonGit]

Quest 2.19

Windows 98SE

---

Quest 5.9

---

Anyone who has seen me attempt to do anything involving CSS will immediately notice two things:

• I'm lucky to have gotten this far!
• I probably have some bits of code which could use improvement.

Current JS

I plan to finish porting KOWW to 5.9 before I return to this. So, it will likely be two or three days before I start making any revisions to the code posted below.

Comments or suggestions are more than welcome. I think I can get the location bar the same width as the divOutput element and make the game panes element take up that space, but I can't figure out how to make the compass pane stick to the bottom. I can get the accordion down there, but I couldn't get the label down on top of the accordion.

I also want to make the places and objects pane's items' buttons appear to be static, just underneath the list.

I think the arrows in the compass should be fairly simple, too, but moving the "Out" button to the centre and hiding the rest might prove to be a little challenging.

var gameDefaultFont = "'Courier New', Courier, monospace";

function initKOWWInterface(font=gameDefaultFont){
  var KOWWItemsLabel = '<h3 id="KOWWItemsLabel" style="color: white; background: purple; text-align:center; font-family:' + font + ';"><span>Items:</span></h3>'
  $('<span id="command-pre" onload="$(this).css("height",$("#txtCommand").height())"><span id="command-purple" style="color:white;background:purple;padding:4px;vertical-align:super;"><span style="text-decoration:underline">C</span>ommand:</span></span><button id="send-btn" onclick="runCommand();event.preventDefault();">&nbsp;&nbsp;</button>')
    .insertBefore($('#txtCommand'));
  $('#txtCommand')
    .css('width','550px')
    .appendTo($('#command-pre'));
  setCss("#send-btn","min-height:65%;border:1px solid black;margin-left:1px;");
  setCss ("#txtCommandDiv", "position:fixed;bottom:10px")
  setCss ("#gameContent", "margin-bottom:70px;")
  setInterfaceString ("TypeHereLabel", "")
  setCss ("#inventoryLabel,#placesObjectsLabel,#compassLabel", "color:white;background:purple;")
  setCss ("#inventoryLabel .ui-icon,#placesObjectsLabel .ui-icon,#compassLabel .ui-icon", "background:purple;")
  $('#placesObjectsLabel .accordion-header-text')
    .html('Quick actions:');
  $('#inventoryLabel .accordion-header-text')
    .html('Items:');
  $('#placesObjectsLabel,#compassLabel')
    .removeClass('ui-corner-top');
  $('#compassLabel .accordion-header-text')
    .html('Compass:');
  $('#placesObjectsAccordion,#inventoryAccordion,#compassAccordion')
    .removeClass('ui-corner-bottom');
  setCustomStatus ("<div style=\"color:black;text-align:left;font-family:" + font + ";\">Items:<br/><span id=\"KOWW-items\">&nbsp;• milk</span></div>")
  $('#customStatusPane')
    .insertBefore($('#placesObjectsLabel'))
    .css('border-radius','0px','border','1px solid black');
  $(KOWWItemsLabel).insertBefore($('#customStatusPane'));
  setCss('.ui-widget-content, #placesObjectsLabel, #compassLabel, #KOWWItemsLabel','border:1px solid black');
  setCss('#KOWWItemsLabel','margin-top:10px;margin-bottom:0px;');
  setCss('#customStatusPane','margin-top:0px;');

  var KOWWLocation = '<div id="KOWWLocation" style="background:#e3e3e3;font-family:' + font + ';color:blue;font-size:10pt;"><span id="KOWWLocationPre" style="color:white;background:purple;font-size:10pt;padding:1pt;margin-right:2px;">Location:</span><span id="KOWWLocation-holder"></span></div>';
  
  $('#location').replaceWith(KOWWLocation);

}

[KVonGit]

Getting closer...