@urso/core 0.3.8 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urso/core",
-  "version": "0.3.8",
+  "version": "0.3.12",
   "description": "HTML5 game engine",
   "main": "build/js/index.js",
   "author": "Megbrimef",

package/src/js/components/deviceRotate/controller.js

@@ -42,20 +42,20 @@ class ComponentsDeviceRotateController extends ComponentsBaseController {
   }
 
   get _showOnLandscape() {
-    return !this._resolutionsConfig.find(resolution => resolution.orientation === 'landscape');
+    return !this._resolutionsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.LANDSCAPE);
   }
 
   get _showOnPortrait() {
-    return !this._resolutionsConfig.find(resolution => resolution.orientation === 'portrait');
+    return !this._resolutionsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.PORTRAIT);
   }
 
   get _isPortrait() {
-    return this._orientation === 'portrait';
+    return this._orientation === Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   get _needShow() {
-    return (this._orientation === 'portrait' && this._showOnPortrait) ||
-      (this._orientation !== 'portrait' && this._showOnLandscape)
+    return (this._orientation === Urso.device.ScreenOrientation.PORTRAIT && this._showOnPortrait) ||
+      (this._orientation !== Urso.device.ScreenOrientation.PORTRAIT && this._showOnLandscape)
   }
 
   set _isVisible(needShowDiv) {
@@ -63,7 +63,7 @@ class ComponentsDeviceRotateController extends ComponentsBaseController {
   }
 
   _updateOrientation() {
-    this._orientation = innerWidth > innerHeight ? 'landscape' : 'portrait';
+    this._orientation = innerWidth > innerHeight ? Urso.device.ScreenOrientation.LANDSCAPE : Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   _updateVisibility() {

package/src/js/components/fullscreen/android.js

@@ -33,7 +33,7 @@ class ComponentsFullscreenAndroid {
   }
 
   _updateOrientation() {
-    this._orientation = innerWidth > innerHeight ? 'landscape' : 'portrait';
+    this._orientation = innerWidth > innerHeight ? Urso.device.ScreenOrientation.LANDSCAPE : Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   get isFullscreen() {
@@ -49,7 +49,7 @@ class ComponentsFullscreenAndroid {
   }
 
   get _isPortrait() {
-    return this._orientation === 'portrait';
+    return this._orientation === Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   get _needShowOnCurrentOrientation() {
@@ -58,11 +58,11 @@ class ComponentsFullscreenAndroid {
   }
 
   get _showOnLandscape() {
-    return this._orientationsConfig.find(resolution => resolution.orientation === 'landscape');
+    return this._orientationsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.LANDSCAPE);
   }
 
   get _showOnPortrait() {
-    return this._orientationsConfig.find(resolution => resolution.orientation === 'portrait');
+    return this._orientationsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.PORTRAIT);
   }
 
   set isVisible(needShowDiv) {

package/src/js/components/fullscreen/controller.js

@@ -37,15 +37,15 @@ class ComponentsFullscreenController extends ComponentsBaseController {
   }
 
   get _showOnLandscape() {
-    return this._resolutionsConfig.find(resolution => resolution.orientation === 'landscape');
+    return this._resolutionsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.LANDSCAPE);
   }
 
   get _showOnPortrait() {
-    return this._resolutionsConfig.find(resolution => resolution.orientation === 'portrait');
+    return this._resolutionsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.PORTRAIT);
   }
 
   get _isPortrait() {
-    return innerWidth > innerHeight ? 'portrait' : 'landscape';
+    return innerWidth > innerHeight ? Urso.device.ScreenOrientation.PORTRAIT : Urso.device.ScreenOrientation.LANDSCAPE;
   }
 
   get isFullscreen() {

package/src/js/components/fullscreen/ios.js

@@ -55,7 +55,7 @@ class ComponentsFullscreenIos {
   }
 
   _updateOrientation() {
-    this._orientation = innerWidth > innerHeight ? 'landscape' : 'portrait';
+    this._orientation = innerWidth > innerHeight ? Urso.device.ScreenOrientation.LANDSCAPE : Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   _updateResize() {
@@ -68,7 +68,7 @@ class ComponentsFullscreenIos {
   }
 
   get _isPortrait() {
-    return this._orientation === 'portrait';
+    return this._orientation === Urso.device.ScreenOrientation.PORTRAIT;
   }
 
   get _needShowOnCurrentOrientation() {
@@ -76,11 +76,11 @@ class ComponentsFullscreenIos {
   }
 
   get _showOnLandscape() {
-    return this._orientationsConfig.find(resolution => resolution.orientation === 'landscape');
+    return this._orientationsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.LANDSCAPE);
   }
 
   get _showOnPortrait() {
-    return this._orientationsConfig.find(resolution => resolution.orientation === 'portrait');
+    return this._orientationsConfig.find(resolution => resolution.orientation === Urso.device.ScreenOrientation.PORTRAIT);
   }
 
   set isVisible(needShowDiv) {

package/src/js/lib/device.js

@@ -476,6 +476,16 @@ LibDevice = function () {
     */
     this.fullscreenKeyboard = false;
 
+    /**
+    * Enum for possible screen orientations.
+    * @readonly
+    * @enum {string}
+    */
+    this.ScreenOrientation = {
+        LANDSCAPE: 'landscape',
+        PORTRAIT: 'portrait'
+    };
+
 };
 
 // Device is really a singleton/static entity; instantiate it

package/src/js/modules/assets/config.js

@@ -2,6 +2,8 @@ class ModulesAssetsConfig {
     constructor() {
         this.singleton = true;
 
+        this.defaultQualityFactor = 1;
+
         /**
          * quality settings for resource loading selection
          */

package/src/js/modules/assets/controller.js

@@ -18,7 +18,14 @@ class ModulesAssetsController {
      * Current quality getter
      */
     getQuality() {
-        this.getInstance('Service').getQuality();
+        return this.getInstance('Service').getQuality();
+    }
+
+    /**
+     * Current asset resolution
+     */
+    getCurrentResolution() {
+        return this.getInstance('Service').getCurrentResolution();
     }
 
     /**

package/src/js/modules/assets/service.js

@@ -160,10 +160,13 @@ class ModulesAssetsService {
         }
     }
 
-    _processLoadedImage(assetModel) {
-        const { qualityFactors } = this.getInstance('Config');
+    getCurrentResolution() {
+        const { qualityFactors, defaultQualityFactor } = this.getInstance('Config');
+        return qualityFactors[this._currentQuality] || defaultQualityFactor || 1;
+    }
 
-        const resolution = qualityFactors[this._currentQuality] || 1;
+    _processLoadedImage(assetModel) {
+        const resolution = this.getCurrentResolution();
 
         const assetKey = assetModel.key;
         //textures cache

package/src/js/modules/objects/baseModel.js

@@ -55,6 +55,15 @@ class ModulesObjectsBaseModel {
         Urso.objects.addChild(this, childObject, doNotRefreshStylesFlag);
     }
 
+    get transform() {
+        return this._baseObject.transform;
+    }
+
+    addChildAt(childObject, zIndex, doNotRefreshStylesFlag) {
+        //TODO zIndex
+        Urso.objects.addChild(this, childObject, doNotRefreshStylesFlag);
+    }
+
     removeChild(childObject, doNotRefreshStylesFlag) {
         Urso.objects.removeChild(this, childObject, doNotRefreshStylesFlag);
     }

package/src/js/modules/objects/create.js

@@ -149,13 +149,17 @@ class ModulesObjectsCreate {
             this.removeChild(child.parent, child, true);
         }
 
-        newParent.contents.push(child);
-        let childBase = child._baseObject;
-        newParent._baseObject.addChild(childBase);
-        child.parent = newParent;
-
-        if (!doNotRefreshStylesFlag)
-            Urso.objects.refreshStyles(); //todo optimization
+        if (child._baseObject) { //regular our object
+            newParent.contents.push(child);
+            let childBase = child._baseObject;
+            newParent._baseObject.addChild(childBase);
+            child.parent = newParent;
+
+            if (!doNotRefreshStylesFlag)
+                Urso.objects.refreshStyles(); //todo optimization
+        } else { //pixi system object
+            newParent._baseObject.addChild(child);
+        }
     }
 
     removeChild(parent, child, doNotRefreshStylesFlag) {

package/src/js/modules/objects/models/button.js

@@ -116,7 +116,7 @@ class ModulesObjectsModelsButton extends Urso.Core.Modules.Objects.BaseModel {
     }
 
     _onButtonUp() {
-        if (this._isDisabled)
+        if (this._isDisabled || !this._isDown)
             return false;
 
         this._isDown = false;

package/src/js/modules/objects/models/slider.js

@@ -8,6 +8,7 @@ class ModulesObjectsModelsSlider extends Urso.Core.Modules.Objects.BaseModel {
         this._baseObject = null;
         this._handleIsPulling = false;
 
+        this._setVariables();
         this._addBaseObject();
         this._createSliderTextures();
         this._createValueText();
@@ -25,6 +26,17 @@ class ModulesObjectsModelsSlider extends Urso.Core.Modules.Objects.BaseModel {
         this.minValueTextModel = Urso.helper.recursiveGet('minValueTextModel', params, false);
         this.maxValueTextModel = Urso.helper.recursiveGet('maxValueTextModel', params, false);
         this.currentValueTextModel = Urso.helper.recursiveGet('currentValueTextModel', params, false);
+        this.isVertical = Urso.helper.recursiveGet('isVertical', params, false);
+    }
+
+    _setVariables() {
+        if(this.isVertical) {
+            this.positionKey = 'y';
+            this.targetObjParam = 'height';
+        }else {
+            this.positionKey = 'x';
+            this.targetObjParam = 'width';
+        }
     }
 
     _createSliderTextures() {
@@ -113,82 +125,94 @@ class ModulesObjectsModelsSlider extends Urso.Core.Modules.Objects.BaseModel {
             this._handleIsDragging = true;
     }
 
-    _onPointerMove({ x }) {
+    _onPointerMove({ x, y }) {
         if (!this._handleIsDragging)
             return
 
-        if (x < this.x)
-            this._sliderHandle.x = 0;
-        else if (x > this.x + this._sliderBg._baseObject.width)
-            this._sliderHandle.x = this._sliderBg._baseObject.width;
+        const value = this.isVertical ? y : x;
+
+        if (value < this[this.positionKey])
+            this._sliderHandle[this.positionKey] = 0;
+        else if (value >= this[this.positionKey] + this._sliderBg._baseObject[this.targetObjParam])
+            this._sliderHandle[this.positionKey] = this._sliderBg._baseObject[this.targetObjParam];
         else
-            this._sliderHandle.x = x - this.x;
+            this._sliderHandle[this.positionKey] = value - this[this.positionKey];
 
         this._setFillMask();
+
+        const data = { class: this.class, name: this.name, position: this._sliderHandle[this.positionKey] };
+        this.emit(Urso.events.MODULES_OBJECTS_SLIDER_HANDLE_MOVE, data)
     }
 
     _onPointerUp(obj) {
         this._handleIsDragging = false;
-        let x;
+        let targetObj;
 
-        if (obj.target === this._sliderBg._baseObject) {
-            x = obj.data.getLocalPosition(obj.target).x;
-        } else
-            x = this._sliderHandle.x;
+        if (obj.target === this._sliderBg._baseObject)
+            targetObj = obj.data.getLocalPosition(obj.target)
+        else
+            targetObj = this._sliderHandle;
 
-        this._dropHandle(x);
+        const {x, y} = targetObj;
+        const value = this.isVertical ? y : x;
+        this._dropHandle(value);
     }
 
     _setDefaultValue(){
         if(!this.points.includes(this.defaultValue))
             this.defaultValue = this.points[0];
 
-        let x = this.points.indexOf(this.defaultValue) * this._sliderBg._baseObject.width / (this.points.length - 1);
+        let value = this.points.indexOf(this.defaultValue) * 
+                    this._sliderBg._baseObject[this.targetObjParam] / (this.points.length - 1);
 
-        this._setNewValue(x, this.defaultValue);
+        this._setNewValue(value, this.defaultValue);
     }
 
-    _dropHandle(x) {
+    _dropHandle(givenValue) {
         let value;
-        let handleX;
+        let coord;
 
         if(this.points.length <= 2){
-            handleX = x;
-            value = ~~(100 / this._sliderBg._baseObject.width * x);
+            coord = givenValue;
+            value = ~~(100 / this._sliderBg._baseObject[this.targetObjParam] * givenValue);
         }
         // calculate closest point
         else{
             for (let i = 0; i < this.points.length; i++) {
-                let pointX = i * this._sliderBg._baseObject.width / (this.points.length - 1);
+                let pointCoord = i * this._sliderBg._baseObject[this.targetObjParam] / (this.points.length - 1);
     
-                if (typeof (handleX) === 'number' && x - pointX < handleX - x) {
-                    handleX = handleX;
+                if (typeof (coord) === 'number' && givenValue - pointCoord < coord - givenValue) {
+                    coord = coord;
                 } else {
-                    handleX = pointX;
+                    coord = pointCoord;
                     value = this.points[i];
                 }
             }
         }
+        const data = { class: this.class, name: this.name, position: coord, value: value };
 
-        this._setNewValue(handleX, value);
+        this.emit(Urso.events.MODULES_OBJECTS_SLIDER_HANDLE_DROP, data);
+        this._setNewValue(coord, value);
     }
 
     _setFillMask(){
         if(!this._fillMask)
             return
 
-        const progress = (this._sliderHandle.x - this._sliderBg.x) * 100 / this._fillTexture._baseObject.width * 0.01;
-        this._fillMask.scaleX = progress;
+        const progress = (this._sliderHandle[this.positionKey] - this._sliderBg[this.positionKey]) * 
+                        100 / this._fillTexture._baseObject[this.targetObjParam] * 0.01;
+        
+        const scaleKey = this.isVertical ? 'scaleY' : 'scaleX';
+        this._fillMask[scaleKey] = progress;
     }
 
-    _setNewValue(x, value){
-        this._sliderHandle.x = x;
+    _setNewValue(coord, value){
+        this._sliderHandle[this.positionKey] = coord;
             
         if (this.currentValueText)
             this.currentValueText.text = value;
 
         this._setFillMask();
-        this.emit(Urso.events.MODULES_OBJECTS_SLIDER_SET_NEW_VALUE, { name: this.name, value: value, class: this.class });
     }
 
     _subscribeOnce() {

package/src/js/modules/observer/events.js

@@ -9,7 +9,8 @@ class ModulesObserverConfig {
             MODULES_INSTANCES_MODES_CHANGED: 'modules.instances.modes.changed',
             MODULES_OBJECTS_BUTTON_PRESS: 'modules.objects.button.press',
             MODULES_OBJECTS_HIT_AREA_PRESS: 'modules.objects.hitArea.press',
-            MODULES_OBJECTS_SLIDER_SET_NEW_VALUE: 'modules.objects.slider.setNewValue',
+            MODULES_OBJECTS_SLIDER_HANDLE_MOVE: 'modules.objects.slider.handleMove',
+            MODULES_OBJECTS_SLIDER_HANDLE_DROP: 'modules.objects.slider.handleDrop',
             MODULES_OBJECTS_TOGGLE_PRESS: 'modules.objects.toggle.press',
             MODULES_OBJECTS_TEXTINPUT_BLUR: 'modules.objects.textinput.blur',
             MODULES_OBJECTS_TEXTINPUT_INPUT: 'modules.objects.textinput.input',

package/src/js/modules/scenes/resolutions.js

@@ -4,7 +4,6 @@ class ModulesScenesResolutions {
         this.singleton = true;
         this._activeResolution = false; //object
         this._templateSize = { orientation: 0, width: 0, height: 0 };
-        this._orientations = { landscape: 'landscape', portrait: 'portrait' }
         this._currentOrientation = null;
 
         this.refreshSceneSize = this.refreshSceneSize.bind(this);
@@ -53,7 +52,7 @@ class ModulesScenesResolutions {
         console.log('[SCENE] New Template Size', this._templateSize);
 
         //update InstancesModes
-        Object.values(this._orientations).forEach((orientationValue) => Urso.removeInstancesMode(orientationValue + 'Orientation'));
+        Object.values(Urso.device.ScreenOrientation).forEach((orientationValue) => Urso.removeInstancesMode(orientationValue + 'Orientation'));
         Urso.addInstancesMode(orientation + 'Orientation');
 
         //send new resolution event
@@ -68,12 +67,9 @@ class ModulesScenesResolutions {
     };
 
     _getWindowSize() {
-        const iOS = Urso.device.iOS;
-        const { width, height } = document.body.getBoundingClientRect();
-
         let windowSize = {
-            width: iOS ? window.innerWidth : width,
-            height: iOS ? window.innerHeight : height
+            width: window.innerWidth,
+            height: window.innerHeight
         };
 
         if (window.devicePixelRatio && window.devicePixelRatio !== 1) {
@@ -85,7 +81,7 @@ class ModulesScenesResolutions {
     }
 
     _getOrientation(windowSize) {
-        return windowSize.width > windowSize.height ? this._orientations.landscape : this._orientations.portrait;  //todo move to constants
+        return windowSize.width > windowSize.height ? Urso.device.ScreenOrientation.LANDSCAPE : Urso.device.ScreenOrientation.PORTRAIT;
     }
 
     _getResolutionConfig(windowSize) {

package/src/js/modules/scenes/resolutionsConfig.js

@@ -2,14 +2,14 @@ class ModulesScenesResolutionsConfig {
     constructor() {
         this.singleton = true;
 
-        this._orientations = ['landscape', 'portrait'];
+        this._orientations = [Urso.device.ScreenOrientation.LANDSCAPE, Urso.device.ScreenOrientation.PORTRAIT]; //you can use only one orientation for config contents
 
         this.contents = [
             {
                 "name": 'default',
                 "width": 1920,
                 "height": 1080,
-                "orientation": 'landscape',
+                "orientation": Urso.device.ScreenOrientation.LANDSCAPE,
                 "adaptive": true
             }
         ];