Version finale.

présentation.md

@@ -0,0 +1,27 @@
+# Présentation du 21/10/2024
+
+## Aspect techniques
+- 100% orienté objet
+- Typescript
+- utilisation d'un router
+- une page blank qui se dérive en plusieurs pages (polymorphisme)
+- Utilisation de .env
+- Prise en charge à 95% du format mobile
+
+## Aspect fonctionnel
+- Page d'acceuil pour se connecter à Spotify
+- Page de présentation des Artistes et Musiques favoris
+- Page Artistes
+- Page Musiques
+
+## Aspect API Spotify
+
+- OAuth2 avec PKCE pour SPA
+- Stockage des tokens dans le local storage
+- Utilisation de l'API pour récupérer les artistes et musiques favoris
+- Utilisation de l'API pour récupérer les détails d'un artiste et de musique
+- Utilisation de l'API pour récupérer les détails de l'utilisateur
+
+## Aspcet non fonctionnel
+
+- Page d'acceuil très jolie

src/css/pages/artist.scss

@@ -53,7 +53,6 @@
 
 .page-artist-title-div:hover .page-artist-spotify-icon {
     opacity: 1;
-    // change color to green with fill
     fill: var(--primary);
 }
 
@@ -66,7 +65,6 @@
 }
 
 .page-artist-title-div:hover .page-artist-spotify-icon {
-    // change color to green
     filter: invert(61%) sepia(98%) saturate(1419%) hue-rotate(89deg) brightness(88%) contrast(78%);
 }
 
@@ -103,3 +101,19 @@
 .page-artist-popularity {
     color: var(--text-color);
 }
+
+@media (max-width: 600px) {
+    .page-artist-infos {
+        flex-direction: column;
+    }
+
+    .page-artist-title {
+        font-size: 2rem;
+    }
+
+    .page-artist-title-top-tracks {
+        font-size: 2rem;
+        width: 90%;
+        text-align: center;
+    }
+}

src/css/pages/track.scss

@@ -16,6 +16,17 @@
     gap: 2rem;
 }
 
+@media (max-width: 600px) {
+    .page-track-infos {
+        flex-direction: column;
+    }
+
+    .page-track-title {
+        font-size: 2rem;
+    }
+}
+
+
 .page-track-infos img {
     border-radius: 50%;
     width: 16rem;

src/ts/components/ArtistPill.ts

@@ -22,7 +22,6 @@ export class ArtistPill extends HTMLDivElement {
         this.appendChild(div);
 
         this.addEventListener("click", () => {
-            console.error("Navigating to artist", artist.id);
             window.router.navigateTo("artist", { id: artist.id });
         });
     }

src/ts/components/TrackPill.ts

@@ -21,7 +21,6 @@ export class TrackPill extends HTMLDivElement {
         this.appendChild(div);
 
         this.addEventListener("click", () => {
-            console.error("Navigating to track", track.id);
             window.router.navigateTo("track", { id: track.id });
         });
     }

webpack.common.js

@@ -1,50 +1,48 @@
-const path = require("path"); // Utilisé pour travailler avec les chemins de fichiers
-const HtmlWebpackPlugin = require("html-webpack-plugin"); // Plugin pour générer automatiquement un fichier HTML qui inclut les bundles
-const Dotenv = require("dotenv-webpack"); // Plugin pour charger les variables d'environnement depuis un fichier .env
-const { SourceMapDevToolPlugin } = require("webpack"); // Plugin pour générer des source maps
-const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Plugin pour extraire les styles dans un fichier séparé
-
-
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const Dotenv = require("dotenv-webpack");
+const { SourceMapDevToolPlugin } = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-    entry: "./src/entry.ts", // Point d'entrée de l'application, ici le fichier principal JavaScript
+    entry: "./src/entry.ts",
     output: {
-        filename: "bundle.js", // Nom du fichier de sortie pour le bundle généré
-        path: path.resolve(__dirname, "dist"), // Répertoire de sortie (généralement 'dist' pour distribution)
-        clean: true, // Nettoie le répertoire de sortie avant chaque build
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        clean: true,
     },
     module: {
         rules: [
             {
-                test: /\.ts$/, // Add rule for TypeScript files
+                test: /\.ts$/,
                 exclude: /node_modules/,
                 use: {
                     loader: "ts-loader",
                 },
             },
             {
-                test: /\.js$/, // Utilise cette règle pour tous les fichiers avec l'extension .js
-                exclude: /node_modules/, // Ignore les fichiers dans node_modules
+                test: /\.js$/,
+                exclude: /node_modules/,
                 use: {
-                    loader: "babel-loader", // Utilise Babel pour transpiler le code ES6+ vers ES5 pour compatibilité
+                    loader: "babel-loader",
                 },
             },
             {
-                test: /\.(css|scss)$/, // Fichiers styles
+                test: /\.(css|scss)$/,
                 use: [
-                    MiniCssExtractPlugin.loader, // Injecte les styles dans le DOM ou les extrait dans un fichier séparé
+                    MiniCssExtractPlugin.loader,
                     { loader: "css-loader" },
                     { loader: "postcss-loader" },
                     { loader: "sass-loader" },
-                ], // 'style-loader' injecte les styles dans le DOM, 'css-loader' interprète @import et url() comme import/require
+                ],
             },
             {
-                test: /\.(png|svg|jpg|jpeg|gif|ico)$/i, // Gestion des fichiers images
-                type: "asset/resource", // Gère les fichiers statiques comme des ressources (ils sont copiés dans 'dist')
+                test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
+                type: "asset/resource",
             },
             {
                 test: /\.html$/,
-                use: ["html-loader"], // Permet d'importer des fichiers HTML dans les fichiers JavaScript
+                use: ["html-loader"],
             },
             {
                 test: /\.json$/,
@@ -54,26 +52,24 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "./src/template.html", // Utilise un fichier HTML comme modèle pour générer le fichier final
-            filename: "index.html", // Nom du fichier généré
+            template: "./src/template.html",
+            filename: "index.html",
             favicon: path.resolve(__dirname, "./src/images/favicon.ico"),
         }),
         new Dotenv({
             path: "./.env",
         }),
         new SourceMapDevToolPlugin({
             filename: "[file].map",
-            exclude: ["vendor.js", "node_modules/@fortawesome/fontawesome-free/css/all.min.css"], // Exclut FontAwesome et tout fichier tiers ou non nécessaire
-            append: "\n//# sourceMappingURL=[url]", // Ajoute la source map à la fin du fichier
-            exclude: ["vendor.js"], // Exclut les fichiers tiers comme FontAwesome
+            exclude: ["vendor.js", "node_modules/@fortawesome/fontawesome-free/css/all.min.css"],
+            append: "\n//# sourceMappingURL=[url]",
+            exclude: ["vendor.js"],
         }),
         new MiniCssExtractPlugin({
-            filename: "styles.css", // Nom du fichier de styles généré
+            filename: "styles.css",
         }),
     ],
     resolve: {
-        extensions: [".ts", ".js"], // Extensions à résoudre automatiquement (par défaut '.js')
-        // Optional: ajouter d'autres extensions comme '.jsx' ou '.ts' si besoin
-        // extensions: ['.js', '.jsx', '.ts'],
+        extensions: [".ts", ".js"],
     },
 };

webpack.dev.js

@@ -1,21 +1,17 @@
-const { merge } = require("webpack-merge"); // Fusionne les configurations communes et spécifiques à l'environnement
-const common = require("./webpack.common.js"); // Importation de la configuration commune
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
 const path = require("path");
 
 module.exports = merge(common, {
-    mode: "development", // Définit le mode en développement, active des outils comme la source map
-    devtool: "inline-source-map", // Active une source map pour faciliter le débogage (lie le code minifié au code source)
+    mode: "development",
+    devtool: "inline-source-map",
     devServer: {
-        static: "./dist", // Répertoire à servir (ici, le répertoire 'dist')
-        port: 3000, // Définit le port du serveur de développement
-        open: true, // Ouvre automatiquement le navigateur lorsque le serveur démarre
-        hot: true, // Active le hot module replacement (HMR), pour recharger le code sans rafraîchir la page entière
-        // Optional: configuration proxy pour les API durant le développement
-        // proxy: {
-        //   '/api': 'http://localhost:3000'
-        // },
+        static: "./dist",
+        port: 3000,
+        open: true,
+        hot: true,
     },
     output: {
-        filename: "bundle.js", // Nom du bundle en développement (généralement simple)
+        filename: "bundle.js",
     },
 });

webpack.prod.js

@@ -1,32 +1,26 @@
-const { merge } = require("webpack-merge"); // Fusionne les configurations
-const common = require("./webpack.common.js"); // Importation de la configuration commune
-const TerserPlugin = require("terser-webpack-plugin"); // Plugin pour minifier le JavaScript
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // Plugin pour minifier le CSS
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 module.exports = merge(common, {
-    mode: "production", // Définit le mode en production, active l'optimisation par défaut (comme la minification)
+    mode: "production",
     output: {
-        filename: "bundle.[contenthash].js", // Utilisation de contenthash pour le cache-busting (force le navigateur à recharger les fichiers modifiés)
+        filename: "bundle.[contenthash].js",
     },
     optimization: {
-        minimize: true, // Active la minification pour réduire la taille des fichiers
+        minimize: true,
         minimizer: [
             new TerserPlugin({
-                parallel: true, // Minification JavaScript en parallèle pour accélérer le processus
+                parallel: true,
                 terserOptions: {
-                    compress: true, // Compression du code pour améliorer les performances
+                    compress: true,
                 },
             }),
-            new CssMinimizerPlugin(), // Minification des fichiers CSS
+            new CssMinimizerPlugin(),
         ],
         splitChunks: {
-            chunks: "all", // Divise le code en morceaux séparés (vendor, app, etc.) pour une meilleure gestion du cache
+            chunks: "all",
         },
     },
-    // Rarely used: CompressionPlugin pour compresser les fichiers en Gzip ou Brotli
-    // plugins: [
-    //   new CompressionPlugin({
-    //     algorithm: 'gzip',
-    //   }),
-    // ],
 });