epilogue.htm

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

   //Get two HTTP Request objects and set them for XML
   var httpGet = getHttpObject(true);
   var httpPost = getHttpObject(true);

   var strStatus = "";

   var iDateNo = -1;

   //TODO: Put this in a header file
   function getTextFromNode(node)
   {
       if (node != undefined)
       {
           if (node.firstChild != undefined)
           {
               return node.firstChild.data;
           }
      }

      return "";
   }

   function getTextFromChildNode(node, childname)
   {
        var nodeChild = node.getElementsByTagName(childname).item(0);

        return getTextFromNode(nodeChild);
   }

   function parseXml(xmlUsers) 
   {
            var nodeRoot = xmlUsers.getElementsByTagName('root').item(0);

                  setPermanentAttractionFromXML(nodeRoot);
                  setCompatibilityCountFromXML(nodeRoot);
   }

function displayDice(elem, type, result, number, functionOnClick)
{
     var collImgElements = elem.getElementsByTagName("img");

     var iDifference = number - collImgElements.length;

     var strImageName = "";

     while (iDifference < 0)
     {
         elem.removeChild(collImgElements[0]);

         iDifference ++;
     }

     while (iDifference > 0)
     {
     if (type == "Rerollable")
     {
         strImageName = "BlueDie";
     }
     else
     {
         strImageName = "RedDie";
     }

     if (result == "Success")
     {
         strImageName += Math.floor (Math.random() * 2 + 5);
     }
     else if (result == "Failure")
     {
         strImageName += Math.floor (Math.random() * 4 + 1);
     }
     else if (result == "Reroll")
     {
         strImageName += "Reroll" + Math.floor (Math.random() * 4 + 1);
     }
     else
     {
         strImageName += "Unrolled";
     }

     var image = document.createElement('img');

     image.src="images/" + strImageName + ".gif";

          if (functionOnClick != 0)
          {
              image.onclick = functionOnClick;
    image.style.cursor = "pointer";
    image.style.cursor = "hand";
      }

     elem.appendChild(image);

        iDifference --;
     }
}

function displayAttraction(elem, type, number)
{
     var collImgElements = elem.getElementsByTagName("img");

     var iDifference = number - collImgElements.length;

     var strImageName = "";

     while (iDifference < 0)
     {
         elem.removeChild(collImgElements[0]);

         iDifference ++;
     }

     while (iDifference > 0)
     {
     if (type == "Permanent")
     {
         strImageName = "PermanentAttraction";
     }
     else
     {
         strImageName = "TemporaryAttraction";
     }

     var image = document.createElement('img');

     image.src="images/" + strImageName + ".gif";

     elem.appendChild(image);

        iDifference --;
     }
}

function setPermanentAttractionFromXML(nodeParent)
{
     var iPermanentAttraction = getTextFromChildNode(nodeParent, 'permanentattraction');

     var elem = document.getElementById("idPermanentAttraction");

     elem.innerHTML = "<p>Your Attraction is " + iPermanentAttraction + "</p>";

     if (iPermanentAttraction< 3)
     {          
    elem.innerHTML = "<p>Your Attraction is " + iPermanentAttraction + ". It's a low score. They don't really seem to have hit it off.";
     }
     else if (iPermanentAttraction < 5)
     {
           elem.innerHTML = "<p>Your Attraction is " + iPermanentAttraction + ". It's a medium score: there's some chemistry going on.";
     }
     else if (iPermanentAttraction < 7)
     {
             elem.innerHTML = "<p>Your Attraction is " + iPermanentAttraction + ". It's a high score: there's a lot of chemistry there.";
     }
     else
     {
               elem.innerHTML = "<p>Your Attraction is " + iPermanentAttraction + ". It's a very high score: the characters are hugely attracted to each other.";
     }
    
}

function setCompatibilityCountFromXML(nodeParent)
{
     var iCompatibilityCount = getTextFromChildNode(nodeParent, 'compatibilitycount');

     var elem = document.getElementById("idCompatibilityCount");

     if (iCompatibilityCount < 3)
     {          
    elem.innerHTML = "<p>You have " + iCompatibilityCount + " compatibilities. That's a low number: the characters don't have much in common.";
     }
     else if (iCompatibilityCount < 5)
     {
    elem.innerHTML = "<p>You have " + iCompatibilityCount + " compatibilities. That's a medium number: the characters have some things in common, but not a huge amount.";
     }
     else if (iCompatibilityCount < 7)
     {
    elem.innerHTML = "<p>You have " + iCompatibilityCount + " compatibilities. That's a high number: the characters have lots in common.";
     }
     else
     {
    elem.innerHTML = "<p>You have " + iCompatibilityCount + " compatibilities. That's a very high number: the characters have huge amounts in common.";
     }
}


   function getEpilogueState() 
   {
        var urlGet = "getepiloguestate.php";
        
        doHttpRequest(httpGet, handleGetHttpResponse, urlGet, "GET");
   }

   function handleGetHttpResponse() 
   {
       parseXml(httpGet.responseXML);
   }

   function handlePostHttpResponse() 
   {
       top.location = "endgame.htm";
   }



   function moveOn()
   {
        var urlPost = "endgame.php";
        
        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

</script>
</head>
<body onload="getEpilogueState()">
<h1>Epilogue</h1>
       <div><span id="idPermanentAttraction"></span></div>
       <div><span id="idCompatibilityCount"></span></div>
<p>To end the game, talk to your partner, and each answer the following questions.</p>
<p><i>Do the characters stay together after the third Date?</i></p>
<input type="text" size="50">
<p><i>When did your character fall in love with the other?</i></p>
<input type="text" size="50">
<p><i>What are the long-term chances for this relationship?</i></p>
<input type="text" size="50">
<input type="button" style='display:block' id="buttonNextDate" value="End the game" onclick="moveOn()">
</body>
</html>