Redesign of ranking
diff --git a/bin/images/info.png b/bin/images/info.png
new file mode 100644
index 0000000..c5229ac
--- /dev/null
+++ b/bin/images/info.png
Binary files differ
diff --git a/css/ranking.css b/css/ranking.css
index 122613a..a8b0e11 100644
--- a/css/ranking.css
+++ b/css/ranking.css
@@ -1,24 +1,93 @@
+body {
+ background-image: url('https://images.unsplash.com/photo-1428196457394-f0c4aec5f574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
+ background-size: cover;
+}
+
+header {
+ margin-top: 25px;
+ margin-bottom: 100px;
+ font-family: 'Open Sans';
+ display: block;
+}
+
+header a {
+ font-size: 40px;
+ text-decoration: none;
+}
+
+header #leftlinks {
+ padding-left: 20px;
+ float: left;
+}
+
+header #rightlinks {
+ margin-right: 20px;
+ float: right;
+}
+
+div#outter-container {
+ width: 95%;
+ margin: 32px auto;
+}
+
#inner-container {
background-color: white;
+ padding: 25px;
}
p {
font-size: 16px;
text-align: justify;
+ display: none;
+ width: 95%;
+ margin: auto;
+ margin-bottom: 25px;
+}
+
+#table-container {
+ overflow: scroll;
+}
+
+div#table-container {
+ display: inline-block;
+ width: 100%;
+ margin: 0 auto;
}
table#ranking {
- font-size: 18px;
+ font-size: 48px;
text-align: center;
-
font-family: 'Open Sans';
-
margin: auto;
- width: 100%;
}
table#ranking td {
- padding: 10px;
+ padding: 15px;
+ height: 50px;
+
+ max-width: 400px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+td div.username {
+ font-size: 40px;
+}
+
+td div.userinfo {
+ font-size: 36px;
+ color: rgb(100,100,100);
+}
+
+td.name {
+ text-align: left;
+}
+
+tr#header th {
+ text-align: center;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
tr.gold {
@@ -39,9 +108,9 @@
tr.top3 td:first-child::before {
content: '';
- background-size: 16px 16px;
- width: 16px;
- height: 16px;
+ background-size: 48px 48px;
+ width: 48px;
+ height: 48px;
float: left;
position: relative;
top: 0px;
diff --git a/css/ranking.php b/css/ranking.php
deleted file mode 100644
index 43dc484..0000000
--- a/css/ranking.php
+++ /dev/null
@@ -1,3 +0,0 @@
-.gold {
- background-color: gold;
-}
diff --git a/index.php b/index.php
index c440472..e7a14c3 100644
--- a/index.php
+++ b/index.php
@@ -55,6 +55,7 @@
</form>
<p>La primera persona que entri al teu compte tindrà l'oportunitat de canviar la contrasenya.</p>
+ <a href="./ranking.php">Anar al rànquing</a>
</div>
</div>
diff --git a/php/utils.php b/php/utils.php
index edd53fa..8148c92 100644
--- a/php/utils.php
+++ b/php/utils.php
@@ -1,4 +1,17 @@
<?php
+ function nomcurs($curs) {
+ if ($curs == 1) return "1r";
+ if ($curs == 2) return "2n";
+ if ($curs == 3) return "3r";
+ if ($curs == 4) return "4t";
+ }
+
+ function nomgrau($grau) {
+ if ($grau == 0) return "MAT";
+ if ($grau == 1) return "EST";
+ if ($grau == 2) return "MAMME";
+ }
+
class User{
public $id;
public $nomcomplet;
@@ -12,16 +25,11 @@
}
public function nomcurs() {
- if ($this->curs == 1) return "1er";
- if ($this->curs == 2) return "2on";
- if ($this->curs == 3) return "3er";
- if ($this->curs == 4) return "4rt";
+ return nomcurs($this->curs);
}
public function nomgrau() {
- if ($this->grau == 0) return "MAT";
- if ($this->grau == 1) return "EST";
- if ($this->grau == 2) return "MAMME";
+ return nomgrau($this->grau);
}
}
diff --git a/ranking.php b/ranking.php
index ff17962..d1124b8 100644
--- a/ranking.php
+++ b/ranking.php
@@ -1,7 +1,6 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
- <link rel="stylesheet" href="./css/basic.css" />
<link rel="stylesheet" href="./css/ranking.css" />
</head>
@@ -29,45 +28,68 @@
<div id="outter-container">
<div id="inner-container">
- <h1>Rànquing</h1>
- <p>La puntuació de cada jugador es calcula com a una suma ponderada entre companys de classe (mateix curs, mateix grau), companys de grau (mateix grau) i companys de facultat (diferents grau). Amb puntuacions +100, +150 i +200; respectivament.</p>
+ <header>
+ <div id="leftlinks"><a id="info" href="javascript:void(0);" onclick="js: toggleinfo();">+Info</a></div>
+ <div id="rightlinks"><a href="./index.php">Tornar a l'inici</a></div>
+ </header>
- <table id="ranking" cellspacing="0" cellpadding="0">
- <tr id="header">
- <th></th>
- <th>Nom</th>
- <th>Classe</th>
- <th>Grau</th>
- <th>Facu</th>
- <th>Total</th>
- <th>Punts</th>
- </tr>
- <?php
- $id = 43;
- $i = 1;
-
- while ($row = $results->fetch_object()) {
- if ($i == 1) echo "<tr class='gold top3'>";
- else if ($i == 2) echo "<tr class='silver top3'>";
- else if ($i == 3) echo "<tr class='bronze top3'>";
- else if ($row->id == $id) echo "<tr class='me'>";
- else echo "<tr>";
+ <p><img src="./bin/images/info.png" width="32px" /> La puntuació de cada jugador es calcula com a una suma ponderada depenent del caràcter de les seves víctimes: companys de <b>c</b>lasse (mateix curs, mateix grau), companys de <b>g</b>rau (mateix grau) i companys de <b>f</b>acultat (diferents grau). Amb puntuacions +100, +150 i +200; respectivament.</p>
+
+ <div id="table-container">
+ <table id="ranking" cellspacing="0" cellpadding="0">
+ <tr id="header">
+ <th></th>
+ <th>Assassins</th>
+ <th>T</th>
+ <th>P</th>
+ <th>C</th>
+ <th>G</th>
+ <th>F</th>
+ </tr>
+ <?php
+ $id = 0;
+ $i = 1;
- echo "<td>". ($i > 3 ? $i : '') ."</td>";
- echo "<td>$row->nom</td>";
- echo "<td>$row->companys_classe</td>";
- echo "<td>$row->companys_grau</td>";
- echo "<td>$row->companys_facu</td>";
- echo "<td>$row->kills</td>";
- echo "<td>$row->score</td>";
- echo "</tr>";
-
- $i = $i + 1;
- }
- ?>
- </table>
+ while ($row = $results->fetch_object()) {
+ if ($i == 1) echo "<tr class='gold top3'>";
+ else if ($i == 2) echo "<tr class='silver top3'>";
+ else if ($i == 3) echo "<tr class='bronze top3'>";
+ else if ($row->id == $id) echo "<tr class='me'>";
+ else echo "<tr>";
+
+ echo "<td>". ($i > 3 ? $i : '') ."</td>";
+ echo "<td class='name'><div>
+ <div class='username'>$row->nom</div>
+ <div class='userinfo'>".nomcurs($row->curs)." - ".nomgrau($row->grau)."</div>
+ </div></td>";
+ echo "<td>$row->kills</td>";
+ echo "<td><b>$row->score</b></td>";
+ echo "<td>$row->companys_classe</td>";
+ echo "<td>$row->companys_grau</td>";
+ echo "<td>$row->companys_facu</td>";
+ echo "</tr>";
+
+ $i = $i + 1;
+ }
+ ?>
+ </table>
+ </div>
</div>
</div>
+<script>
+ function toggleinfo() {
+ let state = document.getElementsByTagName("p")[0].style.display;
+ if (state == "block") {
+ document.getElementsByTagName("p")[0].style.display = "none";
+ document.getElementsByTagName("a")[0].innerHTML = "+Info";
+ } else {
+ document.getElementsByTagName("p")[0].style.display = "block";
+ document.getElementsByTagName("a")[0].innerHTML = "-Info";
+ }
+ return false;
+ }
+</script>
+
</body>
</html>
