✨ Add OS detection system

LaCorbeille · Nov 20, 2024 · 3e2b693 · 3e2b693
1 parent be50a68
commit 3e2b693
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/components/gameCard.php b/components/gameCard.php
@@ -3,7 +3,9 @@
         <a class="title"><?php echo htmlspecialchars($title); ?></a>
         <a class="description"><?php echo htmlspecialchars($description); ?></a>
         <a class="tags"><?php echo htmlspecialchars(implode(',', $gameTags)); ?></a>
+        <a class="avaiblePlatforms"><?php echo htmlspecialchars(implode( ',', $platforms)); ?></a>
         <a class="action"><?php echo htmlspecialchars($action); ?></a>
+        <a class="unavaible"><?php echo htmlspecialchars($unavailable); ?></a>
         <a class="actionLink"><?php echo htmlspecialchars($actionLink); ?></a>
     </div>
     <div class="foreground">

diff --git a/components/head.php b/components/head.php
@@ -25,6 +25,7 @@
 <!-- <script src="/js/lang.js" defer></script> -->
 <script src="/js/dynamicTitle.js" defer></script>
 <script src="/js/rightClick.js" defer></script>
+<script src="/js/osDetection.js" defer></script>
 <!-- Ajax -->
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
 <!-- Fonts -->

diff --git a/index.php b/index.php
@@ -52,9 +52,13 @@
             <h1>LaCorbeille STUDIO</h1>
         </div>
         <div id="carousel">
+            <?php 
+            // Correct platforms labels : Windows, Linux, MacOS, iOS, Android
+            $unavailable = "Indisponible pour votre plateforme";
+            ?>
             <?php
             $title = "A Little Adventure";
-            $description = "A Little Adventure est platformer vibrant où chaque niveau regorge d'obstacles et de défis.";
+            $description = "A Little Adventure est un platformer vibrant où chaque niveau regorge d'obstacles et de défis.";
             $gameTags = ["Platformer", "Adventure", "3D", "LowPoly"];
             $action = "Télécharger le prototype";
             $actionLink = "/assets/downloadable/A Little Adventure.exe";
@@ -64,8 +68,7 @@
             ?>
             <?php
             $title = "Rice Battle";
-            // $description = "Rice Battle est un jeu de combat en 2.5D dans l'univers de la cuisine asiatique.";
-            $description = "Ce jeu est en cours de développement.";
+            $description = "Rice Battle est un jeu de combat en 2.5D dans l'univers de la cuisine asiatique.<br>Ce jeu est en cours de développement.";
             $gameTags = ["Combat", "2.5D", "Arcade"];
             // $action = "Télécharger la beta";
             $action = "";

diff --git a/js/carousel.js b/js/carousel.js
@@ -74,6 +74,8 @@ function updateContentWrapper(card) {
     const cardButton = card.querySelector('.contentWrapperInfo .action').textContent;
     const cardActionLink = card.querySelector('.contentWrapperInfo .actionLink').textContent;
     const tagsArray = cardTags ? cardTags.split(',') : [];
+    const avaiblePlatforms = card.querySelector('.avaiblePlatforms').textContent;
+    const platformsArray = avaiblePlatforms ? avaiblePlatforms.split(',') : [];
     const platformImages = Array.from(card.querySelectorAll('.platforms img'));
 
     // Create new elements
@@ -82,7 +84,7 @@ function updateContentWrapper(card) {
 
     const contentWrapperDescription = document.createElement('a');
     contentWrapperDescription.id = 'gameDescription';
-    contentWrapperDescription.textContent = cardDescription;
+    contentWrapperDescription.innerHTML = cardDescription;
 
     const contentWrapperTagsWrapper = document.createElement('div');
     contentWrapperTagsWrapper.id = 'gameTags';
@@ -102,18 +104,31 @@ function updateContentWrapper(card) {
         contentWrapperPlatformsWrapper.appendChild(platformImg);
     });
 
+    // OS detection
+    const os = detectOS();
+    let isOSAvaible = false;
+    platformsArray.forEach(platform => {
+        if (platform === os) {
+            isOSAvaible = true;
+        }
+    });
 
     // Add new elements to the contentWrapper
     contentWrapper.appendChild(contentWrapperTitle);
     contentWrapper.appendChild(contentWrapperDescription);
     contentWrapper.appendChild(contentWrapperTagsWrapper);
     contentWrapper.appendChild(contentWrapperPlatformsWrapper);
-    if (cardButton) {
+    if (cardButton && isOSAvaible) {
         const contentWrapperButton = document.createElement('button');
         contentWrapperButton.textContent = cardButton;
         contentWrapperButton.addEventListener('click', () => {
             window.location.href = cardActionLink;
         });
         contentWrapper.appendChild(contentWrapperButton);
+    } else if (!isOSAvaible) {
+        const contentWrapperButton = document.createElement('button');
+        contentWrapperButton.textContent = 'Indisponible sur votre OS';
+        contentWrapperButton.disabled = true;
+        contentWrapper.appendChild(contentWrapperButton);
     }
 }
diff --git a/js/osDetection.js b/js/osDetection.js
@@ -0,0 +1,18 @@
+function detectOS() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const platform = navigator.platform.toLowerCase();
+
+    if (platform.includes("mac") || userAgent.includes("macintosh")) {
+        return "MacOS";
+    } else if (platform.includes("win") || userAgent.includes("windows")) {
+        return "Windows";
+    } else if (platform.includes("linux") || userAgent.includes("linux")) {
+        return "Linux";
+    } else if (/iphone|ipad|ipod/.test(userAgent)) {
+        return "iOS";
+    } else if (/android/.test(userAgent)) {
+        return "Android";
+    } else {
+        return "Inconnu";
+    }
+}