[client] update to haxework

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

@@ -6,14 +6,14 @@ import haxework.color.ColorUtil;
 import haxework.view.form.ButtonView;
 import haxework.view.skin.ISkin;
 
-class ButtonSVGSkin implements ISkin<ButtonView> {
+@:style class ButtonSVGSkin implements ISkin<ButtonView> {
 
-    private var svg:String;
+    @:style(null) private var svg:String;
-    private var color:Color;
+    @:style(0) private var color:Null<Color>;
 
     private var svgs:Map<ButtonState, SVG>;
 
-    public function new(svg:String, color:Color) {
+    public function new(?svg:String, ?color:Color) {
         this.svg = svg;
         this.color = color;
         init();

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

@@ -1,15 +1,11 @@
 package ru.m.tankz;
 
-import haxework.view.geometry.Geometry;
+import haxework.color.Color;
+import haxework.view.geometry.Box;
 import haxework.view.geometry.HAlign;
+import haxework.view.geometry.SizeValue;
 import haxework.view.geometry.VAlign;
-import haxework.view.layout.Layout;
-import haxework.view.skin.Skin;
-import haxework.view.skin.SpriteSkin;
-import haxework.view.theme.GeometryStyle;
 import haxework.view.theme.ITheme;
-import haxework.view.theme.LayoutStyle;
-import haxework.view.theme.SkinStyle;
 import haxework.view.theme.Theme;
 import openfl.Assets;
 import ru.m.skin.ButtonSVGSkin;
@@ -31,53 +27,82 @@ class AppTheme extends Theme {
 
     override private function reload():Void {
         super.reload();
-        styles.put("light", [
+        data.set("light", [
-            new SkinStyle(Skin.color(colors.light)),
+            "skin.background.color" => colors.light,
         ]);
-        styles.put("dark", [
+
-            new SkinStyle(Skin.color(colors.dark)),
+        data.set("dark", [
+            "skin.background.color" => colors.dark,
         ]);
-        styles.put("font", text());
+
-        styles.put("text.header", text(null, bigFontSize).concat([
+        data.set("font", create([
-            new SkinStyle(new SpriteSkin({color: 0x000000, alpha: 0.1}, {color: colors.light})),
+            "_" => null,
-            new GeometryStyle(new Geometry().setPadding([50, 8]).setMargin([0, 0, 0, 30]))
+        ], ["text"]));
-        ]));
+
-        styles.put("button.menu", text(null, bigFontSize).concat([
+        data.set("text.header", create([
-            new SkinStyle(Skin.buttonColor(colors.light)),
+            "font.size" => bigFontSize,
-            new GeometryStyle(new Geometry().setSize(250, 50)),
+            "skin.background.color" => Color.fromInt(0x000000),
-        ]));
+            "skin.background.alpha" => 0.1,
-        styles.put("text.box", text().concat([
+            "skin.border.color" => colors.light,
-            new SkinStyle(new SpriteSkin({color: 0x000000, alpha: 0.1}, {color: colors.light})),
+            "geometry.padding" => Box.fromArray([50, 8]),
-        ]));
+            "geometry.margin" => Box.fromArray([0, 0, 0, 30]),
-        styles.put("text.box.active", text().concat([
+        ], ["text"]));
-            new SkinStyle(new SpriteSkin({color: 0x55aa55}, {color: 0x88dd88})),
+
-        ]));
+        data.set("button.menu", create([
-        styles.put("button.level", text(null, veryBigFontSize).concat([
+            "font.size" => bigFontSize,
-            new SkinStyle(Skin.buttonColor(colors.light)),
+            "geometry.padding" => Box.fromFloat(0),
-            new GeometryStyle(new Geometry().setSize(64, 64)),
+            "geometry.width" => SizeValue.fromInt(250),
+            "geometry.height" => SizeValue.fromInt(50),
+        ], ["button"]));
+
+        data.set("text.box", create([
+            "skin.background.color" => Color.fromInt(0x000000),
+            "skin.background.alpha" => 0.1,
+            "skin.border.color" => colors.light,
+        ], ["text"]));
+
+        data.set("text.box.active", create([
+            "skin.background.color" => Color.fromInt(0x55aa55),
+            "skin.background.alpha" => 1,
+            "skin.border.color" => Color.fromInt(0x88dd88),
+        ], ["text"]));
+
+        data.set("button.level", create([
+            "font.size" => veryBigFontSize,
+            "geometry.width" => SizeValue.fromInt(64),
+            "geometry.height" => SizeValue.fromInt(64),
+            "geometry.padding" => Box.fromFloat(0),
+        ], ["button"]));
+
+        data.set("container", create([
+            "font.size" => veryBigFontSize,
+            "geometry.width" => SizeValue.fromString("100%"),
+            "geometry.height" => SizeValue.fromString("100%"),
+            "layout.hAlign" => HAlign.CENTER,
+            "layout.vAlign" => VAlign.MIDDLE,
+        ], ["dark"]));
+
+        data.set("panel", create([
+            "font.size" => veryBigFontSize,
+            "geometry.width" => SizeValue.fromString("100%"),
+            "geometry.padding" => Box.fromArray([10, 5]),
+            "layout.vAlign" => VAlign.MIDDLE,
+        ], ["light"]));
+
+        data.set("window", create([
+            "geometry.padding" => Box.fromFloat(2),
+        ], ["dark", "border"]));
+
+        data.set("line", create([
+            "_" => null,
+        ], ["border"]));
+
+        data.set("window.close", create([
+            "skin" => function() return new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), colors.light),
+            "geometry.width" => SizeValue.fromInt(36),
+            "geometry.height" => SizeValue.fromInt(36),
         ]));
 
-        styles.put("container", [
-            new GeometryStyle(new Geometry().setSize("100%", "100%")),
-            new LayoutStyle(new Layout().setAlign(CENTER, MIDDLE)),
-            new SkinStyle(Skin.color(colors.dark)),
-        ]);
-        styles.put("panel", [
-            new GeometryStyle(new Geometry().setSize("100%", -1).setPadding([10, 5])),
-            new LayoutStyle(new Layout().setAlign(NONE, MIDDLE)),
-            new SkinStyle(Skin.color(colors.light)),
-        ]);
-        styles.put("window", [
-            new SkinStyle(new SpriteSkin({color: colors.dark}, {color: colors.border})),
-            new GeometryStyle(new Geometry().setPadding(2)),
-        ]);
-        styles.put("line", [
-            new SkinStyle(Skin.color(colors.border)),
-        ]);
-        styles.put("window.close", [
-            new GeometryStyle(new Geometry().setSize(36, 36)),
-            new SkinStyle(new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), colors.light)),
-        ]);
         registerButton("settings", "cog-solid.svg");
         registerButton("close", "times-circle-solid.svg");
         registerButton("next", "arrow-alt-circle-right-solid.svg");
@@ -87,13 +112,15 @@ class AppTheme extends Theme {
     }
 
     private function registerButton(name:String, resource:String):Void {
-        styles.put('button.$name', [
+        data.set('button.$name', [
-            new GeometryStyle(new Geometry().setSize(42, 42)),
+            "geometry.width" => SizeValue.fromInt(42),
-            new SkinStyle(new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light)),
+            "geometry.height" => SizeValue.fromInt(42),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light),
         ]);
-        styles.put('button.$name.small', [
+        data.set('button.$name.small', [
-            new GeometryStyle(new Geometry().setSize(32, 32)),
+            "geometry.width" => SizeValue.fromInt(32),
-            new SkinStyle(new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light)),
+            "geometry.height" => SizeValue.fromInt(32),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light),
         ]);
     }
 

src/client/haxe/ru/m/tankz/view/GamepadView.hx

@@ -4,6 +4,7 @@ import flash.display.Graphics;
 import flash.display.Stage;
 import flash.events.MouseEvent;
 import flash.events.TouchEvent;
+import haxework.color.Color;
 import haxework.signal.Signal;
 import haxework.view.skin.ISkin;
 import haxework.view.SpriteView;
@@ -19,11 +20,11 @@ typedef ActionArea = {
     var rect:Rectangle;
 }
 
-class GamepadSkin implements ISkin<GamepadView> {
+@:style class GamepadSkin implements ISkin<GamepadView> {
 
-    public var color(default, default):Int;
+    @:style(0) public var color(default, default):Null<Color>;
 
-    public function new(color:Int = 0) {
+    public function new(?color:Color) {
         this.color = color;
     }
 

src/client/haxe/ru/m/tankz/view/common/RecordView.yaml

@@ -10,22 +10,22 @@ views:
   - id: date
     $type: haxework.view.form.LabelView
     style: text.box
-    geometry.width: 250
+    geometry.width: 200
     geometry.height: 38
   - id: type
     $type: haxework.view.form.LabelView
     style: text.box
-    geometry.width: 250
+    geometry.width: 200
     geometry.height: 38
   - id: level
     $type: haxework.view.form.LabelView
     style: text.box
-    geometry.width: 250
+    geometry.width: 100
     geometry.height: 38
   - id: preset
     $type: haxework.view.form.LabelView
     style: text.box
-    geometry.width: 250
+    geometry.width: 100
     geometry.height: 38
   - id: delete
     $type: haxework.view.form.ButtonView