From 50563aaa0b04dd45a334b41c1ca323bb4f80a554 Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Sun, 28 Jan 2024 14:11:17 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=F0=9F=8E=89=F0=9F=8E=89i18n=20now?=
 =?UTF-8?q?=20extends=20partially=20to=20settings=20and=20game=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dropdown.astro                 |   4 +-
 src/components/Footer.astro                   |   2 +-
 src/components/Input.astro                    |   2 +-
 .../SettingsContent/CustomizationTab.astro    |  16 +-
 src/components/SettingsContent/ProxyTab.astro |  44 ++++-
 src/components/SettingsTablist.astro          | 178 ++++++++----------
 src/components/ThemeLoader.astro              |   4 +-
 src/components/UVRegistrar.astro              |   2 +-
 src/i18n/en.json                              |  15 +-
 src/i18n/jp.json                              |  16 +-
 src/layouts/Layout.astro                      |  15 +-
 src/pages/[lang]/games.astro                  |   8 +-
 src/pages/index.astro                         |  11 +-
 13 files changed, 175 insertions(+), 142 deletions(-)

diff --git a/src/components/Dropdown.astro b/src/components/Dropdown.astro
index 5617a66..8c5565c 100644
--- a/src/components/Dropdown.astro
+++ b/src/components/Dropdown.astro
@@ -10,9 +10,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
     <ul class="dropdown-menu" id={id + "-menu"}>
     {
         dropdownList.map((item: any) => {
-            return (
-                <li class="dropdown-item" id={`proxy-${item.toLowerCase()}`} data-setting={item}>{item}</li>
-            )
+            return <li class="dropdown-item" data-setting={item.value}>{item.name}</li>
         })
     }
     </ul>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7763083..ff05806 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -10,7 +10,7 @@ const t = useTranslations(lang);
     <div class="footerflex">
         <div class="footerbrand">
             <p class="footerlist-heading"><a href="/">{t("footer.brand")}</a></p>
-            <p>{t("footer.madeWithLove")}</p>
+            <p><a target="_blank" rel="noopener noreferrer" href="https://wearr.dev">{t("footer.madeWithLove")}</a></p>
         </div>
     <div class="footerlist">
         <p class="footerlist-heading">{t("footer.services")}</p>
diff --git a/src/components/Input.astro b/src/components/Input.astro
index b2c38c3..0cbe946 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -14,7 +14,7 @@ interface Props {
 
 <style>
     input {
-        height: 43px;
+        height: 50px;
         width: 100%;
         border: 4px solid #E0E0E0;
         border-radius: 10px;
diff --git a/src/components/SettingsContent/CustomizationTab.astro b/src/components/SettingsContent/CustomizationTab.astro
index d444232..2e95bb5 100644
--- a/src/components/SettingsContent/CustomizationTab.astro
+++ b/src/components/SettingsContent/CustomizationTab.astro
@@ -1,15 +1,25 @@
 ---
     import Dropdown from "../Dropdown.astro"
-    import Input from "../Input.astro"
+    
+    const themeList = [
+        {"name": "Alu", "value": "alu"},
+        {"name": "Macchiato", "value": "macchiato"},
+        {"name": "Mocha", "value": "mocha"}
+    ]
+
+    const languageList = [
+        {"name": "English", "value": "en"},
+        {"name": "日本語", "value": "jp"}
+    ]
 ---
 
 <div class="settings-container">
     <div class="setting__theme">
         <label class="setting-label">Theme</label>
-        <Dropdown buttonNameDefault="Alu" dropdownList={["Alu", "Macchiato", "Mocha"]}, id="dropdown__selected-theme" />
+        <Dropdown buttonNameDefault="Alu" dropdownList={themeList}, id="dropdown__selected-theme" />
     </div>
     <div class="setting__language">
         <label class="setting-label">Language</label>
-        <Dropdown buttonNameDefault="English" dropdownList={["English", "日本語"]}, id="dropdown__selected-language" />
+        <Dropdown buttonNameDefault="English" dropdownList={languageList}, id="dropdown__selected-language" />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro
index c8a5540..727db01 100644
--- a/src/components/SettingsContent/ProxyTab.astro
+++ b/src/components/SettingsContent/ProxyTab.astro
@@ -1,27 +1,51 @@
 ---
-    import Input from "../Input.astro"
-    import Dropdown from "../Dropdown.astro"
+import Input from "../Input.astro"
+import Dropdown from "../Dropdown.astro"
+
+import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const proxyList = [
+  { "name": t("settings.proxy.auto"), "value": "auto" },
+  { "name": "Ultraviolet", "value": "ultraviolet" },
+  { "name": "Rammerhead", "value": "rammerhead" },
+  { "name": "Dynamic", "value": "dynamic" }
+]
+
+const searchEngineList = [
+  { "name": "Google", "value": "google" },
+  { "name": "Bing", "value": "bing" },
+  { "name": "Brave", "value": "brave" },
+  { "name": "Searx", "value": "searx" }
+]
+
+const openPageWith = [
+  { "name": t("settings.proxy.openPageWith.embed"), "value": "embed"},
+  { "name": "About:Blank", "value": "about:blank" },
+  { "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab"}
+]
 ---
 
 <div class="settings-container">
     <div class="setting__selected-proxy">
-      <label class="setting-label">Selected Proxy</label>
-      <Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy" />
+      <label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+      <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList}, id="dropdown__selected-proxy" />
     </div>
     <div class="setting__search-engine">
-      <label class="setting-label">Search Engine</label>
-      <Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine" />
+      <label class="setting-label">{t("settings.proxy.searchEngine")}</label>
+      <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList}, id="dropdown__search-engine" />
     </div>
     <div class="setting__open_with">
-      <label class="setting-label">Open With</label>
-      <Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with" />
+      <label class="setting-label">{t("settings.proxy.openPageWith")}</label>
+      <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith}, id="dropdown__open-with" />
     </div>
     <div class="setting__bare-url">
-      <label class="setting-label">Bare URL</label>
+      <label class="setting-label">{t("settings.proxy.bareURL")}</label>
       <Input inputName="bare-url" />
     </div>
 </div>
 <div class="setting__searxng-url">
-    <label for="searxng-url-input" class="setting-label">Searxng URL</label>
+    <label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
     <Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
 </div>
\ No newline at end of file
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index db7a0be..4f6b325 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -42,53 +42,35 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
         
     </div>
   </div>
-  <script>
-    import { navigate } from 'astro:transitions/client';
-
-    // Extend window object to store currently selected tab.
-    declare global {
-        interface Window { 
-          currentlySelectedTab: string,
-          loadedContentStorage: any // Technically this is an object storing strings of html, but im lazy.
-        }
-    }
-
+  <script is:inline>
     document.addEventListener("astro:before-swap", () => {
       window.currentlySelectedTab = ""
-      document.removeEventListener('setting-tabChange', determineListener as EventListener)
+      document.removeEventListener('setting-tabChange', determineListener)
     })
     window.currentlySelectedTab;
     window.loadedContentStorage = {}
 
-    function beginLoad() {
-        Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
-          let contentToLoad = document.getElementById('content-' + tab.id)
-          if (contentToLoad) {
-            window.loadedContentStorage[tab.id] = contentToLoad.innerHTML
-            contentToLoad.remove()
-          }
+    Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
+      let contentToLoad = document.getElementById('content-' + tab.id)
+      if (contentToLoad) {
+        window.loadedContentStorage[tab.id] = contentToLoad.innerHTML
+        contentToLoad.remove()
+      }
 
-          tab.addEventListener('click', (event) => {
-            loadContent((event.target as HTMLElement).id)
-          })
+      tab.addEventListener('click', (event) => {
+        loadContent(event.target.id)
       })
-    }
-    beginLoad();
+    })
 
-
-    function loadContent(tabID: string) {
+    function loadContent(tabID) {
       if (window.currentlySelectedTab == tabID) return
         else window.currentlySelectedTab = tabID
         let currentContent = document.getElementById('current-content')
         if (currentContent) {
           currentContent.style.opacity = '0'
           setTimeout(() => {
-            if (currentContent) {
-              currentContent.innerHTML = window.loadedContentStorage[tabID]
-              currentContent.style.opacity = '1'
-            } else {
-              throw new Error("Current content not found!")
-            }
+            currentContent.innerHTML = window.loadedContentStorage[tabID]
+            currentContent.style.opacity = '1'
             document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
             document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
           }, 250);
@@ -103,11 +85,11 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           if (dropdown) {
             if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
               dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
-              document.getElementById(toggle.id)!.style.borderRadius = '10px 10px 0 0';
+              toggle.style.borderRadius = '10px 10px 0 0';
             } else {
               dropdown.style.maxHeight = '0px';
               setTimeout(() => {
-                document.getElementById(toggle.id)!.style.borderRadius = '10px';
+                toggle.style.borderRadius = '10px';
               }, 300);
             }
           }
@@ -115,7 +97,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       })
     }
 
-    function determineListener(event: CustomEvent) {
+    function determineListener(event) {
       if (event.detail == "setting-tab-proxy") {
         addDropdownListener()
       } else if (event.detail == "setting-tab-customization") {
@@ -123,110 +105,98 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
       }
     }
 
-    function closeDropdown(dropdownID: string) {
+    function closeDropdown(dropdownID) {
       let dropdown = document.getElementById(dropdownID)
       if (dropdown) {
         dropdown.style.maxHeight = '0px';
         setTimeout(() => {
           let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
-          if (dropdown_toggle) {
-            dropdown_toggle.style.borderRadius = '10px';
-          } else {
-            throw new Error("Dropdown toggle not found!")
-          }
+          dropdown_toggle.style.borderRadius = '10px';
         }, 300);
       }
     }
 
-    function applySavedLocalStorage(localStorageItem: string, dropdownID: string) {
+    function applySavedLocalStorage(localStorageItem, dropdownID) {
       if (localStorage.getItem(localStorageItem)) {
         let dropdown_toggle = document.getElementById(dropdownID);
         if (dropdown_toggle) {
-          dropdown_toggle.innerText = (localStorage.getItem(localStorageItem) || "").charAt(0).toUpperCase() + (localStorage.getItem(localStorageItem) || "").slice(1)
+          dropdown_toggle.innerText = JSON.parse(localStorage.getItem(localStorageItem)).name.charAt(0).toUpperCase() + JSON.parse(localStorage.getItem(localStorageItem)).name.slice(1)
         }
       }
     }
 
-    function applyDropdownEventListeners(item: HTMLElement, dropdownID: string, localStorageItem: string, optionalCallback: Function | undefined = undefined) {
+    function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
       Array.from(item.children).forEach((item) => {
-          item.addEventListener('click', () => {
-            // TODO: Allow an optional field for a custom localStorage value, instead of the input value.
-            localStorage.setItem(localStorageItem, ((item as HTMLElement).dataset.setting) || "")
-            applySavedLocalStorage(localStorageItem, dropdownID)
-            if (item.parentElement) {
-              closeDropdown(item.parentElement.id);
-            }
-
-            if (typeof optionalCallback == "function") {
-              optionalCallback();
-            }
-          })
+        item.addEventListener('click', () => {
+          // Get position in item.children array
+          localStorage.setItem(localStorageItem, JSON.stringify({
+            "name": item.innerText,
+            "value": item.dataset.setting
+          }))
+          applySavedLocalStorage(localStorageItem, dropdownID)
+          closeDropdown(item.parentElement.id);
+          if (typeof optionalCallback == "function") {
+            optionalCallback();
+          }
         })
+      })
+      // Array.from(item.children).forEach((item) => {
+      //     item.addEventListener('click', () => {
+      //       localStorage.setItem(localStorageItem, item.dataset.setting)
+      //       applySavedLocalStorage(localStorageItem, dropdownID)
+      //       closeDropdown(item.parentElement.id);
+
+      //       if (typeof optionalCallback == "function") {
+      //         optionalCallback();
+      //       }
+      //     })
+      //   })
     }
 
-    function applyInputListeners(item: HTMLInputElement, localStorageItem: string) {
+    function applyInputListeners(item, localStorageItem) {
       item.addEventListener('input', () => {
-        // TODO: Allow an optional field for a custom localStorage value, instead of the input value.
         localStorage.setItem(localStorageItem, item.value)
       })
     }
 
-    document.addEventListener('setting-tabChange', determineListener as EventListener)
+    document.addEventListener('setting-tabChange', determineListener)
 
     loadContent('setting-tab-proxy')
 
     function setupCustomizationSettings() {
       applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
       applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
-      // TODO: Null checking lol.
-      let dropdownTheme = document.getElementById('dropdown__selected-theme-menu') as HTMLElement
-      let dropdownLanguage = document.getElementById('dropdown__selected-language-menu') as HTMLElement
-      applyDropdownEventListeners(dropdownTheme, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
-      applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
-    }
-
-    function navigateToNewLangaugePage() {
-      console.log("Here")
-      console.log(localStorage.getItem("alu__selectedLanguage"))
-      switch (localStorage.getItem("alu__selectedLanguage")) {
-        case "English":
-          window.location.href = "/en/settings/"
-          break;
-        case "日本語":
-          window.location.href = "/jp/settings/"
-          break;
-      }
-      beginLoad();
-
+      let themeDropdown = document.getElementById('dropdown__selected-theme-menu')
+      let languageDropdown = document.getElementById('dropdown__selected-language-menu')
+      applyDropdownEventListeners(themeDropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
+      applyDropdownEventListeners(languageDropdown, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
     }
 
     function changeTheme() {
-      // || "" is safe to use here, because it will default to the default theme if the localStorage item is not found.
-      let theme = localStorage.getItem('alu__selectedTheme') || ""
+      let theme = JSON.parse(localStorage.getItem('alu__selectedTheme')).value
       if (theme) {
         document.documentElement.setAttribute('data-theme', theme.toLowerCase())
-      }
-      let footer = document.getElementById('footer');
-      if (footer) {
+        let footer = document.getElementById('footer');
+        if (footer) {
           footer.dataset.theme = theme.toLowerCase();
+        }
       }
     }
 
-    function setupSettings(event: CustomEvent) {
+    function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
           applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
           applySavedLocalStorage('alu__search_engine', 'dropdown__search-engine');
           applySavedLocalStorage("alu__selectedOpenWith", 'dropdown__open-with');
-          let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu') as HTMLElement
-          let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu') as HTMLElement
-          let openWithDropdown = document.getElementById('dropdown__open-with-menu') as HTMLElement
-          let bareUrlInput = document.getElementById('bare-url-input') as HTMLInputElement
-          let searxngUrlInput = document.getElementById('searxng-url-input') as HTMLInputElement
+          let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-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 == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
-            // Typescript.. we literally make sure that it won't be undefined RIGHT ABOVE THIS COMMENT.
-            if (searxngUrlInput) searxngUrlInput.value = localStorage.getItem("alu__searxngUrl") || "https://searxng.site/"
+            searxngUrlInput.value = JSON.parse(localStorage.getItem("alu__searxngUrl")).value
           }
           // Proxy settings
           applyInputListeners(bareUrlInput, 'alu__bareUrl')
@@ -234,9 +204,8 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
           applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
           applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'alu__selectedProxy');
           applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'alu__selectedOpenWith');
-          // Currently does nothing functionally, but it's here for future use.
-          if (localStorage.getItem('alu__bareUrl')) {
-            bareUrlInput.value = localStorage.getItem('bareUrl') || ""
+          if (localStorage.getItem('bareUrl')) {
+            bareUrlInput.value = localStorage.getItem('bareUrl')
           } else {
             bareUrlInput.value = '/bare/'
           }
@@ -249,15 +218,26 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
     function checkSearxng() {
       // This function checks if the "searxng" option was clicked, display an additional option if so.
       if (localStorage.getItem("alu__search_engine")) {
-        if ((localStorage.getItem("alu__search_engine") || "").toLowerCase() == "searx") {
-          (document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '1'
+        if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") {
+          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
         } else {
-          (document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '0'
+          document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
         }
       }
     }
 
-    document.addEventListener('setting-tabLoad', setupSettings as EventListener);
+    document.addEventListener('setting-tabLoad', setupSettings)
+
+    function navigateToNewLangaugePage() {
+      switch (JSON.parse(localStorage.getItem("alu__selectedLanguage")).value) {
+        case "en":
+          window.location.href = "/en/settings/"
+          break;
+        case "jp":
+          window.location.href = "/jp/settings/"
+          break;
+      }
+    }
 </script>
 <style is:global>
 .content-hidden {
diff --git a/src/components/ThemeLoader.astro b/src/components/ThemeLoader.astro
index 47fc5f8..c78488e 100644
--- a/src/components/ThemeLoader.astro
+++ b/src/components/ThemeLoader.astro
@@ -3,10 +3,10 @@
         let currentTheme = localStorage.getItem("alu__selectedTheme")
 
         if (currentTheme) {
-            document.documentElement.setAttribute("data-theme", currentTheme.toLowerCase());
+            document.documentElement.setAttribute("data-theme", JSON.parse(currentTheme).value.toLowerCase());
             let footer = document.getElementById('footer');
             if (footer) {
-                footer.dataset.theme = currentTheme.toLowerCase();
+                footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
             }
         }
     }
diff --git a/src/components/UVRegistrar.astro b/src/components/UVRegistrar.astro
index 528d1f2..6b4767e 100644
--- a/src/components/UVRegistrar.astro
+++ b/src/components/UVRegistrar.astro
@@ -54,7 +54,7 @@
   };
 
   function getSearchEngine() {
-    switch (localStorage.getItem("alu__search_engine").toLowerCase()) {
+    switch (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()) {
         case "google": {
             return "https://google.com/search?q=";
         }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 247bea4..20b198b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -10,5 +10,18 @@
     "footer.madeWithLove": "Made with ❤️ by wearr",
     "footer.services": "Services",
     "footer.socials": "Socials",
-    "footer.aluProject": "Alu Project"
+    "footer.aluProject": "Alu Project",
+
+    "games.title": "Games",
+
+    "settings.title": "Settings",
+    "settings.proxy": "Proxy",
+    "settings.proxy.auto": "Auto",
+    "settings.proxy.selectedProxy": "Selected Proxy",
+    "settings.proxy.searchEngine": "Search Engine",
+    "settings.proxy.openPageWith": "Open With",
+    "settings.proxy.openPageWith.embed": "Embed",
+    "settings.proxy.openPageWith.newTab": "New Tab",
+    "settings.proxy.searxngURL": "Searx URL",
+    "settings.proxy.bareURL": "Bare URL"
 }
\ No newline at end of file
diff --git a/src/i18n/jp.json b/src/i18n/jp.json
index e820145..1b375d4 100644
--- a/src/i18n/jp.json
+++ b/src/i18n/jp.json
@@ -7,8 +7,20 @@
     "menu.search": "検索...",
 
     "footer.brand": "アルー",
-    "footer.madeWithLove": "「wearr」による❤️で作られました",
+    "footer.madeWithLove": "wearrによる❤️で作られました",
     "footer.services": "サービス",
     "footer.socials": "ソーシャル",
-    "footer.aluProject": "アループロジェクト"
+    "footer.aluProject": "アループロジェクト",
+
+    "games.title": "ゲーム",
+
+    "settings.title": "設定",
+    "settings.proxy": "プロキシ",
+    "settings.proxy.selectedProxy": "選択されたプロキシ",
+    "settings.proxy.searchEngine": "検索エンジン",
+    "settings.proxy.openPageWith": "開く",
+    "settings.proxy.searxngURL": "SearxのURL",
+    "settings.proxy.openPageWith.embed": "埋め込み",
+    "settings.proxy.openPageWith.newTab": "新しいタブ",
+    "settings.proxy.bareURL": "BareのURL"
 }
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 645a55a..7391a03 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -100,23 +100,10 @@ body {
 body > * {
   opacity: 1;
 }
-/* Create animation to fade in elements */
-/* body > * {
-  animation: fadeIn ease 0.15s;
-  animation-fill-mode: forwards;
-  animation-delay: 0.15s;
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-} */
 .title-text {
   color: var(--text-color);
   text-align: center;
+  font-weight: 400;
 }
 ::-webkit-scrollbar {
   display: none;
diff --git a/src/pages/[lang]/games.astro b/src/pages/[lang]/games.astro
index c204c69..5508019 100644
--- a/src/pages/[lang]/games.astro
+++ b/src/pages/[lang]/games.astro
@@ -2,6 +2,10 @@
 import Layout from "../../layouts/Layout.astro";
 import GameItem from "../../components/GameItem.astro";
 
+import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
 export function getStaticPaths () {
  return [
     {params: {lang: 'en'}},
@@ -11,7 +15,7 @@ export function getStaticPaths () {
 ---
 
 <Layout title="Games | Alu">
-    <h1 class="title-text">Games</h1>
+    <h1 class="title-text">{t("games.title")}</h1>
         <div class="grid">
             <GameItem name="1v1.lol" image="/games/1v1.lol/logo.png"></GameItem>
             <GameItem name="2048" image="/games/2048/logo.png"></GameItem>
@@ -28,7 +32,7 @@ export function getStaticPaths () {
             <GameItem name="Death Run 3D" image="/games/death-run-3d/logo.png" slugName="death-run-3d"></GameItem>
             <GameItem name="Doge Miner" image="/games/doge-miner/logo.png" slugName="doge-miner"></GameItem>
             <GameItem name="Doodle Jump" image="/games/doodle-jump/logo.png" slugName="doodle-jump"></GameItem>
-            <GameItem name="doom" image="/games/doom/logo.png" slugName="doom"></GameItem>
+            <GameItem name="Doom" image="/games/doom/logo.png" slugName="doom"></GameItem>
             <GameItem name="Draw The Hill" image="/games/draw-the-hill/logo.png" slugName="draw-the-hill"></GameItem>
             <GameItem name="Evil Glitch" image="/games/evil-glitch/logo.png" slugName="evil-glitch"></GameItem>
             <GameItem name="Fall Boys" image="/games/fall-boys/logo.png" slugName="fall-boys"></GameItem>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9a670d8..45dee72 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,17 +9,22 @@ import { ViewTransitions } from "astro:transitions";
     <meta charset="UTF-8" />
     <ViewTransitions />
     <script>
-        switch (localStorage.getItem("alu__selectedLanguage")) {
-            case "English":
+      if (localStorage.getItem("alu__selectedLanguage") === null) window.location.href = "/en/";
+      let currentLang = localStorage.getItem("alu__selectedLanguage");
+      if (currentLang) {
+        switch (JSON.parse(currentLang).value) {
+            case "en":
                 window.location.href = "/en/";
                 break;
-            case "日本語":
+            case "jp":
                 window.location.href = "/jp/";
                 break;
             default:
                 window.location.href = "/en/";
                 break;
         }
+      }
+
     </script>
   </head>
   <body></body>