Merge pull request #257 from origami-team/android

Android

android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "0.20"
+        versionName "0.21"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     buildTypes {
@@ -36,6 +36,8 @@ dependencies {
     androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
     implementation project(':capacitor-cordova-android-plugins')
 
+    implementation 'com.android.support:design:23.2.1'
+
     implementation 'com.google.android.material:material:1.0.0'
 }
 

android/app/src/main/assets/capacitor.config.json

@@ -6,8 +6,7 @@
   "webDir": "www",
   "server": {
     "iosScheme": "https",
-    "androidScheme": "https",
-    "url": "http://192.168.0.87:8100"
+    "androidScheme": "https"
   },
   "ios": {
     "hideLogs": true

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
+    <color name="ic_launcher_background">#ffffff</color>
 </resources>

ios/App/App.xcodeproj/project.pbxproj

@@ -357,7 +357,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
@@ -379,7 +379,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;

src/app/components/feedback/feedback.component.ts

@@ -116,7 +116,6 @@ export class FeedbackComponent {
             })
             .subscribe((data: DeviceOrientationCompassHeading) => {
                 this.direction = data.magneticHeading
-                console.log(this.direction)
             })
     }
 
@@ -694,6 +693,7 @@ export class FeedbackComponent {
 
     public remove(): void {
         this.positionSubscription.unsubscribe();
+        this.deviceOrientationSubscription.unsubscribe();
     }
 
     public onWaypointReached() {

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

@@ -123,12 +123,9 @@
           </div>
 
           <div *ngIf="task.answer?.type == 'MULTIPLE_CHOICE'" class="multiple-choice">
-            <div *ngFor="let item of task.answer.photos | keyvalue | shuffle">
-              <ion-thumbnail slot="start">
-                <img [src]=item.value class="multiple-choize-img"
-                  (click)='onMultipleChoicePhotoSelected(item, $event)' />
-              </ion-thumbnail>
-            </div>
+            <ion-thumbnail slot="start" *ngFor="let item of task.answer.photos | keyvalue | shuffle">
+              <img [src]=item.value class="multiple-choize-img" (click)='onMultipleChoicePhotoSelected(item, $event)' />
+            </ion-thumbnail>
           </div>
 
 

src/app/pages/play-game/playing-game/playing-game.page.scss

@@ -33,7 +33,7 @@
 }
 
 ion-thumbnail {
-  --size: 150px !important;
+  --size: 150px;
 }
 
 .task-control {
@@ -154,6 +154,10 @@ ion-thumbnail {
     text-align: center;
     padding: 1rem;
     margin: 0;
+
+    @media (max-width: 576px) {
+      width: 90%;
+    }
   }
 
   &.correct-position {
@@ -188,11 +192,29 @@ ion-thumbnail {
 
   .multiple-choice {
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     justify-content: space-between;
 
-    > div > ion-thumbnail {
-      --size: 65px;
+    > ion-thumbnail {
+      margin-bottom: 0.5rem;
+
+      > img {
+        border-radius: 1rem;
+      }
+
+      @media screen and (max-width: 575px) {
+        --size: 75px !important;
+        flex: 0 50%;
+        text-align: center;
+
+        > img {
+          width: auto;
+          border: 0;
+          border-radius: 0.5rem;
+          margin: auto;
+        }
+      }
 
       > .multiple-choize-img.selected {
         outline: solid #0cd1e8 2px;
@@ -256,6 +278,7 @@ ion-thumbnail {
     font-size: 18px;
     flex: 0 0 100%;
     position: relative;
+    width: 100%;
 
     &.bearing {
       min-height: 150px;
@@ -266,9 +289,9 @@ ion-thumbnail {
       }
     }
 
-    &.large {
-      margin-top: 50%;
-    }
+    // &.large {
+    // margin-top: 50%;
+    // }
 
     > img {
       height: 100%;

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

@@ -1036,6 +1036,8 @@ export class PlayingGamePage implements OnInit, OnDestroy {
     this.geolocationService.clear()
     this.deviceOrientationSubscription.unsubscribe();
 
+    this.trackerService.clear();
+
     this.rotationControl.remove();
     this.viewDirectionControl.remove()
     this.landmarkControl.remove()

src/app/services/tracker.service.ts

@@ -88,6 +88,11 @@ export class TrackerService {
     this.task = undefined;
   }
 
+  clear() {
+    this.deviceOrientationSubscription.unsubscribe();
+    this.positionWatch.unsubscribe();
+  }
+
   setTask(task) {
     this.task = task;
     this.panCounter = 0;