Move game displaying logic into JSON, more linting

prettier.config.js

@@ -6,6 +6,7 @@ const config = {
   bracketSameLine: true,
   arrowParens: "always",
   plugins: ["prettier-plugin-astro"],
+  printWidth: 100,
 };
 
 export default config;

src/components/CloakLoader.astro

@@ -6,9 +6,7 @@
       if (parsedCloak) {
         if (parsedCloak.name != "None") {
           document.title = parsedCloak.name;
-          let link = document.querySelector(
+          let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
-            "link[rel~='icon']"
-          ) as HTMLLinkElement;
           if (!link) {
             link = document.createElement("link");
             link.rel = "icon";

src/components/GameItem.astro

@@ -3,9 +3,9 @@ const { name, image, slugName } = Astro.props;
 ---
 
 <div class="game">
-  <a href=`/games/${slugName || name}`
+  <a href=`/games/${slugName || name}`>
-    ><img class="game-img" src=`${image}` alt="" /></a
+    <img class="game-img" src={image} alt="" />
-  >
+  </a>
   <p class="game-title">{name}</p>
 </div>
 

src/components/Input.astro

@@ -1,7 +1,6 @@
 ---
 const { inputName, defaultTextContent, height, placeholder } = Astro.props;
 
-
 interface Props {
   inputName: string;
   defaultTextContent?: string;

src/components/SettingsContent/CloakingTab.astro

@@ -10,8 +10,7 @@ const presetCloaks = [
   },
   {
     cloakTitle: "Instructure",
-    favicon:
+    favicon: "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico",
-      "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico",
   },
   {
     cloakTitle: "Google Classroom",
@@ -24,13 +23,11 @@ const presetCloaks = [
   },
   {
     cloakTitle: "Google Drive",
-    favicon:
+    favicon: "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png",
-      "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png",
   },
   {
     cloakTitle: "Schoology",
-    favicon:
+    favicon: "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico",
-      "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico",
   },
 ];
 ---
@@ -45,27 +42,15 @@ const presetCloaks = [
               class="cloak-item"
               data-cloak-name={cloak.cloakTitle}
               data-cloak-icon={cloak.favicon}>
-              <img
+              <img class="cloak-image" src={cloak.favicon} alt={cloak.cloakTitle} />
-                class="cloak-image"
-                src={cloak.favicon}
-                alt={cloak.cloakTitle}
-              />
             </div>
           );
         })
       }
     </div>
     <div class="cloak-custom-override">
-      <Input
+      <Input inputName="cloak-custom-name" placeholder="Custom Name" height="30px" />
-        inputName="cloak-custom-name"
+      <Input inputName="cloak-custom-favicon" placeholder="Custom Favicon" height="30px" />
-        placeholder="Custom Name"
-        height="30px"
-      />
-      <Input
-        inputName="cloak-custom-favicon"
-        placeholder="Custom Favicon"
-        height="30px"
-      />
       <button id="cloak-custom-button">Update Cloak</button>
     </div>
   </div>

src/components/SettingsContent/CreditsTab.astro

@@ -7,18 +7,13 @@ const t = useTranslations(lang);
 <div class="settings-container">
   <div class="credits-container">
     <p class="credit-item">
-      {t("ultraviolet")} - <a href="https://titaniumnetwork.org/"
+      {t("ultraviolet")} - <a href="https://titaniumnetwork.org/">Titanium Network</a>
-        >Titanium Network</a
-      >
     </p>
     <p class="credit-item">
-      {t("settings.credits.japaneseTranslations")} - <a href="https://wearr.dev"
+      {t("settings.credits.japaneseTranslations")} - <a href="https://wearr.dev">wearr</a>
-        >wearr</a
-      >
     </p>
     <p class="credit-item">
-      {t("settings.credits.mochaandmacchiatothemes")} - <a href="">Catppuccin</a
+      {t("settings.credits.mochaandmacchiatothemes")} - <a href="">Catppuccin</a>
-      >
     </p>
   </div>
 </div>

src/components/SettingsContent/CustomizationTab.astro

@@ -21,12 +21,7 @@ const languageList = [
 <div class="settings-container">
   <div class="setting__theme">
     <label class="setting-label">{t("settings.customization.theme")}</label>
-    <Dropdown
+    <Dropdown buttonNameDefault="Alu" dropdownList={themeList} , id="dropdown__selected-theme" />
-      buttonNameDefault="Alu"
-      dropdownList={themeList}
-      ,
-      id="dropdown__selected-theme"
-    />
   </div>
   <div class="setting__language">
     <label class="setting-label">{t("settings.customization.language")}</label>

src/components/SettingsContent/ProxyTab.astro

@@ -56,19 +56,11 @@ const openPageWith = [
     />
   </div>
   <div class="setting__bare-url">
-    <label class="setting-label" for="bare-url-input"
+    <label class="setting-label" for="bare-url-input">{t("settings.proxy.bareURL")}</label>
-      >{t("settings.proxy.bareURL")}</label
-    >
     <Input inputName="bare-url" height="50px" />
   </div>
 </div>
 <div class="setting__searxng-url">
-  <label for="searxng-url-input" class="setting-label"
+  <label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
-    >{t("settings.proxy.searxngURL")}</label
+  <Input height="50px" inputName="searxng-url" defaultTextContent="https://searxng.site/" />
-  >
-  <Input
-    height="50px"
-    inputName="searxng-url"
-    defaultTextContent="https://searxng.site/"
-  />
 </div>

src/components/SettingsTablist.astro

@@ -31,34 +31,13 @@ const t = useTranslations(lang);
 
 <div class="popup">
   <div class="tabs">
-    <input
+    <input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
-      type="radio"
-      id="setting-tab-proxy"
-      class="setting-tab"
-      name="tab"
-      checked="true"
-    />
     <label for="setting-tab-proxy">Proxy</label>
-    <input
+    <input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
-      type="radio"
-      id="setting-tab-customization"
-      class="setting-tab"
-      name="tab"
-    />
     <label for="setting-tab-customization">Customization</label>
-    <input
+    <input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
-      type="radio"
-      id="setting-tab-cloaking"
-      class="setting-tab"
-      name="tab"
-    />
     <label for="setting-tab-cloaking">Cloaking</label>
-    <input
+    <input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
-      type="radio"
-      id="setting-tab-credits"
-      class="setting-tab"
-      name="tab"
-    />
     <label for="setting-tab-credits">Credits</label>
     <div class="marker">
       <div id="top"></div>
@@ -96,12 +75,8 @@ const t = useTranslations(lang);
       setTimeout(() => {
         currentContent.innerHTML = window.loadedContentStorage[tabID];
         currentContent.style.opacity = "1";
-        document.dispatchEvent(
+        document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
-          new CustomEvent("setting-tabChange", { detail: tabID })
+        document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
-        );
-        document.dispatchEvent(
-          new CustomEvent("setting-tabLoad", { detail: tabID })
-        );
       }, 250);
     }
   }
@@ -112,10 +87,7 @@ const t = useTranslations(lang);
       toggle.addEventListener("click", () => {
         let dropdown = document.getElementById(toggle.id + "-menu");
         if (dropdown) {
-          if (
+          if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") {
-            dropdown.style.maxHeight == "0px" ||
-            dropdown.style.maxHeight == ""
-          ) {
             dropdown.style.maxHeight = dropdown.scrollHeight + "px";
             toggle.style.borderRadius = "10px 10px 0 0";
           } else {
@@ -142,9 +114,7 @@ const t = useTranslations(lang);
     if (dropdown) {
       dropdown.style.maxHeight = "0px";
       setTimeout(() => {
-        let dropdown_toggle = document.getElementById(
+        let dropdown_toggle = document.getElementById(dropdownID.replace("-menu", ""));
-          dropdownID.replace("-menu", "")
-        );
         dropdown_toggle.style.borderRadius = "10px";
       }, 300);
     }
@@ -158,10 +128,7 @@ const t = useTranslations(lang);
     if (dropdown && dropdownMenu) {
       // Now we find the child that matches localStorageItem.value.
       let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
-        return (
+        return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting;
-          JSON.parse(localStorage.getItem(localStorageItem)).value ==
-          item.dataset.setting
-        );
       });
       // Now set the inner text to the name in the dropdownItem.
       return dropdownItem.innerText;
@@ -172,30 +139,19 @@ const t = useTranslations(lang);
     if (localStorage.getItem(localStorageItem)) {
       let dropdown_toggle = document.getElementById(dropdownID);
       if (dropdown_toggle) {
-        dropdown_toggle.innerText = getLocalStorageValue(
+        dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
-          localStorageItem,
-          dropdownID
-        );
       }
     }
   }
 
-  function applyDropdownEventListeners(
+  function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
-    item,
-    dropdownID,
-    localStorageItem,
-    optionalCallback
-  ) {
     Array.from(item.children).forEach((item) => {
       item.addEventListener("click", () => {
         let localStorageItemContent = {
           name: item.innerText,
           value: item.dataset.setting,
         };
-        localStorage.setItem(
+        localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
-          localStorageItem,
-          JSON.stringify(localStorageItemContent)
-        );
         applySavedLocalStorage(localStorageItem, dropdownID);
         closeDropdown(item.parentElement.id);
         if (typeof optionalCallback == "function") {
@@ -228,16 +184,9 @@ const t = useTranslations(lang);
 
   function setupCustomizationSettings() {
     applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
-    applySavedLocalStorage(
+    applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
-      "alu__selectedLanguage",
+    let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
-      "dropdown__selected-language"
+    let languageDropdown = document.getElementById("dropdown__selected-language-menu");
-    );
-    let themeDropdown = document.getElementById(
-      "dropdown__selected-theme-menu"
-    );
-    let languageDropdown = document.getElementById(
-      "dropdown__selected-language-menu"
-    );
     applyDropdownEventListeners(
       themeDropdown,
       "dropdown__selected-theme",
@@ -253,8 +202,7 @@ const t = useTranslations(lang);
   }
 
   function setupCloakingSettings() {
-    Array.from(document.getElementById("cloak-list").children).forEach(
+    Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
-      (cloak) => {
       cloak.addEventListener("click", () => {
         let cloakName = cloak.dataset.cloakName;
         let cloakIcon = cloak.dataset.cloakIcon;
@@ -264,10 +212,7 @@ const t = useTranslations(lang);
           icon: cloakIcon,
           isCustom: false,
         };
-          localStorage.setItem(
+        localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
-            "alu__selectedCloak",
-            JSON.stringify(localStorageItem)
-          );
 
         if (cloakName == "None") {
           localStorage.removeItem("alu__selectedCloak");
@@ -284,49 +229,33 @@ const t = useTranslations(lang);
         document.title = cloakName;
 
         if (!cloak.classList.contains("selected")) {
-            Array.from(document.getElementById("cloak-list").children).forEach(
+          Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => {
-              (cloak2) => {
             cloak2.classList.remove("selected");
-              }
+          });
-            );
           cloak.classList.add("selected");
         }
       });
-      }
+    });
-    );
 
     let customNameInput = document.getElementById("cloak-custom-name-input");
-    let customFaviconInput = document.getElementById(
+    let customFaviconInput = document.getElementById("cloak-custom-favicon-input");
-      "cloak-custom-favicon-input"
-    );
     if (localStorage.getItem("alu__selectedCloak")) {
-      let selectedCloak = JSON.parse(
+      let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
-        localStorage.getItem("alu__selectedCloak")
-      );
       if (selectedCloak.isCustom) {
         customNameInput.value = selectedCloak.name;
         customFaviconInput.value = selectedCloak.icon;
       }
     }
 
-    document
+    document.getElementById("cloak-custom-button").addEventListener("click", () => {
-      .getElementById("cloak-custom-button")
+      let cloakName = document.getElementById("cloak-custom-name-input").value;
-      .addEventListener("click", () => {
+      let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
-        let cloakName = document.getElementById(
-          "cloak-custom-name-input"
-        ).value;
-        let cloakIcon = document.getElementById(
-          "cloak-custom-favicon-input"
-        ).value;
       let localStorageItem = {
         name: cloakName,
         icon: cloakIcon,
         isCustom: true,
       };
-        localStorage.setItem(
+      localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
-          "alu__selectedCloak",
-          JSON.stringify(localStorageItem)
-        );
       if (cloakName == "None") {
         localStorage.removeItem("alu__selectedCloak");
         cloakName = "Settings | Alu";
@@ -359,21 +288,14 @@ const t = useTranslations(lang);
       applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
       applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
       applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
-      let selectedProxyDropdown = document.getElementById(
+      let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
-        "dropdown__selected-proxy-menu"
+      let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
-      );
+      let openWithDropdown = document.getElementById("dropdown__open-with-menu");
-      let searchEngineDropdown = document.getElementById(
-        "dropdown__search-engine-menu"
-      );
-      let openWithDropdown = document.getElementById(
-        "dropdown__open-with-menu"
-      );
       let bareUrlInput = document.getElementById("bare-url-input");
       let searxngUrlInput = document.getElementById("searxng-url-input");
       let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
       if (savedSearxngUrl != undefined) {
-        if (savedSearxngUrl == "")
+        if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
-          localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
         searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
       }
       // Proxy settings
@@ -390,11 +312,7 @@ const t = useTranslations(lang);
         "dropdown__selected-proxy",
         "alu__selectedProxy"
       );
-      applyDropdownEventListeners(
+      applyDropdownEventListeners(openWithDropdown, "dropdown__open-with", "alu__selectedOpenWith");
-        openWithDropdown,
-        "dropdown__open-with",
-        "alu__selectedOpenWith"
-      );
       if (localStorage.getItem("bareUrl")) {
         bareUrlInput.value = localStorage.getItem("bareUrl");
       } else {
@@ -411,18 +329,10 @@ const t = useTranslations(lang);
   function checkSearxng() {
     // This function checks if the "searxng" option was clicked, display an additional option if so.
     if (localStorage.getItem("alu__search_engine")) {
-      if (
+      if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") {
-        JSON.parse(
+        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
-          localStorage.getItem("alu__search_engine")
-        ).value.toLowerCase() == "searx"
-      ) {
-        document.getElementsByClassName(
-          "setting__searxng-url"
-        )[0].style.opacity = "1";
       } else {
-        document.getElementsByClassName(
+        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
-          "setting__searxng-url"
-        )[0].style.opacity = "0";
       }
     }
   }

src/components/Switch.astro

@@ -181,10 +181,7 @@ const { inputID } = Astro.props;
   }
 
   .switch input:checked + .slider::before {
-    left: calc(
+    left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
-      100% - var(--effect-width) - (var(--effect-width) / 2) -
-        var(--switch-offset)
-    );
   }
 
   .switch input:checked + .slider .circle {

src/components/UVRegistrar.astro

@@ -15,8 +15,7 @@
     loadingContent.style.opacity = 1;
     let url = input.value.trim();
     if (!isUrl(url)) url = getSearchEngine() + url;
-    else if (!(url.startsWith("https://") || url.startsWith("http://")))
+    else if (!(url.startsWith("https://") || url.startsWith("http://"))) url = "http://" + url;
-      url = "http://" + url;
 
     let iframe = document.getElementById("proxy-frame");
     iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
@@ -39,9 +38,7 @@
       });
       let urlText = document.createElement("p");
       urlText.classList.add("url-text");
-      urlText.innerText = window.__uv$config.decodeUrl(
+      urlText.innerText = window.__uv$config.decodeUrl(iframe.src.split(__uv$config.prefix)[1]);
-        iframe.src.split(__uv$config.prefix)[1]
-      );
       iframe.style.opacity = 1;
       topBar.style.opacity = 1;
       topBar.style.pointerEvents = "auto";
@@ -52,11 +49,7 @@
   });
 
   function isUrl(val = "") {
-    if (
+    if (/^http(s?):\/\//.test(val) || (val.includes(".") && val.substr(0, 1) !== " ")) return true;
-      /^http(s?):\/\//.test(val) ||
-      (val.includes(".") && val.substr(0, 1) !== " ")
-    )
-      return true;
     return false;
   }
 
@@ -65,9 +58,7 @@
     if (!localStorageSearchEngine) {
       return "https://google.com/search?q=";
     }
-    switch (
+    switch (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()) {
-      JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()
-    ) {
       case "google": {
         return "https://google.com/search?q=";
       }
@@ -82,8 +73,7 @@
         if (localStorageURL) {
           if (localStorageURL == "") return "https://searxng.site/search?q=";
           // Ugly hack to remove the trailing slash :)
-          if (localStorageURL.endsWith("/"))
+          if (localStorageURL.endsWith("/")) localStorageURL = localStorageURL.slice(0, -1);
-            localStorageURL = localStorageURL.slice(0, -1);
           return localStorageURL + "/search?q=";
         } else return "https://searxng.site/search?q=";
       }

src/components/WelcomeLogging.astro

@@ -1,36 +1,40 @@
-<script is:inline>
+<script>
+  declare global {
+    interface Navigator {
+      deviceMemory: number;
+    }
+  }
+
+  let primaryColor = "#8c25fa";
+  let secondaryColor = "#601aab";
   console.log(
     "%cWelcome to Alu",
-    "color: #0251d9; font-size: 2rem; font-weight: bold; text-shadow: 2px 2px 0 #033c9e;"
+    `color: ${primaryColor}; font-size: 2rem; font-weight: bold; text-shadow: 2px 2px 0 ${secondaryColor};`
   );
 
   console.log(
     "%cSystem Information: ",
-    "color: #025bf5; font-size: 1rem; font-weight: bold;"
+    `color: ${primaryColor}; font-size: 1rem; font-weight: bold;`
   );
   console.log(
-    "%cOS: %c" + navigator.platform,
+    "%cOS: " + navigator.platform,
-    "color: #025bf5; font-size: 0.75rem; font-weight: bold;",
+    `color: ${primaryColor}; font-size: 0.75rem; font-weight: bold;`
-    "color: #025bf5; font-size: 0.75rem;"
   );
   console.log(
-    "%cBrowser: %c" + navigator.userAgent,
+    "%cBrowser: " + navigator.userAgent,
-    "color: #025bf5; font-size: 0.75rem; font-weight: bold;",
+    `color: ${primaryColor}; font-size: 0.75rem; font-weight: bold;`
-    "color: #025bf5; font-size: 0.75rem;"
   );
   console.log(
-    "%cCPU Cores: %c" + navigator.hardwareConcurrency,
+    "%cCPU Cores: " + navigator.hardwareConcurrency,
-    "color: #025bf5; font-size: 0.75rem; font-weight: bold;",
+    `color: ${primaryColor}; font-size: 0.75rem; font-weight: bold;`
-    "color: #025bf5; font-size: 0.75rem;"
   );
   // Cmon firefox, do we really not support this?? Basic stuff here from the "indie browser".
   console.log(
-    "%cMemory: %c" + navigator.deviceMemory + "GB",
+    "%cMemory: " + navigator.deviceMemory + "GB",
-    "color: #025bf5; font-size: 0.75rem; font-weight: bold;",
+    `color: ${primaryColor}; font-size: 0.75rem; font-weight: bold;`
-    "color: #025bf5; font-size: 0.75rem;"
   );
   console.log(
     "%cPlease include this information in a bug report!",
-    "color: #025bf5; font-size: 0.75rem; font-weight: bold;"
+    `color: ${primaryColor}; font-size: 0.75rem; font-weight: bold;`
   );
 </script>

src/env.d.ts

@@ -53,9 +53,7 @@ declare module "astro-i18n" {
     srcDir: string;
   }
   /** Typed astro-i18n config definition. */
-  export function defineAstroI18nConfig(
+  export function defineAstroI18nConfig(config: Partial<AstroI18nConfig>): Partial<AstroI18nConfig>;
-    config: Partial<AstroI18nConfig>
-  ): Partial<AstroI18nConfig>;
   /** The `astro-i18n` middleware. */
   export function useAstroI18n(
     config?: Partial<AstroI18nConfig> | string,
@@ -63,9 +61,7 @@ declare module "astro-i18n" {
   ): (...args: any[]) => any;
   /** Workaround function to make astroI18n work inside getStaticPaths. This is because Astro's getStaticPaths runs before everything which doesn't allows astroI18n to update its state automatically. */
   function createGetStaticPaths(
-    callback: (
+    callback: (props: GetStaticPathsProps) => GetStaticPathsItem[] | Promise<GetStaticPathsItem[]>
-      props: GetStaticPathsProps
-    ) => GetStaticPathsItem[] | Promise<GetStaticPathsItem[]>
   ): (
     props: GetStaticPathsProps & {
       astroI18n?: {
@@ -227,9 +223,7 @@ declare module "astro-i18n" {
     /** Adds new translation formatters at runtime. */
     addFormatters(translationFormatters: TranslationFormatters): this;
     /** Adds new translation loading rules at runtime. */
-    addTranslationLoadingRules(
+    addTranslationLoadingRules(translationLoadingRules: TranslationLoadingRules): this;
-      translationLoadingRules: TranslationLoadingRules
-    ): this;
     /** Adds new route segment translations at runtime. */
     addRoutes(routes: SegmentTranslations): this;
     /** Tries to parse one of the configured locales out of the given route. If no configured locale is found it will return `null`. */

src/json/games.json

@@ -0,0 +1,262 @@
+{
+  "1v1.lol": {
+    "name": "1v1.lol",
+    "image": "/games/1v1.lol/logo.png",
+    "slug": "1v1.lol"
+  },
+  "2048": {
+    "name": "2048",
+    "image": "/games/2048/logo.png",
+    "slug": "2048"
+  },
+  "backrooms": {
+    "name": "The Backrooms",
+    "image": "/games/backrooms/logo.png",
+    "slug": "backrooms"
+  },
+  "baldi": {
+    "name": "Baldi's Basics",
+    "image": "/games/baldi/logo.png",
+    "slug": "baldi"
+  },
+  "cannon-basketball-4": {
+    "name": "Cannon Basketball 4",
+    "image": "/games/cannon-basketball-4/logo.png",
+    "slug": "cannon-basketball-4"
+  },
+  "cell-machine": {
+    "name": "Cell Machine",
+    "image": "/games/cell-machine/logo.png",
+    "slug": "cell-machine"
+  },
+  "chrome-dino": {
+    "name": "Chrome Dino",
+    "image": "/games/chrome-dino/logo.png",
+    "slug": "chrome-dino"
+  },
+  "cookie-clicker": {
+    "name": "Cookie Clicker",
+    "image": "/games/cookie-clicker/logo.png",
+    "slug": "cookie-clicker"
+  },
+  "csgo-clicker": {
+    "name": "CSGO Clicker",
+    "image": "/games/csgo-clicker/logo.png",
+    "slug": "csgo-clicker"
+  },
+  "ctr": {
+    "name": "Cut The Rope",
+    "image": "/games/ctr/logo.png",
+    "slug": "ctr"
+  },
+  "ctr-holiday": {
+    "name": "Cut The Rope - Holiday",
+    "image": "/games/ctr-holiday/logo.png",
+    "slug": "ctr-holiday"
+  },
+  "ctr-tr": {
+    "name": "Cut The Rope - Time Travel",
+    "image": "/games/ctr-tr/logo.png",
+    "slug": "ctr-tr"
+  },
+  "death-run-3d": {
+    "name": "Death Run 3D",
+    "image": "/games/death-run-3d/logo.png",
+    "slug": "death-run-3d"
+  },
+  "doge-miner": {
+    "name": "Doge Miner",
+    "image": "/games/doge-miner/logo.png",
+    "slug": "doge-miner"
+  },
+  "doodle-jump": {
+    "name": "Doodle Jump",
+    "image": "/games/doodle-jump/logo.png",
+    "slug": "doodle-jump"
+  },
+  "doom": {
+    "name": "Doom",
+    "image": "/games/doom/logo.png",
+    "slug": "doom"
+  },
+  "draw-the-hill": {
+    "name": "Draw The Hill",
+    "image": "/games/draw-the-hill/logo.png",
+    "slug": "draw-the-hill"
+  },
+  "evil-glitch": {
+    "name": "Evil Glitch",
+    "image": "/games/evil-glitch/logo.png",
+    "slug": "evil-glitch"
+  },
+  "fall-boys": {
+    "name": "Fall Boys",
+    "image": "/games/fall-boys/logo.png",
+    "slug": "fall-boys"
+  },
+  "firewater": {
+    "name": "Fireboy and Watergirl",
+    "image": "/games/firewater/logo.png",
+    "slug": "firewater"
+  },
+  "firewater2": {
+    "name": "Fireboy and Watergirl 2",
+    "image": "/games/firewater2/logo.png",
+    "slug": "firewater2"
+  },
+  "fnaf": {
+    "name": "Five Nights at Freddy's",
+    "image": "/games/fnaf/logo.png",
+    "slug": "fnaf"
+  },
+  "fnaf2": {
+    "name": "Five Nights at Freddy's 2",
+    "image": "/games/fnaf2/logo.png",
+    "slug": "fnaf2"
+  },
+  "fnaf3": {
+    "name": "Five Nights at Freddy's 3",
+    "image": "/games/fnaf3/logo.png",
+    "slug": "fnaf3"
+  },
+  "fnaf4": {
+    "name": "Five Nights at Freddy's 4",
+    "image": "/games/fnaf4/logo.png",
+    "slug": "fnaf4"
+  },
+  "game-inside": {
+    "name": "Game Inside",
+    "image": "/games/game-inside/logo.png",
+    "slug": "game-inside"
+  },
+  "google-snake": {
+    "name": "Google Snake",
+    "image": "/games/google-snake/logo.png",
+    "slug": "google-snake"
+  },
+  "grindcraft": {
+    "name": "Grindcraft",
+    "image": "/games/grindcraft/logo.png",
+    "slug": "grindcraft"
+  },
+  "idle-breakout": {
+    "name": "Idle Breakout",
+    "image": "/games/idle-breakout/logo.png",
+    "slug": "idle-breakout"
+  },
+  "just-one-boss": {
+    "name": "Just One Boss",
+    "image": "/games/just-one-boss/logo.png",
+    "slug": "just-one-boss"
+  },
+  "line-rider": {
+    "name": "Line Rider",
+    "image": "/games/line-rider/logo.png",
+    "slug": "line-rider"
+  },
+  "minecraft-classic": {
+    "name": "Minecraft Classic",
+    "image": "/games/minecraft-classic/logo.png",
+    "slug": "minecraft-classic"
+  },
+  "minesweeper": {
+    "name": "Minesweeper",
+    "image": "/games/minesweeper/logo.png",
+    "slug": "minesweeper"
+  },
+  "moto-x3m": {
+    "name": "Moto X3M",
+    "image": "/games/moto-x3m/logo.png",
+    "slug": "moto-x3m"
+  },
+  "moto-x3m-pool": {
+    "name": "Moto X3M Pool Party",
+    "image": "/games/moto-x3m-pool/logo.png",
+    "slug": "moto-x3m-pool"
+  },
+  "moto-x3m-spooky": {
+    "name": "Moto X3M Spooky Land",
+    "image": "/games/moto-x3m-spooky/logo.png",
+    "slug": "moto-x3m-spooky"
+  },
+  "moto-x3m-winter": {
+    "name": "Moto X3M Winter",
+    "image": "/games/moto-x3m-winter/logo.png",
+    "slug": "moto-x3m-winter"
+  },
+  "osu": {
+    "name": "osu!",
+    "image": "/games/osu/logo.png",
+    "slug": "osu"
+  },
+  "retro-bowl": {
+    "name": "Retro Bowl",
+    "image": "/games/retro-bowl/logo.png",
+    "slug": "retro-bowl"
+  },
+  "slope": {
+    "name": "Slope",
+    "image": "/games/slope/logo.png",
+    "slug": "slope"
+  },
+  "sm64": {
+    "name": "Super Mario 64",
+    "image": "/games/sm64/logo.png",
+    "slug": "sm64"
+  },
+  "solitaire": {
+    "name": "Solitaire",
+    "image": "/games/solitaire/logo.png",
+    "slug": "solitaire"
+  },
+  "superhot": {
+    "name": "Superhot",
+    "image": "/games/superhot/logo.png",
+    "slug": "superhot"
+  },
+  "there-is-no-game": {
+    "name": "There is No Game",
+    "image": "/games/there-is-no-game/logo.png",
+    "slug": "there-is-no-game"
+  },
+  "ul6": {
+    "name": "Ultima 6",
+    "image": "/games/ul6/logo.png",
+    "slug": "ul6"
+  },
+  "vex3": {
+    "name": "Vex 3",
+    "image": "/games/vex3/logo.png",
+    "slug": "vex3"
+  },
+  "vex4": {
+    "name": "Vex 4",
+    "image": "/games/vex4/logo.png",
+    "slug": "vex4"
+  },
+  "vex5": {
+    "name": "Vex 5",
+    "image": "/games/vex5/logo.png",
+    "slug": "vex5"
+  },
+  "vex6": {
+    "name": "Vex 6",
+    "image": "/games/vex6/logo.png",
+    "slug": "vex6"
+  },
+  "worlds-hardest-game": {
+    "name": "World's Hardest Game",
+    "image": "/games/worlds-hardest-game/logo.png",
+    "slug": "worlds-hardest-game"
+  },
+  "worlds-hardest-game-2": {
+    "name": "World's Hardest Game 2",
+    "image": "/games/worlds-hardest-game-2/logo.png",
+    "slug": "worlds-hardest-game-2"
+  },
+  "you-are-bezos": {
+    "name": "You are Bezos",
+    "image": "/games/you-are-bezos/logo.png",
+    "slug": "you-are-bezos"
+  }
+}

src/pages/[lang]/games.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import games from "../../json/games.json";
 import GameItem from "../../components/GameItem.astro";
 
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
@@ -14,222 +15,12 @@ export function getStaticPaths() {
 <Layout title={t("pages.games")}>
   <h1 class="title-text">{t("games.title")}</h1>
   <div class="grid">
-    <GameItem name="1v1.lol" image="/games/1v1.lol/logo.png" />
+    {
-    <GameItem name="2048" image="/games/2048/logo.png" />
+      Object.keys(games).map((key) => {
-    <GameItem
+        const game = (games as any)[key];
-      name="The Backrooms"
+        return <GameItem name={game.name} image={game.image} slugName={game.slug} />;
-      image="/games/backrooms/logo.png"
+      })
-      slugName="backrooms"
+    }
-    />
-    <GameItem
-      name="Baldi's Basics"
-      image="/games/baldi/logo.png"
-      slugName="baldi"
-    />
-    <GameItem
-      name="Cannon Basketball 4"
-      image="/games/cannon-basketball-4/logo.png"
-      slugName="cannon-basketball-4"
-    />
-    <GameItem
-      name="Cell Machine"
-      image="/games/cell-machine/logo.png"
-      slugName="cell-machine"
-    />
-    <GameItem
-      name="Chrome Dino"
-      image="/games/chrome-dino/logo.png"
-      slugName="chrome-dino"
-    />
-    <GameItem
-      name="Cookie Clicker"
-      image="/games/cookie-clicker/logo.png"
-      slugName="cookie-clicker"
-    />
-    <GameItem
-      name="CSGO Clicker"
-      image="/games/csgo-clicker/logo.png"
-      slugName="csgo-clicker"
-    />
-    <GameItem name="Cut The Rope" image="/games/ctr/logo.png" slugName="ctr" />
-    <GameItem
-      name="Cut The Rope - Holiday"
-      image="/games/ctr-holiday/logo.png"
-      slugName="ctr-holiday"
-    />
-    <GameItem
-      name="Cut The Rope - Time Travel"
-      image="/games/ctr-tr/logo.png"
-      slugName="ctr-tr"
-    />
-    <GameItem
-      name="Death Run 3D"
-      image="/games/death-run-3d/logo.png"
-      slugName="death-run-3d"
-    />
-    <GameItem
-      name="Doge Miner"
-      image="/games/doge-miner/logo.png"
-      slugName="doge-miner"
-    />
-    <GameItem
-      name="Doodle Jump"
-      image="/games/doodle-jump/logo.png"
-      slugName="doodle-jump"
-    />
-    <GameItem name="Doom" image="/games/doom/logo.png" slugName="doom" />
-    <GameItem
-      name="Draw The Hill"
-      image="/games/draw-the-hill/logo.png"
-      slugName="draw-the-hill"
-    />
-    <GameItem
-      name="Evil Glitch"
-      image="/games/evil-glitch/logo.png"
-      slugName="evil-glitch"
-    />
-    <GameItem
-      name="Fall Boys"
-      image="/games/fall-boys/logo.png"
-      slugName="fall-boys"
-    />
-    <GameItem
-      name="Fireboy and Watergirl"
-      image="/games/firewater/logo.png"
-      slugName="firewater"
-    />
-    <GameItem
-      name="Fireboy and Watergirl 2"
-      image="/games/firewater2/logo.png"
-      slugName="firewater2"
-    />
-    <GameItem
-      name="Five Nights at Freddy's"
-      image="/games/fnaf/logo.png"
-      slugName="fnaf"
-    />
-    <GameItem
-      name="Five Nights at Freddy's 2"
-      image="/games/fnaf2/logo.png"
-      slugName="fnaf2"
-    />
-    <GameItem
-      name="Five Nights at Freddy's 3"
-      image="/games/fnaf3/logo.png"
-      slugName="fnaf3"
-    />
-    <GameItem
-      name="Five Nights at Freddy's 4"
-      image="/games/fnaf4/logo.png"
-      slugName="fnaf4"
-    />
-    <GameItem
-      name="Game Inside"
-      image="/games/game-inside/logo.png"
-      slugName="game-inside"
-    />
-    <GameItem
-      name="Google Snake"
-      image="/games/google-snake/logo.png"
-      slugName="google-snake"
-    />
-    <GameItem
-      name="Grindcraft"
-      image="/games/grindcraft/logo.png"
-      slugName="grindcraft"
-    />
-    <GameItem
-      name="Idle Breakout"
-      image="/games/idle-breakout/logo.png"
-      slugName="idle-breakout"
-    />
-    <GameItem
-      name="Just One Boss"
-      image="/games/just-one-boss/logo.png"
-      slugName="just-one-boss"
-    />
-    <GameItem
-      name="Line Rider"
-      image="/games/line-rider/logo.png"
-      slugName="line-rider"
-    />
-    <GameItem
-      name="Minecraft Classic"
-      image="/games/minecraft-classic/logo.png"
-      slugName="minecraft-classic"
-    />
-    <GameItem
-      name="Minesweeper"
-      image="/games/minesweeper/logo.png"
-      slugName="minesweeper"
-    />
-    <GameItem
-      name="Moto X3M"
-      image="/games/moto-x3m/logo.png"
-      slugName="moto-x3m"
-    />
-    <GameItem
-      name="Moto X3M Pool Party"
-      image="/games/moto-x3m-pool/logo.png"
-      slugName="moto-x3m-pool"
-    />
-    <GameItem
-      name="Moto X3M Spooky Land"
-      image="/games/moto-x3m-spooky/logo.png"
-      slugName="moto-x3m-spooky"
-    />
-    <GameItem
-      name="Moto X3M Winter"
-      image="/games/moto-x3m-winter/logo.png"
-      slugName="moto-x3m-winter"
-    />
-    <GameItem name="osu!" image="/games/osu/logo.png" slugName="osu" />
-    <GameItem
-      name="Retro Bowl"
-      image="/games/retro-bowl/logo.png"
-      slugName="retro-bowl"
-    />
-    <GameItem name="Slope" image="/games/slope/logo.png" slugName="slope" />
-    <GameItem
-      name="Super Mario 64"
-      image="/games/sm64/logo.png"
-      slugName="sm64"
-    />
-    <GameItem
-      name="Solitaire"
-      image="/games/solitaire/logo.png"
-      slugName="solitaire"
-    />
-    <GameItem
-      name="Superhot"
-      image="/games/superhot/logo.png"
-      slugName="superhot"
-    />
-    <GameItem
-      name="There is No Game"
-      image="/games/there-is-no-game/logo.png"
-      slugName="there-is-no-game"
-    />
-    <GameItem name="Ultima 6" image="/games/ul6/logo.png" slugName="ul6" />
-    <GameItem name="Vex 3" image="/games/vex3/logo.png" slugName="vex3" />
-    <GameItem name="Vex 4" image="/games/vex4/logo.png" slugName="vex4" />
-    <GameItem name="Vex 5" image="/games/vex5/logo.png" slugName="vex5" />
-    <GameItem name="Vex 6" image="/games/vex6/logo.png" slugName="vex6" />
-    <GameItem
-      name="World's Hardest Game"
-      image="/games/worlds-hardest-game/logo.png"
-      slugName="worlds-hardest-game"
-    />
-    <GameItem
-      name="World's Hardest Game 2"
-      image="/games/worlds-hardest-game-2/logo.png"
-      slugName="worlds-hardest-game-2"
-    />
-    <GameItem
-      name="You are Bezos"
-      image="/games/you-are-bezos/logo.png"
-      slugName="you-are-bezos"
-    />
   </div>
 </Layout>
 

src/pages/index.astro

@@ -8,8 +8,7 @@ import { ViewTransitions } from "astro:transitions";
     <meta charset="UTF-8" />
     <ViewTransitions />
     <script>
-      if (localStorage.getItem("alu__selectedLanguage") === null)
+      if (localStorage.getItem("alu__selectedLanguage") === null) window.location.href = "/en/";
-        window.location.href = "/en/";
       let currentLang = localStorage.getItem("alu__selectedLanguage");
       if (currentLang) {
         try {