Merge pull request duiqt#15 from fred913/main

Add multi-language support
AliAryanTech · May 27, 2023 · 4f16133 · 4f16133
2 parents b49ac4e + d869650
commit 4f16133
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 23 deletions.
diff --git a/audio/cn/gululu.mp3 b/audio/cn/gululu.mp3
diff --git a/audio/cn/gururu.mp3 b/audio/cn/gururu.mp3
diff --git a/audio/cn/转圈圈.mp3 b/audio/cn/转圈圈.mp3
diff --git a/audio/cn/转圈圈咯.mp3 b/audio/cn/转圈圈咯.mp3
diff --git a/audio/kuru1.mp3 → audio/en/kuru1.mp3 b/audio/kuru1.mp3 → audio/en/kuru1.mp3
diff --git a/audio/kuru2.mp3 → audio/en/kuru2.mp3 b/audio/kuru2.mp3 → audio/en/kuru2.mp3
diff --git a/audio/kuruto.mp3 → audio/en/kuruto.mp3 b/audio/kuruto.mp3 → audio/en/kuruto.mp3
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8" />
-    <title>Kuru Kuru~</title>
+    <title id="doc-title">Kuru Kuru~</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
     <link rel="stylesheet" href="style.css" type="text/css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -17,21 +17,27 @@
         <img src="img/hertaa1.gif" class="preload" />
         <img src="img/hertaa2.gif" class="preload" />
         <div id="content">
-            <h1>Welcome to herta kuru</h1>
+            <h1 id="page-title">Welcome to herta kuru</h1>
+            <select id="language-selector">
+                <option value="en" selected>English</option>
+                <option value="cn">中文</option>
+            </select>
+
+
             <hr id="subtitle-seperator" />
-            <h2>
+            <h2 id="page-descriptions">
                 The website for Herta, the <del>annoying</del> cutest genius Honkai:
                 Star Rail character out there.
             </h2>
             <div id="counter-container">
-                <h3>The kuru~ has been squished</h3>
+                <h3 id="counter-descriptions">The kuru~ has been squished</h3>
                 <br />
                 <br />
                 <p id="global-counter">0</p>
                 <p id="local-counter">0</p>
                 <br />
                 <br />
-                <p>times</p>
+                <p id="counter-unit">times</p>
                 <button id="counter-button">
                     Squish the kuru~!
                 </button>
@@ -47,7 +53,7 @@ <h3>The kuru~ has been squished</h3>
     <div id="footer">
         <img id="herta-card" loading="lazy" src="img/card.jpg" alt="" />
         <div id="footer-text">
-            <p>Herta gif made by</p>
+            <p id="credits-gif">Herta gif made by</p>
             <p>
                 <a href="https://twitter.com/Seseren_kr" target="_blank"><iconify-icon icon="mdi:twitter"
                         id="twitter-footer-icon" class="footer-icon"></iconify-icon><span
@@ -59,7 +65,7 @@ <h3>The kuru~ has been squished</h3>
             <p>
                 <a href="https://github.com/duiqt/herta.kuru" target="_blank"><iconify-icon icon="mdi:github"
                         id="github-footer-icon" class="footer-icon"></iconify-icon><span
-                        class="footer-icon-text">herta_kuru repo</span></a>
+                        class="footer-icon-text" id="footer-repository-text-2">herta_kuru repo</span></a>
             </p>
         </div>
     </div>

diff --git a/script.js b/script.js
@@ -1,17 +1,71 @@
 //varible
-const audioList = [
-    new Audio("audio/kuruto.mp3"),
-    new Audio("audio/kuru1.mp3"),
-    new Audio("audio/kuru2.mp3"),
-];
-
-for (const audio of audioList) {
-    audio.preload = "auto";
-}
+var audioList = [];  // will be loaded later
 
 let firstSquish = true;
 //end varible
 
+//language support
+const LANGUAGES = {
+    "en": {
+        audioList: [
+            new Audio("audio/en/kuruto.mp3"),
+            new Audio("audio/en/kuru1.mp3"),
+            new Audio("audio/en/kuru2.mp3"),
+        ],
+        texts: {
+            "page-title": "Welcome to herta kuru",
+            "doc-title": "Kuru Kuru~",
+            "page-descriptions": "The website for Herta, the <del>annoying</del> cutest genius Honkai: Star Rail character out there.",
+            "counter-descriptions": "The kuru~ has been squished",
+            "counter-unit": "times",
+            "counter-button": "Squish the kuru~!",
+            "credits-gif": "Herta gif made by",
+            "footer-repository-text": "You can check out the GitHub repository here:",
+            "footer-repository-text-2": "herta_kuru repo"
+        }
+    }, "cn": {
+        audioList: [
+            new Audio("audio/cn/gululu.mp3"),
+            new Audio("audio/cn/gururu.mp3"),
+            new Audio("audio/cn/转圈圈.mp3"),
+            new Audio("audio/cn/转圈圈咯.mp3"),
+        ],
+        texts: {
+            "page-title": "黑塔转圈圈~",
+            "doc-title": "咕噜噜~",
+            "page-descriptions": "给黑塔酱写的小网站，欸对，就是那个最<del>吵闹的</del>可爱的《崩坏：星穹铁道》角色！",
+            "counter-descriptions": "黑塔已经咕噜~了",
+            "counter-unit": "次",
+            "counter-button": "转圈圈~",
+            "credits-gif": "黑塔GIF作者：",
+            "footer-repository-text": "源代码在此：",
+            "footer-repository-text-2": "herta_kuru 仓库"
+        }
+    }
+    // TODO Korean and Japanese (text&voice) support
+};
+var current_language = "en";
+function reload_language() {
+    let localTexts = LANGUAGES[current_language].texts;
+    Object.entries(localTexts).forEach(([textId, value]) => {
+        document.getElementById(textId).innerHTML = value;
+    });
+    for (const audio of LANGUAGES[current_language].audioList) {
+        audio.preload = "auto";
+        // TODO instead of requesting the files every time the button gets clicked, request all the audio files at once during preparation
+    }
+}
+reload_language()
+document.getElementById("language-selector").addEventListener("change", (ev) => {
+    current_language = ev.target.value;
+    reload_language();
+    // TODO get the language selection stored in localStorage
+});
+
+function getLocalAudioList() {
+    return LANGUAGES[current_language].audioList;
+}
+
 const getTimePassed = () => Date.parse(new Date());
 
 const globalCounter = document.querySelector('#global-counter');
@@ -22,7 +76,7 @@ let localCount = localStorage.getItem('count-v2') || 0;
 let heldCount = 0;
 
 function getGlobalCount() {
-    fetch('https://kuru-kuru-count-api.onrender.com/sync', { method: 'GET'})
+    fetch('https://kuru-kuru-count-api.onrender.com/sync', { method: 'GET' })
         .then((response) => response.json())
         .then((data) => {
             globalCount = data.count;
@@ -54,7 +108,7 @@ setInterval(() => {
     }
 }, 10000);
 
-function update(e, resetCount=true) {
+function update(e, resetCount = true) {
     // update global count
     const data = {
         count: heldCount,
@@ -105,15 +159,20 @@ counterButton.addEventListener('click', (e) => {
     animateHerta();
 });
 
+function randomChoiceFromArray(myArr) {
+    const randomIndex = Math.floor(Math.random() * myArr.length);
+    const randomItem = myArr[randomIndex];
+    return randomItem;
+}
+
 function playKuru() {
     let audio;
 
     if (firstSquish) {
         firstSquish = false;
-        audio = audioList[0].cloneNode();
+        audio = getLocalAudioList()[0].cloneNode();
     } else {
-        const random = Math.floor(Math.random() * 2) + 1;
-        audio = audioList[random].cloneNode();
+        audio = randomChoiceFromArray(getLocalAudioList()).cloneNode();
     }
 
     audio.play();
@@ -151,7 +210,7 @@ function animateHerta() {
 
 function triggerRipple(e) {
     let ripple = document.createElement("span");
-        
+
     ripple.classList.add("ripple");
 
     const counter_button = document.getElementById("counter-button");
@@ -167,4 +226,5 @@ function triggerRipple(e) {
         ripple.remove();
     }, 300);
 }
-//end counter button
+//end counter button
+
diff --git a/style.css b/style.css
@@ -255,4 +255,29 @@ hr {
     #subtitle-seperator {
         margin-top: 10px;
     }
+}
+
+#language-selector {
+    width: 200px;
+    height: 40px;
+    background-color: #d1bdff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    padding: 10px;
+    margin-bottom: 20px;
+    color: #333;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+#language-selector:focus {
+    outline: none;
+    box-shadow: 0 0 10px #719ECE;
+}
+
+#language-selector option {
+    background-color: #fff;
+    color: #333;
 }