tp4 j'arrive pas à afficher les jeux

about.html

+<div class="aboutContent">
+	<h2 class="logo">
+		<img src="images/logo.svg" />
+		<span><em>JS</em>team</span>
+	</h2>
+	<p>
+		JSteam est un TP de JS idéal pour apprendre le dev front
+		tout en découvrant de nouveaux jeux vidéos.
+	</p>
+	<ul class="links">
+		<li>
+			<a href="https://gitlab.univ-lille.fr/js">gitlab.univ-lille.fr/js</a>
+		</li>
+		<li>
+			<a href="https://iut.univ-lille.fr/">iut.univ-lille.fr</a>
+		</li>
+	</ul>
+	<button class="button">Nous contacter</button>
+</div>
\ No newline at end of file

index.html

@@ -54,7 +54,7 @@
 				<section class="results"></section>
 			</article>
 			<article class="gameDetail">Contenu de la vue "Détail"</article>
-			<article class="about">Contenu de la vue "À propos"</article>
+			<article class="about"></article>
 			<article class="help">
 				<form class="helpForm">
 					<label>

src/AboutView.js

+import View from './View.js';
+import Router from './Router.js';
+
+export default class AboutView extends View {
+	element;
+
+	constructor(element) {
+		super(element);
+		this.element = document.querySelector('.about');
+	}
+
+	showFileContent(html) {
+		this.element.innerHTML = html;
+	}
+
+	OnClickSupport(event) {
+		event.preventDefault();
+		Router.navigate('/help');
+	}
+
+	show() {
+		super.show();
+		fetch('./about.html')
+			.then(response => response.text())
+			.then(responseText => this.showFileContent(responseText))
+			.then(() =>
+				this.element
+					.querySelector('.button')
+					.addEventListener('click', event => this.OnClickSupport(event))
+			);
+	}
+}

src/GameListView.js

-import data from './data.js';
-
 import renderGameThumbnail from './renderGameThumbnail.js';
 import View from './View.js';
 
@@ -48,12 +46,36 @@ export default class GameListView extends View {
 		}
 		// parcours du tableau + génération du code HTML de la gameList
 		let html = '';
-		data
+
+		this.element.querySelector('.results').classList.add('is-loading');
+		this.element.querySelector('.button submit').setAttribute('disabled', '');
+		fetch(
+			`https://api.rawg.io/api/games?search=${search}&ordering=${ordering}&key=7ed131e6be6b455ba809caad17f4f260`
+		)
+			.then(response => response.text())
+			.then(() =>
+				this.element
+					.querySelector('.button submit')
+					.setAttribute('', 'disabled')
+			)
+			.then(res => JSON.parse(res))
+			.then(donne =>
+				donne.results.forEach(game => {
+					html += renderGameThumbnail(game);
+				})
+			)
+			.then(() => (this.element.querySelector('.results').innerHTML = html))
+			.then(() =>
+				this.element.querySelector('.results').classList.remove('is-loading')
+			);
+
+		/*data
 			.filter(game => game.name.toLowerCase().includes(search.toLowerCase())) // recherche
 			.sort(sortingFunction) // tri
 			.forEach(game => (html += renderGameThumbnail(game))); // génération du HTML
 		// maj de la page HTML
 		this.element.querySelector('.results').innerHTML = html;
+		*/
 	}
 	/**
 	 * Fonction qui permet d'afficher ou masquer le formulaire de recherche

src/data.js

-const data = [
-	{
-		name: 'Mario Kart 8 Deluxe',
-		released: '2017-04-27',
-		metacritic: 92,
-		background_image: 'images/mario-kart-8-deluxe.jpg',
-	},
-	{
-		name: 'God of War Ragnarok',
-		released: '2022-11-09',
-		metacritic: 94,
-		background_image: 'images/god-of-war-ragnarok.jpg',
-	},
-	{
-		name: 'The Last of Us Part 2',
-		released: '2020-06-19',
-		metacritic: 95,
-		background_image: 'images/the-last-of-us-part-2.jpg',
-	},
-];
-export default data;

src/main.js

 import GameListView from './GameListView.js';
 import HelpView from './HelpView.js';
 import Router from './Router.js';
-import View from './View.js';
+import AboutView from './AboutView.js';
 
 // Modification du footer
 document.querySelector('body > footer > div:nth-of-type(2)').innerHTML +=
@@ -12,7 +12,9 @@ const helpView = new HelpView(document.querySelector('.viewContent .help'));
 const gameListView = new GameListView(
 	document.querySelector('.viewContent > .gameList')
 );
-const aboutView = new View(document.querySelector('.viewContent > .about'));
+const aboutView = new AboutView(
+	document.querySelector('.viewContent > .about')
+);
 
 // mise en place du Router
 const routes = [