Layout

ReadMe.md

@@ -1,18 +1,17 @@
 # QuestionsPourUnChampignon
-## Auteur : Lucas Hureaux
 
-### Ce projet est un quiz. Le but : répondre à toutes les questions. Plus de détails dans les instructions du quiz situés dans le menu principal.
+**Auteur :** [Lucas Hureaux](https://github.com/LucBlocker01)
 
-## Instructions :
+Ce projet est un quiz. Le but : répondre à toutes les questions. Plus de détails dans les instructions du quiz situés dans le menu principal.
 
-### 1. Si ce n'est pas déjà fait, télécharger PHP 8.1 au minimum (je ne sais pas si les versions antérieurs vont fonctionner pour ce projet). Des tutos sur Internet vous aiderons là-dessus.
+## Instructions :
 
-### 2. Ouvrir le répertoire principal du projet (le dossier dans laquelle se trouve ce fichier readme) et ouvrir la boîte de commande Powershell en faisant clic droit + shift et sélectionner "Ouvrir la fenêtre Powershell ici".
+1. Si ce n'est pas déjà fait, télécharger PHP 8.1 au minimum (je ne sais pas si les versions antérieurs vont fonctionner pour ce projet). Des tutos sur Internet vous aiderons là-dessus.
 
-### 3. Taper la commande suivante :
+2. Ouvrir le répertoire principal du projet (le dossier dans laquelle se trouve ce fichier readme) et ouvrir la boîte de commande Powershell en faisant clic droit + shift et sélectionner "Ouvrir la fenêtre Powershell ici".
 
-```php -S localhost:8000```
+3. Taper la commande suivante : `php -S localhost:8000 -t public`
 
-### 4. Ouvrir un navigateur web et taper dans la boîte URL "[localhost:8000/public/index.html](http://localhost:8000/public/index.html)"
+4. Ouvrir un navigateur web et taper dans la boîte URL : [localhost:8000](http://localhost:8000)
 
-### 5. Suivez les instructions en cliquant sur "Instructions" dans le menu principal
+5. Suivez les instructions en cliquant sur "Instructions" dans le menu principal

public/index.php

@@ -0,0 +1,38 @@
+<?php
+
+ob_start();
+?>
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/general.css">
+<?php
+
+$styles = ob_get_clean();
+
+ob_start();
+?>
+    <div class="difficulty">Choisir une difficulté</div>
+    <div class="difficultyList">
+        <button id="veryeasy">Très Facile</button>
+        <button id="easy">Facile</button>
+        <button id="medium">Moyen</button>
+        <button id="hard">Difficile</button>
+        <button id="extreme">Extrême</button>
+        <button id="impossible">Impossible</button>
+    </div>
+    <div class="buttonList">
+        <button id="start">Commencer</button>
+        <button id="instructions">Instructions</button>
+    </div>
+<?php
+
+$main = ob_get_clean();
+
+ob_start();
+?>
+    <script src="js/utils.js" defer></script>
+    <script src="js/index.js" defer></script>
+<?php
+
+$scripts = ob_get_clean();
+
+require __DIR__ . "/../templates/layout.php";

public/instructions.php

@@ -0,0 +1,45 @@
+<?php
+
+ob_start();
+?>
+    <link rel="stylesheet" href="css/instructions.css">
+    <link rel="stylesheet" href="css/general.css">
+<?php
+
+$styles = ob_get_clean();
+
+ob_start();
+?>
+    <div class="instructions">Instructions</div>
+    <div class="instructionsText">
+        <div class="line">
+            QuestionsPourUnChampignon est un quiz composé de diverses questions,
+            certains plus difficiles que d'autres, auxquels vous devez répondre.
+        </div>
+        <div class="line">
+            Vous pouvez sélectionner plusieurs niveaux de difficulté. Les niveaux les plus bas seront plus indulgents, offrant davantage de vies et moins de choix de réponses, tandis que les niveaux plus élevés sont bien plus exigeants.
+        </div>
+        <div class="line">
+            Les niveaux élevés rajouteront des éléments supplémentaires comme un temps limité également.
+        </div>
+        <div class="line">
+            Pour gagner un niveau, vous devez répondre à toutes les questions de celui-ci sans perdre toutes vos vies.
+        </div>
+        <div class="line">
+            Serez-vous capables d'obtenir un score parfait?
+        </div>
+    </div>
+    <button id="backToMenu">Retour</button>
+<?php
+
+$main = ob_get_clean();
+
+ob_start();
+?>
+    <script src="js/utils.js" defer></script>
+    <script src="js/backToMenu.js" defer></script>
+<?php
+
+$scripts = ob_get_clean();
+
+require __DIR__ . "/../templates/layout.php";

public/js/backToMenu.js

@@ -1,4 +1,4 @@
 document.getElementById("backToMenu").addEventListener("click", function() {
     clearStorage();
-    location.replace("index.html");
+    location.replace("/");
 })

public/js/index.js

@@ -3,7 +3,7 @@ document.getElementById("start").addEventListener("click", function() {
 });
 
 document.getElementById("instructions").addEventListener("click", function() {
-    location.replace("instructions.html");
+    location.replace("instructions.php");
 });
 
 if (!localStorage.getItem("difficulty")) {

public/js/lose.js

@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", function() {
     if (!localStorage.getItem("currentQuestion")) {
-        location.replace("index.html");
+        location.replace("/");
     }
 })
 

public/js/utils.js

@@ -15,7 +15,7 @@ async function quizFetcher() {
             break;
     }
     localStorage.setItem("totalLives", lives)
-    response = await fetch("http://localhost:8000/src/quizCreator.php", {
+    response = await fetch("/quizCreator.php", {
         method: "POST",
         headers: {
             "Content-Type": "application/x-www-form-urlencoded"

public/quizCreator.php

@@ -0,0 +1,7 @@
+<?php
+
+require __DIR__ . "/../src/classes/Quiz.php";
+
+$quiz = new Quiz();
+
+echo json_encode($quiz);

src/classes/Question.php

@@ -19,4 +19,4 @@ public function toArray(){
             "correctAnswer" => $this->correctAnswer
         ];
     }
-}
+}

src/classes/Quiz.php

@@ -1,6 +1,6 @@
 <?php
 
-require "questionGenerator.php";
+require __DIR__ . "/../questionGenerator.php";
 
 class Quiz implements JsonSerializable {
     private int $lives;
@@ -20,4 +20,4 @@ public function jsonSerialize(): mixed {
             'difficulty' => $this->difficulty
         ];
     }
-}
+}

src/questionGenerator.php

@@ -4,7 +4,7 @@
 header("Access-Control-Allow-Headers: Content-Type, Authorization");
 header("Content-Type: application/json; charset=UTF-8");
 
-require "classes/Question.php";
+require __DIR__ . "/classes/Question.php";
 
 function generateQuestions($difficulty) {
     switch ($difficulty) {
@@ -296,4 +296,4 @@ function generateQuestions($difficulty) {
 
     return $questions;
 
-}
+}

templates/layout.php

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <title>QuestionsPourUnChampignon</title>
+        <meta name="viewport" content="width=device-width" initial-scale="1">
+        <link rel="icon" type="image/png" sizes="16x16" href="favicon.ico">
+        <?= $styles ?? "" ?>
+    </head>
+    <body>
+        <div class="header">
+            <div class="sidebar">
+
+            </div>
+            <div class="mainbar">
+                <div>QuestionsPourUnChampignon</div>
+            </div>
+            <div class="sidebar">
+
+            </div>
+        </div>
+        <div class="content">
+            <div class="filler"></div>
+            <main class="mainContent">
+                <?= $main ?? "" ?>
+            </main>
+            <div class="filler"></div>
+        </div>
+        <?= $scripts ?? "" ?>
+    </body>
+</html>