wordweb.htm

<html>
<head>
    <title>Word Web</title>
<link rel="stylesheet" type="text/css" href="breaking.css" />
<script src="include.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">


   //This is the userid of the user who owns the web
   var useridWebOwner = 0;
   var strStatus = "";
   var numwebitems = -1;

   //This function is called, once for each child node
   //of the root node, by ParseXMLWithCallback in include.js.
   //We use this to display each node in turn.
   function displayNode(node) 
   {
       switch (node.nodeName)
       {
       case "userid":
            useridWebOwner = getTextFromNode(node);
            break;

       case "status":
            setStatusFromXML(node);
            break;

       case "webitem":
            displayWebItems(node);
            break;

       case "mywordweb":
            setMyWordWebFromXML(node);
            break;

       case "numwebitems":
            setNumWebItemsFromXML(node);
            break;
       }
   }

   //This records the status in our global variable
   //and makes a couple of other adjustments
   //to the display.
   function setStatusFromXML(node)
   {
       strStatus = getTextFromNode(node);   

       if (strStatus == "complete")
       {
          top.location="traits.htm";
       }

       if (strStatus == "passive")
       {
           setTimeout("getWeb()",5000);

           if (numwebitems == 0)
           {
              document.getElementById("paraActiveFirst").style.display = "none";
              document.getElementById("paraPassiveFirst").style.display = "none";
              document.getElementById("paraActiveLater").style.display = "none";
              document.getElementById("paraPassiveLater").style.display = "none";
              document.getElementById("paraWaiting").style.display = "block";
           }
           else if (numwebitems == 1)
           {
              document.getElementById("paraActiveFirst").style.display = "none";
              document.getElementById("paraPassiveFirst").style.display = "block";
              document.getElementById("paraActiveLater").style.display = "none";
              document.getElementById("paraPassiveLater").style.display = "none";
              document.getElementById("paraWaiting").style.display = "none";
           }
           else
           {
              document.getElementById("paraActiveFirst").style.display = "none";
              document.getElementById("paraPassiveFirst").style.display = "none";
              document.getElementById("paraActiveLater").style.display = "none";
              document.getElementById("paraPassiveLater").style.display = "block";
           }
       }
       else
       {
           if (numwebitems == 1)
           {
              document.getElementById("paraActiveFirst").style.display = "block";
              document.getElementById("paraPassiveFirst").style.display = "none";
              document.getElementById("paraActiveLater").style.display = "none";
              document.getElementById("paraPassiveLater").style.display = "none";
              document.getElementById("paraWaiting").style.display = "none";
           }
           else
           {
              document.getElementById("paraActiveFirst").style.display = "none";
              document.getElementById("paraPassiveFirst").style.display = "none";
              document.getElementById("paraActiveLater").style.display = "block";
              document.getElementById("paraPassiveLater").style.display = "none";
              document.getElementById("paraWaiting").style.display = "none";
           }
       }
     
   }

   //This adjusts the display depending on whether it's
   //our word web or not.
   function setMyWordWebFromXML(node)
   {
       strMine = getTextFromNode(node);   

       if (strMine == "yes")
       {
           if (numwebitems == 1)
           {
              document.getElementById("paraTheirWebFirst").style.display = "none";
              document.getElementById("paraMyWebFirst").style.display = "block";
              document.getElementById("paraTheirWebLater").style.display = "none";
              document.getElementById("paraMyWebLater").style.display = "none";
           }
           else
           {
              document.getElementById("paraTheirWebFirst").style.display = "none";
              document.getElementById("paraMyWebFirst").style.display = "none";
              document.getElementById("paraTheirWebLater").style.display = "none";
              document.getElementById("paraMyWebLater").style.display = "block";
           }
       }
       else
       {
           if (numwebitems == 0)
           {
              document.getElementById("paraTheirWebFirst").style.display = "none";
              document.getElementById("paraMyWebFirst").style.display = "none";
              document.getElementById("paraTheirWebLater").style.display = "none";
              document.getElementById("paraMyWebLater").style.display = "none";
           } 
           else if (numwebitems == 1)
           {
              document.getElementById("paraTheirWebFirst").style.display = "block";
              document.getElementById("paraMyWebFirst").style.display = "none";
              document.getElementById("paraTheirWebLater").style.display = "none";
              document.getElementById("paraMyWebLater").style.display = "none";
           }
           else
           {
              document.getElementById("paraTheirWebFirst").style.display = "none";
              document.getElementById("paraMyWebFirst").style.display = "none";
              document.getElementById("paraTheirWebLater").style.display = "block";
              document.getElementById("paraMyWebLater").style.display = "none";
           }
       }
   }

   function setNumWebItemsFromXML(node)
   {
       numwebitems = getTextFromNode(node);   
   }

   //This displays the web item node
   //and other children of that node that are 
   //also web items.
   function displayWebItems(node)
   {
       //TODO: Can emptyTable just set the innerHTML to ""?
       emptyTable("tablePairs");

       displayWebItemAndChildren(node);
   }

   //This function displays a web item node
   //and (by calling this function recursively) all its web item children.
   //We display web items in pairs - for example,
   //"Blue --- Sky".
   function displayWebItemAndChildren(nodeParent) 
   {
       //First, get the name and id of the webitem we're displaying
       var strParentName = getTextFromChildNode(nodeParent, "name");

       var webitemid = getTextFromChildNode(nodeParent, "webitemid");

       //And display a field which gives the user the option
       //to add a new webitem based on that webitem
       if (strStatus == "active")
       {
           displayAddField(strParentName, webitemid);
       }

       var arrayChildren = nodeParent.childNodes;

       //Now iterate through its children
       for (var i = 0; i < arrayChildren.length; i++) 
       {
               var node = arrayChildren[i];

               if (node.nodeName == "webitem")
               {
                   //Get the name of the child
                   var strName = getTextFromChildNode(node, "name");

                   //And display the name of the child
                   //and the name of the parent as a pair
                   displayWebItemPair(strParentName, strName);
 
                   //Now, go through the same process with the
                   //child node, displaying any of its child nodes
                   displayWebItemAndChildren(node);
               }
       }

    }

function displayWebItemPair(nameParent, nameChild) 
{
     var table = document.getElementById("tablePairs");

     var lastRow = table.rows.length;

     var row = table.insertRow(lastRow);

     var cell1 = row.insertCell(0);

     cell1.innerHTML = nameParent;

     var cell2 = row.insertCell(1);

     cell2.innerHTML = " --- ";

     var cell3 = row.insertCell(2);

     cell3.innerHTML = nameChild;
}

function displayAddField(nameParent, webitemid) 
{
     var table = document.getElementById("tableAddFields");

     var lastRow = table.rows.length;

     var row = table.insertRow(lastRow);

     var cell0 = row.insertCell(0);

     cell0.id = "cellParentName" + webitemid;

     cell0.innerHTML = nameParent;

     var cell1 = row.insertCell(1);

     cell1.innerHTML = " --- ";

     var cell2 = row.insertCell(2);

     cell2.id = "cellWebItem" + webitemid;

     cell2.innerHTML = "<input type=\"text\" onKeyDown=\"handleKeyPressWithParams(event, handleReturnWithParams, " + webitemid + ", " + useridWebOwner + ")\" id=\"txtWebItem" + webitemid + "\" /><input value=\"Submit\" type=\"button\" onclick=\"addWebItem(" + webitemid + ", " + useridWebOwner + ")\" />";
}

function addWebItem(previouswebitemid, webuserid)
{
     var strEditFieldName = "txtWebItem" + previouswebitemid;
     var strWebItem = document.getElementById(strEditFieldName).value;
     var strCellParentName = "cellParentName" + previouswebitemid;

     var strParentName = document.getElementById(strCellParentName).innerHTML;
     var urlPost = "addwebitem.php?previouswebitemid=" + previouswebitemid + "&userid=" + useridWebOwner + "&name=" + strWebItem;

     emptyTable("tableAddFields");

     document.getElementById("paraActiveFirst").style.display = "none";
     document.getElementById("paraActiveLater").style.display = "none";

     displayWebItemPair(strParentName, strWebItem);

     doHttpRequest(httpXMLUser, emptyFunction, urlPost, "POST");

     setTimeout("getWeb()",5000);
}
 
   function getWeb() 
   {
        doHttpRequest(httpXMLTimer, handleGetHttpResponse, "getweb.php?returnwebtobuild=1", "GET");
   }

   function handleGetHttpResponse() 
   {
       parseXMLWithCallback(httpXMLTimer.responseXML, displayNode);
   }

function handleReturnWithParams(previouswebitemid, webuserid)
{
    addWebItem(previouswebitemid, webuserid);
}

</script>
</head>
<body onload="getWeb()">
<h1>Word Web</h1>
<p class="intro" id="paraMyWebFirst" style="display:none">Now, starting with your favourite colour, you're going to build a web of words to inspire your character.</p>
<p class="intro" id="paraTheirWebFirst" style="display:none">You're now going to build a web of words to inspire your partner's character, starting with their favourite colour.</p>
<p class="intro" id="paraWaiting" style="display:none">Your partner hasn't entered their favourite colour yet. The game will carry on once they have.</p>
<p class="intro" id="paraMyWebLater" style="display:none">You're building a web of words to inspire your character. Here's the web so far:</p>
<p class="intro" id="paraTheirWebLater" style="display:none">You're building a web of words to inspire your partner's character. Here's the web so far:</p>
<table border="0" id="tablePairs" class="highlighted">
</table>
<p id="paraActiveFirst" style="display:none">To start the web, enter a word that this colour reminds you of.</p>
<p id="paraPassiveFirst" style="display:none">Your partner will add the first word to the web.</p>
<p id="paraPassiveLater" style="display:none">Your partner will now add a word to the web.</p>
<p id="paraActiveLater" style="display:none">It's your turn to add a word to the web. Look at these words and enter another word inspired by that word.</p>
<table border="0" id="tableAddFields">
</table>
</body>
</html>