Basic functionality to GameState.decorate()

milindl · Jun 13, 2016 · ecf81f2 · ecf81f2
1 parent 8796f75
commit ecf81f2
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 12 deletions.
diff --git a/mafia_r.js b/mafia_r.js
@@ -91,6 +91,55 @@ GameState.prototype.toString = function() {
   }
   return repr;
 };
-GameState.prototype.decorate = function() {
-  return "will present well formatted HTML once done.";
-};
+GameState.prototype.decorate = function(status) {
+  //This has the task of filling up the template from the GameState Object
+  document.getElementById("username").lastChild.innerHTML = this.username;
+  document.getElementById("type").lastChild.innerHTML = this.type;
+  if(this.type=="Victim") {
+    document.getElementById("team").style.display = "none";
+  }
+  else {
+    var place = document.getElementById("team").lastChild;
+    place.innerHTML = "";
+    for(var i=0; i!=this.teamNames.length; i++) {
+      place.innerHTML += "<br>" + this.teamNames[i];
+    }
+  }
+  if(this.type!="Detective") {
+    document.getElementById("detection-result").style.display="none";
+  }
+  document.getElementById("status").lastChild.innerHTML = status;
+
+  //Now to add the names and the entire shebang if it is a voting round.
+  if(this.round == "#MAFIA_VOTE" || this.round == "#DETECTIVE_VOTE" || this.round == "#VOTE_ANON" || this.round == "#VOTE_OPEN") {
+    var form = document.getElementById("voting-form");
+    form.innerHTML="";
+    var nameKeys = Object.keys(this.names);
+    for(var i=0; i!=nameKeys.length; i++) {
+      if(this.names[nameKeys[i]]==false) continue;
+      var radioButton = document.createElement("input");
+      var label = document.createElement("label");
+      var voteSpan = document.createElement("span");
+      radioButton.name="players";
+      radioButton.type="radio";
+      radioButton.value = "" + nameKeys[i];
+      radioButton.id = "players-"+nameKeys[i];
+      voteSpan.id = "others-"+nameKeys[i];
+      if(i%2==0) label.className = "alter";
+      label.appendChild(radioButton);
+      label.appendChild(document.createTextNode(nameKeys[i]));
+      label.appendChild(voteSpan);
+      form.appendChild(label);
+      //TODO: Add functionality as well as decor
+
+    }
+    var voteKeys = Object.keys(this.voteState);
+    for(var i=0; i!=voteKeys.length; i++) {
+      var voter = voteKeys[i];
+      var votee = this.voteState[voteKeys[i]];
+      var voteSpan = document.getElementById("others-"+votee);
+      if(voteSpan) voteSpan.innerHTML+=" " + voter + " ";
+    }
+  }
+
+ };
diff --git a/template_screen.html b/template_screen.html
@@ -1,6 +1,18 @@
 <html>
 <head>
   <title>Mafia Mockup</title>
+  <script type="text/javascript" src="mafia_r.js">
+  </script>
+  <script>
+    // Init a GameState object and put it to work
+    var gs = new GameState();
+    gs.username="uname";
+    gs.type="Mafia";
+    gs.names = {"uname":true, "slw":true, "tr":true, "flak":true, "heron":true, "one_leg":true};
+    gs.round = "#MAFIA_VOTE";
+    gs.voteState = {"uname" : "tr", "flak":"tr"};
+    gs.teamNames = ["uname", "flak"];
+  </script>
   <style type="text/css">
   body {
     font-family: Verdana, sans-serif;
@@ -35,32 +47,52 @@
   div#voting-screen form label.alter {
     background-color: #ddd;
   }
+  div#voting-screen form label span {
+    float:right;
+    color:red;
+    font-style: italic;
+    font-weight: bold;
+  }
   div#voting-screen form label input {
     margin:0px;
     display: none;
   }
+  div#splash {
+    position: fixed;
+    top:0px;
+    left:0px;
+    width:100%;
+    height:100%;
+    background-color: white;
+    display: none;
+  }
+  div#splash h1 {
+    position: fixed;
+    top:40%;
+    width:100%;
+    text-align: center;
+  }
   </style>
 </head>
-<body>
+<body onload = "gs.decorate('status')">
+  <div id="splash">
+    <h1>Splash</h1>
+  </div>
   <div id="upper" class="panel">
     <table>
       <tr id="username"><td class="type">Username:</td><td> uname</td></tr>
       <tr id="status"><td class="type">Status:</td><td>Some user was killed. Time to vote.</td></tr>
+      <tr id="type"><td class="type">Type:</td><td></td></tr>
       <tr id="team"><td class="type">Team:</td><td> On your team: 1, 2 and 3</td></tr>
       <tr id="detection-result"><td class="type">Detection Result:</td><td>Only if you're a detective</td></tr>
     </table>
   </div>
 
   <div id="voting-screen" class="panel">
     <form id="voting-form" name="voting_form">
-      <label><input type="radio" name="players">Player 1</label>
-      <label class="alter"><input type="radio" name="players">Player 2</label>
-      <label><input type="radio" name="players">Player 3</label>
-      <label class="alter"><input type="radio" name="players">Player 4</label>
-      <label><input type="radio" name="players">Player 5</label>
-      <label class="alter"><input type="radio" name="players">Player 6</label>
-      <label><input type="radio" name="players">Player 7</label>
-      <label class="alter"><input type="radio" name="players">Player 8</label>
+      <!-- Keep one as sample, this is what they should look like when dynamically generated
+        <label><input type="radio" name="players" id="player1" value="player1">Player 1<span id="player1-voters"></label>
+      -->
     </form>
   </div>
 </body>