change : minor changes in UI.

Author: sadrasabouri

static/css/style.css

@@ -67,16 +67,17 @@ th, td {
 #myProgress {
     width: 100%;
     background-color: #ddd;
-    border-radius: 3px;
+    border-radius: 5px;
 }
 
 #myBar {
     width: 0%;
     height: 30px;
     background-color: #4f8ace;
+    color:#ffffff;
     text-align: center;
     line-height: 30px;
-    border-radius: 3px;
+    border-radius: 5px;
 }
 
 #player_name {

static/js/main.js

@@ -5,17 +5,17 @@ function start() {
     var elem = document.getElementById("myBar");
     var width = 0;
     var time_from_start = 0;
-    var id = setInterval(frame, 1000);
+    var id = setInterval(frame, 10);
     function frame() {
       if (width >= 100) {
         clearInterval(id);
         i = 0;
       } else {
-        width += 100 / 45;
-        time_from_start ++;
+        width += 1 / 45;
+        time_from_start = 45 * width / 100;
         elem.style.width = width + "%";
-        elem.innerHTML = time_from_start;
-        elem.style.backgroundColor = "rgb(" + time_from_start * 5 +", 138, 223)"; 
+        elem.innerHTML = time_from_start.toFixed(2);
+        elem.style.backgroundColor = "rgb(" + time_from_start * 6 +", 50, 50)"; 
       }
     }
   }

templates/Player.html

@@ -3,15 +3,19 @@
 {% block sub_table %}
 <tr>
     <td class="role">
-    <h1>{{ player_name }}</h1>
+    <h1>{{ player[2] }}</h1>
     </td>
 </tr>
 <tr>
     <td>
+    {% if player[3] == "alive" %}
     <img class="avatar" src="static/images/Warns/play.png" onclick="start()">
     <div id="myProgress">
         <div id="myBar">0</div>
     </div>
+    {% endif %}
+    {% if player[3] == "dead" %}You are Killed!{% endif %}
+    {% if player[3] == "banned" %}You are Banned from speaking this turn!{% endif %}
     </td>
 </tr>
 {% endblock %}

templates/base_action.html

@@ -4,7 +4,9 @@
     <link rel = "icon" href="static/images/roles/{{ image_name }}.png" type = "image/x-icon"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    <script src="static/js/main.js" type="text/javascript"></script>
+    <script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
+    <script type="text/javascript" src="static/js/shieldui-all.min.js"></script>
+    <script type="text/javascript" src="static/js/main.js"></script>
 </head>
 <table style="border-collapse: collapse">
     {% block sub_table %}{% endblock %}

templates/index.html

@@ -24,5 +24,4 @@ <h2 id="fa">{{ role_name_fa }}</h2>
 {% endblock %}
 
 {% block id_sec %}
-<hr>
 {% endblock %}