Added images to results page

src/routes/+page.svelte

@@ -45,7 +45,7 @@
 	}
 
 	img {
-		width: 40%;
+		width: 50%;
 		height: auto;
 	}
 

src/routes/resultats/+page.svelte

@@ -1,75 +1,116 @@
 <script lang="ts">
+	import img2022 from '$lib/assets/resultats/2022.jpg?width=600&webp';
+	import img2020 from '$lib/assets/resultats/2020.jpg?width=600&webp';
+	import img2019 from '$lib/assets/resultats/2019.jpg?width=600&webp';
+	import img2018 from '$lib/assets/resultats/2018.jpg?width=600&webp';
+	import img2017 from '$lib/assets/resultats/2017.jpg?width=600&webp';
+	import img2016 from '$lib/assets/resultats/2016.jpg?width=600&webp';
+	import img2015 from '$lib/assets/resultats/2015.jpg?width=600&webp';
+	import type { Res } from './types';
+	import Resultat from './Resultat.svelte';
+
+	const resultats: Res[] = [
+		{
+			saison: '2022',
+			image: img2022,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal (Jour 3)',
+					resultats: ['11e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2020',
+			image: img2020,
+			events: [
+				{
+					nom: 'Festival de robotique de Sherbrooke',
+					resultats: [
+						'18e en qualification',
+						'Finaliste Prix Liste de Dean Kamen (Édouard Moffet)',
+						'Prix du Professionnalisme coopératif'
+					]
+				}
+			]
+		},
+		{
+			saison: '2019',
+			image: img2019,
+			events: [
+				{
+					nom: 'Festival de robotique de Québec',
+					resultats: ['1er en qualification', 'Alliance finaliste']
+				},
+				{
+					nom: 'Championnat Mondial de Détroit (Tesla)',
+					resultats: ['21e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2018',
+			image: img2018,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: ['9e en qualification', 'Finalise Prix Liste de Dean Kamen (Olivier Demers)']
+				}
+			]
+		},
+		{
+			saison: '2017',
+			image: img2017,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: [
+						'18e en qualification',
+						'Alliance finaliste',
+						"Prix de l'inspiration en ingénierie"
+					]
+				},
+				{
+					nom: 'Championnat Mondial de St. Louis (Carson)',
+					resultats: ['47e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2016',
+			image: img2016,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: ['1er en qualification', 'Alliance championne', "Prix de l'entrepreneuriat"]
+				},
+				{
+					nom: 'Championnat Mondial de St. Louis (Hopper)',
+					resultats: ['15e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2015',
+			image: img2015,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: [
+						'5e en qualification',
+						"Prix de l'équipe recrue la mieux classée en qualifications"
+					]
+				}
+			]
+		}
+	];
 </script>
 
 <div class="container">
-	<article>
-		<header>Saison 2022</header>
-		<strong>Festival de robotique de Montréal (Jour 3)</strong>
-		<ul>
-			<li>11e en qualification</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2020</header>
-		<strong>Festival de robotique de Sherbrooke</strong>
-		<ul>
-			<li>18e en qualification</li>
-			<li>Finaliste Prix Liste de Dean Kamen (Édouard Moffet)</li>
-			<li>Prix du Professionnalisme coopératif</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2019</header>
-		<strong>Festival de robotique de Québec</strong>
-		<ul>
-			<li>1er en qualification</li>
-			<li>Alliance finaliste</li>
-		</ul>
-		<strong>Championnat Mondial de Détroit (Tesla)</strong>
-		<ul>
-			<li>21e en qualification</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2018</header>
-		<strong>Festival de robotique de Montréal</strong>
-		<ul>
-			<li>9e en qualification</li>
-			<li>Finalise Prix Liste de Dean Kamen (Olivier Demers)</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2017</header>
-		<strong>Festival de robotique de Montréal</strong>
-		<ul>
-			<li>18e en qualification</li>
-			<li>Alliance finaliste</li>
-			<li>Prix de l'inspiration en ingénierie</li>
-		</ul>
-		<strong>Championnat Mondial de St. Louis (Carson)</strong>
-		<ul>
-			<li>47e en qualification</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2016</header>
-		<strong>Festival de robotique de Montréal</strong>
-		<ul>
-			<li>1er en qualification</li>
-			<li>Alliance championne</li>
-			<li>Prix de l'entrepreneuriat</li>
-		</ul>
-		<strong>Championnat Mondial de St. Louis (Hopper)</strong>
-		<ul>
-			<li>15e en qualification</li>
-		</ul>
-	</article>
-	<article>
-		<header>Saison 2015</header>
-		<strong>Festival de robotique de Montréal</strong>
-		<ul>
-			<li>5e en qualification</li>
-			<li>Prix de l’Équipe recrue la mieux classée en qualifications</li>
-		</ul>
-	</article>
+	{#each resultats as resultat}
+		<Resultat resultats={resultat} />
+	{/each}
 </div>
+
+<style>
+</style>

src/routes/resultats/Resultat.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Res } from './types';
+
+	export let resultats: Res;
+</script>
+
+<article>
+	<header>Saison {resultats.saison}</header>
+	<content>
+		<img src={resultats.image} alt="équipe {resultats.saison}" />
+		<div>
+			{#each resultats.events as event}
+				<strong>{event.nom}</strong>
+				<ul>
+					{#each event.resultats as res}
+						<li>{res}</li>
+					{/each}
+				</ul>
+			{/each}
+		</div>
+	</content>
+</article>
+
+<style>
+	content {
+		display: flex;
+		flex-flow: row;
+		gap: 30px;
+	}
+
+	img {
+		object-fit: cover;
+		width: 50%;
+		height: auto;
+	}
+
+	@media (max-width: 640px) {
+		img {
+			display: none;
+		}
+	}
+</style>

src/routes/resultats/types.ts

@@ -0,0 +1,8 @@
+export type Res = {
+	image: string;
+	saison: string;
+	events: {
+		nom: string;
+		resultats: string[];
+	}[];
+};