- Improved HTML header on /login page, closed #944

app/Controller/AppController.php

@@ -68,8 +68,6 @@ class AppController extends Controller {
         $resource = Resource::instance();
         $resource->register('script', 'app/login');
         $resource->register('script', 'app/mappage', 'prefetch');
-        $resource->register('image', 'sso/signature.png');
-        $resource->register('image', 'sso/gameplay.png');
     }
 
 }

app/pathfinder.ini

@@ -13,8 +13,8 @@ NAME                        =   Pathfinder
 ;           Version is used for CSS/JS cache busting and is part of the URL for static resources:
 ;           e.g. public/js/vX.X.X/app.js
 ; Syntax:   String (current version)
-; Default:  v2.0.0
-VERSION                     =   v2.0.0
+; Default:  v2.0.1
+VERSION                     =   v2.0.1
 
 ; Contact information [optional]
 ;           Shown on 'licence', 'contact' page.

js/app/login.js

@@ -48,8 +48,8 @@ define([
         ssoButtonClass: 'pf-sso-login-button',                                  // class for SSO login button
 
         // character select
-        characterSelectionClass: 'pf-character-selection',                      // class for character panel wrapper
-        characterRowAnimateClass: 'pf-character-row-animate',                   // class for character panel row during animation
+        characterSelectionClass: 'pf-character-selection',                      // class for character boxes
+        characterBoxClass: 'pf-character-box',                                  // class for outer character box
         characterImageWrapperClass: 'pf-character-image-wrapper',               // class for image wrapper (animated)
         characterImageInfoClass: 'pf-character-info',                           // class for character info layer (visible on hover)
         dynamicMessageContainerClass: 'pf-dynamic-message-container',           // class for "dynamic" (JS) message container
@@ -489,12 +489,13 @@ define([
                 let content = Mustache.render(template, data);
                 $('#' + config.headerId).prepend(content);
                 let stickyPanelServer = $('#' + config.stickyPanelServerId);
-                stickyPanelServer.velocity('transition.slideLeftBigIn', {
+                stickyPanelServer.velocity('transition.slideRightBigIn', {
                     duration: 240
                 });
 
                 // set observer for api status dialog
-                stickyPanelServer.on('click', '.' + config.apiStatusTriggerClass, function(){
+                stickyPanelServer.on('pointerdown', '.' + config.apiStatusTriggerClass, e => {
+                    e.stopPropagation();
                     $.fn.apiStatusDialog(data.api);
                 });
             });
@@ -550,22 +551,21 @@ define([
      * load character data from cookie information
      * -> all validation is done server side!
      */
-    let initCharacterSelect = function(){
+    let initCharacterSelect = () => {
 
         /**
          * init panel animation for an element
          * @param imageWrapperElement
          */
-        let initCharacterAnimation = function(imageWrapperElement){
-
-            imageWrapperElement.velocity('stop').velocity('transition.flipBounceXIn', {
-                display: 'inline-block',
+        let initCharacterAnimation = imageWrapperElement => {
+            $(imageWrapperElement).velocity('stop').velocity('transition.flipBounceXIn', {
+                display: 'block',
                 drag: true,
                 duration: 500
             });
 
             // Hover effect for character info layer
-            imageWrapperElement.hoverIntent(function(e){
+            $(imageWrapperElement).hoverIntent(function(e){
                 let characterInfoElement = $(this).find('.' + config.characterImageInfoClass);
 
                 characterInfoElement.velocity('finish').velocity({
@@ -586,43 +586,14 @@ define([
         };
 
         // --------------------------------------------------------------------
-
-        /**
-         * update all character panels -> set CSS class (e.g. after some panels were added/removed,..)
-         */
-        let updateCharacterPanels = function(){
-            let characterRows = $('.' + config.characterSelectionClass + ' .' + Util.config.dynamicAreaClass).parent();
-            let rowClassIdentifier = ((12 / characterRows.length ) <= 3) ? 3 : (12 / characterRows.length);
-            $(characterRows).removeClass().addClass('col-sm-' + rowClassIdentifier);
+        let removeCharacterPanel = panelElement => {
+            let charBox = panelElement.closest(`.${config.characterBoxClass}`);
+            charBox.classList.add('remove');
+            charBox.addEventListener('animationend', () => charBox.parentNode.removeChild(charBox));
         };
 
         // --------------------------------------------------------------------
-
-        let removeCharacterPanel = function(panelElement){
-            $(panelElement).velocity('transition.expandOut', {
-                duration: 250,
-                complete: function(){
-                    // lock row for CSS animations while removing...
-                    $(this).parent().addClass(config.characterRowAnimateClass);
-
-                    $(this).parent().velocity({
-                        width: 0
-                    },{
-                        easing: 'ease',
-                        duration: 300,
-                        complete: function(){
-                            $(this).remove();
-                            // reset column CSS classes for all existing panels
-                            updateCharacterPanels();
-                        }
-                    });
-                }
-            });
-        };
-
-        // --------------------------------------------------------------------
-
-        let getCharacterAuthLabel = (authStatus) => {
+        let getCharacterAuthLabel = authStatus => {
             let label = '';
             switch(authStatus){
                 case 'UNKNOWN':
@@ -642,15 +613,13 @@ define([
 
         // --------------------------------------------------------------------
         // request character data for each character panel
-        requirejs(['text!templates/ui/character_panel.html', 'mustache'], function(template, Mustache){
+        requirejs(['text!templates/ui/character_panel.html', 'mustache'], (template, Mustache) => {
 
-            $('.' + config.characterSelectionClass + ' .' + Util.config.dynamicAreaClass).each(function(){
-                let characterElement = $(this);
-
-                characterElement.showLoadingAnimation();
+            [...document.querySelectorAll(`.${config.characterSelectionClass} .${Util.config.dynamicAreaClass}`)].forEach(charEl => {
+                $(charEl).showLoadingAnimation();
 
                 let requestData = {
-                    cookie: characterElement.data('cookie')
+                    cookie: charEl.dataset.cookie
                 };
 
                 $.ajax({
@@ -660,11 +629,11 @@ define([
                     dataType: 'json',
                     context: {
                         cookieName: requestData.cookie,
-                        characterElement: characterElement,
+                        charEl: charEl,
                         browserTabId: Util.getBrowserTabId()
                     }
                 }).done(function(responseData, textStatus, request){
-                    this.characterElement.hideLoadingAnimation();
+                    $(this.charEl).hideLoadingAnimation();
 
                     if(
                         responseData.error &&
@@ -679,9 +648,8 @@ define([
                     }
 
                     if(responseData.hasOwnProperty('character')){
-
                         let data = {
-                            link: this.characterElement.data('href'),
+                            link: this.charEl.dataset.href,
                             cookieName: this.cookieName,
                             browserTabId: this.browserTabId,
                             ccpImageServer: responseData.ccpImageServer,
@@ -693,21 +661,19 @@ define([
                             hasActiveSession: responseData.character.hasActiveSession === true
                         };
 
-                        let content = Mustache.render(template, data);
-                        this.characterElement.html(content);
+                        this.charEl.innerHTML = Mustache.render(template, data);
 
                         // show character panel (animation settings)
-                        initCharacterAnimation(this.characterElement.find('.' + config.characterImageWrapperClass));
+                        initCharacterAnimation(this.charEl.querySelector(`.${config.characterImageWrapperClass}`));
                     }else{
                         // character data not available -> remove panel
-                        removeCharacterPanel(this.characterElement);
+                        removeCharacterPanel(this.charEl);
                     }
                 }).fail(function(jqXHR, status, error){
-                    let characterElement = this.characterElement;
-                    characterElement.hideLoadingAnimation();
+                    $(this.charEl).hideLoadingAnimation();
 
                     // character data not available -> remove panel
-                    removeCharacterPanel(this.characterElement);
+                    removeCharacterPanel(this.charEl);
                 });
             });
         });
@@ -847,7 +813,7 @@ define([
 
         // draw header logo
         document.querySelector(`.logo-ploygon-top-right`).addEventListener('animationend', () => {
-            HeaderLogin.init(document.getElementById(config.headerContainerId));
+            HeaderLogin.init();
         });
     });
 });

js/app/ui/layout/header_login.js

@@ -179,12 +179,18 @@ define([
             this.resizeWindow();
             this._mouse = this._config.startCoordinates(this._canvas);
 
-            this._ctx = this._canvas.getContext('2d', {alpha: true, desynchronized: true});
+            this._ctx = this._canvas.getContext('2d', {
+                alpha: true,
+                desynchronized: false,
+                preserveDrawingBuffer: true
+            });
             this.initHandlers();
 
             // must be bind to this instance -> https://stackoverflow.com/a/46014225/4329969
             this.onPointerDown = this.onPointerDown.bind(this);
+            this.onPointerOver = this.onPointerOver.bind(this);
             this.onPointerEnter = this.onPointerEnter.bind(this);
+            this.onPointerOut = this.onPointerOut.bind(this);
             this.onPointerLeave = this.onPointerLeave.bind(this);
             this.onPointerMove = this.onPointerMove.bind(this);
 
@@ -204,6 +210,10 @@ define([
             return (typeof this._config.isPaused === 'function') ? this._config.isPaused(this) : this._config.isPaused;
         }
 
+        eventContainer(){
+            return this._config.container ? this._config.container : this._canvas;
+        }
+
         findSiblings(){
             let node1, node2, distance;
             for(let i = 0; i < this._nodesQty; i++){
@@ -335,8 +345,14 @@ define([
         }
 
         initHandlers(){
-            this._canvas.addEventListener('pointerover', e => this.onPointerEnter(e), {passive: true});
-            this._canvas.addEventListener('pointermove', e => this.onPointerMove(e), {passive: true});
+            let passive = true;
+            this.eventContainer().addEventListener('pointerover', e => this.onPointerOver(e), {passive: passive});
+            this.eventContainer().addEventListener('pointerenter', e => this.onPointerEnter(e), {passive: passive});
+
+            this.eventContainer().addEventListener('pointermove', e => this.onPointerMove(e), {passive: passive});
+
+            this.eventContainer().addEventListener('pointerout', e => this.onPointerOut(e), {passive: passive});
+            this.eventContainer().addEventListener('pointerleave', e => this.onPointerLeave(e), {passive: passive});
         }
 
         initPointerLock(){
@@ -345,18 +361,17 @@ define([
             }
 
             let lockChange = (e) => {
-                /*
                 if(document.pointerLockElement === this._canvas){
-                    this._canvas.addEventListener('pointermove', this.onPointerMove, {passive: true});
+                    this.eventContainer().classList.add(this._config.pointerLockedClass);
+                    //this.eventContainer().addEventListener('pointermove', this.onPointerMove, {passive: true});
                 }else{
-                    this._canvas.removeEventListener('pointermove', this.onPointerMove, {passive: true});
-                }*/
+                    this.eventContainer().classList.remove(this._config.pointerLockedClass);
+                    //this.eventContainer().removeEventListener('pointermove', this.onPointerMove, {passive: true});
+                }
             };
 
             //this._canvas.requestPointerLock()
             this._canvas.addEventListener('pointerdown', this.onPointerDown, false);
-            //this._canvas.addEventListener('mouseenter', this.onPointerEnter, false);
-            //this._canvas.addEventListener('mouseleave', this.onPointerLeave, false);
 
             document.addEventListener('pointerlockchange', lockChange, false);
         }
@@ -379,6 +394,7 @@ define([
         }
 
         onPointerMove(e){
+            e.preventDefault();
             let x = this._mouse.x + Math.floor(e.movementX);
             let y = this._mouse.y + Math.floor(e.movementY);
 
@@ -403,12 +419,18 @@ define([
             }
         }
 
-        onPointerEnter(e){
+        onPointerOver(e){
+            e.preventDefault();
             this._mouse.x = e.clientX;
             this._mouse.y = e.clientY;
         }
 
+        onPointerEnter(e){}
+
+        onPointerOut(e){}
+
         onPointerLeave(e){
+            e.preventDefault();
             document.exitPointerLock();
         }
 
@@ -445,6 +467,7 @@ define([
 
 
     StarCanvas.defaultConfig = {
+        pointerLockedClass: 'pointer-locked',
         // limit render interval to max fps
         // lower fps == less CPU
         fps: 80,
@@ -477,6 +500,9 @@ define([
         }),
         // callback/boolean to pause canvas updated (e.g. while page scroll). Better scroll performance
         isPaused: false,
+        // wrapper container for pointer events (e.g. document)
+        container: false,
+        // enables Pointer Lock API - https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
         pointerLock: true
     };
 
@@ -492,7 +518,8 @@ define([
             x: canvas.width / 2 + 500,
             y: canvas.height / 2 + 50
         }),
-        isPaused: () => document.body.classList.contains('on-scroll')
+        isPaused: () => document.body.classList.contains('on-scroll'),
+        container: document.getElementById(config.headerId)
     };
 
     if(navigator.userAgent.indexOf('Chrome') > -1){
@@ -532,34 +559,26 @@ define([
         });
     }
 
-    let init = headerEl => {
-        let previewEls = headerEl.getElementsByClassName(config.previewElementClass);
+    let init = () => {
 
-        $(previewEls).velocity('transition.bounceIn', {
-            duration: 600,
-            stagger: 60,
-            delay: 120,
-            complete: function(){
-                let canvas = document.getElementById(config.canvasId);
-                // not on mobile
-                if(canvas){
-                    let starCanvasInstance = new StarCanvas(canvas, defaultConfig);
-                    canvas.classList.add('in');
+        let canvas = document.getElementById(config.canvasId);
+        // not on mobile
+        if(canvas){
+            let starCanvasInstance = new StarCanvas(canvas, defaultConfig);
+            canvas.classList.add('in');
 
-                    // watch for resize
-                    Util.getResizeManager().observe(
-                        canvas.parentNode,
-                        (el, contentRect) => {
-                            // ignore "height" change (css transition) (no canvas repaint)
-                            if(canvas.width !== contentRect.width){
-                                starCanvasInstance.resizeWindow();
-                            }
-                        },
-                        {debounce: true, ms: 260}
-                    );
-                }
-            }
-        });
+            // watch for resize
+            Util.getResizeManager().observe(
+                canvas.parentNode,
+                (el, contentRect) => {
+                    // ignore "height" change (css transition) (no canvas repaint)
+                    if(canvas.width !== contentRect.width){
+                        starCanvasInstance.resizeWindow();
+                    }
+                },
+                {debounce: true, ms: 260}
+            );
+        }
     };
 
     return {

js/app/util.js

@@ -958,7 +958,7 @@ define([
         const supportedPassiveTypes = [
             'scroll', 'wheel',
             'touchstart', 'touchmove', 'touchenter', 'touchend', 'touchleave',
-            //'mouseout', 'mouseleave', 'mouseup', 'mousedown', 'mousemove', 'mouseenter', 'mousewheel', 'mouseover'
+            'mouseout', 'mouseleave', 'mouseup', 'mousedown', 'mousemove', 'mouseenter', 'mousewheel', 'mouseover'
         ];
         const getDefaultPassiveOption = (passive, eventName) => {
             if(passive !== undefined) return passive;