Improve JS Script for retriveing JSON Data List & small Style Changes

FAForever · Jul 24, 2024 · e99de15 · e99de15
1 parent 25fed72
commit e99de15
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 62 deletions.
diff --git a/scripts/backgroundRandom.js b/scripts/backgroundRandom.js
@@ -1,26 +1,27 @@
-function setBackground({matches}){
-    const htmlElement = document.documentElement;
+function setBackground(mediaQuery) {
+  const htmlElement = document.documentElement;
+  const imgs = [
+    "../assets/images/backgrounds/1.jpg",
+    "../assets/images/backgrounds/2.jpg",
+    "../assets/images/backgrounds/3.jpg",
+    "../assets/images/backgrounds/4.jpg",
+    "../assets/images/backgrounds/5.jpg",
+    "../assets/images/backgrounds/6.jpg",
+  ];
 
-    if (matches.matches) {
-        htmlElement.style.backgroundColor = "var(--Background)";
-        htmlElement.style.backgroundImage = "";
-    } else {
-        const imgs = [
-            '../assets/images/backgrounds/1.jpg',
-            '../assets/images/backgrounds/2.jpg',
-            '../assets/images/backgrounds/3.jpg',
-            '../assets/images/backgrounds/4.jpg',
-            '../assets/images/backgrounds/5.jpg',
-            '../assets/images/backgrounds/6.jpg',
-        ];
-        const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
-        htmlElement.style.backgroundImage = `url(${randomImg})`;
-        htmlElement.style.backgroundColor = "";
-    }
+  if (mediaQuery.matches) {
+    htmlElement.style.backgroundColor = "var(--Background)";
+    htmlElement.style.backgroundImage = "none";
+  } else {
+    const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
+    htmlElement.style.backgroundImage = `url(${randomImg})`;
+    htmlElement.style.backgroundColor = "transparent";
+  }
 }
 
 const mediaQuery = window.matchMedia("(max-width: 420px)");
+
+const handleMediaChange = (event) => setBackground(event);
+
 setBackground(mediaQuery);
-mediaQuery.addEventListener(function(mediaQuery){
-    setBackground(mediaQuery);
-});
+mediaQuery.addEventListener("change", handleMediaChange);
diff --git a/scripts/populateOldGamePatches.js b/scripts/populateOldGamePatches.js
@@ -2,11 +2,18 @@ async function populate() {
   const requestURL = "../assets/data/oldgamepatches.json";
 
   try {
-    const response = await fetch(requestURL);
+    const response = await fetch(requestURL, { cache: "no-cache" });
+
     if (!response.ok) {
       throw new Error(`Network response was not ok: ${response.statusText}`);
     }
+
     const patches = await response.json();
+
+    if (!patches || !patches.game) {
+      throw new Error("Invalid data format: Missing game data");
+    }
+
     renderPatchList(patches.game, ".gameList");
   } catch (error) {
     console.error("There has been a problem with your fetch operation:", error);
@@ -28,6 +35,7 @@ function renderPatchList(patchList, containerSelector) {
     const linkElement = document.createElement("a");
     linkElement.textContent = patch;
     linkElement.href = link;
+    linkElement.target = "_blank";
 
     const dateElement = document.createElement("span");
     dateElement.textContent = date;
@@ -36,6 +44,7 @@ function renderPatchList(patchList, containerSelector) {
     list.appendChild(listItem);
   });
 
+  container.innerHTML = "";
   container.appendChild(list);
 }
-populate();
+document.addEventListener("DOMContentLoaded", populate);
diff --git a/scripts/populatePatches.js b/scripts/populatePatches.js
@@ -1,47 +1,53 @@
 async function populate() {
-    const requestURL = '../assets/data/patches.json';
+  const requestURL = "../assets/data/patches.json";
 
-    try {
-        const response = await fetch(requestURL);
+  try {
+    const response = await fetch(requestURL, { cache: "no-cache" });
 
-        if (!response.ok) {
-            throw new Error(`Network response was not ok: ${response.statusText}`);
-        }
+    if (!response.ok) {
+      throw new Error(`Network response was not ok: ${response.statusText}`);
+    }
 
-        const patches = await response.json();
+    const patches = await response.json();
+    const { balance, game } = patches;
 
-        renderPatchList(patches.balance, ".BalanceJSONList");
-        renderPatchList(patches.game, ".GameJSONList");
-    } catch (error) {
-        console.error('There has been a problem with your fetch operation:', error);
+    if (!balance || !game) {
+      throw new Error("Invalid data format: Missing Balance or Game Data");
     }
+
+    renderPatchList(balance, ".BalanceJSONList");
+    renderPatchList(game, ".GameJSONList");
+  } catch (error) {
+    console.error("There has been a problem with your fetch operation:", error);
+  }
 }
 
 function renderPatchList(patchList, containerSelector) {
-    const container = document.querySelector(containerSelector);
-
-    if (!container) {
-        console.error(`Container with selector ${containerSelector} not found`);
-        return;
-    }
+  const container = document.querySelector(containerSelector);
 
-    const list = document.createElement("ul");
+  if (!container) {
+    console.error(`Container with selector ${containerSelector} not found`);
+    return;
+  }
 
-    patchList.forEach(({ patch, link, date}) => {
-        const listItem = document.createElement("li");
+  const list = document.createElement("ul");
 
-        const linkElement = document.createElement("a");
-        linkElement.textContent = patch;
-        linkElement.href = link;
+  patchList.forEach(({ patch, link, date }) => {
+    const listItem = document.createElement("li");
 
-        const dateElement = document.createElement("span");
-        dateElement.textContent = date;
+    const linkElement = document.createElement("a");
+    linkElement.textContent = patch;
+    linkElement.href = link;
+    linkElement.target = "_blank";
 
-        listItem.append(linkElement, dateElement);
-        list.appendChild(listItem);
-    });
+    const dateElement = document.createElement("span");
+    dateElement.textContent = date;
 
-    container.appendChild(list);
+    listItem.append(linkElement, dateElement);
+    list.appendChild(listItem);
+  });
+  container.innerHTML = "";
+  container.appendChild(list);
 }
 
-populate();
+document.addEventListener("DOMContentLoaded", populate);
diff --git a/style/balance.css b/style/balance.css
@@ -15,6 +15,10 @@ h6 {
   font-weight: normal;
 }
 
+h3 {
+  margin: 10px 0px;
+}
+
 a {
   color: var(--Link);
   text-decoration: underline;

diff --git a/style/components/card.css b/style/components/card.css
@@ -1,15 +1,14 @@
-@import '../root.css';
+@import "../root.css";
 
 .Card {
-    background: var(--Card);
-    border-radius: 1em;
-    padding: 5px 15px;
-    margin: 20px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    color: var(--Text);
+  background: var(--Card);
+  border-radius: 1em;
+  padding: 5px 15px;
+  margin: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  color: var(--Text);
 }
 
 .Card img {
-    margin-right: 15px;
+  margin-right: 15px;
 }
-