Implemented buttons for switching between English and Japanese info pages.

index.html

@@ -26,129 +26,15 @@
       </div>
       <div id="unity-fullscreen-button" style="display: none;"></div>
     </div>
-    <div id="infoBox">
-      <h1>Controls</h1>
-      <div id="controls">
-        <table>
-          <th>Binding</th>
-          <th>Description</th>
-          <tr>
-            <td>Right Mouse Click (Drag)</td>
-            <td>
-              Rotates the camera in the direction of the mouse drag.
-            </td>
-          </tr>
-          <tr>
-            <td>Left Mouse Click</td>
-            <td>
-              Sets the goal point to the location on the terrain where you clicked.
-            </td>
-          </tr>
-          <tr>
-            <td>W</td>
-            <td>
-              Move forward.
-            </td>
-          </tr>
-          <tr>
-            <td>S</td>
-            <td>
-              Move backward.
-            </td>
-          </tr>
-          <tr>
-            <td>A</td>
-            <td>
-              Move left.
-            </td>
-          </tr>
-          <tr>
-            <td>D</td>
-            <td>
-              Move right.
-            </td>
-          </tr>
-          <tr>
-            <td>E</td>
-            <td>Move up.</td>
-          </tr>
-          <tr>
-            <td>Q</td>
-            <td>Move down.</td>
-          </tr>
-          <tr>
-            <td>R</td>
-            <td>
-              Restart the episode.
-              Note that the terrain does not change even if you are in random mode.
-              Deformations to the terrain are preserved as well.
-            </td>
-          </tr>
-          <tr>
-            <td>1</td>
-            <td>
-              <div class="cellHeader">Terrain Mode: RANDOM</div>
-              Restart with a random terrain shape (no perlin noise).
-            </td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>
-              <div class="cellHeader">Terrain Mode: RANDOM_NOISE</div>
-              Restart with a random terrain shape (with perlin noise).
-            </td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>
-              <div class="cellHeader">Terrain Mode: GAUSSIAN_SLOPE</div>
-              Restart with a gaussian slope shaped terrain.
-            </td>
-          </tr>
-          <tr>
-            <td>4</td>
-            <td>
-              <div class="cellHeader">Terrain Mode: POINTY_GAUSSIAN_SLOPE</div>
-              Restart with a <i>pointy</i> gaussian slope shaped terrain.
-            </td>
-          </tr>
-          <tr>
-            <td>5</td>
-            <td>
-              <div class="cellHeader">Terrain Mode: TRAPEZOIDAL_HILL</div>
-              Restart with a trapezoidal hill shaped terrain.
-            </td>
-          </tr>
-        </table>
-      </div>
-      <h1>Disclaimer</h1>
-      <div id="disclaimerBody">
-        <p>
-          <a target=”_blank”
-            href="https://docs.unity3d.com/Packages/com.unity.ml-agents@2.2/manual/index.html#inference">
-            Unfortunately, MLAgents doesn't support GPU inference for WebGL builds.
-          </a><br>
-          The excavator model was originally trained with a larger neural network and yielded good results, but the
-          model
-          was too large to run smoothly on the CPU.
-          The current model was trained with a smaller model. Although it can run more smoothly on the CPU, the
-          performance isn't as good as that of the larger model.
-        </p>
-        <p>
-          If you would like to try out the larger model as well, refer to <a
-            href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>.
-          When using the larger model, it is recommended that you download the build corresponding to your specific
-          target
-          platform.
-        </p>
-        <p>
-          For more information about WebGL performance considerations, refer to
-          <a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
-            the unity documentation
-          </a>.
-        </p>
+    <div id="infoBoxContainer">
+      <div id="langNavigator">
+        <button class="activeLangBtn" id="langBtnEng" style="display:inline;">English</button>
+        <p style="display:inline;">/</p>
+        <button class="nonactiveLangBtn" id="langBtnJp" style="display:inline;">日本語</button>
       </div>
+      <div id="infoBox"></div>
     </div>
+    <script type="text/javascript" src="langNav.js"></script>
   </div>
   <script type="text/javascript" src="gameLoad.js"></script>
 </body>

info_eng.html

@@ -0,0 +1,119 @@
+<h1>Controls</h1>
+<div id="controls">
+    <table>
+        <th>Binding</th>
+        <th>Description</th>
+        <tr>
+            <td>Right Mouse Click (Drag)</td>
+            <td>
+                Rotates the camera in the direction of the mouse drag.
+            </td>
+        </tr>
+        <tr>
+            <td>Left Mouse Click</td>
+            <td>
+                Sets the goal point to the location on the terrain where you clicked.
+            </td>
+        </tr>
+        <tr>
+            <td>W</td>
+            <td>
+                Move forward.
+            </td>
+        </tr>
+        <tr>
+            <td>S</td>
+            <td>
+                Move backward.
+            </td>
+        </tr>
+        <tr>
+            <td>A</td>
+            <td>
+                Move left.
+            </td>
+        </tr>
+        <tr>
+            <td>D</td>
+            <td>
+                Move right.
+            </td>
+        </tr>
+        <tr>
+            <td>E</td>
+            <td>Move up.</td>
+        </tr>
+        <tr>
+            <td>Q</td>
+            <td>Move down.</td>
+        </tr>
+        <tr>
+            <td>R</td>
+            <td>
+                Restart the episode.
+                Note that the terrain does not change even if you are in random mode.
+                Deformations to the terrain are preserved as well.
+            </td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>
+                <div class="cellHeader">Terrain Mode: RANDOM</div>
+                Restart with a random terrain shape (no perlin noise).
+            </td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>
+                <div class="cellHeader">Terrain Mode: RANDOM_NOISE</div>
+                Restart with a random terrain shape (with perlin noise).
+            </td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>
+                <div class="cellHeader">Terrain Mode: GAUSSIAN_SLOPE</div>
+                Restart with a gaussian slope shaped terrain.
+            </td>
+        </tr>
+        <tr>
+            <td>4</td>
+            <td>
+                <div class="cellHeader">Terrain Mode: POINTY_GAUSSIAN_SLOPE</div>
+                Restart with a <i>pointy</i> gaussian slope shaped terrain.
+            </td>
+        </tr>
+        <tr>
+            <td>5</td>
+            <td>
+                <div class="cellHeader">Terrain Mode: TRAPEZOIDAL_HILL</div>
+                Restart with a trapezoidal hill shaped terrain.
+            </td>
+        </tr>
+    </table>
+</div>
+<h1>Disclaimer</h1>
+<div id="disclaimerBody">
+    <p>
+        <a target=”_blank” href="https://docs.unity3d.com/Packages/com.unity.ml-agents@2.2/manual/index.html#inference">
+            Unfortunately, MLAgents doesn't support GPU inference for WebGL builds.
+        </a><br>
+        The excavator model was originally trained with a larger neural network and yielded good results, but the
+        model was too large to run smoothly on the CPU.
+        The current model was trained with a smaller model. Although it can run more smoothly on the CPU, the
+        performance isn't as good as that of the larger model.
+    </p>
+    <p>
+        If you would like to try out the larger model as well, refer to <a
+            href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>.
+        When using the larger model, it is recommended that you download the build corresponding to your specific
+        target
+        platform.
+    </p>
+    <p>
+        For more information about WebGL performance considerations, refer to
+        <a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
+            the unity documentation
+        </a>.
+    </p>
+</div>

info_jp.html

@@ -0,0 +1,147 @@
+<h1>操作方法</h1>
+<div id="controls">
+    <table>
+        <th>キーバインド</th>
+        <th>説明</th>
+        <tr>
+            <td>右クリック（ドラッグ）</td>
+            <td>
+                <!-- Rotates the camera in the direction of the mouse drag. -->
+                マウスでドラッグした方向にカメラを回転。
+            </td>
+        </tr>
+        <tr>
+            <td>左クリック</td>
+            <td>
+                <!-- Sets the goal point to the location on the terrain where you clicked. -->
+                クリックした地点を新たなゴールにする。
+            </td>
+        </tr>
+        <tr>
+            <td>W</td>
+            <td>
+                <!-- Move forward. -->
+                前方に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>S</td>
+            <td>
+                <!-- Move backward. -->
+                後方に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>A</td>
+            <td>
+                <!-- Move left. -->
+                左に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>D</td>
+            <td>
+                <!-- Move right. -->
+                右に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>E</td>
+            <td>
+                <!-- Move up. -->
+                真上に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>Q</td>
+            <td>
+                <!-- Move down. -->
+                真下に移動。
+            </td>
+        </tr>
+        <tr>
+            <td>R</td>
+            <td>
+                <!-- Restart the episode.
+                Note that the terrain does not change even if you are in random mode.
+                Deformations to the terrain are preserved as well. -->
+                エピソードを再スタートする。
+                ランダムモードを使っているとしても、地形は変わりません。
+                変形した地形は変わらない。
+            </td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>
+                <div class="cellHeader">地形モード: RANDOM</div>
+                <!-- Restart with a random terrain shape (no perlin noise). -->
+                ランダムな地形で再スタート（パーリンノイズ無し）。
+            </td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>
+                <div class="cellHeader">地形モード: RANDOM_NOISE</div>
+                <!-- Restart with a random terrain shape (with perlin noise). -->
+                ランダムな地形で再スタート（パーリンノイズ有り）。
+            </td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>
+                <div class="cellHeader">地形モード: GAUSSIAN_SLOPE</div>
+                <!-- Restart with a gaussian slope shaped terrain. -->
+                ガウス勾配型の地形で再スタート。
+            </td>
+        </tr>
+        <tr>
+            <td>4</td>
+            <td>
+                <div class="cellHeader">地形モード: POINTY_GAUSSIAN_SLOPE</div>
+                <!-- Restart with a <i>pointy</i> gaussian slope shaped terrain. -->
+                <i>尖った</i>ガウス勾配型の地形で再スタート。
+            </td>
+        </tr>
+        <tr>
+            <td>5</td>
+            <td>
+                <div class="cellHeader">地形モード: TRAPEZOIDAL_HILL</div>
+                <!-- Restart with a trapezoidal hill shaped terrain. -->
+                台形な地形で再スタート。
+            </td>
+        </tr>
+    </table>
+</div>
+<h1>注意事項</h1>
+<div id="disclaimerBody">
+    <p>
+        <a target=”_blank” href="https://docs.unity3d.com/Packages/com.unity.ml-agents@2.2/manual/index.html#inference">
+            <!-- Unfortunately, MLAgents doesn't support GPU inference for WebGL builds. -->
+            残念ながら、MLAgentsはWebGLビルドでのGPU推論を対応していません。
+        </a><br>
+        <!-- The excavator model was originally trained with a larger neural network and yielded good results, but the
+        model was too large to run smoothly on the CPU. -->
+        モデルは、もともと大きめのニューラルネットワークで学習させ、良い精度を出していたが、モデルが大きすぎて、CPUでスムーズに走らせませんでした。
+        <!-- The current model was trained with a smaller model. -->
+        現在のモデルはもっと小さめのモデルです。
+        <!-- Although it can run more smoothly on the CPU, the performance isn't as good as that of the larger model. -->
+        スムーズにCPUで走らせるようになったものの、精度は大きめのモデルより劣っています。
+    </p>
+    <p>
+        <!-- If you would like to try out the larger model as well, refer to <a
+            href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>. -->
+        大きめのモデルを試してみたい方は<a href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>を参照。
+        <!-- When using the larger model, it is recommended that you download the build corresponding to your specific
+        target platform. -->
+        大きめのモデルを使う場合は、お使いになっている端末に該当するビルドをダウンロードすることをお勧めします。
+    </p>
+    <p>
+        <!-- For more information about WebGL performance considerations, refer to
+        <a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
+            the unity documentation
+        </a>. -->
+        WebGL のパフォーマンスに関する考慮事項については、<a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
+            ドキュメントを参照してください
+        </a>。
+    </p>
+</div>

langNav.js

@@ -0,0 +1,41 @@
+const langNavMap = {
+    "langBtnEng": "info_eng.html",
+    "langBtnJp": "info_jp.html"
+};
+
+function load_info(path) {
+    fetch(path /*, options */)
+        .then((response) => {
+            return response.text();
+        }
+        )
+        .then((html) => {
+            document.getElementById("infoBox").innerHTML = html;
+        })
+        .catch((error) => {
+            console.warn(error);
+        });
+}
+
+var langNavigator = document.getElementById('langNavigator');
+for (let ele of langNavigator.children) {
+    if (ele.tagName == "BUTTON") {
+        ele.addEventListener(
+            'mouseup',
+            (e) => {
+                let path = langNavMap[ele.id];
+                console.log("Loading " + path);
+                load_info(path);
+            }
+        );
+    }
+}
+
+for (let ele of langNavigator.children) {
+    if (ele.tagName == "BUTTON" && ele.className == "activeLangBtn") {
+        let path = langNavMap[ele.id];
+        console.log("Loading " + path);
+        load_info(path);
+        break;
+    }
+}

main.css

@@ -1,10 +1,25 @@
-#infoBox {
-    border: 5px solid darkblue;
+#langNavigator * {
+    font-size: 16px;
+    font-family: 'Arial';
+}
+
+.activeLangBtn {
+    border: 3px solid red;
+    border-radius: 5px;
+    color: red;
+}
+
+.nonactiveLangBtn {
+    /* Doesn't really need any styling? */
+    border-radius: 5px;
+}
+
+#infoBoxContainer {
+    /* border: 5px solid darkblue; */
     flex: 30%;
     flex-direction: row;
     overflow: scroll;
     max-height: 100vh;
-    width: 75%;
     margin-left: auto;
     margin-right: auto;
 }
@@ -54,7 +69,7 @@ td {
 
 #unity-container {
     flex: 50%;
-    border: 5px solid green;
+    /* border: 5px solid green; */
     position: relative;
     width: auto;
     height: 100vh;