Ported alternative style for profile page

csgo-league · Mar 29, 2020 · fcfaed3 · fcfaed3
1 parent a906a3a
commit fcfaed3
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 17 deletions.
diff --git a/assets/scripts/listeners/index.js b/assets/scripts/listeners/index.js
@@ -1,9 +1,11 @@
 import {listen as listenMatches} from "./matches";
 import {listen as listenHover} from "./hover";
 import {listen as listenSteamProfile} from "./steam-profile";
+import {listen as listenProfile} from "./profile";
 
 export function listen() {
   listenMatches();
   listenHover();
   listenSteamProfile();
+  listenProfile();
 }
diff --git a/assets/scripts/listeners/profile.js b/assets/scripts/listeners/profile.js
@@ -0,0 +1,25 @@
+function secondsToReadable(seconds) {
+  seconds = Number(seconds);
+  const h = Math.floor(seconds / 3600);
+
+  if (seconds < 60) {
+    return "None";
+  }
+
+  const hDisplay = h > 0 ? h + (h === 1 ? " h" : " h") : "";
+
+  if (hDisplay !== '') {
+    return hDisplay
+  }
+
+  const m = Math.floor(seconds % 3600 / 60);
+  return m > 0 ? m + (m === 1 ? " m" : " m") : "";
+}
+
+export function listen() {
+  $('.seconds-to-readable').each((k, v) => {
+    v = $(v);
+
+    v.html(secondsToReadable(v.html()));
+  });
+}
diff --git a/assets/styles/general.scss b/assets/styles/general.scss
@@ -210,4 +210,9 @@ a:hover {
   -moz-box-shadow: 0 0 40px -5px rgba(0, 0, 0, .58);
   box-shadow: 0 0 40px -5px rgba(0, 0, 0, .58);
   border-radius: 25px !important;
-}
+}
+
+.profile-stats i {
+  font-size: 4.5rem;
+  margin-bottom: 0;
+}
diff --git a/src/Helpers/MatchesHelper.php b/src/Helpers/MatchesHelper.php
@@ -156,7 +156,7 @@ public function getPlayerMatches(string $steamId, int $matches = 3): array
     {
         $query = $this->db->query('
             SELECT DISTINCT
-            matches_maps.*
+            matches_maps.*, matches_players.kills, matches_players.deaths
             FROM matches
             LEFT JOIN matches_maps ON matches_maps.matchid = matches.matchid
             LEFT JOIN matches_players ON matches_players.matchid = matches.matchid
@@ -170,7 +170,7 @@ public function getPlayerMatches(string $steamId, int $matches = 3): array
         $response = $query->fetchAll();
 
         foreach ($response as $key => $match) {
-            $response[$key]['map_image'] = $this->getMatchMapImage($match['map']);
+            $response[$key]['map_image'] = $this->getMatchMapImage($match['mapname']);
         }
 
         return $response;

diff --git a/src/Views/partials/scripts.twig b/src/Views/partials/scripts.twig
@@ -1,3 +1,3 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
-<script src="/build/scripts.js?v=b3none"></script>
+<script src="/build/scripts.js?v=123"></script>
diff --git a/src/Views/profile.twig b/src/Views/profile.twig
@@ -39,22 +39,86 @@
                             </div>
                             <hr>
                             <div class="row">
-                                <div class="col-md-4">
-                                    <h4><i class="fas fa-crosshairs"></i>&nbsp;Kills: {{ player.kills }}</h4>
-                                    <h4><i class="fas fa-skull"></i>&nbsp;Deaths:&nbsp;<strong>{{ player.deaths }}</strong><br></h4>
-                                    <h4><i class="fas fa-dot-circle"></i> KDR: {{ player.kdr|number_format(2, '.', ',') }}<br></h4>
+                                <div class="col-4 text-left col-centered">
+                                    <div class="row profile-stats">
+                                        <div class="col-9 text-right nopadding-right">
+                                            <h4>Kills</h4>
+                                            <h1>{{player.kills}}</h1>
+                                        </div>
+                                        <div class="col-3 nopadding-right">
+                                            <i class="fas fa-crosshairs"></i>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-9 text-right nopadding-right">
+                                            <h4>Assists</h4>
+                                            <h1>{{player.assists}}</h1>
+                                        </div>
+                                        <div class="col-3 nopadding-right">
+                                            <i class="far fa-handshake"></i>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-9 text-right nopadding-right">
+                                            <h4>Deaths</h4>
+                                            <h1>{{player.deaths}}</h1>
+                                        </div>
+                                        <div class="col-3 nopadding-right">
+                                            <i class="fas fa-skull"></i>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="col-md-4">
-                                    <h4><i class="far fa-handshake" style="font-size:16px;"></i>&nbsp;Assists: {{ player.assists }}</h4>
-                                    <h4><i class="fas fa-meh"></i>&nbsp;Shots: {{ player.shots }}</h4>
-                                    <h4><i class="fas fa-chess-queen"></i>&nbsp;Damage: {{ player.damage }}</h4>
+                                <div class="col-4 text-center col-centered">
+                                    <div class="row profile-stats">
+                                        <div class="col-12">
+                                            <h4>Elo</h4>
+                                            <h1>{{player.score}}</h1>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-12">
+                                            <h4>K/D Ratio</h4>
+                                            <h1>{{ player.kdr|number_format(2, '.', ',') }}</h1>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-12">
+                                            <h4>Played Matches</h4>
+                                            <h1><span class="text-success">{{player.match_win}}</span> | <span class="text-warning">{{player.match_draw}}</span> | <span class="text-danger">{{player.match_lose}}</span></h1>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="col-md-4">
-                                    <h4><i class="fas fa-ruler-combined" style="font-size:18px;"></i>&nbsp;ADR: {{ player.adr|number_format(2, '.', ',') }}</h4>
-                                    <h4><i class="fas fa-calculator"></i>&nbsp;Hits: {{ player.hits }}</h4>
-                                    <h4><i class="fas fa-user-slash" style="font-size:16px;"></i>HS: {{ player.headshots }}</h4>
+                                <div class="col-4 text-right col-centered">
+                                    <div class="row profile-stats">
+                                        <div class="col-3 nopadding-left">
+                                            <i class="fas fa-bullseye"></i>
+                                        </div>
+                                        <div class="col-9 text-left nopadding-left">
+                                            <h4>ADR</h4>
+                                            <h1>{{ player.adr|number_format(2, '.', ',') }}</h1>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-3 nopadding-left">
+                                            <i class="fas fa-user-slash"></i>
+                                        </div>
+                                        <div class="col-9 text-left nopadding-left">
+                                            <h4>Headshots</h4>
+                                            <h1>{{ player.headshots }}</h1>
+                                        </div>
+                                    </div>
+                                    <div class="row profile-stats">
+                                        <div class="col-3 nopadding-left">
+                                            <i class="fas fa-history"></i>
+                                        </div>
+                                        <div class="col-9 text-left nopadding-left">
+                                            <h4>Time Played</h4>
+                                            <h1 class="seconds-to-readable">{{player.connected}}</h1>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
+
                             {#<div class="social-icons-profile" style="margin-top:15px;">#}
                                 {#<a href="https://steamcommunity.com/profiles/{{ player.steam }}" style="margin-left:10px;color:#171A21;"><i class="fab fa-steam"></i></a>#}
                                 {#<a href="#" style="margin-left:10px;color:#6441a4;"><i class="fab fa-twitch"></i></a>#}
@@ -79,7 +143,7 @@
                         </div>
                     </div>
                     <hr>
-                    <div class="row">
+                    <div class="row justify-content-center">
                         {% for match in matches %}
                             <div class="col-md-4" style="margin-top:15px;">
                                 {% include 'partials/match/profile-matches.twig' with match %}