From 8735fd92af95a0c9269766cca78bc23e6f0b433d Mon Sep 17 00:00:00 2001
From: Lucas Delobelle <lucas@ld-web.net>
Date: Mon, 8 Apr 2024 08:20:30 +0200
Subject: [PATCH] :sparkles: add While loop exercise

---
 src/app/php/exercises/page.tsx                |  2 +
 .../exercises/php/loops/WhileLoop.tsx         | 60 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/exercises/php/loops/WhileLoop.tsx

diff --git a/src/app/php/exercises/page.tsx b/src/app/php/exercises/page.tsx
index 2bea618..acb99cd 100644
--- a/src/app/php/exercises/page.tsx
+++ b/src/app/php/exercises/page.tsx
@@ -7,6 +7,7 @@ import DisplayLastElement from "@/components/exercises/php/arrays/DisplayLastEle
 import ForLoop from "@/components/exercises/php/loops/ForLoop";
 import usePhp from "@/hooks/usePhp";
 import Section from "@/components/exercises/Section";
+import WhileLoop from "@/components/exercises/php/loops/WhileLoop";
 
 export default function Exercises() {
   const php = usePhp();
@@ -21,6 +22,7 @@ export default function Exercises() {
 
       <Section title="Les boucles" id="les-boucles">
         <ForLoop />
+        <WhileLoop />
       </Section>
     </PhpContext.Provider>
   );
diff --git a/src/components/exercises/php/loops/WhileLoop.tsx b/src/components/exercises/php/loops/WhileLoop.tsx
new file mode 100644
index 0000000..6e9a982
--- /dev/null
+++ b/src/components/exercises/php/loops/WhileLoop.tsx
@@ -0,0 +1,60 @@
+import PhpPractice from "@/components/practice/PhpPractice";
+import Enonce from "../../Enonce";
+import Anchor from "@/components/utils/Anchor";
+
+const initialCode = `<?php
+$users = ['Amanda', 'Annie', 'Georgie', 'Victoria', 'Virgie', 'Ellen', 'Calvin'];
+`;
+
+const Hint = () => (
+  <div>
+    Pour afficher les éléments dans l&apos;ordre inverse, vous devez partir du
+    dernier élément.
+    <br />
+    L&apos;index du dernier élément est donc{" "}
+    <span className="bg-blue-500 dark:bg-gray-700 p-1 font-bold">
+      count($users) - 1
+    </span>
+  </div>
+);
+
+const WhileLoop = () => {
+  const checkCode = (code: string) => code.match(/while\s*\(/) !== null;
+
+  const checkResult = (output: string[]): boolean => {
+    return (
+      output.length === 7 && output[0] === "Calvin" && output[6] === "Amanda"
+    );
+  };
+
+  return (
+    <div className="mb-8">
+      <h3 className="text-lg mb-2 font-bold uppercase" id="while-loop">
+        Utiliser la boucle while <Anchor id="while-loop" />
+      </h3>
+      <Enonce>
+        Affichez tous les éléments de ce tableau à l&apos;aide d&apos;une boucle
+        while, <strong>mais en partant de la fin</strong>.
+        <br />
+        <strong>
+          Affichez un utilisateur par ligne : utilisez la constante{" "}
+          <span className="bg-slate-300 dark:bg-slate-800 p-1">PHP_EOL</span>{" "}
+          pour revenir à la ligne
+        </strong>
+        <br />
+        Vous devez afficher les éléments en sens inverse.
+        <br />
+        Pour valider, le premier prénom qui devra apparaître sera donc
+        &quot;Calvin&quot; et le dernier &quot;Amanda&quot;
+      </Enonce>
+      <PhpPractice
+        initialCode={initialCode}
+        hint={<Hint />}
+        checkCode={checkCode}
+        checkOutput={checkResult}
+      />
+    </div>
+  );
+};
+
+export default WhileLoop;