Multiple bug fixes and adding initial UI support for register and login.

js-src/conquer/index.ts

@@ -10,7 +10,11 @@ export default class Conquer {
     private currentLongitude: number;
     private currentLatitude: number;
     private rotationOffset = 0;
+    private heading = 0
     private disableSetRotationOffset = false
+    private conquerLogin: HTMLDivElement
+    private conquerLoginGoToRegister: HTMLAnchorElement
+    private conquerRegister: HTMLDivElement
     private alpha = 0;
     private beta = 0;
     private gamma = 0;
@@ -37,14 +41,51 @@ export default class Conquer {
         }
         this.map.getView().centerOn(olCoordinates, size, [size[0]/2, size[1]-60])
     }
+    static fail(error: string): never {
+        alert('Error de interfaz')
+        throw new Error(error)
+    }
+    fillConquerLogin() {
+        const conquerLogin = document.querySelector('.conquer-login')
+        if (conquerLogin === null || !(conquerLogin instanceof HTMLDivElement)) {
+            Conquer.fail('conquerLogin is invalid')
+        }
+        this.conquerLogin = conquerLogin
+        const conquerLoginGoToRegister = document.querySelector('.conquer-login-go-to-register')
+        if (conquerLoginGoToRegister === null || !(conquerLoginGoToRegister instanceof HTMLAnchorElement)) {
+            Conquer.fail('Link to go to register from login is invalid.')
+        }
+        this.conquerLoginGoToRegister = conquerLoginGoToRegister
+        this.conquerLoginGoToRegister.addEventListener('click', () => {
+            this.goToRegister()
+        })
+    }
+    async goToRegister(): Promise<void> {
+        const isLogged = await this.isLogged();
+        await this.removeLoginRegisterCombo()
+        if (!isLogged) {
+            this.conquerRegister.classList.remove('conquer-display-none')
+        }
+    }
+
+    async removeLoginRegisterCombo(): Promise<void> {
+        this.conquerLogin.classList.add('conquer-display-none')
+        this.conquerRegister.classList.add('conquer-display-none')
+    }
+
+    fillConquerRegister() {
+        const conquerRegister = document.querySelector('.conquer-register')
+        if (conquerRegister === null || !(conquerRegister instanceof HTMLDivElement)) {
+            Conquer.fail('conquerRegister is invalid')
+        }
+        this.conquerRegister = conquerRegister
+    }
     async run() {
+        this.fillConquerLogin()
+        this.fillConquerRegister()
         const isLogged = await this.isLogged();
         if (!isLogged) {
-            const conquerLogin = document.querySelector('.conquer-login')
+            this.conquerLogin.classList.remove('conquer-display-none')
-            if (conquerLogin === null) {
-                return
-            }
-            conquerLogin.classList.remove('conquer-display-none')
         }
         const conquerContainer = this.conquerContainer;
         //layer.on('prerender', (evt) => {
@@ -79,7 +120,6 @@ export default class Conquer {
         navigator.geolocation.watchPosition((location) => {
             this.setCenterDisplaced(location.coords.latitude, location.coords.longitude);
         }, (err) => {
-            alert(err.message)
         }, {
             enableHighAccuracy: true
         });
@@ -93,7 +133,8 @@ export default class Conquer {
                     this.currentLongitude = location. coords.longitude
                     if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) {
                         this.disableSetRotationOffset = true
-                        this.rotationOffset = location.coords.heading*2*Math.PI/360 - this.compassHeading(this.alpha, this.beta, this.gamma)
+                        this.heading = location.coords.heading
+                        this.rotationOffset = this.compassHeading(this.alpha, this.beta, this.gamma) + (location.coords.heading*Math.PI*2)/360 
                     }
                     this.setCenterDisplaced(this.currentLatitude, this.currentLongitude)
                 }, () => {
@@ -118,7 +159,8 @@ export default class Conquer {
         );
     }
     compassHeading(alpha:number, beta:number, gamma:number): number {
-        const alphaRad = -alpha * (Math.PI / 180);
+        const alphaRad = alpha * (Math.PI / 180);
+        return alphaRad
         let betaRad = beta * (Math.PI / 180);
         const gammaRad = gamma * (Math.PI / 180);
         betaRad = 1.5707963268;
@@ -150,7 +192,7 @@ export default class Conquer {
             this.beta = beta 
             this.gamma = gamma 
             this.enabledOnRotate = false
-	    this.map.getView().setRotation(this.compassHeading(alpha, beta, gamma) + this.rotationOffset)
+	    this.map.getView().setRotation((this.compassHeading(alpha, beta, gamma) - this.rotationOffset))
 
 	    
             window.setTimeout(() => {

public/css/styles.css

@@ -8,7 +8,7 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
-  body div.conquer-login {
+  body div.conquer-login, body div.conquer-register {
     position: fixed;
     color: black;
     font-size: 25px;

public/css/styles.scss

@@ -16,7 +16,7 @@ html {
 }
 
 body {
-  div.conquer-login {
+  div.conquer-login,div.conquer-register {
     position: fixed;
     color: black;
     font-size: 25px;

templates/conquer/index.html.ep

@@ -16,6 +16,16 @@
             <button class="conquer-login-sumbit">Iniciar sesión</button>
             <p>¿No tienes cuenta aun? <a href="#" class="conquer-login-go-to-register">Registrate.</a>
         </div>
+        <div class="conquer-register conquer-display-none">
+            <label>Nombre de usuario</label>
+            <input class="conquer-register-username"/>
+            <label>Contraseña</label>
+            <input class="conquer-register-password" type="password"/>
+            <label>Repite la contraseña</label>
+            <input class="conquer-register-repeat-password" type="password"/>
+            <button class="conquer-register-sumbit">Iniciar sesión</button>
+            <p>¿Ya estás registrado? <a href="#" class="conquer-register-go-to-login">Registrate.</a>
+        </div>
         <div class="conquer-container">
         </div>
     </body>