Simon plumey 18 vue page de statistiques

resources/css/app.scss

@@ -21,6 +21,7 @@ body {
     top: 0;
     right: 0;
     width: 100%;
+    min-height: 100vh;
     z-index: -2;
     transition: right 0.5s ease-in-out;
 
@@ -52,8 +53,8 @@ h5 {
 }
 
 h2 {
-    margin-top: 40px;
-    margin-bottom: 20px;
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
     font-size: 1.5rem;
 }
 
@@ -97,13 +98,13 @@ h2 {
 }
 
 .rounded {
-    border-radius: 40px;
+    border-radius: 2.5rem;
 }
 
 .btn
 {
-    padding : 10px 20px;
-    border-radius: 40px;
+    padding : 0.75rem 1.25rem;
+    border-radius: 2.5rem;
     outline: 2px solid white;
     outline-offset: -3px;
     transition: all .3s ease-in-out;
@@ -147,15 +148,15 @@ header {
 
         #main-title {
             font-family: $neon-font;
-            font-size: 7.8rem;
+            font-size: 7.75rem;
             text-align: center;
         }
 
         #subtitle {
             font-family: $secondary-neon-font;
-            font-size: 1.7rem;
+            font-size: 1.75rem;
             position: absolute;
-            right: 15px;
+            right: 0;
             bottom: 0;
         }
     }
@@ -183,11 +184,11 @@ header {
     right: 0;
     background-color: $background;
     overflow-x: hidden;
-    padding-top: 60px;
+    padding-top: 3.75rem;
     transition: 0.5s ease-in-out;
 
     a {
-        padding: 8px 25px;
+        padding: 0.5rem 1.5rem;
         text-decoration: none;
         font-size: 1.5rem;
         display: block;
@@ -208,8 +209,8 @@ header {
 
 #openNavBtn {
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 1.25rem;
+    right: 1.25rem;
     transition: opacity .5s ease-in-out;
 
     &:hover {
@@ -242,12 +243,12 @@ header {
 /**************************/
 
 .vue-container {
-    margin-top: 20px;
-    margin-bottom: 50px;
+    margin-top: 1.5rem;
+    margin-bottom: 3.125rem;
 
     .instructions {
         text-align: center;
-        margin-bottom: 15px;
+        margin-bottom: 1rem;
     }
 }
 
@@ -257,21 +258,18 @@ header {
 .success-container {
     .nb-tries
     {
-        margin-top: 15px;
-    }
-    margin-bottom: 50px;
-
-    &.container {
-        max-width: 380px;
+        margin-top: 1rem;
     }
+    margin-bottom: 3.125rem;
 
     .music-container {
-        padding: 20px;
+        padding: 1.5rem;
 
         .music-title {
             text-align: center;
             font-size: 2.5rem;
-            margin-bottom: 10px;
+            margin-bottom: 0.75rem;
+            word-wrap: break-word;
         }
 
         .music-artist {
@@ -281,7 +279,7 @@ header {
     }
 
     .spotify-container {
-        border-radius: 17px;
+        border-radius: 1.1rem;
 
         .BackgroundColorContainer_backgroundColorContainer__YZSQ7 {
             background-color: $background;
@@ -292,7 +290,24 @@ header {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 30px 0;
+        padding: 1.75rem 0;
+    }
+}
+
+
+/**************************/
+/*****    STATS       *****/
+/**************************/
+
+.stats-container {
+    .stats{
+        padding: 1.5rem 1.75rem;
+        display: grid;
+        grid-template-columns: 3fr 2fr;
+        row-gap: 1rem;
+        span:nth-child(even) {
+            text-align: right;
+        }
     }
 }
 
@@ -301,20 +316,19 @@ header {
 /**************************/
 @media (min-width: 576px) {
 
-    .container,
-    .small-container {
+    .container {
         max-width: 540px;
     }
+    .small-container {
+        max-width: 420px;
+    }
 }
 
 @media (min-width: 768px) {
     .container {
         max-width: 720px;
     }
 
-    .small-container {
-        max-width: 500px;
-    }
 }
 
 
@@ -358,7 +372,7 @@ header {
 /**************************/
 /******* Component  *******/
 /**************************/
-
+// TODO duplication ?
 .neon-effect-cyan {
     background: none;
     border: 7px solid cyan;

resources/js/components/comparaison.vue

@@ -338,6 +338,7 @@ watch(data, (proxyObject) => {
 .music-title {
     text-align: center;
     font-size: 1.7rem;
+    word-wrap: break-word;
 }
 
 .criterions {

resources/js/components/search-bar.vue

@@ -66,6 +66,9 @@ async function sendProposition(songId) {
     width: 100%;
     padding: 10px 15px 12px 55px;
     border-radius: 40px;
+    &::placeholder {
+        color: white;
+    }
 }
 
 .propositions-list {

resources/views/dashboard.blade.php

@@ -1,11 +1,23 @@
 @extends('layout.app')
 @section('content')
+    <section class="container stats-container">
+        <h2>{{ Auth::user()->name }}:</h2>
+        <div class="stats rounded neon-effect-magenta">
+            <span>Nombre de musique trouvée:</span>
+            <span>{{ $user_stats['nb_music_found'] }}</span>
+            <span>Nombre de de tentative totale:</span>
+            <span>{{ $user_stats['nb_tries'] }}</span>
+            <span>Moyenne du nombre d'essai par musique:</span>
+            <span>{{ $user_stats['average_tries'] }}</span>
+            <span>Combo de musique:</span>
+            <span>{{ $user_stats['music_streak'] }}</span>
+            <span>Musiques trouvées:</span>
+            <span>
+                @foreach (json_decode($user_stats['found_songs']) as $song)
+                    {{$song->title }} - {{ $song->artist }}<br>
+                @endforeach
 
-<p>Hi {{ Auth::user()->name }}, this is your personal dashboard</p>
-<p>Nombre de musique trouvée: {{$user_stats['nb_music_found']}}</p>
-<p>Nombre d'essai sur des musiques trouvée: {{$user_stats['nb_tries']}}</p>
-<p>Moyenne du nombre d'essai par musique trouvée: {{$user_stats['average_tries']}}</p>
-<p>Combo de musique: {{$user_stats['music_streak']}}</p>
-<p>Musique trouvées: {{$user_stats['found_songs']}}</p>
-
+            </span>
+        </div>
+    </section>
 @endsection

resources/views/game/game.blade.php

@@ -1,11 +1,12 @@
 @extends('layout.app')
 @section('content')
-
-    <div class="vue-container" id="app">
-        <p class="instructions">Commence par taper le titre d'une musique pour découvrir des indices:</p>
-        <search-bar @send-comparaison="sendDeltaToComparaison"></search-bar>
-        <comparaison :data="deltaToSend" @clear-history="$refs.historyComponent.clearHistory()"></comparaison>
-        <history :data="deltaToSend" ref="historyComponent"></history>
-    </div>
-    @vite(['resources/js/pages/game.js'])
+    <section class="container">
+        <div class="vue-container" id="app">
+            <p class="instructions">Commence par taper le titre d'une musique pour découvrir des indices:</p>
+            <search-bar @send-comparaison="sendDeltaToComparaison"></search-bar>
+            <comparaison :data="deltaToSend" @clear-history="$refs.historyComponent.clearHistory()"></comparaison>
+            <history :data="deltaToSend" ref="historyComponent"></history>
+        </div>
+        @vite(['resources/js/pages/game.js'])
+    </section>
 @endsection

resources/views/game/success.blade.php

@@ -11,9 +11,8 @@
         </div>
     </header>
 
-    <section class="container success-container">
+    <section class="small-container success-container">
         <h2>Bravo, le titre était:</h2>
-        <h3></h3>
         <div class="music-container neon-effect-magenta rounded">
             <h3 class="music-title neon-text-effect-cyan">{{ $title }}</h3>
             <p class="music-artist">{{ $artist }}</p>

resources/views/layout/app.blade.php

@@ -4,13 +4,12 @@
     <header>
         <div class="container header-container">
             <div class="title-container">
-                <h1 id="main-title" class="neon-text-effect-magenta">MusicGuessr</h1>
+                <a href="/">
+                    <h1 id="main-title" class="neon-text-effect-magenta">MusicGuessr</h1>
+                </a>
                 <span id="subtitle" class="neon-text-effect-cyan">by Maëlys Alessio Simon</span>
             </div>
         </div>
     </header>
-    <!-- Begin page content -->
-    <section class="container">
-        @yield('content')
-    </section>
+    @yield('content')
 @endsection