add : player page added.

Author: sadrasabouri

README.md

@@ -90,6 +90,6 @@ The game continues until a faction achieves its win condition; for the Residents
 |     Resident    | <img width="100" height="100" src="https://raw.githubusercontent.com/sadrasabouri/mafia/master/static/images/roles/Resident_1.png"><img width="100" height="100" src="https://raw.githubusercontent.com/sadrasabouri/mafia/master/static/images/roles/Resident_2.png"><img width="100" height="100" src="https://raw.githubusercontent.com/sadrasabouri/mafia/master/static/images/roles/Resident_3.png"><img width="100" height="100" src="https://raw.githubusercontent.com/sadrasabouri/mafia/master/static/images/roles/Resident_4.png"> | Resident is the typical player of the game. he/she has no power but to blame mafia in order to remove them from the game in day mode. |
 
 ## References
-Icons made by <a href="https://www.flaticon.com/authors/vectors-market" title="Vectors Market">Vectors Market</a> and <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
+Icons made by <a href="https://www.flaticon.com/authors/vectors-market" title="Vectors Market">Vectors Market</a> and <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> and <a href="http://www.freepik.com/" title="Freepik">Freepik</a>.
 
 + [https://en.wikipedia.org/wiki/Mafia_(party_game)](https://en.wikipedia.org/wiki/Mafia_(party_game))

mafia.py

@@ -35,8 +35,7 @@ def index():
         print("_" * 54)
 
     if ip in ip2role_index_name.keys():
-        role = ip2role_index_name[ip][0]
-        image_name = ip2role_index_name[ip][0] + "_" + str(ip2role_index_name[ip][1])
+        return render_template("Player.html", player_name=ip2role_index_name[ip][2])
     else:
         if id > nPlayers:
             return render_template("404.html", is_farsi=True)

static/css/style.css

@@ -64,6 +64,21 @@ th, td {
     background-color: red;
 }
 
+#myProgress {
+    width: 100%;
+    background-color: #ddd;
+    border-radius: 3px;
+}
+  
+#myBar {
+    width: 0%;
+    height: 30px;
+    background-color: #4f8ace;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 3px;
+}
+
 #player_name {
     width: 20%;
 }

static/images/Warns/play.png

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

static/js/main.js

@@ -0,0 +1,20 @@
+{% extends 'base_action.html' %}
+
+{% block sub_table %}
+<tr>
+    <td class="role">
+    <h1>{{ player_name }}</h1>
+    </td>
+</tr>
+<tr>
+    <td>
+    <img class="avatar" src="static/images/Warns/play.png" onclick="start()">
+    <div id="myProgress">
+        <div id="myBar">0</div>
+    </div>
+    </td>
+</tr>
+{% endblock %}
+
+{% block messages %}
+{% endblock %}

templates/Player.html

@@ -4,6 +4,7 @@
     <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>
 </head>
 <table style="border-collapse: collapse">
     {% block sub_table %}{% endblock %}