Merge pull request #96 from HE-Arc/simon-plumey-95-corrections-css

Simon plumey 95 corrections css
HE-Arc · Dec 16, 2023 · 3be4415 · 3be4415
2 parents 1e7425f + ece9825
commit 3be4415
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 97 deletions.
diff --git a/public/js/ajax_function.js b/public/js/ajax_function.js
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -408,9 +408,11 @@ header {
 /**************************/
 
 .requested-song-form-container {
-    width: 100%;
     text-align: center;
-    padding: 2.5vw;
+    margin-top: 1rem;
+    .btn{
+        margin-top: 1rem;
+    }
 }
 
 .requested-song-form-container label {

diff --git a/resources/js/components/comparaison.vue b/resources/js/components/comparaison.vue
@@ -170,8 +170,6 @@ async function addClueToTitle() {
         index: index
     })
 
-    console.log(answer)
-
     if (answer.status == 200) {
         title.value = title.value.substring(0, index) + answer.data.hint + title.value.substring(index + 1)
     }
@@ -215,7 +213,6 @@ async function startGame() {
     }
     localStorage.setItem('nbGenre', answer.data.nb_artist_genre)
 
-    console.log(answer)
     saveFieldsInLocalStorage()
 }
 
@@ -258,7 +255,7 @@ function newMusic()
 
 async function isGameStarted() {
     const answer = await axios.post('/has_game_started')
-    console.log(answer)
+
     if (!answer.data.is_started) {
         startGame()
         return false

diff --git a/resources/js/components/history.vue b/resources/js/components/history.vue
@@ -41,7 +41,7 @@ defineExpose({ clearHistory })
 <template>
     <div>
         <h2 v-show="history.length > 0">Propositions précédentes:</h2>
-        <historyItem v-for="item in history" :title="item.title" :artist="item.artist" :album="item.album" :year="item.year"
+        <historyItem v-for="item in history" :title="item.title" :artist="item.artist" :album="item.album" :year="item.year.toString()"
             :genres="item.genres" :time="item.time"></historyItem>
     </div>
 </template>

diff --git a/resources/js/components/search-bar.vue b/resources/js/components/search-bar.vue
@@ -5,17 +5,20 @@ import axios from 'axios';
 const emit = defineEmits(['send-comparaison'])
 const userInput = ref('');
 let songs = ref([]);
+let focusIndex = ref(0);
 
 async function getSongs(userInput) {
     if (userInput.length < 2) {
         songs.value = []
+        focusIndex.value = -1
         return
     }
     const answer = await axios.get('/song_beginning_with/' + userInput)
     if (answer.data.length > 0) {
         songs.value = answer.data
     } else {
         songs.value = []
+        focusIndex.value = -1
     }
 }
 
@@ -26,6 +29,7 @@ async function sendProposition(songId) {
     emit('send-comparaison', answer.data);
 
     songs.value = [];
+    focusIndex.value = -1;
     userInput.value = '';
 }
 </script>
@@ -36,10 +40,16 @@ async function sendProposition(songId) {
             <path fill="white"
                 d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z" />
         </svg>
-        <input v-model="userInput" id="search-bar" @input="getSongs(userInput)" v-on:keyup.enter="songs.length > 0 ? sendProposition(songs[0].id):null" class="neon-effect-cyan-off" type="text"
-            placeholder="Taper le nom d'une musique">
+        <input v-model="userInput" id="search-bar" @input="getSongs(userInput)"
+            v-on:keyup.enter="songs.length > 0 ? sendProposition(songs[focusIndex].id) : null"
+            v-on:keydown.arrow-up="focusIndex > 0 ? focusIndex-- : null"
+            v-on:keydown.arrow-down="focusIndex < songs.length - 1 ? focusIndex++ : null" class="neon-effect-cyan-off"
+            type="text" @focusout="songs = [], focusIndex = -1" placeholder="Taper le nom d'une musique">
         <ul class="propositions-list">
-            <li v-for="song in songs" @click="sendProposition(song.id)">"{{ song.track_name }}" de {{ song.artist_name }},
+            <li v-for="song, key in songs" @click="sendProposition(song.id)"
+            @mouseover="focusIndex = key"
+            @mouseleave="focusIndex = -1"
+            :class="{hover: focusIndex == key}">"{{ song.track_name }}" de {{ song.artist_name }},
                 sorti en {{
                     song.year }}</li>
         </ul>
@@ -66,6 +76,7 @@ async function sendProposition(songId) {
     width: 100%;
     padding: 10px 15px 12px 55px;
     border-radius: 40px;
+
     &::placeholder {
         color: white;
     }
@@ -78,11 +89,12 @@ async function sendProposition(songId) {
     background-color: rgba($color: $background, $alpha: .9);
     border-radius: 10px;
     width: 100%;
+
     li {
         padding: 5px 10px;
         cursor: pointer;
 
-        &:hover {
+        &.hover {
             background-color: #1a1a1a;
         }
     }

diff --git a/resources/views/request/confirmation.blade.php b/resources/views/request/confirmation.blade.php
@@ -1,17 +1,14 @@
 @extends('layout.app')
 @section('content')
 
-<div class="requested-song-form-container">
+<section class="small-container requested-song-form-container">
     <p>Votre proposition a été enregistrée avec succès !</p>
     <p>Titre : {{ $title }}</p>
     <p>Auteur : {{ $author }}</p>
     <a href="{{ route('song_requests.create') }}">
-        <button class="requested-song-form-container" type="button">Proposer une autre musique</button>
+        <button class="btn btn-magenta" type="button">Proposer une autre musique</button>
     </a>
-
-    <a href="/">Retour au jeu</a>
-
-</div>
+</section>
 
 @vite(['resources/js/pages/game.js'])
 @endsection
diff --git a/resources/views/request/proposal.blade.php b/resources/views/request/proposal.blade.php
@@ -2,9 +2,9 @@
 @extends('layout.app')
 @section('content')
 
-<div class="neon-effect-magenta p-6 rounded-xl shadow-md max-w-lg mx-auto my-auto">
-    <p class="instructions">Proposer une musique :</p>
-    
+<div class="p-6 rounded-xl shadow-md max-w-lg mx-auto my-auto">
+    <p class="instructions">Proposer une musique à ajouter à la liste :</p>
+
     <!-- Session Status -->
     <x-auth-session-status class="mb-4" :status="session('status')" />
 
@@ -26,8 +26,9 @@
             <x-input-error :messages="$errors->get('artist_name')" class="mt-2" />
             <span id="artistErrorMessage" class="text-red-500"></span>
         </div>
-
-        <button type="submit" class="mt-4">Proposer</button>
+        <div class="flex items-center justify-end">
+            <button type="submit" class="mt-4 btn btn-magenta">Proposer</button>
+        </div>
     </form>
 </div>