connecting message

src/client/game.ts

@@ -27,6 +27,7 @@ export class Game {
   public thirdPersonCamera!: ThirdPersonCamera;
   public joystick!: Joystick;
   public chat!: Chat;
+  private _loading = LoadingManagerWrapper.getInstance();
   private character: CharacterPacket = {};
   private party: string[] = [];
 
@@ -38,12 +39,21 @@ export class Game {
   constructor(public socket: Socket) {}
 
   async initialize(): Promise<void> {
-    LoadingManagerWrapper.getInstance().initialize();
+    this._loading.initialize();
 
     const worldManifest = await ClientWorldManifest.loadManifest();
     this.world = new ClientWorld(new ClientWorldLoader(), worldManifest);
 
     const cube = await CubeMap.load('/assets/skybox/default');
+    const grasstex = await BaseTexture.load(
+      '/assets/terrain/decoration/grass01.png',
+    );
+    const flowertex = await BaseTexture.load(
+      '/assets/terrain/decoration/flowers02.png',
+    );
+    const flowertex2 = await BaseTexture.load(
+      '/assets/terrain/decoration/flowers01.png',
+    );
 
     await PonyModelLoader.getInstance().loadPonyModel();
     await PonyEyes.getInstance().initialize();
@@ -84,15 +94,6 @@ export class Game {
     this.renderer.scene.background = cube.texture;
 
     // test
-    const grasstex = await BaseTexture.load(
-      '/assets/terrain/decoration/grass01.png',
-    );
-    const flowertex = await BaseTexture.load(
-      '/assets/terrain/decoration/flowers02.png',
-    );
-    const flowertex2 = await BaseTexture.load(
-      '/assets/terrain/decoration/flowers01.png',
-    );
     const grassfield = Grass.getInstance().createGrassPatch(
       new Vector3(10, 0, 10),
       8,
@@ -147,6 +148,7 @@ export class Game {
     this.renderer.scene.add(grass);
     this.renderer.scene.add(flowers);
     this.renderer.scene.add(flowers2);
+    this._loading.isConnecting();
   }
 
   public dispose() {
@@ -172,6 +174,7 @@ export class Game {
   bindSocket() {
     this.socket.on('connect', () => {
       this.dispose();
+      this._loading.connected();
       console.log('connected');
     });
 

src/client/object/resource/loading-manager.ts

@@ -8,6 +8,8 @@ export class LoadingManagerWrapper {
   private _status = document.createElement('span');
   private _barWrapper = document.createElement('div');
   private _bar = document.createElement('div');
+  private _assetsLoaded = false;
+  private _connected = false;
 
   public static getInstance(): LoadingManagerWrapper {
     if (!instance) {
@@ -35,9 +37,28 @@ export class LoadingManagerWrapper {
     };
 
     this.manager.onLoad = () => {
-      this.element.classList.add('loading--complete');
+      this._assetsLoaded = true;
     };
 
     document.body.prepend(this.element);
   }
+
+  public isConnecting() {
+    if (this._connected) {
+      return;
+    }
+    this._status.innerText = 'Connecting to server';
+  }
+
+  public connected() {
+    this._connected = true;
+    if (!this._assetsLoaded) {
+      setTimeout(() => {
+        this.connected();
+      }, 1000);
+      return;
+    }
+    this._status.innerText = 'Connected!';
+    this.element.classList.add('loading--complete');
+  }
 }