Layout home / Chart.js

assholes

@@ -1,5 +1,2 @@
 Luc Absil
-Matthieu Michelet
-Clara Husson
-Melchior Garapin
 Benjamin Criton

roulette.py

@@ -434,7 +434,8 @@ def complete():
     con = connect_sql()
     cur = con.cursor()
     cur.execute("""select id, firstname, name from players where
-    name like "{value}%" or firstname like "{value}%";""".format(value=v))
+    (name like "{value}%" or firstname like "{value}%")
+    and {time} > ban_end;""".format(value=v, time=time()))
     rows = [[i[0], i[1]+' '+i[2]] for i in cur.fetchall()]
     con.close()
     return json.dumps(rows)

static/style.css

@@ -1,107 +1,117 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
+
 body {
-    background: #2ecc71;
-    color: white;
+    background: #d7ebff;
+    color: black;
     text-align: center;
-    font-family: helvetica, sans;
+    font-family: 'Ubuntu Mono', monospace;
+    margin: 0;
+}
+
+.center {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
 }
 
 a {
     text-decoration: none;
-    color: grey;
-}
-
-#body_bis {
-    margin-left: auto;
-    margin-right: auto;
-    width: 90%;
-    max-width: 1300px;
-    min-width: 550px;
+    color: black;
 }
 
 #banner {
-    height: 100px;
-    background: center center url('img/banner.svg') no-repeat;
-    padding: 10px 10px;
-    margin-bottom: 30px;
-    margin-top: 30px;
+    width: 75%;
+    max-width: 1000px;
+    margin: 32px;
 }
 
-#content_container {
-    margin-left: 200px;
-    margin-right: 200px;
-    position: relative;
+#card {
+    margin: 32px auto;
+    padding: 32px 0 16px 0;
+    max-width: 600px;
     background: white;
-    color: black;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-radius:10px;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
-#content {
-    position: relative;
-    z-index: 5;
+@media screen and (max-width: 640px) {
+    #card {
+        width: 80%;
+    }
+    #banner {
+        margin: 32px 32px 0 32px;
+    }
+}
+
+#chart {
+    margin-bottom: 16px;
+}
+
+.sep {
+    width: 100%;
+    height: 1px;
+    background-color: #DADADA;
+    margin: 16px;
+    box-sizing: border-box;
+}
+
+.desc {
+    font-size: 18px;
+    margin: 16px 0;
+    padding: 0 16px;
+}
+
+#play {
+    width: 132px;
+    height: 54px;
+    font-size: 20px;
+    margin: 16px auto;
+    border-radius: 3px;
+    background-color: #9ce898;
+    font-weight: bold;
+    transition: all cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
+}
+
+#play:hover {
+    background-color: #7fd87b;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.title {
+    font-size: 24px;
+}
+
+#history {
+    margin: 16px;
+    padding: 0 16px;
+    list-style-type: decimal-leading-zero;
+    list-style-position: inside;
+}
+
+li {
     text-align: left;
 }
 
-
-/* Contenu */
-
-#content h1 {
-    margin-top: 5px;
-    padding-left: 50px;
-    font-size: 130%;
-}
-
-#content h2, #content p {
-    margin-left: 20px;
-    margin-right: 20px;
-}
-
-#content h2 {
-    margin-top:0px;
-    font-size: 100%;
-    margin-bottom: 5px;
-    padding-bottom: 0px;
-}
-
-#content p {
-    text-indent: 2em;
-    margin-top: 0px;
-    font-size: 90%;
-}
-
-#content ul#history {
-    padding-left: 60px;
-}
-
-#content li.events {
-    font-size: 180%;
-}
-
-#content li .normal {
+li .normal {
     color: black;
     font-size: 80%;
 }
 
-#content li.ban {
+li.ban {
     color: red;
 }
 
-#content li.warn {
+li.warn {
     color: orange;
 }
 
-#content li.ok {
+li.ok {
     color: #1D1;
 }
 
-#content_container #footer {
-    margin-top: 4em;
-    font-size: 70%;
-}
-
 p#play {
     text-align: center;
     font-size: 1.5em;
@@ -133,16 +143,6 @@ form#select {
     text-align: center;
 }
 
-ul.flashes {
-    font-size: 80%;
-    font-weight: bold;
-    color: #222;
-    list-style-type: none;
-    padding: 0;
-    width: 90%;
-    margin: .5em auto;
-}
-
 ul.flashes li {
     background: #2E2;
     border: 1px solid #191;

templates/home.html

@@ -1,19 +1,25 @@
-{% extends "layout.html" %}
-{% block content %}
-<br>
-<h2>Toi aussi abuse des pouvoirs du Rézo avec les Metzthernets !</h2>
-  <p id="play" style="text-align: center; font-size: 1.5em">
-      <a href="{{url_for('play')}}">Jouer</a>
-  </p>
+{% extends "layout.html" %} {% block content %}
+<canvas id="chart"></canvas>
 
-  <div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div>
-  <h2>Historique personnel</h2>
+<div class="sep"></div>
 
-  {% if bans_hist != [] %}
+<div class="desc">Toi aussi abuse des pouvoirs du Rézo avec les Metzthernets !</div>
+
+<a href="{{url_for('play')}}">
+    <div id="play" class="center">
+        JOUER
+    </div>
+</a>
+
+<div class="sep"></div>
+
+<div class="desc title">Historique personnel</div>
+
+{% if bans_hist != [] %}
     <ul id="history">
         {% for entry in bans_hist %}
             <li class="{{ entry[0] }}" class="events">
-      <span class="normal"> {{ entry[1] }}</span>
+                <span class="normal">{{ entry[1] }}</span>
             </li>
         {% endfor %}
     </ul>
@@ -21,57 +27,36 @@
         <p>
             Rien pour l'instant
         </p>
+{% endif %}
 
-  {% endif %}
-  <script type="text/javascript">
+<div class="sep"></div>
+
+<script type="text/javascript">
     $(function () {
-      Highcharts.chart('container', {
-          chart: {
-              plotBackgroundColor: null,
-              plotBorderWidth: 0,
-              plotShadow: false
-          },
-          title: {
-              text: 'État du Rézo',
-              align: 'center',
-              verticalAlign: 'middle',
-              y: 60
-          },
-          tooltip: {
-              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-          },
-          plotOptions: {
-              pie: {
-                  dataLabels: {
-                      enabled: true,
-                      distance: -50,
-                      style: {
-                          fontWeight: 'bold',
-                          color: 'white'
-                      }
-                  },
-                  startAngle: -90,
-                  endAngle: 90,
-                  center: ['50%', '75%']
-              },
-          },
-          series: [{
-              type: 'pie',
-              name: 'État du Rézo',
-              innerSize: '50%',
-              data: [
-                  {
-                    name: 'Tranchés',
-                    y: {{ stats[0] }},
-                    color: '#FF0000',
-                  },{
-                    name: 'Vivants',
-                    y: {{ stats[1] }},
-                    color: '#FFCC00',
-                  }
-              ]
-          }]
+
+        var ctx = document.getElementById("chart").getContext('2d');
+        var data = {
+            datasets: [{
+                data: [ {{ stats[0] }}, {{ stats[1] }} ],
+                backgroundColor: ['#ffd7d7', '#d7ebff']
+            }],
+            labels: ['Tranchés', 'Vivants']
+        };
+
+        var options = {
+            cutoutPercentage: 40,
+            rotation: -Math.PI,
+            circumference: Math.PI,
+            legend: { labels: { fontSize: 18 }},
+            tooltips: { bodyFontSize: 18 }
+        };
+
+        var chart = new Chart(ctx, {
+            type: 'doughnut',
+            data: data,
+            options: options
         });
+
     });
-  </script>
+</script>
 {% endblock %}

templates/layout.html

@@ -1,38 +1,38 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
   <title>Rézoroulette Metzthernet</title>
-    <meta charset="utf-8"/>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
   <script type="text/javascript" src="{{ url_for('static', filename='javascript.js') }}"></script>
-			<script type="text/javascript" src="{{ url_for('static', filename='highcharts.js') }}"></script>
+  <script type="text/javascript" src="{{ url_for('static', filename='Chart.min.js') }}"></script>
   <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.1.1.min.js') }}"></script>
-      <link rel="shortcut icon" type="image/x-icon"
-            href="{{ url_for('static', filename='favicon.ico') }}" />
-  </head>
+  <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" />
+</head>
+ 
+<body>
 
-  <body>
-    <div id="body_bis">
   <a href="/">
-      <div id="banner">
-      </div>
+    <img id="banner" src="{{ url_for('static', filename='img/banner.svg') }}">
   </a>
 
-    <div id="content_container">
-	<div id="content">
-    {% with messages = get_flashed_messages() %}
-        {% if messages %}
+  <div id="card">
+    <div id="content" class="center">
+      {% with messages = get_flashed_messages() %} {% if messages %}
       <ul class=flashes>
         {% for message in messages %}
         <li>{{ message }}</li>
         {% endfor %}
       </ul>
-        {% endif %}
-    {% endwith %}
-    {% block content %}{% endblock %}
+      {% endif %} {% endwith %} {% block content %}{% endblock %}
+    </div>
+    <div id="footer">
+      <a href="mailto:metzthernet@gmail.com">metzthernet@gmail.com</a>
     </div>
-    <div id="footer">Contact technique : <a href="mailto:metzthernet@gmail.com">metzthernet@gmail.com</a></div>
   </div>
   </div>
 </body>
+
 </html>

test.txt

@@ -0,0 +1 @@
+This is only a test.