[client] add preloader

gulpfile.js

@@ -68,6 +68,7 @@ const client = new Project(
         name: 'client',
         sources: ['src/client/haxe'],
         main: 'ru.m.tankz.Client',
+        preloader: 'ru.m.tankz.Preloader',
         assets: [
             'src/client/resources',
         ],
@@ -97,6 +98,7 @@ const editor = new Project(
         name: 'editor',
         sources: ['src/client/haxe', 'src/editor/haxe'],
         main: 'ru.m.tankz.editor.Editor',
+        preloader: 'ru.m.tankz.Preloader',
         assets: [
             'src/client/resources',
             'src/editor/resources',

package.json

@@ -7,7 +7,7 @@
         "gulp": "^4.0.0",
         "gulp-add": "0.0.2",
         "gulp-clean": "^0.4.0",
-        "gulp-haxetool": "^0.0.16"
+        "gulp-haxetool": "^0.0.17"
     },
     "haxeDependencies": {
         "haxework": "git@bitbucket.org:shmyga/haxework.git",

src/client/haxe/ru/m/tankz/Preloader.hx

@@ -0,0 +1,141 @@
+package ru.m.tankz;
+
+import flash.display.Shape;
+import flash.display.Sprite;
+import flash.events.Event;
+import flash.events.ProgressEvent;
+import flash.Lib;
+import haxework.view.core.Size;
+
+class Progress extends Sprite {
+
+    public var color(default, set):Int = 0;
+    public var backColor(default, set):Int = 0;
+    public var progress(default, set):Float = 0;
+    public var size(default, set):Size = [0, 0];
+    public var radius(get, null):Float;
+
+    private var maskShape:Shape;
+    private var toRedraw:Bool;
+
+    public function new() {
+        super();
+        maskShape = new Shape();
+        addChild(maskShape);
+        mask = maskShape;
+    }
+
+    private inline function get_radius():Float {
+        return Math.min(size.width, size.height) / 2;
+    }
+
+    private function set_color(value:Int):Int {
+        if (color != value) {
+            color = value;
+            toRedraw = true;
+        }
+        return color;
+    }
+
+    private function set_backColor(value:Int):Int {
+        if (backColor != value) {
+            backColor = value;
+            toRedraw = true;
+        }
+        return color;
+    }
+
+    private function set_progress(value:Float):Float {
+        if (progress != value) {
+            progress = value;
+            toRedraw = true;
+        }
+        return progress;
+    }
+
+    private function set_size(value:Size):Size {
+        if (size != value) {
+            size = value;
+            toRedraw = true;
+        }
+        return size;
+    }
+
+    public function update():Void {
+        if (toRedraw) {
+            redraw();
+            redrawMask();
+            toRedraw = false;
+        }
+    }
+
+    public function redraw():Void {
+        graphics.clear();
+        graphics.beginFill(color);
+        graphics.drawCircle(radius, radius, radius);
+        graphics.beginFill(backColor);
+        graphics.drawCircle(radius, radius, radius / 2);
+        graphics.endFill();
+    }
+
+    public function redrawMask():Void {
+        maskShape.graphics.clear();
+        maskShape.graphics.beginFill(0x00ff00);
+        maskShape.graphics.moveTo(radius, radius);
+        var sides = 6;
+        var rotation = (-(Math.PI) / 2);
+        var r = radius / Math.cos(1/sides * Math.PI);
+        var lineToRadians = function(rads:Float):Void {
+            maskShape.graphics.lineTo(Math.cos(rads) * r + radius, Math.sin(rads) * r + radius);
+        };
+        var sidesToDraw:Int = Math.floor(progress * sides);
+        for (i in 0...sidesToDraw + 1) {
+            lineToRadians((i / sides) * (Math.PI * 2) + rotation);
+        }
+        if (progress * sides != sidesToDraw) {
+            lineToRadians(progress * (Math.PI * 2) + rotation);
+        }
+        maskShape.graphics.endFill();
+    }
+}
+
+class Preloader extends Sprite {
+
+    private var progress:Progress;
+
+    public function new() {
+        super();
+        Lib.current.stage.color = Style.lightColor;
+        progress = new Progress();
+        progress.color = Style.darkColor;
+        progress.backColor = Style.lightColor;
+        progress.size = [200, 200];
+        addChild(progress);
+        onResize(null);
+        Lib.current.stage.addEventListener(Event.RESIZE, onResize);
+        Lib.current.stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
+        Lib.current.stage.addEventListener(ProgressEvent.PROGRESS, onProgress);
+        addEventListener(Event.COMPLETE, onComplete);
+    }
+
+    private function onResize(event:Event):Void {
+        progress.x = (Lib.current.stage.stageWidth - progress.size.width) / 2;
+        progress.y = (Lib.current.stage.stageHeight - progress.size.height) / 2;
+    }
+
+    private function onEnterFrame(event:Event):Void {
+        progress.update();
+    }
+
+    private function onProgress(event:ProgressEvent):Void {
+        progress.progress = event.bytesLoaded / event.bytesTotal;
+    }
+
+    private function onComplete(event:Event):Void {
+        progress.update();
+        Lib.current.stage.removeEventListener(Event.RESIZE, onResize);
+        Lib.current.stage.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
+        Lib.current.stage.removeEventListener(ProgressEvent.PROGRESS, onProgress);
+        removeEventListener(Event.COMPLETE, onComplete);
+    }
+}

src/client/haxe/ru/m/tankz/Style.hx

@@ -18,16 +18,16 @@ class Style {
 
     @:provide private static var resources:IResources;
 
-    private static var lightColor = 0x95937D;
-    private static var darkColor = 0x777564;
-    private static var textColor = 0xE7E0BB;
+    public static var lightColor = 0x95937D;
+    public static var darkColor = 0x777564;
+    public static var textColor = 0xE7E0BB;
 
-    private static var baseFontSize = 18;
-    private static var bigFontSize = 22;
-    private static var veryBigFontSize = 24;
+    public static var baseFontSize = 18;
+    public static var bigFontSize = 22;
+    public static var veryBigFontSize = 24;
 
-    private static var fontFamily = "Courirer New";
-    private static var fontEmbed = false;
+    public static var fontFamily = "Courirer New";
+    public static var fontEmbed = false;
 
     public static function text(color):ISkin<ITextView> {
         return Skin.text(color, baseFontSize, fontFamily, fontEmbed);