Improve loading progression

README.md

@@ -2,7 +2,7 @@
 
 > Powerful Othello AI developed with Rust, Unity3D, WebGL, and Node.js
 
-[Click here to play!](https://desdemona.seoulsky.org)
+[Click here to play!](https://desdemona.seoulsky.org) (Using Chrome browser is recommended)
 
 <https://github.com/SeoulSKY/Desdemona/assets/48105703/60d35a72-98dc-4799-ad6d-17564029e0b4>
 
@@ -49,16 +49,11 @@ docker-compose pull && docker-compose up
 
 - When the `web-server` is running, visit [here](http://localhost:8080) to play!
 
-## How to Build and Run (Option 2)
+## How to Build Docker Images and Run (Option 2)
 
-- Install [Docker](https://www.docker.com/get-started), [Docker-compose](https://docs.docker.com/compose/install/), [Node.js](https://nodejs.org/en) and [Unity3D](https://unity.com/download)
-- Open the folder `desdemona` in Unity3D and close it. This will create the necessary files to build.
-- Change the directory into the folder `web-server` and run the following commands:
+This option builds the docker images and runs them with released Unity3D builds.
 
-```shell
-npm install
-npm run build-unity
-```
+- Install [Docker](https://www.docker.com/get-started) and [Docker-compose](https://docs.docker.com/compose/install/)
 
 - To run the app, use the following command from the folder where `docker-compose-dev.yml` is located:
 
@@ -68,6 +63,24 @@ docker-compose -f docker-compose-dev.yml up --build
 
 - When the `web-server` is running, visit [here](http://localhost:8080) to play!
 
+## How to Build Everything and Run (Option 3)
+
+- Install [Rust](https://www.rust-lang.org/tools/install), [Node.js](https://nodejs.org/en) and [Unity3D](https://unity.com/download)
+
+- Change the directory into the folder `ai-server` and run the following commands:
+
+```shell
+cargo run
+```
+
+- In a separate terminal, change the directory into the folder `web-server` and run the following commands:
+
+```shell
+npm install
+npm run build-unity
+npm run dev
+```
+
 ## Architecture
 
 ![Desdemona](https://github.com/SeoulSKY/Desdemona/assets/48105703/2825305b-203c-4285-920d-765333ffe7fa)

web-server/public/index.html

@@ -10,7 +10,7 @@
             p {
                 color: #fff;
             }
-            
+
             #progress-bar {
                 position: absolute;
                 top: 0;
@@ -54,6 +54,7 @@
             integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">
         </script>
         <script src="https://cdn.jsdelivr.net/npm/unity-webgl/dist/index.global.js"></script>
+        <script type="text/javascript" src="xmlhttprequest-length-computable.min.js"></script>
         <script src="unity.js"></script>
     </body>
 </html>

web-server/public/unity.js

@@ -1,6 +1,9 @@
 function main() {
+    let error = document.getElementById("error");
+
+
     if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-        alert("Mobile devices are not supported. Please use a desktop.");
+        error.innerText = "Mobile devices are not supported. Please use a desktop.";
         return;
     }
 
@@ -34,7 +37,7 @@ function main() {
     progressBar.style.removeProperty("display");
 
     unity.on("progress", (progression) => {
-        const downloadPercentage = Math.round(100 * progression / 0.3);
+        const downloadPercentage = Math.round(100 * progression / 0.9);
         progressBar.style.width = downloadPercentage + "%";
 
         if (progression < 0.9) {
@@ -59,7 +62,6 @@ function main() {
         spinner.style.display = "none";
         progressBar.style.display = "none";
 
-        let error = document.getElementById("error");
         error.innerText = "Unable to load the game. Please try again later.";
     });
 }