Merge pull request #570 from origami-team/v4.3.1_web

V4.3.1 web

android/app/build.gradle

@@ -6,7 +6,7 @@ android {
         applicationId "com.ifgi.geogami"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion 33
-        versionCode 16
+        versionCode 17
         versionName "4.0.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }

android/app/src/main/AndroidManifest.xml

@@ -37,7 +37,6 @@
         <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="${applicationId}.fileprovider"
-            android:exported="true"
             android:grantUriPermissions="true">
             <meta-data
                 android:name="android.support.FILE_PROVIDER_PATHS"

src/app/app-routing.module.ts

@@ -239,6 +239,10 @@ const routes: Routes = [
       ).then((m) => m.GameTracksVisualizationPageModule),
     canActivate: [AuthGuard],
   },
+  {
+    path: 'playing-virenv/:queryParams',
+    loadChildren: () => import('./pages/play-game/playing-virenv/playing-virenv.module').then( m => m.PlayingVirenvPageModule)
+  },
 ];
 @NgModule({
   imports: [

src/app/app.component.ts

@@ -6,6 +6,8 @@ import { AuthService } from './services/auth-service.service';
 import { LanguageService } from './services/language.service';
 import { Network } from '@ionic-native/network/ngx';
 import { UtilService } from './services/util.service';
+import { environment } from 'src/environments/environment';
+import { ConsoleToggleServiceService } from './services/console-toggle.service';
 
 @Component({
   selector: 'app-root',
@@ -19,7 +21,8 @@ export class AppComponent {
     private authService: AuthService,
     private languageService: LanguageService,
     private network: Network,
-    private utilService: UtilService) {
+    private utilService: UtilService,
+    private consoleToggleService: ConsoleToggleServiceService) {
 
     this.initializeApp();
 
@@ -34,6 +37,10 @@ export class AppComponent {
       Plugins.StatusBar.setStyle({ style: StatusBarStyle.Light }).catch((err) =>
       console.log(err)
       );
+
+      // hide console logs
+      this.consoleToggleService.disableConsoleInProduction();
+
       if (this.platform.is('android')) {
         Plugins.StatusBar.setBackgroundColor({ color: 'white' });
       }

src/app/pages/barcode-scanner/barcode-scanner.page.ts

@@ -28,9 +28,9 @@ export class BarcodeScannerPage implements OnInit {
       this.socketService.socket.disconnect();
     }
 
-    //* prepare then start scanning
+    /* prepare then start scanning */
     // BarcodeScanner.prepare();
-    this.startScan(); */
+    // this.startScan();
   }
 
   ngOnDestroy() {
@@ -40,49 +40,49 @@ export class BarcodeScannerPage implements OnInit {
   /**********/
   // tutorial: https://www.youtube.com/watch?v=8GXfjDUCYjU
   async startScan() {
-    /* const allowed = await this.checkPermission()
-    if (allowed) {
-      // // console.log("🚀 allowed")
+    // const allowed = await this.checkPermission()
+    // if (allowed) {
+    //   // console.log("🚀 allowed")
 
-      /* make background of WebView transparent, another step is adding some style to global.scss */
-      // BarcodeScanner.hideBackground();
-      document.querySelector('body').classList.add('scanner-active');
+    //   /* make background of WebView transparent, another step is adding some style to global.scss */
+    //   BarcodeScanner.hideBackground();
+    //   document.querySelector('body').classList.add('scanner-active');
 
-      /* specified qr-code */
-      // const result = await BarcodeScanner.startScan({ targetedFormats: ['QR_CODE'] }); // start scanning and wait for a result
+    //   /* specified qr-code */
+    //   const result = await BarcodeScanner.startScan({ targetedFormats: ['QR_CODE'] }); // start scanning and wait for a result
 
-      /* if the result has content */
-      /* if (result.hasContent) {
-      // console.log(result.content); // log the raw scanned content
-        //* show toast msg
-        // this.utilService.showToast(`Qr-Code: ${result.content}`, "dark", 3500);
+    //   /* if the result has content */
+    //   if (result.hasContent) {
+    //     console.log(result.content); // log the raw scanned content
+    //     /* show toast msg */
+    //     // this.utilService.showToast(`Qr-Code: ${result.content}`, "dark", 3500);
 
-        this.utilService.setQRCodeValue(result.content);
+    //     this.utilService.setQRCodeValue(result.content);
 
-        this.navCtrl.navigateForward(`play-game/game-detail/${result.content.slice(25)}`);
-      } 
-    }*/
+    //     this.navCtrl.navigateForward(`play-game/game-detail/${result.content.slice(25)}`);
+    //   }
+    // }
   }
 
   /********/
   async stopScan() {
-    /* BarcodeScanner.showBackground();
-    document.querySelector('body').classList.remove('scanner-active');
-    //* stop scan
-    BarcodeScanner.stopScan(); */
+    // BarcodeScanner.showBackground();
+    // document.querySelector('body').classList.remove('scanner-active');
+    // /* stop scan */
+    // BarcodeScanner.stopScan();
   };
 
   async checkPermission() {
-    return new Promise(async (resolve, rejects) => {
-      /* const status = await BarcodeScanner.checkPermission({ force: true });
-      if (status.granted) {
-        resolve(true);
-      } else if (status.denied) {
-        // ToDo: update
-        BarcodeScanner.openAppSettings();
-      } else {
-        resolve(false);
-      } */
-    });
+    // return new Promise(async (resolve, rejects) => {
+    //   const status = await BarcodeScanner.checkPermission({ force: true });
+    //   if (status.granted) {
+    //     resolve(true);
+    //   } else if (status.denied) {
+    //     // ToDo: update
+    //     BarcodeScanner.openAppSettings();
+    //   } else {
+    //     resolve(false);
+    //   }
+    // });
   }
 }

src/app/pages/play-game/game-detail/game-detail.page.html

@@ -79,6 +79,13 @@
       <ion-label text-wrap style="font-weight: bold;">{{ "PlayGame.shareDataAgreement" | translate }}</ion-label>
       <ion-checkbox slot="start" [(ngModel)]="shareData_cbox"></ion-checkbox>
     </ion-item>
+
+    <!-- ToDo: this is a temporary impl. till webGL works properly. You can delete it afterwards-->
+    <ion-item lines="none" *ngIf="userRole == 'scholar' && isSingleMode">
+      <ion-label text-wrap style="font-weight: bold; color: red;"> Use new integrated WebGL view (only for testing purpose)</ion-label>
+      <ion-checkbox slot="start" [(ngModel)]="useWebGL_cbox"></ion-checkbox>
+    </ion-item>
+
   </ion-card>
 
   <ion-card *ngIf="userRole=='contentAdmin' && !isSingleMode">

src/app/pages/play-game/game-detail/game-detail.page.ts

@@ -25,6 +25,7 @@ export class GameDetailPage implements OnInit {
   points: any[];
   //* Default share data status
   shareData_cbox = environment.shareData_status;
+  useWebGL_cbox = false;
 
   // VR world
   isVirtualWorld: boolean = false;
@@ -48,6 +49,8 @@ export class GameDetailPage implements OnInit {
 
   playersData = [];
 
+  virEnvType: string = null;
+
   constructor(
     public navCtrl: NavController,
     private route: ActivatedRoute,
@@ -113,6 +116,15 @@ export class GameDetailPage implements OnInit {
             /* connect to socket server (multiplayer) */
             this.connectSocketIO_MultiPlayer();
           }
+
+          //* set vir env type for old (where task type is not included in all tasks) and new games
+          if (this.isVirtualWorld) {
+            if (this.game.tasks[0] && this.game.tasks[0].virEnvType) {
+              this.virEnvType = this.game.tasks[0].virEnvType;
+            } else {
+              this.virEnvType = this.game.virEnvType;
+            }
+          }
         });
     });
 
@@ -134,10 +146,10 @@ export class GameDetailPage implements OnInit {
       this.socketService.socket.on(
         "onPlayerConnectionStatusChange",
         (playersData) => {
-          /* console.log(
-            "(connectSocketIO_MultiPlayer) playersData: ",
-            playersData
-          ); */
+          // console.log(
+          //   "(connectSocketIO_MultiPlayer) playersData: ",
+          //   playersData
+          // );
           this.playersData = playersData;
         }
       );
@@ -185,29 +197,90 @@ export class GameDetailPage implements OnInit {
     }
   }
 
-  pointClick(point) {
-  // console.log(point);
-  }
-
-  startGame() {
+  async startGame() {
     this.bundle = {
       ...this.prepareRouteParams(),
       playerName: this.playerName,
       isRejoin: false,
     };
 
+    /* check if user name is already existed before proceeding with starting the game */
+    // ToDo: test if multiplayer player can have same names
+    if (this.isVirtualWorld) {
+      // connect to socket.io
+      this.socketService.socket.connect();
+
+      this.socketService
+        .checkRoomNameExistance(this.playerName)
+        .then((isPlayerNameExisted) => {
+          if (isPlayerNameExisted) {
+            this.utilService.showAlert(
+              "Use another name",
+              "The name you entered is already in use. Please use another name."
+            );
+            // return;
+          } else {
+            this.playGameVE();
+          }
+        });
+    } else {
+      this.playGameReal();
+    }
+  }
+
+  /**
+   * for real world games, redirect player to play-game-game
+   */
+  playGameReal() {
     if (this.isSingleMode) {
       this.navCtrl.navigateForward(
         `play-game/playing-game/${JSON.stringify(this.bundle)}`
       );
     } else {
+      //Multi-player
       /* check whether game is full beofore join game */
       this.checkAbilityToJoinGame(this.bundle);
 
       // this.checkSavedGameSession();
     }
   }
 
+  /**
+   * for virtual Environment games, redirect player to play-game-game
+   */
+  playGameVE() {
+    if (this.isSingleMode) {
+      //*** for new impl. where we need to check whether game name is already used and close frame when game is done.
+      // ToDo: remove else, when webGL integration works fine
+      if (this.useWebGL_cbox) {
+        this.socketService.creatAndJoinNewRoom(
+          this.playerName,
+          this.virEnvType,
+          this.isSingleMode
+        );
+
+        this.socketService.closeFrame_listener();
+
+        /* redirect player to WebGL-build - page */
+        this.navCtrl.navigateForward(
+          `playing-virenv/${JSON.stringify(this.bundle)}`
+        );
+
+      } else {
+        // if use webGL check-box is not checked
+        this.bundle = { ...this.bundle, useWebGL_cbox: this.useWebGL_cbox };
+        this.navCtrl.navigateForward(
+          `play-game/playing-game/${JSON.stringify(this.bundle)}`
+        );
+      }
+    } else {
+      //Multi-player
+      /* check whether game is full beofore join game */
+      this.checkAbilityToJoinGame(this.bundle);
+      // this.checkSavedGameSession();
+    }
+  }
+
   /***************************************/
   async showPopover(ev: any, key: string) {
     let text = this.translate.instant(key);