reinvent navigation and small translation support

FNLookup · May 16, 2024 · 989fc4c · 989fc4c
1 parent c770025
commit 989fc4c
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 139 deletions.
diff --git a/account/change/index.html b/account/change/index.html
@@ -66,16 +66,29 @@
             document.location.href = '/account/'
         }
 
+        function resetAccounts() {
+            // BUT
+            let lang = localStorage.requestLanguage
+
+            localStorage.clear()
+
+            localStorage.requestLanguage = lang
+
+            window.location.reload()
+
+            // MIGRATION NEEDED HERE!
+        }
+
         function loadSwitcher() {
             let modal = document.getElementById('account-change-modal')
 
             if (localStorage.accounts === undefined || localStorage.accounts.length === 0) {
-                modal.innerHTML = `<h2 class="header-text-bold">Link your account</h2><div class="flex flex-wrap player-data">
+                modal.innerHTML = `<h2 class="header-text-bold" tkey="account_change:link_new">Link your account</h2><div class="flex flex-wrap player-data">
                 <input type="text" placeholder="User Name" id="player-name" title="Account Name">
-                <button id="discover" onclick="lookupPlayer()">Search</button>
+                <button id="discover" onclick="lookupPlayer()" tkey="account_change:search">Search</button>
             </div>`
             } else {
-                modal.innerHTML = `<h2 class="header-text-bold">Your accounts</h2>`
+                modal.innerHTML = `<h2 class="header-text-bold" tkey="account_change:your_accounts">Your accounts</h2>`
                 let accountContainer = document.createElement('div')
                 accountContainer.id = 'accounts'
                 modal.append(accountContainer)
@@ -96,10 +109,11 @@
                     }
                 }
 
-                modal.innerHTML += `<h2 class="header-text-bold">Add new account</h2><div class="flex flex-wrap player-data">
+                modal.innerHTML += `<h2 class="header-text-bold" tkey="account_change:add_another">Add new account</h2><div class="flex flex-wrap player-data">
                 <input type="text" placeholder="User Name" id="player-name" title="Account Name">
-                <button id="discover" onclick="lookupPlayer()">Search</button>
-            </div>`
+                <button id="discover" onclick="lookupPlayer()" tkey="account_change:search">Search</button>
+            </div>
+                <hr><button onclick="resetAccounts()" tkey="account_change:reset_your_accounts">Reset all accounts</button>`
             }
         }
     </script>
@@ -114,23 +128,6 @@
     </script>
 
     <div class="content">
-        <div class="navigation">
-            <div class="navigation-part part-left" id="navigation-left">
-                <a class="no-link part-button" id="label-left">BACK</a>
-                <script>
-                    document.getElementById('label-left').onclick = function() {
-                        history.back()
-                    }
-                </script>
-            </div>
-            <div class="navigation-part part-center" id="navigation-center">
-                <a class="part-button not-button" id="label-center">ACCOUNT SWITCH</a>
-            </div>
-            <div class="navigation-part part-right" id="navigation-right">
-                <a href="/404.html" class="no-link part-button" id="label-right">NOTIFICATIONS</a>
-            </div>
-        </div>
-
         <div id="account-change-modal"></div>
 
         <div id="content-players"></div>
@@ -149,5 +146,9 @@
                 }
             }
         </script>
+
+        <script>
+            callTranslate()
+        </script>
     </div>
 </body>
diff --git a/account/index.html b/account/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="AES Keys allow dataminers to find files in Fortnite's archives. Use these keys in FModel to decrypt the .pak and .utoc/.ucas packages.">
     <meta name="author" content="tposejank">
-    <title>AES Keys - FNLookup</title>
+    <title>Account - FNLookup</title>
     <link rel="icon" href="assets/icons/logo.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -27,29 +27,12 @@
     </script>
 
     <div class="content" fullpage="true">
-        <div class="navigation">
-            <div class="navigation-part part-left" id="navigation-left">
-                <a class="no-link part-button" id="label-left">BACK</a>
-                <script>
-                    document.getElementById('label-left').onclick = function() {
-                        history.back()
-                    }
-                </script>
-            </div>
-            <div class="navigation-part part-center" id="navigation-center">
-                <a class="part-button not-button" id="label-center">ACCOUNT</a>
-            </div>
-            <div class="navigation-part part-right" id="navigation-right">
-                <a href="/404.html" class="no-link part-button" id="label-right">NOTIFICATIONS</a>
-            </div>
-        </div>
-
-        <h1 class="header-text-bold header-text-italic">Account</h1>
-        <h2 class="header-text-bold header-text-italic">Link or view your accounts</h2>
+        <h1 class="header-text-bold header-text-italic" tkey="account:page_name">Account</h1>
+        <h2 class="header-text-bold header-text-italic" tkey="account:page">Link or view your accounts</h2>
 
         <hr>
 
-        <h1 class="header-text-bold header-text-italic">Current account</h1>
+        <h1 class="header-text-bold header-text-italic" tkey="account:current_account">Current account</h1>
         <div id="account-modal"></div>
 
         <script>
@@ -58,15 +41,19 @@ <h1 class="header-text-bold header-text-italic">Current account</h1>
 
         <hr>
 
-        <h1 class="header-text-bold header-text-italic">Language
-            <a class="no-link float-right fortnite-button fortnite-button-border" href="/language/">CHANGE LANGUAGE</a>
-        </h1>
+        <div>
+            <h1 class="header-text-bold header-text-italic" tkey="account:language">Language
+            </h1>
+            <a class="no-link float-right fortnite-button fortnite-button-border" href="/language/" tkey="account:change_language">CHANGE LANGUAGE</a>
+        </div>
 
         <hr>
 
         <h1 class="header-text-bold header-text-italic">FNLookup
-            <a class="no-link float-right fortnite-button fortnite-button-border" href="/about/">ABOUT</a>
+            <a class="no-link float-right fortnite-button fortnite-button-border" href="/about/" tkey="account:about">VIEW</a>
         </h1>
-        <h2 class="header-text-bold header-text-italic">About FNLookup</h2>
+        <h2 class="header-text-bold header-text-italic" tkey="account:about_fnlookup">About FNLookup</h2>
+
+        <script>callTranslate()</script>
     </div>
 </body>
diff --git a/account/js/account.js b/account/js/account.js
@@ -1,8 +1,8 @@
 function loadAccounts() {
     let modal = document.getElementById('account-modal')
     if (localStorage.accountId === undefined) {
-        modal.innerHTML = '<p>You haven\'t linked an account yet.</p><a class="no-link float-right fortnite-button fortnite-button-border" href="change">LINK ACCOUNT</a>'
+        modal.innerHTML = '<p tkey="account:not_linked">You haven\'t linked an account yet.</p><a class="no-link float-right fortnite-button fortnite-button-border" href="change" tkey="account:link_button">LINK ACCOUNT</a>'
     } else {
-        modal.innerHTML = '<h2 class="header-text-bold header-text-italic">' + localStorage.accountName + '<a class="no-link float-right fortnite-button fortnite-button-border" href="change">SWITCH ACCOUNT</a></h2>'
+        modal.innerHTML = '<h2 class="header-text-bold header-text-italic">' + localStorage.accountName + '<a class="no-link float-right fortnite-button fortnite-button-border" href="change" tkey="account:switch_button">SWITCH ACCOUNT</a></h2>'
     }
 }
diff --git a/assets/icons/back.png b/assets/icons/back.png
diff --git a/assets/icons/broadcast.png b/assets/icons/broadcast.png
diff --git a/assets/icons/home.png b/assets/icons/home.png
diff --git a/assets/icons/notis.png b/assets/icons/notis.png
diff --git a/assets/icons/shop.png b/assets/icons/shop.png
diff --git a/css/style.css b/css/style.css
@@ -318,6 +318,7 @@ a.link-underline:hover {
     padding: 1rem 1.5rem;
     border-radius: 25px;
     background-color: var(--card-background-color);
+    z-index: 999;
 }
 
 .fortnite-button {
@@ -1542,41 +1543,25 @@ body.purple {
 }
 
 .navigation {
-    width: 100%;
-    padding: 0 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    border-radius: 30px;
+    position: fixed;
+    right: 0;
+    top: var(--top-margin);
+    border-top-left-radius: 30px;
+    border-bottom-left-radius: 30px;
     background-color: var(--nav-color);
     margin: 2rem 0;
 }
 
-.navigation-part {
-    display: flex;
-}
-
-.navigation-part a {
-    cursor: pointer;
-}
-
-.navigation-part.part-left {
-    justify-content: left;
-    float: left;
-}
-
-.navigation-part.part-center {
-    justify-content: center;
+.navigation-icon {
+    width: 30px;
 }
 
-.navigation-part.part-right {
-    justify-content: right;
-    float: right;
+.navigation-part {
+    padding: 1rem 0;
 }
 
-.navigation-part {
-    width: 33.33%;
+.shop-bar {
+    display: flex; justify-content: center; align-items: center;
 }
 
 .achievements {
@@ -3725,7 +3710,7 @@ tr .player-name {
         height: auto;
     }
     .content {
-        --side-padding: 2rem;
+        --side-padding: 3rem;
         --top-padding: 5rem;
     }
     .quests-section-dropdown {
@@ -3860,13 +3845,9 @@ tr .player-name {
         width: 100%;
         padding: 0;
     }
-    .navigation {
+    .shop-bar {
         flex-direction: column;
     }
-    .navigation-part.part-left, .navigation-part.part-right {
-        justify-content: center;
-        float: none;
-    }
 }
 
 @media (max-width: 992px) {

diff --git a/index.html b/index.html
@@ -22,7 +22,6 @@
     <script src="js/backend.js" type="text/javascript"></script>
     <script src="js/script.js" type="text/javascript"></script>
     <script src="home/scripts/home.js" type="text/javascript"></script>
-    <script type="text/javascript" src="items/shop/js/item-shop.js"></script>
     <script type="text/javascript" src="home/scripts/ranked.js"></script>
 </head>
 
@@ -36,31 +35,19 @@
 
     <div class="content" fullpage="true">
         <div class="navigation">
-            <div class="navigation-part part-left" id="navigation-left">
-                <a class="not-button part-button" id="label-left">HOME</a>
-            </div>
-            <div class="navigation-part part-center" id="navigation-center">
-                <a href="/item-shop/" class="part-button not-button" id="label-center">ITEM SHOP</a>
-            </div>
-            <div class="navigation-part part-right" id="navigation-right">
-                <a href="/404.html" class="no-link part-button" id="label-right">NOTIFICATIONS</a>
-            </div>
+
         </div>
         <div id="main-content">
-            <!-- <h1>Welcome</h1>
-            <a class="d-link" href="index.html">FNLookup</a> is a simple browsing tool for <a href="https://fn.gg" class="d-link">Fortnite</a> related content.
-            <p>Use the sidebar to navigate.</p> -->
-
-            <h3 class="header-text-light header-text-italic">Welcome Back</h3>
+            <h3 class="header-text-light header-text-italic" tkey="home:welcome_back">Welcome Back</h3>
             <h1 id="user_username" class="header-text-bold header-text-italic"></h1>
 
             <hr>
 
             <div class="ranked-section" id="account-section">
-                <h1 class="header-text-bold">Your Ranked Stats</h1>
+                <h1 class="header-text-bold" tkey="home:your_ranked_stats">Your Ranked Stats</h1>
                 <div class="ranked-progress-sections">
                     <div class="ranked-progress-section">
-                        <h2 class="header-text-bold">Battle Royale</h2>
+                        <h2 class="header-text-bold" tkey="home:br">Battle Royale</h2>
 
                         <div class="ranked-view">
                             <div class="progress-bar-circle" id="br-ranked-progress" style="--end-progress-value: 0">
@@ -71,7 +58,7 @@ <h2 class="header-text-bold">Battle Royale</h2>
                         <h2 class="header-text-light" id="br-rank-text">Unknown</h2>
                     </div>
                     <div class="ranked-progress-section">
-                        <h2 class="header-text-bold">Zero Build</h2>
+                        <h2 class="header-text-bold" tkey="home:zb">Zero Build</h2>
 
                         <div class="ranked-view">
                             <div class="progress-bar-circle" id="zb-ranked-progress" style="--end-progress-value: 0">
@@ -82,7 +69,7 @@ <h2 class="header-text-bold">Zero Build</h2>
                         <h2 class="header-text-light" id="zb-rank-text">Unknown</h2>
                     </div>
                     <div class="ranked-progress-section">
-                        <h2 class="header-text-bold">Ranked Racing</h2>
+                        <h2 class="header-text-bold" tkey="home:rr">Ranked Racing</h2>
 
                         <div class="ranked-view">
                             <div class="progress-bar-circle" id="dc-ranked-progress" style="--end-progress-value: 0">
@@ -101,11 +88,14 @@ <h2 class="header-text-light" id="dm-rank-text">Unknown</h2>
                     document.getElementById('user_username').innerHTML += `${localStorage.accountName}`
                 } else {
                     document.getElementById('account-section').remove()
+                    document.getElementById('user_username').setAttribute('tkey', 'home:not_linked')
                     document.getElementById('user_username').innerHTML += `You haven't linked an account yet.`
-                    document.getElementById('main-content').innerHTML += '<a class="no-link fortnite-button fortnite-button-border" href="/account/">LINK AN ACCOUNT</a>'
+                    document.getElementById('main-content').innerHTML += '<a class="no-link fortnite-button fortnite-button-border" href="/account/change/" tkey="home:link_account">LINK AN ACCOUNT</a>'
                 }
             </script>
         </div>
+
+        <script>callTranslate()</script>
     </div>
 </body>
 

diff --git a/items/shop/index.html b/items/shop/index.html
@@ -38,15 +38,7 @@
     </script>
 
     <div class="content">
-        <div class="navigation">
-            <div class="navigation-part part-left" id="navigation-left">
-                <a class="no-link part-button" id="label-left">BACK</a>
-                <script>
-                    document.getElementById('label-left').onclick = function() {
-                        history.back()
-                    }
-                </script>
-            </div>
+        <div class="shop-bar">
             <div class="navigation-part part-center" id="navigation-center">
                 <a class="part-button not-button flex" id="label-center">ITEM SHOP<p id="item-timer" class="shop-reset-timer"></p>
                 </a>

diff --git a/items/shop/js/item-shop.js b/items/shop/js/item-shop.js
@@ -156,7 +156,7 @@ function createItems() {
                         if (tileSize === "Size_1_x_1") {
                             item['width'] = count in [4, 2] ? 0.25 : 0.2;
                             item['height'] = 0.5;
-                        } else if (tileSize === "Size_1_x_2") {
+                        } else if (tileSize === "Size_1_x_2" || tileSize === "Normal") {
                             item['width'] = ((count == 4 || count == 2) ? 0.25 : count > 5 ? 0.2 : 0.2);
                             item['height'] = 1.0;
                             console.log(count, tileSize, item['name'])

diff --git a/items/view/index.html b/items/view/index.html
@@ -31,22 +31,6 @@
     </script>
 
     <div class="content" id="page-content">
-        <div class="navigation">
-            <div class="navigation-part part-left" id="navigation-left">
-                <a class="no-link part-button" id="label-left">BACK</a>
-                <script>
-                    document.getElementById('label-left').onclick = function() {
-                        history.back()
-                    }
-                </script>
-            </div>
-            <div class="navigation-part part-center" id="navigation-center">
-                <a class="part-button not-button" id="label-center">ITEM</a>
-            </div>
-            <div class="navigation-part part-right" id="navigation-right">
-                <a href="/404.html" class="no-link part-button" id="label-right">NOTIFICATIONS</a>
-            </div>
-        </div>
         <div id="loading"></div>
         <script>
             init()