[client] update haxework. ep6

src/client/haxe/ru/m/draw/BitmapUtil.hx

@@ -1,10 +1,10 @@
 package ru.m.draw;
 
+import haxework.color.Color;
 import flash.geom.ColorTransform;
 import flash.geom.Rectangle;
 import flash.display.BitmapData;
 
-
 class BitmapUtil {
 
     public static function colorize(data: BitmapData, color: Color):BitmapData {

src/client/haxe/ru/m/skin/ButtonSVGSkin.hx

@@ -0,0 +1,44 @@
+package ru.m.skin;
+
+import haxework.color.ColorUtil;
+import haxework.color.Color;
+import haxework.gui.ButtonView;
+import format.SVG;
+import haxework.gui.skin.ISkin;
+
+class ButtonSVGSkin implements ISkin<ButtonView> {
+
+    private var svg:String;
+    private var color:Color;
+
+    private var svgs:Map<ButtonState, SVG>;
+
+    public function new(svg:String, color:Color) {
+        this.svg = svg;
+        this.color = color;
+        init();
+    }
+
+    private inline function buildSVG(color:Color):SVG {
+        return new SVG(StringTools.replace(svg, "currentColor", '#${StringTools.hex(color)}'));
+    }
+
+    private function init():Void {
+        svgs = new Map<ButtonState, SVG>();
+        svgs.set(ButtonState.UP, buildSVG(color));
+        svgs.set(ButtonState.DOWN, buildSVG(ColorUtil.diff(color, -24)));
+        svgs.set(ButtonState.OVER, buildSVG(ColorUtil.diff(color, 24)));
+    }
+
+    public function draw(view:ButtonView):Void {
+        var svg = svgs.get(view.state);
+        var graphics = view.content.graphics;
+        graphics.beginFill(0, 0);
+        graphics.drawRect(0, 0, view.width, view.height);
+        graphics.beginFill(color);
+        graphics.lineStyle(2, ColorUtil.multiply(color, 1.5));
+        svg.render(graphics, 0, 0, Std.int(view.width * 0.8), Std.int(view.height * 0.8));
+        graphics.lineStyle();
+        graphics.endFill();
+    }
+}

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

@@ -1,11 +1,10 @@
 package ru.m.tankz;
 
-import haxework.gui.utils.ColorUtils;
+import haxework.color.ColorUtil;
 import haxework.gui.skin.Skin;
-import haxework.gui.skin.ButtonBitmapSkin;
-import haxework.gui.utils.DrawUtil;
 import haxework.resources.IResources;
 import openfl.Assets;
+import ru.m.skin.ButtonSVGSkin;
 
 class Style {
 
@@ -17,40 +16,40 @@ class Style {
     private static var fontFamily = "Courirer New";
 
     public static function register() {
-        var button = new ButtonBitmapSkin();
-        button.fillType = FillType.NINEPATH;
-        button.upImage = Assets.getBitmapData("resources/image/ui/button/normal.png");
-        button.downImage = Assets.getBitmapData("resources/image/ui/button/down.png");
-        button.overImage = Assets.getBitmapData("resources/image/ui/button/over.png");
-
         resources.skin.put("light", [Skin.color(lightColor)]);
         resources.skin.put("dark", [Skin.color(darkColor)]);
         resources.skin.put("text", [Skin.text(textColor, 16, fontFamily)]);
         resources.skin.put("button", [
-            button,
+            Skin.buttonColor(lightColor),
             Skin.text(textColor, 18, fontFamily),
-            Skin.size(250, 60)
+            Skin.size(250, 50)
         ]);
         resources.skin.put("button.simple", [
             Skin.buttonColor(lightColor),
             Skin.text(textColor, 16, fontFamily),
-            Skin.size(100, 36),
+            Skin.size(100, 38),
         ]);
         resources.skin.put("button.tab", [
             Skin.tabColor(lightColor),
             Skin.text(textColor, 16, fontFamily),
-            Skin.size(200, 36),
-        ]);
-        resources.skin.put("button.close", [
-            new ButtonBitmapSkin(Assets.getBitmapData("resources/image/ui/close.png"))
+            Skin.size(200, 38),
         ]);
         resources.skin.put("border", [
-            Skin.border(ColorUtils.multiply(lightColor, 1.5), 1, 2),
+            Skin.border(ColorUtil.multiply(lightColor, 1.5), 1, 2),
         ]);
         resources.skin.put("button.level", [
             Skin.buttonColor(lightColor),
             Skin.text(textColor, 24, fontFamily),
             Skin.size(64, 64),
         ]);
+
+        resources.skin.put("button.settings", [
+            Skin.size(64, 64),
+            new ButtonSVGSkin(Assets.getText("resources/image/icon/cog-solid.svg"), lightColor)
+        ]);
+        resources.skin.put("button.close", [
+            Skin.size(64, 64),
+            new ButtonSVGSkin(Assets.getText("resources/image/icon/times-circle-solid.svg"), lightColor)
+        ]);
     }
 }

src/client/haxe/ru/m/tankz/frame/StartFrame.yaml

@@ -7,6 +7,7 @@ views:
   image: $asset:image:resources/image/ui/logo.png
   geometry.margin.bottom: 15
 - $type: haxework.gui.VGroupView
+  layout.margin: 3
   views:
   - id: classic
     $type: haxework.gui.ButtonView
@@ -40,7 +41,8 @@ views:
   geometry.margin.bottom: 10
   geometry.vAlign: bottom
   geometry.hAlign: left
-  skin:
-    - $type: haxework.gui.skin.ButtonBitmapSkin
-      image: $asset:image:resources/image/ui/settings.png
+  skinId: button.settings
+  # skin:
+  #   - $type: haxework.gui.skin.ButtonBitmapSkin
+  #     image: $asset:image:resources/image/ui/settings.png
   +onPress: $this:onPress

src/client/haxe/ru/m/tankz/frame/common/PlayerView.hx

@@ -1,19 +1,17 @@
 package ru.m.tankz.frame.common;
 
-import ru.m.draw.Color;
-import ru.m.tankz.bundle.IConfigBundle;
-import haxework.gui.skin.ColorSkin;
+import haxework.color.Color;
 import haxework.gui.ButtonView;
 import haxework.gui.HGroupView;
 import haxework.gui.LabelView;
 import haxework.gui.list.ListView;
-import haxework.gui.skin.ButtonBitmapSkin;
+import haxework.gui.skin.Skin;
 import openfl.Assets;
+import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.control.Control;
 import ru.m.tankz.game.GameState;
 import ru.m.tankz.Type;
 
-
 @:template class PlayerView extends HGroupView implements IListItemView<PlayerId> {
 
     public var item_index(default, default):Int;
@@ -25,14 +23,10 @@ import ru.m.tankz.Type;
     @:provide var state:GameState;
     @:provide var configBundle:IConfigBundle;
 
-    private function init():Void {
-        control.onPress.connect(onPress);
-    }
-
     private function set_data(value:PlayerId):PlayerId {
         data = value;
         indexLabel.text = '${value.team} ${Std.string(data.index + 1)}';
-        var color:Color = 0xffffff;
+        var color = 0xffffff;
         var config = configBundle.get(state.type);
         var preset = config.getPreset(state.presetId);
         for (team in preset.teams) {
@@ -49,16 +43,15 @@ import ru.m.tankz.Type;
                 preset.teams;
             }
         }
-        indexLabel.fontColor = cast color;
+        indexLabel.fontColor = color;
         var controlType = state.control.get(value);
         var image = Assets.getBitmapData('resources/image/ui/control/${controlType}.png');
-        control.skin = [new ButtonBitmapSkin(image)];
-        // ToDo:
-        //control.geometry.size.fixed = [image.width, image.height];
+        control.skin = [Skin.buttonBitmap(image)];
+        indexLabel.update();
         return data;
     }
 
-    public function onPress(view:ButtonView):Void {
+    public function toggleControl():Void {
         if (data != null && data.index > -1) {
             var controlType = switch state.control.get(data) {
                 case Control.BOT: Control.HUMAN;

src/client/haxe/ru/m/tankz/frame/common/PlayerView.yaml

@@ -6,7 +6,6 @@ layout.margin: 10
 views:
   - id: index
     $type: haxework.gui.LabelView
-    skinId: text
     geometry.size.stretch: true
     skin:
       - $type: haxework.gui.skin.ColorSkin
@@ -16,3 +15,4 @@ views:
     shadowColor: 0x000000
   - id: control
     $type: haxework.gui.ButtonView
+    +onPress: $code:toggleControl()

src/client/haxe/ru/m/tankz/network/NetworkManager.hx

@@ -1,5 +1,6 @@
 package ru.m.tankz.network;
 
+import haxework.signal.Signal;
 import ru.m.tankz.proto.pack.GameRequest;
 import ru.m.tankz.proto.core.GameProto;
 import ru.m.tankz.proto.pack.StartGameRequest;
@@ -11,7 +12,6 @@ import ru.m.tankz.proto.pack.JoinGameRequest;
 import ru.m.tankz.proto.pack.LeaveGameRequest;
 import ru.m.tankz.proto.pack.CreateGameRequest;
 import ru.m.connect.IConnection;
-import ru.m.signal.Signal;
 import ru.m.tankz.proto.core.GameInfoProto;
 import ru.m.tankz.proto.pack.ListGameRequest;
 import ru.m.tankz.proto.pack.LoginRequest;

src/client/haxe/ru/m/tankz/render/AnimateBundle.hx

@@ -1,7 +1,7 @@
 package ru.m.tankz.render;
 
+import haxework.color.Color;
 import ru.m.draw.BitmapUtil;
-import ru.m.draw.Color;
 import flash.display.BitmapData;
 import openfl.Assets;
 import ru.m.animate.Animate;

src/client/resources/image/icon/cog-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path></svg>

src/client/resources/image/icon/times-circle-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>