@urso/core 0.4.7 → 0.4.11

package/package.json

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

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

@@ -7,8 +7,10 @@ class ComponentsFullscreenController extends ComponentsBaseController {
 
     this._fullscreenActivator = null;
     this._resolutionsConfig = null;
+    this.lastResizeFullscreenResult;
 
     this.createActivator();
+    this._resizeHandler();
   }
 
   createActivator() {
@@ -53,7 +55,14 @@ class ComponentsFullscreenController extends ComponentsBaseController {
   }
 
   _resizeHandler() {
-    Urso.localData.set('fullscreen.isFullscreen', this.isFullscreen);
+    const isFullscreen = this.isFullscreen;
+
+    if (this.lastResizeFullscreenResult === isFullscreen)
+      return;
+
+    this.lastResizeFullscreenResult = isFullscreen;
+    Urso.localData.set('fullscreen.isFullscreen', isFullscreen);
+    this.emit(Urso.events.COMPONENTS_FULLSCREEN_CHANGE, isFullscreen);
   }
 
   _subscribeOnce() {

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

@@ -40,6 +40,10 @@ class ComponentsFullscreenIos {
     });
   }
 
+  get isFullscreen() {
+    return this._isFullscreen;
+  }
+
   get _isFullscreen() {
     const minFactor = 0.51;
     const deviceFactor = screen.width / screen.height;
@@ -49,7 +53,7 @@ class ComponentsFullscreenIos {
 
     return !(
       this._isPortrait ?
-        factor - deviceFactor < 0.1:
+        factor - deviceFactor < 0.1 :
         factor > minFactor
     );
   }
@@ -87,8 +91,8 @@ class ComponentsFullscreenIos {
     this._div.style.zIndex = needShowDiv ? 1 : -1;
     clearTimeout(this._scrollTimeout)
     this._scrollTimeout = setTimeout(() => {
-      if(needShowDiv)
-        window.scrollTo(0,0);
+      if (needShowDiv)
+        window.scrollTo(0, 0);
     }, 200);
   }
 

package/src/js/extra/_info.js

@@ -17,6 +17,8 @@ require('./setTimeout');
 import Howler from 'howler';
 window.Howler = Howler;
 
+require("./pixiPatch.js");
+
 Urso.Core.Extra = {
     BrowserEvents: require('./browserEvents.js')
 };

package/src/js/extra/pixiPatch.js

@@ -0,0 +1,77 @@
+/**
+ * ModulesObjectsModelsText  fillCustomColors patch
+ */
+
+
+/**
+ * Render the text with letter-spacing.
+ *
+ * @param text - The text to draw
+ * @param x - Horizontal position to draw the text
+ * @param y - Vertical position to draw the text
+ * @param isStroke - Is this drawing for the outside stroke of the
+ *  text? If not, it's for the inside fill
+ */
+PIXI.Text.prototype.drawLetterSpacing = function (text, x, y, isStroke) {
+    if (isStroke === void 0) { isStroke = false; }
+    var style = this._style;
+    // letterSpacing of 0 means normal
+    var letterSpacing = style.letterSpacing;
+    // Checking that we can use moddern canvas2D api
+    // https://developer.chrome.com/origintrials/#/view_trial/3585991203293757441
+    // note: this is unstable API, Chrome less 94 use a `textLetterSpacing`, newest use a letterSpacing
+    // eslint-disable-next-line max-len
+    var supportLetterSpacing = 'letterSpacing' in CanvasRenderingContext2D.prototype
+        || 'textLetterSpacing' in CanvasRenderingContext2D.prototype;
+
+    if ((letterSpacing === 0 || supportLetterSpacing) && (!this.fillCustomColors || this.fillCustomColors.length === 0)) { //colors patch in if state
+        if (supportLetterSpacing) {
+            this.context.letterSpacing = letterSpacing;
+            this.context.textLetterSpacing = letterSpacing;
+        }
+        if (isStroke) {
+            this.context.strokeText(text, x, y);
+        }
+        else {
+            this.context.fillText(text, x, y);
+        }
+        return;
+    }
+    var currentPosition = x;
+
+    var customColors = [];//colors patch block
+    var textIndexOffset = this.text.indexOf(text);
+    if (this.fillCustomColors) {
+        for (var k in this.fillCustomColors){
+            var colorsParams = this.fillCustomColors[k];
+            customColors[colorsParams.position] = colorsParams.color;
+        }
+    }
+
+    // Using Array.from correctly splits characters whilst keeping emoji together.
+    // This is not supported on IE as it requires ES6, so regular text splitting occurs.
+    // This also doesn't account for emoji that are multiple emoji put together to make something else.
+    // Handling all of this would require a big library itself.
+    // https://medium.com/@giltayar/iterating-over-emoji-characters-the-es6-way-f06e4589516
+    // https://github.com/orling/grapheme-splitter
+    var stringArray = Array.from ? Array.from(text) : text.split('');
+    var previousWidth = this.context.measureText(text).width;
+    var currentWidth = 0;
+    for (var i = 0; i < stringArray.length; ++i) {
+        var currentChar = stringArray[i];
+
+        if (isStroke) {
+            this.context.strokeText(currentChar, currentPosition, y);
+        }
+        else {
+            if (customColors[textIndexOffset + i]) { //colors patch block
+                this.context.fillStyle = customColors[textIndexOffset + i];
+            }
+
+            this.context.fillText(currentChar, currentPosition, y);
+        }
+        currentWidth = this.context.measureText(text.substring(i + 1)).width;
+        currentPosition += previousWidth - currentWidth + letterSpacing;
+        previousWidth = currentWidth;
+    }
+};

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

@@ -6,6 +6,7 @@ class ModulesAssetsService {
 
         this._currentQuality = 'auto';
         this._addedAssetsCache = [];
+        this.lazyLoadProcessStarted = false;
     };
 
     getQuality() {
@@ -30,7 +31,7 @@ class ModulesAssetsService {
     startLoad(callback) {
         this.loadGroup(
             this.getInstance('Config').loadingGroups.initial,
-            (() => { callback(); this._continueLazyLoad(); }).bind(this)
+            (() => { callback(); this._startLazyLoad(); }).bind(this)
         )
     }
 
@@ -263,6 +264,14 @@ class ModulesAssetsService {
         this.assets[model.loadingGroup].push(model);
     }
 
+    _startLazyLoad() {
+        if (this.lazyLoadProcessStarted)
+            return;
+
+        this.lazyLoadProcessStarted = true;
+        this._continueLazyLoad();
+    }
+
     _continueLazyLoad(step) {
         if (!step)
             step = 0;

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

@@ -20,6 +20,7 @@ class ModulesObjectsModelsText extends Urso.Core.Modules.Objects.BaseModel {
         this.fontStyle = Urso.helper.recursiveGet('fontStyle', params, false); //'italic'
         this.fontWeight = Urso.helper.recursiveGet('fontWeight', params, false); // 'bold'
         this.fill = Urso.helper.recursiveGet('fill', params, '#000000'); // gradient  ['#ffffff', '#00ff99']
+        this.fillCustomColors = Urso.helper.recursiveGet('fillCustomColors', params, false); //or array [{position:12,color:'#000000'},...]
         this.stroke = Urso.helper.recursiveGet('stroke', params, 'black');
         this.strokeThickness = Urso.helper.recursiveGet('strokeThickness', params, 0);
         this.dropShadow = Urso.helper.recursiveGet('dropShadow', params, false);
@@ -38,6 +39,10 @@ class ModulesObjectsModelsText extends Urso.Core.Modules.Objects.BaseModel {
             this._originalModel.text = this.text = Urso.i18n.get(this.localeId, this.localeVariables);
 
         this._baseObject = new PIXI.Text(this.text);
+
+        if (this.fillCustomColors) {
+            this._baseObject.fillCustomColors = this.fillCustomColors;
+        }
     };
 
     _newLocaleHandler() {

package/src/js/modules/objects/proxy.js

@@ -161,6 +161,7 @@ class ModulesObjectsProxy {
             'fontStyle': 'style.fontStyle',
             'fontWeight': 'style.fontWeight',
             'fill': 'style.fill',
+            'fillCustomColors': 'fillCustomColors',
             'stroke': 'style.stroke',
             'strokeThickness': 'style.strokeThickness',
             'dropShadow': 'style.dropShadow',

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

@@ -3,6 +3,7 @@ class ModulesObserverConfig {
         this.singleton = true;
 
         this.list = {
+            COMPONENTS_FULLSCREEN_CHANGE: 'components.fullscreen.change',
             MODULES_ASSETS_GROUP_LOADED: 'modules.assets.group.loaded',
             MODULES_ASSETS_LOAD_PROGRESS: 'modules.assets.load.progress',
             MODULES_ASSETS_LAZYLOAD_FINISHED: 'modules.assets.lazyLoad.finished',
@@ -28,6 +29,8 @@ class ModulesObserverConfig {
             MODULES_SCENES_DISPLAY_START: 'modules.scenes.display.start',
             MODULES_SCENES_DISPLAY_FINISHED: 'modules.scenes.display.finished',
             MODULES_SCENES_MOUSE_NEW_POSITION: 'modules.scenes.mouse.newPosition',
+            MODULES_SCENES_PAUSE: 'modules.scenes.pause',
+            MODULES_SCENES_RESUME: 'modules.scenes.resume',
             MODULES_SCENES_UPDATE: 'modules.scenes.update',
             EXTRA_BROWSEREVENTS_WINDOW_PRE_RESIZE: 'extra.browserEvents.window.pre.resize',
             EXTRA_BROWSEREVENTS_WINDOW_RESIZE: 'extra.browserEvents.window.resize',

package/src/js/modules/scenes/service.js

@@ -26,6 +26,7 @@ class ModulesScenesService {
      */
     pause() {
         this.getInstance('PixiWrapper').pause();
+        this.emit(Urso.events.MODULES_SCENES_PAUSE);
     }
 
     /**
@@ -33,6 +34,7 @@ class ModulesScenesService {
      */
     resume() {
         this.getInstance('PixiWrapper').resume();
+        this.emit(Urso.events.MODULES_SCENES_RESUME);
     }
 
     /**