i18n

src/UI/components/Component.js

@@ -69,8 +69,9 @@ class MCComponent extends HTMLElement {
         if (!componentName) throw "Component registration failed: Missing componentName.";
         return customElements.define(componentName, this);
     };
-    static asyncLoadAndDefine() {
-        return this.asyncLoadTemplateByUrl().then(_ => this.define());
+    static async asyncLoadAndDefine() {
+        const _ = await this.asyncLoadTemplateByUrl();
+        return this.define();
     };
     static getTemplateByUrl(url = this.templateUrl) {
         return mcComponents[url];

src/UI/doc.txt

@@ -1,11 +1,11 @@
 
 +---------+               +---------+     +-----------+
 | preload |---------------> welcome <-----> howToPlay |
-+---------+               +-^--^--^-+     +-----------+
-                            |  |  |
-                            |  |  +---------------------+
-                            |  +-1------------1-+       |
-                            |                   |       |
++---------+               +^-^-^--^-+     +-----------+
+                           | | |  |
+    +----------------+ +---+ | |  +---------------------+
+    | ChangeLanguage <-+    ++ +-1------------1-+       |
+    +----------------+      |                   |       |
 +----------------+      +---v---------+    +----v----+  |
 | createNewWorld <------> selectWorld |    | setting |  |
 +----------------+      +-------------+    +----^----+  |

src/UI/index.js

@@ -9,6 +9,7 @@ export * from "./pages/LoadTerrainPage.js";
 export * from "./pages/PausePage.js";
 export * from "./pages/PlayPage.js";
 export * from "./pages/CreateNewWorldPage.js";
+export * from "./pages/ChangeLanguagePage.js"
 
 // mc components
 export * from "./components/MCButton.js";

src/UI/pages/ChangeLanguagePage.html

@@ -0,0 +1,57 @@
+
+<style>
+    :host {
+        text-align: center;
+    }
+    div.mc-background {
+        height: 100vh;
+        background-image: var(--mc-ui-background-img);
+        background-repeat: repeat;
+        background-size: auto;
+    }
+    div.mc-background[darken] {
+        background-image: var(--mc-ui-background-darken-img);
+    }
+    div.mc-background > div {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    h1 {
+        margin: 0;
+        padding: 20px 0 0;
+    }
+    table {
+        margin: 20px auto;
+        background-color: rgba(0, 0, 0, .5);
+    }
+    tr {
+        font-size: 1rem;
+        vertical-align: top;
+        text-align: left;
+    }
+    tr:first-child {
+        vertical-align: top;
+    }
+    tr mc-button {
+        float: center;
+        text-align: center;
+    }
+    td:first-child { padding-right: 10px; }
+    td:not(:first-child) {
+        padding-bottom: 5px;
+        padding-left: 10px;
+        width: 50%;
+    }
+    mc-button {
+        padding: 1.2vh 0;
+        width: 100%;
+        max-width: 500px;
+    }
+</style>
+<div class="mc-background" darken><div>
+    <h1 id="title">Languages</h1>
+    <table id="table">
+    </table>
+    <mc-button gotoPage="*pop">Exit</mc-button>
+</div></div>

src/UI/pages/ChangeLanguagePage.js

@@ -0,0 +1,21 @@
+
+import { Page } from "./Page.js";
+import "../../i18n.js";
+class ChangeLanguagePage extends Page {
+    static get outdegree() { return ["welcome", ]; };
+    constructor() {
+        super();
+        var table = this.shadowRoot.getElementById('table');
+        for (var lang in i18n_module.languages) {
+            var row = document.createElement('tr');
+            row.innerHTML = `<td><mc-button onclick="i18n_module.set_language('${lang}'); location.reload(); ">${i18n_module['languages'][lang]['name']}</mc-button></td>`;
+            table.appendChild(row);
+        }
+    }
+    onHistoryBack() { this.close(); };
+}
+
+ChangeLanguagePage.asyncLoadAndDefine();
+export {
+    ChangeLanguagePage,
+};

src/UI/pages/CreateNewWorldPage.html

@@ -20,15 +20,15 @@
     }
 </style>
 <div class="container">
-    <h1>Create New World</h1>
-    <mc-input id="world-name" placeholder="Enter World Name, Default 'My World'"></mc-input>
-    <mc-input id="world-seed" placeholder="World Seed, Empty for Random"></mc-input>
+    <h1></h1>
+    <mc-input id="world-name" placeholder=""></mc-input>
+    <mc-input id="world-seed" placeholder=""></mc-input>
     <div class="gen-options">
-        <mc-button id="world-type-btn">World Type:&emsp;<span id="world-type-echo">Normal</span></mc-button>
-        <mc-button disabled>Trees:&emsp;<span id="tree-echo">On</span></mc-button>
+        <mc-button id="world-type-btn-event"><span id="world-type-btn"></span>&emsp;<span id="world-type-echo"></span></mc-button>
+        <mc-button disabled><span id="tree"></span>&emsp;<span id="tree-echo"></span></mc-button>
     </div>
     <div class="bottom-tools">
-        <mc-button id="create-new-word">Create New World</mc-button>
-        <mc-button gotoPage="*pop">Cancel</mc-button>
+        <mc-button id="create-new-world"></mc-button>
+        <mc-button id="cancel" gotoPage="*pop"></mc-button>
     </div>
 </div>

src/UI/pages/CreateNewWorldPage.js

@@ -1,20 +1,30 @@
 
 import { Page, pm } from "./Page.js";
-
+import "../../i18n.js";
 class CreateNewWorldPage extends Page {
     static get outdegree() { return ["select-world", "play", ]; };
     constructor() {
         super();
-        this.typeBtn = this.shadowRoot.getElementById("world-type-btn");
+        for (var key in i18n['ui']) {
+            var node = this.shadowRoot.getElementById(key);
+            if (node) { node.innerText = i18n['ui'][key]; node.setAttribute('placeholder', i18n['ui'][key]); }
+        }
+        this.typeBtn = this.shadowRoot.getElementById("world-type-btn-event");
         this.typeEcho = this.shadowRoot.getElementById("world-type-echo");
-        this.createBtn = this.shadowRoot.getElementById("create-new-word");
+        this.typeEcho.setAttribute("data", "normal");
+        this.createBtn = this.shadowRoot.getElementById("create-new-world");
         this.worldName = this.shadowRoot.getElementById("world-name");
         this.worldSeed = this.shadowRoot.getElementById("world-seed");
 
         this.typeBtn.addEventListener("click", () => {
-            if (this.typeEcho.innerHTML == "Normal")
-                this.typeEcho.innerHTML = "Flat";
-            else this.typeEcho.innerHTML = "Normal";
+            if (this.typeEcho.innerHTML == i18n['ui']['normal']) {
+                this.typeEcho.innerHTML = i18n['ui']['flat'];
+                this.typeEcho.setAttribute("data", "flat");
+            }
+            else {
+                this.typeEcho.innerHTML = i18n['ui']['normal'];
+                this.typeEcho.setAttribute("data", "normal");
+            }
         });
 
         this.createBtn.addEventListener("click", () => {
@@ -25,7 +35,7 @@ class CreateNewWorldPage extends Page {
                 worldType: ({
                     Normal: "pre-classic",
                     Flat: "flat",
-                })[this.typeEcho.innerHTML],
+                })[this.typeEcho.getAttribute("data")],
                 seed,
             });
         });

src/UI/pages/HowToPlayPage.html

@@ -50,15 +50,15 @@
     }
 </style>
 <div class="mc-background" darken><div>
-    <h1>How to play</h1>
+    <h1 id="title"></h1>
     <table>
-        <tr><td><b>WASD</b></td>                   <td>Move; Double-click W to Sprint</td></tr>
-        <tr><td><b>Spacebar</b></td>               <td>Jump; Double-click to switch Fly Mode</td></tr>
-        <tr><td><b>Shift/X</b></td>                <td>When Fly Mode is on, causes the player to lose altitude (descend)</td></tr>
-        <tr><td><b>ESC</b></td>                    <td>Gives back cursor control</td></tr>
-        <tr><td><b>E</b></td>                      <td>Open inventory</td></tr>
-        <tr><td><b>Left/Right button</b></td>      <td>Destroy/Place blocks</td></tr>
-        <tr><td><b>Scroll</b></td>                 <td>Scrolls through the Hotbar</td></tr>
+        <tr id="wasd"></tr>
+        <tr id="space"></tr>
+        <tr id="shift"></tr>
+        <tr id="escape"></tr>
+        <tr id="e"></tr>
+        <tr id="click"></tr>
+        <tr id="roll"></tr>
     </table>
-    <mc-button gotoPage="*pop">Back</mc-button>
+    <mc-button id="exit" gotoPage="*pop"></mc-button>
 </div></div>

src/UI/pages/HowToPlayPage.js

@@ -1,14 +1,19 @@
 
 import { Page } from "./Page.js";
-
+import "../../i18n.js";
 class HowToPlayPage extends Page {
     static get outdegree() { return ["welcome", ]; };
+    constructor() {
+        super();
+        for (var key in i18n['how-to-play']) {
+            var node = this.shadowRoot.getElementById(key);
+            if (node) { node.innerHTML = i18n['how-to-play'][key]; }
+        }
+    }
     onHistoryBack() { this.close(); };
 }
 
 HowToPlayPage.asyncLoadAndDefine();
-
-
 export {
     HowToPlayPage,
 };

src/UI/pages/LoadTerrainPage.js

@@ -1,6 +1,6 @@
 
 import { Page, pm } from "./Page.js";
-
+import "../../i18n.js";
 import { World } from "../../World/World.js";
 import { WorldRenderer } from "../../Renderer/WorldRenderer.js";
 

src/UI/pages/Page.js

@@ -88,6 +88,10 @@ class Page extends MCComponent {
     get outdegree() { return this.constructor.outdegree; };
     constructor() {
         super();
+        for (var key in i18n['ui']) {
+            var node = this.shadowRoot.getElementById(key);
+            if (node) { node.innerText = i18n['ui'][key]; }
+        }
         if (new.target.name === "Page")
             throw "Class 'Page' cannot be instantiated!";
         pageManager.addTransitions(this.outdegree.map(to => ({

src/UI/pages/PausePage.html

@@ -21,7 +21,7 @@
     }
     </style>
 <div>
-    <mc-button gotoPage="*pop">Resume Game</mc-button>
-    <mc-button gotoPage="setting">Settings</mc-button>
-    <mc-button gotoPage="welcome">Quit</mc-button>
+    <mc-button id="return" gotoPage="*pop"></mc-button>
+    <mc-button id="setting" gotoPage="setting"></mc-button>
+    <mc-button id="exit" gotoPage="welcome"></mc-button>
 </div>

src/UI/pages/PausePage.js

@@ -1,5 +1,6 @@
 
 import { Page } from "./Page.js";
+import "../../i18n.js";
 
 class PausePage extends Page {
     static get outdegree() { return ["play", "welcome", "setting", ]; };
@@ -11,6 +12,14 @@ class PausePage extends Page {
 
 PausePage.asyncLoadAndDefine();
 
+for (var key in i18n['ui']) {
+    try {
+        document.getElementById(key).innerText = i18n['ui'][key];
+    }
+    catch (e) {
+        // console.log(e);
+    }
+}
 
 export {
     PausePage,

src/UI/pages/PlayPage.html

@@ -15,7 +15,7 @@
         pointer-events: none;
     }
 </style>
-<canvas id="mainCanvas">Your browser does not support canvas. Please upgrade your browser.</canvas>
+<canvas id="mainCanvas"></canvas>
 <mc-crosshairs></mc-crosshairs>
 <mc-move-buttons></mc-move-buttons>
 <mc-inventory style="display: none;"></mc-inventory>

src/UI/pages/PlayPage.js

@@ -1,6 +1,7 @@
 
 import { Page, pm } from "./Page.js";
 import { PlayerLocalController } from "../../Entity/PlayerLocalController.js";
+import "../../i18n.js";
 
 class PlayPage extends Page {
     static get outdegree() { return ["load-terrain", "pause", ]; };
@@ -95,6 +96,15 @@ pm.addEventListener("pause=>play", (pause, play) => {
 
 PlayPage.asyncLoadAndDefine();
 
+for (var key in i18n['ui']) {
+    try {
+        document.getElementById(key).innerText = i18n['ui'][key];
+    }
+    catch (e) {
+        // console.log(e);
+    }
+}
+
 
 export {
     PlayPage,

src/UI/pages/SelectWorldPage.html

@@ -69,7 +69,7 @@
     }
 </style>
 <div class="container">
-    <h1>Select World</h1>
+    <h1 id="choose-world-title"></h1>
     <ul id="world-list">
         <li>
             <span class="world-name">Seed</span>
@@ -81,9 +81,9 @@ <h1>Select World</h1>
     </ul>
     <div class="btns">
         <!-- <mc-button id="btn-select" gotoPage="play" disabled>Play Selected World</mc-button> -->
-        <mc-button id="btn-select" disabled>Play Selected World</mc-button>
-        <mc-button id="btn-del" disabled>Delete</mc-button>
-        <mc-button gotoPage="create-new-world">Create New World</mc-button>
-        <mc-button gotoPage="*pop">Cancel</mc-button>
+        <mc-button id="btn-select" disabled></mc-button>
+        <mc-button id="btn-del" disabled></mc-button>
+        <mc-button id="create-new-world" gotoPage="create-new-world"></mc-button>
+        <mc-button id="cancel" gotoPage="*pop"></mc-button>
     </div>
 </div>

src/UI/pages/SelectWorldPage.js

@@ -1,5 +1,6 @@
 
 import { Page, pm } from "./Page.js";
+import "../../i18n.js";
 
 class SelectWorldPage extends Page {
     static get outdegree() { return ["welcome", "play", "create-new-world", ]; };
@@ -24,7 +25,7 @@ class SelectWorldPage extends Page {
                 <li>
                     <span class="world-name">${world.name}</span>
                     <span class="create-at">Created - ${timestamp2str(world.createAt)}</span>
-                    <span class="modify-at">Modified - ${timestamp2str(world.modifyAt)}</span>
+                    <span class="modify-at">Saved - ${timestamp2str(world.modifyAt)}</span>
                     <span class="world-mode">${world.type}</span>
                     <span class="storageId">${storageId}</span>
                 </li>
@@ -58,6 +59,15 @@ class SelectWorldPage extends Page {
 
 SelectWorldPage.asyncLoadAndDefine();
 
+for (var key in i18n['ui']) {
+    try {
+        document.getElementById(key).innerText = i18n['ui'][key];
+    }
+    catch (e) {
+        // console.log(e);
+    }
+}
+
 export {
     SelectWorldPage,
 };