From c2db68141bc9c3423840eecfa6fa1d4854b2633f Mon Sep 17 00:00:00 2001
From: Funasitien DreamCloud <funasitien@dreamclouds.fr>
Date: Mon, 3 Jun 2024 08:15:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Cablage=20en=20cours...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |  91 ++++++++++++++++
 package.json                  |   1 +
 src/components/Card.astro     |   2 +
 src/components/Footer.astro   |   9 +-
 src/js/release.js             |  58 +++++++++++
 src/pages/games/Clicker.astro | 191 ++++++++++++++++++----------------
 src/pages/games/Morpion.astro |   5 +-
 src/pages/games/index.astro   |   4 +-
 8 files changed, 261 insertions(+), 100 deletions(-)
 create mode 100644 src/js/release.js

diff --git a/package-lock.json b/package-lock.json
index 597a8e7..a760c46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@iconify-json/simple-icons": "^1.1.90",
         "astro": "^4.3.1",
         "astro-icon": "^1.1.0",
+        "axios": "^1.7.2",
         "tailwindcss": "^3.4.1",
         "theme-change": "^2.5.0"
       },
@@ -1636,6 +1637,11 @@
         "@iconify/utils": "^2.1.5"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.17",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@@ -1672,6 +1678,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
@@ -2148,6 +2164,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "optional": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2365,6 +2392,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2770,6 +2805,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -2785,6 +2839,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4439,6 +4506,25 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -5361,6 +5447,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1b19f82..243082d 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@iconify-json/simple-icons": "^1.1.90",
     "astro": "^4.3.1",
     "astro-icon": "^1.1.0",
+    "axios": "^1.7.2",
     "tailwindcss": "^3.4.1",
     "theme-change": "^2.5.0"
   },
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 4c6561c..76e046a 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -3,6 +3,8 @@ interface Props {
   title: string;
   body: string;
   href: string;
+  img_url: string;
+  img_alt: string;
 }
 
 const { img_url, img_alt ="Icone du jeu", title, body, href } = Astro.props;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index b24ea78..23e2de2 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,9 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
-></script>
-<script>
+---
+import axios from "axios";
+---
+<!--
+<script is:inline>
+  console.log(axios)
   const owner = "TheHubGames",
     repo = "hub_games";
 
diff --git a/src/js/release.js b/src/js/release.js
new file mode 100644
index 0000000..45ea002
--- /dev/null
+++ b/src/js/release.js
@@ -0,0 +1,58 @@
+
+document.addEventListener("DOMContentLoaded", function () {
+    const repoOwner = "TheHubGames"; // Remplacez par le nom du propriétaire du dépôt
+    const repoName = "hub_games"; // Remplacez par le nom du dépôt
+
+    const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`;
+
+    fetch(apiUrl)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(
+                    "Erreur lors de la récupération de la dernière release depuis GitHub"
+                );
+            }
+        return response.json();
+        })
+
+        .then((data) => {
+            const releasesDiv = document.getElementById("github-releases");
+            const md = window.markdownit();
+            document.getElementById("load").style.display = "none";
+
+            const releaseContainer = document.createElement("div");
+            releaseContainer.classList.add(
+                "card",
+                "m-2",
+                "lg:card-side",
+                "bg-base-300",
+                "shadow-xl"
+            );
+
+            const firstFewLines = data.body.split("\n").slice(0, 8).join("\n"); // Récupère les 8 premières lignes
+            const releaseHTML = `<div class="lg:w-1/3 card-body">
+                    <h2 class="news-title accent-content light:base-100 text-4xl-sm"><i class="fa-solid fa-bullhorn"></i> ${
+                        data.name
+                    }</h2>
+                    <div class="news-text neutral-content">${md.render(
+                        firstFewLines
+                    )}</div>
+                    <div class="card-actions justify-end">
+                        <a href="hub_source/MAJ/Derniere_maj" class="btn btn-primary" target="_blank">Lire la suite</a>
+                    </div>
+                </div>
+                <!--<figure><img class="mr-6 rounded object-cover hidden lg:block" src="https://hubgames.studio/content/rsrc_maj/1.X.X/" alt="" /></figure>-->`;
+            releaseContainer.innerHTML = releaseHTML;
+
+            releasesDiv.appendChild(releaseContainer);
+        })
+        .catch((error) => {
+            const releasesDiv = document.getElementById("github-releases");
+            releasesDiv.innerHTML =
+            "<p>Erreur lors de la récupération de la dernière release depuis GitHub</p>";
+        console.error(
+            "Erreur lors de la récupération de la dernière release depuis GitHub",
+        error
+        );
+    });
+});
\ No newline at end of file
diff --git a/src/pages/games/Clicker.astro b/src/pages/games/Clicker.astro
index 0f4b3af..7ea5997 100644
--- a/src/pages/games/Clicker.astro
+++ b/src/pages/games/Clicker.astro
@@ -3,144 +3,151 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <Layout title="Morpion">
-
-<body class="bg-base-100">
+  <body class="bg-base-100">
     <div id="loader">
-        <div id="loader-spinner"></div>
-        <p>Chargement en cours...</p>
+      <div id="loader-spinner"></div>
+      <p>Chargement en cours...</p>
     </div>
- 
+
     <div id="nav"></div>
     <main>
-        <div id="jeu-container">
-            <div id="jeu">
-                <div id="forme"></div>
-                <canvas id="gameCanvas"></canvas>
-            </div>
-            <a style="margin-top:15px;" id="GameStartIndicator">Cliquez sur le point pour démarrer</a>
-            <div id="tableau">
-                <p id="score">Score : <span>0</span></p>
-                <p id="best_score">Meilleur Score : <span>0</span></p>
-                <p id="chrono">Chrono : 30s</p>
-            </div>
+      <div id="jeu-container">
+        <div id="jeu">
+          <div id="forme"></div>
+          <canvas id="gameCanvas"></canvas>
         </div>
+        <a style="margin-top:15px;" id="GameStartIndicator"
+          >Cliquez sur le point pour démarrer</a
+        >
+        <div id="tableau">
+          <p id="score">Score : <span>0</span></p>
+          <p id="best_score">Meilleur Score : <span>0</span></p>
+          <p id="chrono">Chrono : 30s</p>
+        </div>
+      </div>
     </main>
-    
-    
+
     <!-- La boîte modale (popup) -->
     <div id="popup" class="modal">
-        <div class="modal-content">
-            <p id="instructions">Cliquez sur la forme bleue pour gagner des points.</p>
-            <button id="play-button" onclick="startGame()">Jouer</button>
-            <!-- <button id="return-button" onclick="returnToHub()">Retour au hub de jeu</button> -->
-        </div>
+      <div class="modal-content">
+        <p id="instructions">
+          Cliquez sur la forme bleue pour gagner des points.
+        </p>
+        <button id="play-button" onclick="startGame()">Jouer</button>
+        <!-- <button id="return-button" onclick="returnToHub()">Retour au hub de jeu</button> -->
+      </div>
     </div>
-    
-    <a id="return-button" class="btn btn-primary bottom-5 right-5 mb-5 p-2.5 text-lg border-0 cursor-pointer no-underline rounded-md" href="../../">Retour au hub de jeu</a>
-    
-    <div id="footer"></div>
 
-</body>
+    <a
+      id="return-button"
+      class="btn btn-primary bottom-5 right-5 mb-5 p-2.5 text-lg border-0 cursor-pointer no-underline rounded-md"
+      href="../../">Retour au hub de jeu</a
+    >
+
+    <div id="footer"></div>
+  </body>
 
-<script is:inline>
+  <script is:inline>
     let score = 0;
     const scoreElement = document.querySelector("#score span");
     const bestScore = document.querySelector("#best_score span");
     const chronoElement = document.getElementById("chrono");
     const forme = document.getElementById("forme");
-    var gameStart = false
-    const gameIndicator = document.getElementById("GameStartIndicator")
+    var gameStart = false;
+    const gameIndicator = document.getElementById("GameStartIndicator");
 
-    if (localStorage.getItem("bestScore") == undefined || null){
-        localStorage.setItem("bestScore", 0)
-    }else{
-        bestScore.textContent = localStorage.getItem("bestScore")
+    if (localStorage.getItem("bestScore") == undefined || null) {
+      localStorage.setItem("bestScore", 0);
+    } else {
+      bestScore.textContent = localStorage.getItem("bestScore");
     }
 
     // Fonction pour démarrer le jeu
     function startGame() {
-        score = 0
-        scoreElement.textContent = score;
-        gameIndicator.style.visibility = "hidden"
-        gameStart = true
-        document.getElementById("popup").style.display = "none"; // Masquer la popup
-        document.getElementById("jeu").style.pointerEvents = "auto"; // Activer le jeu
-        deplacerForme(); // Démarrer le jeu en déplaçant la forme initiale
-        startCountdown(); // Démarrer le compte à rebours
+      score = 0;
+      scoreElement.textContent = score;
+      gameIndicator.style.visibility = "hidden";
+      gameStart = true;
+      document.getElementById("popup").style.display = "none"; // Masquer la popup
+      document.getElementById("jeu").style.pointerEvents = "auto"; // Activer le jeu
+      deplacerForme(); // Démarrer le jeu en déplaçant la forme initiale
+      startCountdown(); // Démarrer le compte à rebours
     }
 
     // Fonction pour afficher la popup
     function openPopup() {
-        document.getElementById("popup").style.display = "block";
-        document.getElementById("jeu").style.pointerEvents = "none"; // Désactiver le jeu
+      document.getElementById("popup").style.display = "block";
+      document.getElementById("jeu").style.pointerEvents = "none"; // Désactiver le jeu
     }
 
     // Fonction pour fermer la popup
     function closePopup() {
-        document.getElementById("popup").style.display = "none";
+      document.getElementById("popup").style.display = "none";
     }
 
     forme.addEventListener("click", () => {
-        if (gameStart){
-            score++;
-            scoreElement.textContent = score;
-            deplacerForme();
-        }else{
-            startGame()
-        }
+      if (gameStart) {
+        score++;
+        scoreElement.textContent = score;
+        deplacerForme();
+      } else {
+        startGame();
+      }
     });
 
     function deplacerForme() {
-        const jeu = document.getElementById("jeu");
-        const maxX = jeu.clientWidth - forme.clientWidth;
-        const maxY = jeu.clientHeight - forme.clientHeight;
-        const nouvelleX = Math.random() * maxX;
-        const nouvelleY = Math.random() * maxY;
-        forme.style.left = nouvelleX + "px";
-        forme.style.top = nouvelleY + "px";
-        forme.style.backgroundColor = getRandomColor();
+      const jeu = document.getElementById("jeu");
+      const maxX = jeu.clientWidth - forme.clientWidth;
+      const maxY = jeu.clientHeight - forme.clientHeight;
+      const nouvelleX = Math.random() * maxX;
+      const nouvelleY = Math.random() * maxY;
+      forme.style.left = nouvelleX + "px";
+      forme.style.top = nouvelleY + "px";
+      forme.style.backgroundColor = getRandomColor();
     }
 
     function getRandomColor() {
-        const letters = "0123456789ABCDEF";
-        let color = "#";
-        for (let i = 0; i < 6; i++) {
-            color += letters[Math.floor(Math.random() * 16)];
-        }
-        return color;
+      const letters = "0123456789ABCDEF";
+      let color = "#";
+      for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+      }
+      return color;
     }
 
     // Compte à rebours
     let tempsRestant = 30;
 
     function startCountdown() {
-        const chronoInterval = setInterval(() => {
-            tempsRestant--;
-            chronoElement.textContent = `Chrono : ${tempsRestant}s`;
-            if (tempsRestant === 0) {
-                clearInterval(chronoInterval);
-                alert("Temps écoulé ! Votre score final est : " + score);
-
-                if(localStorage.getItem("bestScore") !== undefined){
-                    if(score > localStorage.getItem("bestScore")){
-                        localStorage.setItem("bestScore", score)
-                    }
-                }else{
-                    localStorage.setItem("bestScore", score)
-                }
-
-                gameStart = false
-                gameIndicator.style.visibility = "visible"
-                forme.setAttribute("style", "")
-                bestScore.textContent = localStorage.getItem("bestScore")
-                tempsRestant = 30
+      openPopup();
+      const chronoInterval = setInterval(() => {
+        tempsRestant--;
+        chronoElement.textContent = `Chrono : ${tempsRestant}s`;
+        if (tempsRestant === 0) {
+          clearInterval(chronoInterval);
+          alert("Temps écoulé ! Votre score final est : " + score);
+
+          if (localStorage.getItem("bestScore") !== undefined) {
+            if (score > localStorage.getItem("bestScore")) {
+              localStorage.setItem("bestScore", score);
             }
-        }, 1000);
+          } else {
+            localStorage.setItem("bestScore", score);
+          }
+
+          gameStart = false;
+          gameIndicator.style.visibility = "visible";
+          forme.setAttribute("style", "");
+          bestScore.textContent = localStorage.getItem("bestScore");
+          tempsRestant = 30;
+        }
+      }, 1000);
     }
 
     function closeWarning() {
-        document.getElementById('warning').style.display = 'none';
-}
-</script>
+      document.getElementById("warning").style.display = "none";
+    }
 
-</Layout>
\ No newline at end of file
+    startGame();
+  </script>
+</Layout>
diff --git a/src/pages/games/Morpion.astro b/src/pages/games/Morpion.astro
index bf41623..631a1e3 100644
--- a/src/pages/games/Morpion.astro
+++ b/src/pages/games/Morpion.astro
@@ -1,7 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import axios from "axios";
 ---
 
-<Layout title="Morpion">
-    
-</Layout>
+<Layout title="Morpion" />
diff --git a/src/pages/games/index.astro b/src/pages/games/index.astro
index 341fe68..7eb3d92 100644
--- a/src/pages/games/index.astro
+++ b/src/pages/games/index.astro
@@ -34,7 +34,7 @@ import Card from "../../components/Card.astro";
   <!-- List of games and app -->
   <div
     id="game"
-    class="mr-2 ml-2 place-items-center gap-4 grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-1 place-items-center">
+    class="mr-2 ml-2 place-items-center gap-4 grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-1">
 
     <Card
       title="Morpion"
@@ -135,7 +135,7 @@ import Card from "../../components/Card.astro";
     
   </div>
 
-  <script>
+  <script is:inline>
     document.addEventListener("DOMContentLoaded", function () {
       const repoOwner = "TheHubGames"; // Remplacez par le nom du propriétaire du dépôt
       const repoName = "hub_games"; // Remplacez par le nom du dépôt