thomas

2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
--- a/TP4/EX0/app.riot
+++ b/TP4/EX0/app.riot
@@ -0,0 +1,39 @@
+<app>
+    <h1>Personnages des Simpsons</h1>
+    <div class="controls">
+        <button onclick="{ () => sort('prenom') }">Trier par Prénom</button>
+        <button onclick="{ () => sort('age') }">Trier par Âge</button>
+    </div>
+
+    <my-list personnages="{ state.personnages }" onselect="{ selectCharacter }"></my-list>
+
+    <div if="{ state.selectedCharacter }" class="selected-char">
+        <h3>Personnage sélectionné :</h3>
+        <p><strong>Nom :</strong> { state.selectedCharacter.prenom } { state.selectedCharacter.nom }</p>
+        <p><strong>Âge :</strong> { state.selectedCharacter.age !== null ? state.selectedCharacter.age : 'inconnu' }</p>
+    </div>
+
+    <script>
+        export default {
+            onMounted(props) {
+                this.update({
+                    personnages: [...props.personnages],
+                    selectedCharacter: null
+                });
+            },
+
+            sort(key) {
+                const sorted = [...this.state.personnages].sort((a, b) => {
+                    if (a[key] === null) return 1;
+                    if (b[key] === null) return -1;
+                    return a[key] > b[key] ? 1 : -1;
+                });
+                this.update({ personnages: sorted });
+            },
+
+            selectCharacter(character) {
+                this.update({ selectedCharacter: character });
+            }
+        }
+    </script>
+</app>
--- a/TP4/EX0/index.html
+++ b/TP4/EX0/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Les Simpson avec Riot.js</title>
+    <script src="https://cdn.jsdelivr.net/npm/riot@6.0.1/riot.min.js"></script>
+    <style>
+        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; }
+        .controls { margin-bottom: 20px; }
+        button { margin: 0 5px; padding: 8px 12px; cursor: pointer; }
+        .selected-char { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
+    </style>
+</head>
+<body>
+    <app></app>
+    
+    <script type="module">
+        import './my-list.riot';
+        import './app.riot';
+        
+        const personnages = [
+            {"id":"1","nom":"Simpson","prenom":"Homer","age":"38"},
+            {"id":"2","nom":"Simpson","prenom":"Marge","age":"34"},
+            {"id":"3","nom":"Simpson","prenom":"Bart","age":"10"},
+            {"id":"4","nom":"Simpson","prenom":"Lisa","age":"8"},
+            {"id":"5","nom":"Simpson","prenom":"Maggie","age":"1"},
+            {"id":"6","nom":"Flanders","prenom":"Ned","age":"60"},
+            {"id":"7","nom":"Flanders","prenom":"Todd","age":"8"},
+            {"id":"8","nom":"Flanders","prenom":"Rod","age":"10"},
+            {"id":"9","nom":"Van Houten","prenom":"Kirk","age":null},
+            {"id":"10","nom":"Van Houten","prenom":"Milhouse","age":null},
+            {"id":"11","nom":"Van Houten","prenom":"Luann","age":null},
+            {"id":"12","nom":"Muntz","prenom":"Nelson","age":null},
+            {"id":"13","nom":"Muntz","prenom":"Véronica","age":null},
+            {"id":"14","nom":"Muntz","prenom":"Thomas Jr","age":null},
+            {"id":"15","nom":"Lovejoy","prenom":"Timothy","age":null},
+            {"id":"16","nom":"Burns","prenom":"Charles","age":null}
+        ];
+
+        riot.mount('app', { personnages });
+    </script>
+</body>
+</html>
--- a/TP4/EX0/my-list.riot
+++ b/TP4/EX0/my-list.riot
@@ -0,0 +1,22 @@
+<my-list>
+    <ul>
+        <li each="{ char in props.personnages }" onclick="{ () => onSelect(char) }">
+            { char.prenom } { char.nom } ({ char.age !== null ? char.age : 'âge inconnu' })
+        </li>
+    </ul>
+
+    <style>
+        ul { list-style: none; padding: 0; }
+        li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
+        li:hover { background-color: #f0f0f0; }
+    </style>
+
+    <script>
+        export default {
+            onSelect(character) {
+                // Émet un événement 'select' vers le parent avec le personnage sélectionné
+                this.parent.selectCharacter(character);
+            }
+        }
+    </script>
+</my-list>