diff --git a/UML.drawio b/UML.drawio new file mode 100644 index 0000000..034e86d --- /dev/null +++ b/UML.drawio @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/UML.png b/UML.png new file mode 100644 index 0000000..7f4925e Binary files /dev/null and b/UML.png differ diff --git "a/pr\303\251sentation.md" "b/pr\303\251sentation.md" new file mode 100644 index 0000000..eea99e3 --- /dev/null +++ "b/pr\303\251sentation.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 diff --git a/src/css/pages/artist.scss b/src/css/pages/artist.scss index bdc368c..06af5a1 100644 --- a/src/css/pages/artist.scss +++ b/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; + } +} \ No newline at end of file diff --git a/src/css/pages/track.scss b/src/css/pages/track.scss index 678fc14..8568f90 100644 --- a/src/css/pages/track.scss +++ b/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; diff --git a/src/ts/components/ArtistPill.ts b/src/ts/components/ArtistPill.ts index 7045dd4..5f948fd 100644 --- a/src/ts/components/ArtistPill.ts +++ b/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 }); }); } diff --git a/src/ts/components/TrackPill.ts b/src/ts/components/TrackPill.ts index 534a283..cb83c86 100644 --- a/src/ts/components/TrackPill.ts +++ b/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 }); }); } diff --git a/webpack.common.js b/webpack.common.js index 16cf8b4..a6f4541 100644 --- a/webpack.common.js +++ b/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,8 +52,8 @@ 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({ @@ -63,17 +61,15 @@ module.exports = { }), 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"], }, }; diff --git a/webpack.dev.js b/webpack.dev.js index 9ebcd5d..4682d08 100644 --- a/webpack.dev.js +++ b/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", }, }); diff --git a/webpack.prod.js b/webpack.prod.js index c3f2ef2..5067587 100644 --- a/webpack.prod.js +++ b/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', - // }), - // ], });