datebackup.htm

<html>
<head>
    <title>Date</title>

<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 iRerollableDiceAwarded = 0;

   var iRerollableSuccesses = 0;
   var iSingleRollSuccesses = 0;

   var iRerollFailures = 0;
   var iSingleRollFailures = 0;

   var iAttractionDice = 0;
   var iDateNum = 0;

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

      return "";
   }

   function getTextFromChildNode(node, childname)
   {
     if (node)
     {
         var collChildren = node.getElementsByTagName(childname);

         if (collChildren.length > 0)
         {
            var nodeChild = collChildren.item(0);

            return getTextFromNode(nodeChild);
         }
     }
 
     return -1;
   }

   function parseXml(xmlUsers) 
   {
            //TODO: This is inefficient: just take the first child node and check it's called "root"
            var nodeRoot = xmlUsers.getElementsByTagName('root').item(0);

            if (nodeRoot != undefined)
            {
            //TODO: And, rather than this, iterate through the nodes and process them according to name
                  var nodeCurrent = nodeRoot.firstChild;

                  while (nodeCurrent)
                  {
                      switch (nodeCurrent.nodeName)
                      {
                      case "gameid":
                          alert("Game Id");
                          break;
 
                      case "dateno":
                          alert("Date Num"); 
                          break;
                      }
                      nodeCurrent = nodeCurrent.nextSibling;
                  }

                  setStatusFromXML(nodeRoot);
                  setBetweenDatesFromXML(nodeRoot);
                  setDateNumFromXML(nodeRoot);
                  setTurnNumFromXML(nodeRoot);
                  setAttractionDiceFromXML(nodeRoot);
                  setBonusDiceFromXML(nodeRoot);
                  setRerollsFromXML(nodeRoot); 
              setRerollableSuccessesFromXML(nodeRoot);
                  setSingleRollSuccessesFromXML(nodeRoot);
                  setRerollableDiceAwardedFromXML(nodeRoot);
                  setRerollFailuresFromXML(nodeRoot);
                  setSingleRollFailuresFromXML(nodeRoot);
                  setMyConflictFromXML(nodeRoot);
                  setTheirConflictFromXML(nodeRoot);
                  setCompatibilitiesFromXML(nodeRoot);
                  setPermanentAttractionFromXML(nodeRoot);
                  setTemporaryAttractionFromXML(nodeRoot);
             }
   }

function setStatusFromXML(nodeParent) 
{
     strStatus = getTextFromChildNode(nodeParent, 'status');

     if (strStatus != -1)
     {     
     var divStatus = document.getElementById("idStatus");
     
     if (strStatus == "active")
     {
         divStatus.innerHTML = "You're the active player";

         document.getElementById("buttonEndTurn").style.display = "block";
         document.getElementById("buttonEndDate").style.display = "block";
     }
     else
     {
         divStatus.innerHTML = "You're the Guide";

         document.getElementById("buttonEndTurn").style.display = "none";
         document.getElementById("buttonEndDate").style.display = "none";
     }

     //Let's try moving nodes about
     var nodeRow = document.getElementById("idRowDice");    

     var nodeFirstCell = nodeRow.firstChild;
     
     while (nodeFirstCell.tagName != "TD")
     {
         nodeFirstCell = nodeFirstCell.nextSibling;
     }

     if ((nodeFirstCell.id == "idCellActivePlayer" && strStatus == "passive") || (nodeFirstCell.id == "idCellGuide" && strStatus == "active"))
     {
          var nodeSecondCell = nodeFirstCell.nextSibling;

          while (nodeSecondCell.tagName != "TD")
          {
                 nodeSecondCell = nodeSecondCell.nextSibling;
          }

          var nodeFirstCellClone = nodeFirstCell.cloneNode(true);
          var nodeSecondCellClone = nodeSecondCell.cloneNode(true);

          nodeRow.appendChild(nodeSecondCellClone);
          nodeRow.appendChild(nodeFirstCellClone);

          nodeRow.removeChild(nodeFirstCell);
          nodeRow.removeChild(nodeSecondCell);
     }
     }
}

function setDateNumFromXML(nodeParent) 
{
     iDateNum = getTextFromChildNode(nodeParent, 'dateno');

     var elemDate = document.getElementById("idDate");

     if (iDateNum != -1)
     {
     if (iDateNum == 0)
     {
         elemDate.innerHTML = "First date";
     }
     else if (iDateNum == 1)
     {
         elemDate.innerHTML = "Second date";
     }
     else if (iDateNum == 2)
     {
         elemDate.innerHTML = "Third date";
     }
     }
}

function setBetweenDatesFromXML(nodeParent) 
{
     var fBetweenDates= getTextFromChildNode(nodeParent, 'betweendates');

     if (fBetweenDates == 1)
     {
              top.location = "betweendates.htm";
     }
     
}

function setTurnNumFromXML(nodeParent) 
{
/*     var strTurnNum = getTextFromChildNode(nodeParent, 'turn');

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

     elem.innerHTML = "Turn " + strTurnNum;*/
}

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 setAttractionDiceFromXML(nodeParent)
{
     iAttractionDice = getTextFromChildNode(nodeParent, 'attractiondicetoaward');

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

     if (iAttractionDice != -1)
     {
     if (iAttractionDice > 0)
     {
         if (strStatus == "passive")
         {
             document.getElementById("buttonAwardAttractionDice").style.display = "block";
             document.getElementById("idParaAttractionDiceActivePlayer").style.display = "none";
             document.getElementById("idParaAttractionDiceGuide").style.display = "block";
            
                 displayDice(elem, "Rerollable", "Unrolled", iAttractionDice, awardAttractionDice);
         }
         else
         {
             document.getElementById("buttonAwardAttractionDice").style.display = "none";
             document.getElementById("idParaAttractionDiceActivePlayer").style.display = "block";
             document.getElementById("idParaAttractionDiceGuide").style.display = "none";

                 displayDice(elem, "Rerollable", "Unrolled", iAttractionDice, 0);
         }
     }
     else
     {
         document.getElementById("buttonAwardAttractionDice").style.display = "none";
         document.getElementById("idParaAttractionDiceActivePlayer").style.display = "none";
         document.getElementById("idParaAttractionDiceGuide").style.display = "none";

         displayDice(elem, "Rerollable", "Unrolled", iAttractionDice, 0);
     }
     }
}

function setBonusDiceFromXML(nodeParent)
{
     var iBonusDice = getTextFromChildNode(nodeParent, 'bonusdicetoaward');

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

     if (iBonusDice != -1)
     {
     if (iBonusDice > 0 && iAttractionDice == 0)
     {
         if (strStatus == "passive")
         {
             document.getElementById("buttonAwardBonusDie").style.display = "block";
             document.getElementById("idParaBonusDiceActivePlayer").style.display = "none";
             document.getElementById("idParaBonusDiceGuide").style.display = "block";

                 displayDice(elem, "Rerollable", "Unrolled", iBonusDice, awardBonusDie);
         }
         else
         {
             document.getElementById("buttonAwardBonusDie").style.display = "none";
             document.getElementById("idParaBonusDiceActivePlayer").style.display = "block";
             document.getElementById("idParaBonusDiceGuide").style.display = "none";

                 displayDice(elem, "Rerollable", "Unrolled", iBonusDice, 0);
         }
     }
     else
     {
         document.getElementById("buttonAwardBonusDie").style.display = "none";
         document.getElementById("idParaBonusDiceActivePlayer").style.display = "none";
         document.getElementById("idParaBonusDiceGuide").style.display = "none";

         displayDice(elem, "Rerollable", "Unrolled", 0, 0);
     }
     }
}

function setRerollsFromXML(nodeParent)
{
     var iRerolls= getTextFromChildNode(nodeParent, 'rerolls');

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

     if (iRerolls != -1)
     {
     if (iRerolls > 0)
     {
          if (strStatus == "active")
          {
              document.getElementById("buttonRerollDie").style.display = "block";
              document.getElementById("idParaRerollsActivePlayer").style.display = "block";
              document.getElementById("idParaRerollsGuide").style.display = "none";

              displayDice(elem, "Rerollable", "Reroll" , iRerolls, rerollDie);
          }
          else
          {
              document.getElementById("buttonRerollDie").style.display = "none";
              document.getElementById("idParaRerollsActivePlayer").style.display = "none";
              document.getElementById("idParaRerollsGuide").style.display = "block";

              displayDice(elem, "Rerollable", "Reroll" , iRerolls, 0);
          }


     }
     else
     {
          document.getElementById("buttonRerollDie").style.display = "none";
              document.getElementById("buttonRerollDie").style.display = "none";
              document.getElementById("idParaRerollsActivePlayer").style.display = "none";
              document.getElementById("idParaRerollsGuide").style.display = "none";

          displayDice(elem, "Rerollable", "Reroll" , iRerolls, 0);
     }
     }
}

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

     if (iPermanentAttraction != -1)
     {
     var elem = document.getElementById("idPermanentAttraction");

     displayAttraction(elem, "Permanent", iPermanentAttraction);
     }
}

function setTemporaryAttractionFromXML(nodeParent)
{
     var iTemporaryAttraction = getTextFromChildNode(nodeParent, 'temporaryattraction');

     if (iTemporaryAttraction != -1)
     {
     var elem = document.getElementById("idTemporaryAttraction");

     displayAttraction(elem, "Temporary", iTemporaryAttraction);
     }
}

function setRerollableSuccessesFromXML(nodeParent)
{
     iRerollableSuccesses = getTextFromChildNode(nodeParent, 'rerollablesuccesses');

     if (iRerollableSuccesses != -1)
     {
     var elem = document.getElementById("idRerollableSuccesses");

//     elem.innerHTML = "<p>" + iRerollableSuccesses + " successes (from red dice)</p>";

     displayDice(elem, "Rerollable", "Success", iRerollableSuccesses, 0);

     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) > 0)
     {
          document.getElementById("idParaSuccesses").style.display = "block";
     }
     else
     {
          document.getElementById("idParaSuccesses").style.display = "none";
     }
      
     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) >= 3 && strStatus == "active")
     {
          document.getElementById("buttonIncreaseAttraction").style.display = "block";
     }
     else
     {
          document.getElementById("buttonIncreaseAttraction").style.display = "none";
     }

     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) >= 4 && strStatus == "active")
     {
          document.getElementById("buttonAddCompatibility").style.display = "block";
          document.getElementById("textAddCompatibility").style.display = "block";
     }
     else
     {
          document.getElementById("buttonAddCompatibility").style.display = "none";
          document.getElementById("textAddCompatibility").style.display = "none";
     }
     }

}

function setSingleRollSuccessesFromXML(nodeParent)
{
     iSingleRollSuccesses = getTextFromChildNode(nodeParent, 'singlerollsuccesses');

     if (iSingleRollSuccesses != -1)
     {
     var elem = document.getElementById("idSingleRollSuccesses");

//     elem.innerHTML = "<p>" + iSingleRollSuccesses + " successes (from blue dice)</p>";

     displayDice(elem, "SingleRoll", "Success", iSingleRollSuccesses, 0);

     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) > 0)
     {
          document.getElementById("idParaSuccesses").style.display = "block";
     }
     else
     {
          document.getElementById("idParaSuccesses").style.display = "none";
     }
      
     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) >= 3 && strStatus == "active")
     {
          document.getElementById("buttonIncreaseAttraction").style.display = "block";
     }
     else
     {
          document.getElementById("buttonIncreaseAttraction").style.display = "none";
     }

     if ((parseInt(iRerollableSuccesses) + parseInt(iSingleRollSuccesses)) >= 4 && strStatus == "active")
     {
          document.getElementById("buttonAddCompatibility").style.display = "block";
          document.getElementById("textAddCompatibility").style.display = "block";
     }
     else
     {
          document.getElementById("buttonAddCompatibility").style.display = "none";
          document.getElementById("textAddCompatibility").style.display = "none";
     }
     }
}

function setRerollFailuresFromXML(nodeParent)
{
     iRerollFailures = getTextFromChildNode(nodeParent, 'rerollfailures');
 
     if (iRerollFailures != -1)
     {
     var elem = document.getElementById("idRerollFailures");

//     elem.innerHTML = "<p>" + iRerollFailures + " failures (from red dice)</p>";

     displayDice(elem, "Rerollable", "Failure", iRerollFailures, 0);

     if ((parseInt(iRerollFailures) + parseInt(iSingleRollFailures)) > 0)
     {
          document.getElementById("idParaFailures").style.display = "block";
     }
     else
     {
          document.getElementById("idParaFailures").style.display = "none";
     }
     }
}

function setSingleRollFailuresFromXML(nodeParent)
{
     iSingleRollFailures = getTextFromChildNode(nodeParent, 'singlerollfailures');

     if (iSingleRollFailures != -1)
     {

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

//     elem.innerHTML = "<p>" + iSingleRollFailures + " failures (from blue dice)</p>";

     displayDice(elem, "SingleRoll", "Failure", iSingleRollFailures, 0);

     if ((parseInt(iRerollFailures) + parseInt(iSingleRollFailures)) > 0)
     {
          document.getElementById("idParaFailures").style.display = "block";
     }
     else
     {
          document.getElementById("idParaFailures").style.display = "none";
     }
     }

}

function setRerollableDiceAwardedFromXML(nodeParent)
{
     iRerollableDiceAwarded = getTextFromChildNode(nodeParent, 'rerollablediceawarded');

     if (iRerollableDiceAwarded != -1)
     {
     var elem = document.getElementById("idRerollableDiceAwarded");

//     elem.innerHTML = "<p>" + iRerollableDiceAwarded + " rerollable dice awarded</p>";

     if ((parseInt(iRerollableDiceAwarded)) > 0)
     {
         if (strStatus == "active")
         {
               document.getElementById("buttonRollDice").style.display = "block";
               document.getElementById("idParaRerollableDiceAwardedActivePlayer").style.display = "block";
               document.getElementById("idParaRerollableDiceAwardedGuide").style.display = "none";

               displayDice(elem, "Rerollable", "Unrolled", iRerollableDiceAwarded, rollDice);
         }
         else
         {
               document.getElementById("buttonRollDice").style.display = "none";
               document.getElementById("idParaRerollableDiceAwardedActivePlayer").style.display = "none";
               document.getElementById("idParaRerollableDiceAwardedGuide").style.display = "block";

               displayDice(elem, "Rerollable", "Unrolled", iRerollableDiceAwarded, 0);
         }
     }
     else
     {
               document.getElementById("buttonRollDice").style.display = "none";
               document.getElementById("idParaRerollableDiceAwardedActivePlayer").style.display = "none";
               document.getElementById("idParaRerollableDiceAwardedGuide").style.display = "none";

               displayDice(elem, "Rerollable", "Unrolled", iRerollableDiceAwarded, 0);
     }
     }
}

function setMyConflictFromXML(nodeParent)
{
     var nodeConflict = nodeParent.getElementsByTagName("myconflict").item(0);

     var strConflict = getTextFromChildNode(nodeConflict, 'conflict');

     if (strConflict != -1)
     {
     var elem = document.getElementById("idMyConflict");

     elem.innerHTML = "Your conflict: " + strConflict;

     var iGameUserMapId = getTextFromChildNode(nodeConflict, 'gameusermapid');
     var iConflictDiceToAward = getTextFromChildNode(nodeConflict, 'conflictdicetoaward');
     var strInvocationStatus = getTextFromChildNode(nodeConflict, 'invocationstatus');
     
     if (strStatus == "active" && iConflictDiceToAward > 0)
     {
          if (strInvocationStatus == "available")
          {
               elem.innerHTML += "<input type=\"button\" value=\"Propose\" onclick=\"proposeConflict(" + iGameUserMapId + ")\">";
          }
          else
          {
               elem.innerHTML += " <i>Awaiting response</i>";
          }
     }
     }
}

function setTheirConflictFromXML(nodeParent)
{
     var nodeConflict = nodeParent.getElementsByTagName("theirconflict").item(0);

     var strConflict = getTextFromChildNode(nodeConflict, 'conflict');

     if (strConflict != -1)
     {
     var elem = document.getElementById("idTheirConflict");

     elem.innerHTML = "Their conflict: " + strConflict;

     var iGameUserMapId = getTextFromChildNode(nodeConflict, 'gameusermapid');
     var iConflictDiceToAward = getTextFromChildNode(nodeConflict, 'conflictdicetoaward');
     var strInvocationStatus = getTextFromChildNode(nodeConflict, 'invocationstatus');
     
     if (strStatus == "passive" && strInvocationStatus == "proposed" && iConflictDiceToAward > 0)
     {
          elem.innerHTML += "<input type=\"button\" value=\"Roll dice\" onclick=\"rollConflictDice(" + iGameUserMapId + ")\">";
     }
     }
}

function setCompatibilitiesFromXML(nodeParent)
{
     var collCompatibilityNodes = nodeParent.getElementsByTagName("compatibility");

     var elem = document.getElementById("idCompatibilities");
 
     var strToAdd = "<p>";

     for (var i = 0; i < collCompatibilityNodes.length; i++)
     {
          var nodeCompatibility = collCompatibilityNodes.item(i);
     
          var strCompatibility = getTextFromChildNode(nodeCompatibility, 'name');

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

          var iCompatibilityId = getTextFromChildNode(nodeCompatibility, 'compatibilityid');
          var iCompatibilityDiceToAward = getTextFromChildNode(nodeCompatibility , 'compatibilitydicetoaward');
         var strInvocationStatus = getTextFromChildNode(nodeCompatibility , 'invocationstatus');

         if (i > 0)
         {
             strToAdd  += ", ";
         }
     
         if (iCompatibilityDiceToAward > 0)
         {
             if (strStatus == "active")
             {
                if (strInvocationStatus == "available")
                {
                   strToAdd  += strCompatibility + "<input type=\"button\" value=\"Propose\" onclick=\"proposeCompatibility(" + iCompatibilityId + ")\">";
                }
                else
                {
                   strToAdd  += strCompatibility + " <i>Awaiting response</i>";
                }
             }
             else
             {
                if (strInvocationStatus == "proposed")
                {
                   strToAdd  += strCompatibility + "<input type=\"button\" value=\"Roll dice\" onclick=\"rollCompatibilityDice(" + iCompatibilityId + ")\">";
                }
                else
                {
                   strToAdd  += strCompatibility;
                }
                
             }
         }
         else
         {
            strToAdd += strCompatibility;
         }
     }

     strToAdd += "</p>";

     elem.innerHTML = strToAdd;
}
 
   function getDateState() 
   {
        var urlGet = "getdatestate.php";
        
        doHttpRequest(httpGet, handleGetHttpResponse, urlGet, "GET");
   }

   function handleGetHttpResponse() 
   {
       parseXml(httpGet.responseXML);
//To test XML slug code
//       setTimeout("getDateState()",5000);
   }

   function handlePostHttpResponse() 
   {
      parseXml(httpPost.responseXML);
   }

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

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

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

   function rollConflictDice(gameusermapid)
   {
        var urlPost = "rollconflictdice.php?gameusermapid=" + gameusermapid;
  
        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

   function rollCompatibilityDice(compatibilityid)
   {
        var urlPost = "rollcompatibilitydice.php?compatibilityid=" + compatibilityid;

        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

   function proposeConflict(gameusermapid)
   {
        var urlPost = "proposeconflict.php?gameusermapid=" + gameusermapid;
  
        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

   function proposeCompatibility(compatibilityid)
   {
        var urlPost = "proposecompatibility.php?compatibilityid=" + compatibilityid;

        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

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

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

   function handleReturn()
   {
        addCompatibility();
   }

   function addCompatibility()
   {
        var urlPost = "putcompatibility.php?description=" + document.getElementById("textAddCompatibility").value;
        
        doHttpRequest(httpPost, handlePostHttpResponse, urlPost, "POST");
   }

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

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

</script>
</head>
<body onload="getDateState()">
<table border="0" cellpadding="0" cellspacing="0" width="100%" valign="top">
    <td width="50%" align="left">
       <h1><span id="idDate"></span><span id="idTurn"></span></h1>
    </td>    
    <td width="50%" align="right" valign="center">
        <p><span id="idPermanentAttraction"></span><span id="idTemporaryAttraction"></span></p>
    </td>    
</table>

<div id="idStatus"></div>
<div id="idInstructions"></div>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
  <th>Your dice</th>
  <th>Rolled dice</th>
  <th>Your partner's dice</th>
  </tr>
  <tr id = "idRowDice">
    <td width="33%" align="center" id = "idCellActivePlayer">
      <p id="idParaRerollableDiceAwardedGuide" style='display:none'>You've awarded your partner these dice:</p>
      <p id="idParaRerollableDiceAwardedActivePlayer" style='display:none'>Your partner has awarded you these dice:</p>
       <span id="idRerollableDiceAwarded"></span>
       <span id="idRollDiceButton" style='display:none' ><input type="button" style='display:none' id="buttonRollDice" value="Roll dice" onclick="rollDice()"></span>
    </td>
    <td width="33%" align="center">
      <p id="idParaSuccesses" style='display:none'>These dice are <i>successes</i>.</p>
       <span id="idSingleRollSuccesses"></span><span id="idRerollableSuccesses"></span>
       <input type="text" style='display:none' id="textAddCompatibility" onKeyPress ="handleKeyPress(event, this, 0)">
       <input type="button" style='display:none' id="buttonAddCompatibility" value="Add compatibility" onclick="addCompatibility()">
       <input type="button" style='display:none' id="buttonIncreaseAttraction" value="Increase attraction" onclick="increaseAttraction()">
       <p id="idParaRerollsGuide" style='display:none'>Every time your parner narrates something that puts their character at a disadvantage, they may reroll one of these dice.</p>
       <p id="idParaRerollsActivePlayer" style='display:none'>Every time you narrate something that puts your character at a disadvantage, reroll one of these dice, by clicking on it.</p>
       <span id="idRerolls"></span>
       <span id="idRerollDieButton" style='display:none' ><input type="button" style='display:none' id="buttonRerollDie" value="Reroll die" onclick="rerollDie()"></span>
       <p id="idParaFailures" style='display:none'>These dice are <i>failures</i>.</p>
       <span id="idRerollFailures"></span>
       <span id="idSingleRollFailures"></span>
    </td>
    <td width="33%" align="center"id = "idCellGuide">
      <p id="idParaAttractionDiceGuide" style='display:none'>These are <i>Attraction Dice</i>. When your partner starts the date by doing something attractive, click on these dice to give them to your partner.</p>
      <p id="idParaAttractionDiceActivePlayer" style='display:none'>These are <i>Attraction Dice</i>. Your partner will give you these dice when you start the date by doing something attractive.</p>
      <span id="idAttractionDiceToAward"></span>
      <span id="idAwardAttractionDiceButton" style='display:none' ><input type="button" style='display:none' id="buttonAwardAttractionDice" value="Award Attraction Dice" onclick="awardAttractionDice()"></span>
      <p id="idParaBonusDiceGuide" style='display:none'>These are <i>Bonus Dice</i>. When your partner describes doing something that puts their character at an advantage, click on a die to give it to your partner.</p>
      <p id="idParaBonusDiceActivePlayer" style='display:none'>These are <i>Bonus Dice</i>. Your partner will give you these dice when you describe doing something that puts your character at an advantage.</p>
      <span id="idBonusDiceToAward"></span>
      <span id="idAwardBonusDieButton" style='display:none' ><input type="button" style='display:none' id="buttonAwardBonusDie" value="Award Bonus Die" onclick="awardBonusDie()"></span>
    </td>
  </tr>
</table>
<p>
<div>Compatibilities: <span id="idCompatibilities"></span></div>
<table border="1" cellpadding="3" cellspacing="3" width="100%">
  <tr>
    <td width="50%" align="center">
       <div id="idMyConflict"></div></td>
    <td width="50%" align="center">
       <div id="idTheirConflict"></div>
    </td>
  </tr>
</table>
<input type="button" style='display:none' id="buttonEndTurn" value="End Turn" onclick="endTurn()">
<input type="button" style='display:none' id="buttonEndDate" value="End Date" onclick="endDate()">
</body>
</html>