up version

WORK.md

@@ -6,7 +6,6 @@
 * map packs (create in editor, import in game, save imported in local storage)
 * update bots
 * improve bonuses system
-* gamepad support
 * screen gamepad on mobiles
 * resize render on mobiles
-* [bug] game progress broken
+* save state in classic game

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "tankz",
-  "version": "0.14.4",
+  "version": "0.15.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -611,9 +611,9 @@
       }
     },
     "chownr": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
-      "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.2.tgz",
+      "integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==",
       "dev": true
     },
     "class-utils": {
@@ -1637,9 +1637,9 @@
           "dev": true
         },
         "process-nextick-args": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
           "dev": true
         },
         "readable-stream": {
@@ -2440,13 +2440,13 @@
       }
     },
     "global": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
-      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
       "dev": true,
       "requires": {
         "min-document": "^2.19.0",
-        "process": "~0.5.1"
+        "process": "^0.11.10"
       }
     },
     "global-modules": {
@@ -2956,9 +2956,9 @@
           "dev": true
         },
         "process-nextick-args": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
           "dev": true
         },
         "readable-stream": {
@@ -3076,9 +3076,9 @@
       }
     },
     "gulp-haxetool": {
-      "version": "0.0.19",
-      "resolved": "https://registry.npmjs.org/gulp-haxetool/-/gulp-haxetool-0.0.19.tgz",
-      "integrity": "sha512-DpIadM5wwQSiQCNRPiaa7iecIccLDPVRY6xNzFTo2g9yyI4ccW4v3ITlaAh92jL9v5J7aEdc8HxnefDFKUI9Kg==",
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/gulp-haxetool/-/gulp-haxetool-0.0.20.tgz",
+      "integrity": "sha512-ePL/TktdKuThiNY6I/UGiM9FH5gXucQDFBM42OhrUSWASEwdPOJUK3T39SXMX0taUngLpn3RNwHk8LbnA/rl3A==",
       "dev": true,
       "requires": {
         "ansi-colors": "^1.1.0",
@@ -3161,9 +3161,9 @@
           }
         },
         "process-nextick-args": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
           "dev": true
         },
         "readable-stream": {
@@ -3518,9 +3518,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
-      "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==",
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
+      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=",
       "dev": true
     },
     "iconv-lite": {
@@ -5036,9 +5036,9 @@
           "dev": true
         },
         "process-nextick-args": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
           "dev": true
         },
         "readable-stream": {
@@ -5138,9 +5138,9 @@
       "dev": true
     },
     "process": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
-      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
       "dev": true
     },
     "process-nextick-args": {
@@ -5577,18 +5577,24 @@
       },
       "dependencies": {
         "http-errors": {
-          "version": "1.7.2",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-          "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+          "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
           "dev": true,
           "requires": {
             "depd": "~1.1.2",
-            "inherits": "2.0.3",
+            "inherits": "2.0.4",
             "setprototypeof": "1.1.1",
             "statuses": ">= 1.5.0 < 2",
             "toidentifier": "1.0.0"
           }
         },
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -6021,18 +6027,18 @@
       "dev": true
     },
     "tar": {
-      "version": "4.4.8",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
-      "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.10.tgz",
+      "integrity": "sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==",
       "dev": true,
       "requires": {
         "chownr": "^1.1.1",
         "fs-minipass": "^1.2.5",
-        "minipass": "^2.3.4",
-        "minizlib": "^1.1.1",
+        "minipass": "^2.3.5",
+        "minizlib": "^1.2.1",
         "mkdirp": "^0.5.0",
         "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.2"
+        "yallist": "^3.0.3"
       }
     },
     "through": {
@@ -6730,12 +6736,13 @@
       "dev": true
     },
     "websocket-driver": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
-      "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
+      "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
       "dev": true,
       "requires": {
-        "http-parser-js": ">=0.4.0",
+        "http-parser-js": ">=0.4.0 <0.4.11",
+        "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
       }
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tankz",
-    "version": "0.15.0",
+    "version": "0.16.0",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",
@@ -8,7 +8,7 @@
         "gulp-add": "0.0.2",
         "gulp-clean": "^0.4.0",
         "gulp-foreach": "^0.1.0",
-        "gulp-haxetool": "^0.0.19",
+        "gulp-haxetool": "0.0.20",
         "gulp-zip": "^5.0.0",
         "yargs": "^13.2.4"
     },

src/client/haxe/ru/m/display/DisplayObjectContainerExtender.hx

@@ -5,10 +5,18 @@ import flash.display.DisplayObjectContainer;
 
 class DisplayObjectContainerExtender {
 
+    public static function childrenIterator():Iterator<DisplayObject> {
+        throw "Not implemented";
+    }
+
     public static function removeChildSafety(self:DisplayObjectContainer, child:DisplayObject):DisplayObject {
         if (self.contains(child)) {
             return self.removeChild(child);
         }
         return null;
     }
+
+    public static function containsRecursivle(child:DisplayObject):Bool {
+        throw "Not implemented";
+    }
 }

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

@@ -2,33 +2,35 @@ package ru.m.skin;
 
 import format.SVG;
 import haxework.color.Color;
-import haxework.color.ColorUtil;
-import haxework.view.ButtonView;
+import haxework.view.form.ButtonView;
 import haxework.view.skin.ISkin;
 
-class ButtonSVGSkin implements ISkin<ButtonView> {
+using StringTools;
+using haxework.color.ColorUtil;
 
-    private var svg:String;
-    private var color:Color;
+@:style class ButtonSVGSkin implements ISkin<ButtonView> {
+
+    @:style(null) private var svg:String;
+    @: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();
     }
 
     private inline function buildSVG(color:Color):SVG {
-        return new SVG(StringTools.replace(svg, "currentColor", '#${StringTools.hex(color)}'));
+        return new SVG(svg.replace("currentColor", '#${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)));
-        svgs.set(ButtonState.DISABLED, buildSVG(ColorUtil.grey(color)));
+        svgs = new Map();
+        svgs.set(UP, buildSVG(color));
+        svgs.set(DOWN, buildSVG(color.diff(-24)));
+        svgs.set(OVER, buildSVG(color.diff(24)));
+        svgs.set(DISABLED, buildSVG(color.grey()));
     }
 
     public function draw(view:ButtonView):Void {
@@ -37,7 +39,8 @@ class ButtonSVGSkin implements ISkin<ButtonView> {
         graphics.beginFill(0, 0);
         graphics.drawRect(0, 0, view.width, view.height);
         graphics.beginFill(color);
-        graphics.lineStyle(2, ColorUtil.multiply(color, 1.5));
+        graphics.lineStyle(2, color.multiply(1.5));
+        // ToDo: padding
         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/AppTheme.hx

@@ -0,0 +1,126 @@
+package ru.m.tankz;
+
+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.theme.ITheme;
+import haxework.view.theme.Theme;
+import openfl.Assets;
+import ru.m.skin.ButtonSVGSkin;
+
+using haxework.color.ColorUtil;
+
+class AppTheme extends Theme {
+
+    public static var COLORS(default, never):ThemeColors = {
+        light: 0x95937D,
+        dark: 0x777564,
+        text: 0xE7E0BB,
+        active: 0xFFFF00,
+    }
+
+    public function new() {
+        super({embed: true}, COLORS);
+    }
+
+    override private function reload():Void {
+        super.reload();
+        register(new Style("light", [
+            "skin.background.color" => colors.light,
+        ]));
+
+        register(new Style("dark", [
+            "skin.background.color" => colors.dark,
+        ]));
+
+        register(new Style("font", [
+            "_" => null,
+        ], ["text"]));
+
+        register(new Style("text.header", [
+            "font.size" => fontSize.big,
+            "skin.background.color" => Color.fromInt(0x000000),
+            "skin.background.alpha" => 0.1,
+            "skin.border.color" => colors.light,
+            "geometry.padding" => Box.fromArray([50, 8]),
+            "geometry.margin" => Box.fromArray([0, 0, 30, 30]),
+        ], ["text"]));
+
+        register(new Style("button.menu", [
+            "font.size" => fontSize.big,
+            "geometry.padding" => Box.fromFloat(0),
+            "geometry.width" => SizeValue.fromInt(250),
+            "geometry.height" => SizeValue.fromInt(50),
+        ], ["button"]));
+
+        register(new Style("text.box", [
+            "skin.background.color" => Color.fromInt(0x000000),
+            "skin.background.alpha" => 0.1,
+            "skin.border.color" => colors.light,
+        ], ["text"]));
+
+        register(new Style("text.box.active", [
+            "skin.background.color" => Color.fromInt(0x55aa55),
+            "skin.background.alpha" => 1,
+            "skin.border.color" => Color.fromInt(0x88dd88),
+        ], ["text"]));
+
+        register(new Style("button.level", [
+            "font.size" => fontSize.veryBig,
+            "geometry.width" => SizeValue.fromInt(64),
+            "geometry.height" => SizeValue.fromInt(64),
+            "geometry.padding" => Box.fromFloat(0),
+        ], ["button"]));
+
+        register(new Style("container", [
+            "geometry.width" => SizeValue.fromString("100%"),
+            "geometry.height" => SizeValue.fromString("100%"),
+            "layout.hAlign" => HAlign.CENTER,
+            "layout.vAlign" => VAlign.MIDDLE,
+        ], ["dark"]));
+
+        register(new Style("panel", [
+            "geometry.width" => SizeValue.fromString("100%"),
+            "geometry.padding" => Box.fromArray([10, 5]),
+            "layout.vAlign" => VAlign.MIDDLE,
+        ], ["light"]));
+
+        register(new Style("window", [
+            "geometry.padding" => Box.fromFloat(2),
+        ], ["dark", "border"]));
+
+        register(new Style("line", [
+            "_" => null,
+        ], ["border"]));
+
+        register(new Style("window.close", [
+            "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),
+        ]));
+
+        registerButton("settings", "cog-solid.svg");
+        registerButton("close", "times-circle-solid.svg");
+        registerButton("next", "arrow-alt-circle-right-solid.svg");
+        registerButton("prev", "arrow-alt-circle-left-solid.svg");
+        registerButton("start", "play-circle-solid.svg");
+        registerButton("login", "sign-in-solid.svg");
+        registerButton("logout", "sign-out-solid.svg");
+    }
+
+    private function registerButton(name:String, resource:String):Void {
+        register(new Style('button.$name', [
+            "geometry.width" => SizeValue.fromInt(42),
+            "geometry.height" => SizeValue.fromInt(42),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light),
+        ]));
+        register(new Style('button.$name.small', [
+            "geometry.width" => SizeValue.fromInt(32),
+            "geometry.height" => SizeValue.fromInt(32),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light),
+        ]));
+    }
+
+}

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

@@ -26,7 +26,6 @@ class Client {
         #if linux
         LinuxIcon.apply();
         #end
-        Style.register();
         var view:ClientView = new ClientView();
         Root.bind(view);
         view.launch();

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

@@ -1,5 +1,6 @@
 package ru.m.tankz;
 
+import haxework.view.theme.ITheme;
 import flash.Lib;
 import haxework.animate.FadeAnimate;
 import haxework.animate.UnFadeAnimate;
@@ -28,6 +29,7 @@ import ru.m.tankz.storage.SettingsStorage;
 
 class Init {
 
+    @:provide static var theme:ITheme;
     @:provide static var resources:IResources;
     @:provide static var levelBundle:ILevelBundle;
     @:provide static var configBundle:IConfigBundle;
@@ -55,6 +57,7 @@ class Init {
     }
 
     public static function init():Void {
+        theme = new AppTheme();
         resources = new Resources();
         levelBundle = new LevelBundle();
         configBundle = new ConfigBundle();

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

@@ -5,7 +5,8 @@ import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.Lib;
-import haxework.view.core.Size;
+import haxework.view.geometry.Size;
+import ru.m.tankz.AppTheme;
 
 class Progress extends Sprite {
 
@@ -105,10 +106,10 @@ class Preloader extends Sprite {
 
     public function new() {
         super();
-        Lib.current.stage.color = Style.lightColor;
+        Lib.current.stage.color = AppTheme.COLORS.light;
         progress = new Progress();
-        progress.color = Style.darkColor;
-        progress.backColor = Style.lightColor;
+        progress.color = AppTheme.COLORS.dark;
+        progress.backColor = AppTheme.COLORS.light;
         progress.size = [200, 200];
         addChild(progress);
         onResize(null);

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

@@ -1,164 +0,0 @@
-package ru.m.tankz;
-
-import flash.text.Font;
-import flash.text.FontType;
-import haxework.color.ColorUtil;
-import haxework.resources.IResources;
-import haxework.view.core.Geometry;
-import haxework.view.core.HAlign;
-import haxework.view.core.VAlign;
-import haxework.view.ITextView;
-import haxework.view.layout.Layout;
-import haxework.view.skin.ISkin;
-import haxework.view.skin.Skin;
-import openfl.Assets;
-import ru.m.skin.ButtonSVGSkin;
-
-class Style {
-
-    @:provide private static var resources:IResources;
-
-    public static var lightColor = 0x95937D;
-    public static var darkColor = 0x777564;
-    public static var textColor = 0xE7E0BB;
-    public static var activeColor = 0xFFFF00;
-    public static var borderColor = ColorUtil.multiply(lightColor, 1.5);
-
-    public static var baseFontSize = 18;
-    public static var bigFontSize = 22;
-    public static var veryBigFontSize = 24;
-
-    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);
-    }
-
-    public static function registerButton(name:String, resource:String):Void {
-        resources.skin.put('button.$name', [
-            Skin.size(42, 42),
-            new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), lightColor),
-        ]);
-        resources.skin.put('button.$name.small', [
-            Skin.size(32, 32),
-            new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), lightColor),
-        ]);
-    }
-
-    public static function textBox(color:Int):SkinSet {
-        return [
-            Skin.color(0x000000, 0.1),
-            Skin.border(lightColor, 1, 2),
-            Skin.text(color, baseFontSize, fontFamily, fontEmbed),
-        ];
-    }
-
-    public static function register(font:Font = null):Void {
-        resources.color.put("light", lightColor);
-        resources.color.put("dark", darkColor);
-        if (font == null) {
-            font = Font.enumerateFonts()[0];
-        }
-        if (font == null) {
-            font = Font.enumerateFonts(true)[0];
-        }
-        fontFamily = font == null ? "Courirer New" : font.fontName;
-        fontEmbed = font == null ? false : switch font.fontType {
-            case DEVICE: false;
-            case _: true;
-        };
-        resources.skin.put("light", [
-            Skin.color(lightColor),
-        ]);
-        resources.skin.put("dark", [
-            Skin.color(darkColor),
-        ]);
-        resources.skin.put("font", [
-            Skin.text(textColor, 0, fontFamily, fontEmbed),
-        ]);
-        resources.skin.put("text", [
-            Skin.text(textColor, baseFontSize, fontFamily, fontEmbed),
-        ]);
-        resources.skin.put("scroll.vertical", [
-            haxework.view.skin.Skin.scrollVertical(lightColor, darkColor),
-        ]);
-        resources.skin.put("text.header", [
-            Skin.color(0x000000, 0.1),
-            Skin.border(lightColor, 1, 2),
-            Skin.text(textColor, bigFontSize, fontFamily, fontEmbed),
-            Skin.geometry(new Geometry().setPadding([50, 8]).setMargin([0, 0, 0, 30])),
-        ]);
-        resources.skin.put("button", [
-            Skin.buttonColor(lightColor),
-            Skin.text(textColor, bigFontSize, fontFamily, fontEmbed),
-            Skin.size(250, 50),
-        ]);
-        resources.skin.put("text.box", [
-            Skin.color(0x000000, 0.1),
-            Skin.border(lightColor, 1, 2),
-            Skin.text(textColor, baseFontSize, fontFamily, fontEmbed),
-        ]);
-        resources.skin.put("text.box.active", [
-            Skin.color(0x55aa55),
-            Skin.border(0x88dd88, 1, 2),
-            Skin.text(textColor, baseFontSize, fontFamily, fontEmbed),
-        ]);
-        resources.skin.put("button.simple", [
-            Skin.buttonColor(lightColor),
-            Skin.text(textColor, baseFontSize, fontFamily, fontEmbed),
-            Skin.geometry(new Geometry().setPadding([25, 8])),
-        ]);
-        resources.skin.put("button.simple.active", [
-            Skin.buttonColor(lightColor, activeColor),
-            Skin.text(activeColor, baseFontSize, fontFamily, fontEmbed),
-            Skin.geometry(new Geometry().setPadding([25, 8])),
-        ]);
-        resources.skin.put("button.tab", [
-            Skin.tabColor(lightColor),
-            Skin.text(textColor, baseFontSize, fontFamily, fontEmbed),
-            Skin.geometry(new Geometry().setPadding([25, 8])),
-        ]);
-        resources.skin.put("border", [
-            Skin.border(borderColor, 1, 2),
-        ]);
-        resources.skin.put("scroll", [
-            Skin.scrollVertical(lightColor, ColorUtil.diff(lightColor, 128)),
-        ]);
-        resources.skin.put("button.level", [
-            Skin.buttonColor(lightColor),
-            Skin.text(textColor, veryBigFontSize, fontFamily, fontEmbed),
-            Skin.size(64, 64),
-        ]);
-
-        resources.skin.put("container", [
-            Skin.geometry(new Geometry().setSize("100%", "100%")),
-            Skin.layout(new Layout().setAlign(CENTER, MIDDLE)),
-            Skin.color(darkColor),
-        ]);
-        resources.skin.put("panel", [
-            Skin.geometry(new Geometry().setSize("100%", -1).setPadding([10, 5])),
-            Skin.layout(new Layout().setAlign(NONE, MIDDLE)),
-            Skin.color(lightColor),
-        ]);
-        resources.skin.put("window", [
-            Skin.color(darkColor),
-            Skin.border(borderColor, 1, 2),
-            Skin.geometry(new Geometry().setPadding(2)),
-        ]);
-        resources.skin.put("window.close", [
-            Skin.size(36, 36),
-            new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), lightColor),
-        ]);
-        resources.skin.put("line", [
-            Skin.color(borderColor),
-        ]);
-
-        registerButton("settings", "cog-solid.svg");
-        registerButton("close", "times-circle-solid.svg");
-        registerButton("next", "arrow-alt-circle-right-solid.svg");
-        registerButton("start", "play-circle-solid.svg");
-        registerButton("login", "sign-in-solid.svg");
-        registerButton("logout", "sign-out-solid.svg");
-    }
-}

src/client/haxe/ru/m/tankz/bundle/LevelBundle.hx

@@ -7,13 +7,25 @@ import ru.m.tankz.util.LevelUtil;
 
 class LevelBundle implements ILevelBundle {
 
+    private var _cache:Map<String, LevelPack> = new Map();
+
     public function new() {}
 
-    public function get(id:PackId):LevelPack {
+    private function resolve(id:PackId):LevelPack {
         var bytes = Assets.getBytes('levels/${id}.zip');
         return {
             id: id,
-            data: LevelUtil.unpack(bytes),
+            data: LevelUtil.unpack(bytes).map(function(level) {
+                level.packId = id;
+                return level;
+            }),
         };
     }
+
+    public function get(id:PackId):LevelPack {
+        if (!_cache.exists(id)) {
+            _cache.set(id, resolve(id));
+        }
+        return _cache.get(id);
+    }
 }

src/client/haxe/ru/m/tankz/game/GameInit.hx

@@ -0,0 +1,11 @@
+package ru.m.tankz.game;
+
+import ru.m.tankz.game.GameEvent;
+import ru.m.tankz.game.record.GameRecord;
+import ru.m.tankz.network.NetworkManager;
+
+enum GameInit {
+    LOCAL(start:Start);
+    NETWORK(network:NetworkManager);
+    RECORD(record:GameRecord);
+}

src/client/haxe/ru/m/tankz/local/LocalGame.hx

@@ -1,32 +1,41 @@
 package ru.m.tankz.local;
 
-import ru.m.tankz.config.Config;
+import ru.m.tankz.control.HumanControl;
 import ru.m.tankz.game.GameEvent;
 import ru.m.tankz.game.GameRunner;
-import ru.m.tankz.game.GameState;
-import ru.m.tankz.game.record.GameRecorder;
 import ru.m.tankz.local.LocalControlFactory;
-import ru.m.tankz.storage.RecordStorage;
+import ru.m.tankz.storage.GameStorage;
+import ru.m.tankz.Type;
 
 class LocalGame extends GameRunner {
-    @:provide var recordStorage:RecordStorage;
-    private var recorder:GameRecorder;
 
-    public function new(state:GameState, level:LevelConfig) {
-        super(state, level);
+    @:provide static var gameStorage:GameStorage;
+
+    public function new(start:Start) {
+        super(start);
         controlFactory = new LocalControlFactory();
-        recorder = new GameRecorder();
-        connect(recorder);
     }
 
     override public function onGameEvent(event:GameEvent):Void {
         super.onGameEvent(event);
         switch event {
-            case GameEvent.COMPLETE(_, _):
-                disconnect(recorder);
-                recorder.onGameEvent(event); //ToDo:
-                recordStorage.save(recorder.record);
+            case COMPLETE(result): updateProgress(result);
             case _:
         }
     }
+
+    private function updateProgress(result:Result):Void {
+        var complete = false;
+        var humansTeams:Array<TeamId> = [];
+        for (control in controls) {
+            if (Std.is(control, HumanControl) && humansTeams.indexOf(control.playerId.team) == -1) {
+                humansTeams.push(control.playerId.team);
+            }
+        }
+        if (humansTeams.length == 1 && result.winner == humansTeams[0]) {
+            var progress = gameStorage.get(new PackId(result.state.type));
+            progress.completeLevel(result.level.id, result.state.presetId);
+            gameStorage.set(progress);
+        }
+    }
 }

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

@@ -1,9 +1,9 @@
 package ru.m.tankz.network;
 
 import haxe.Unserializer;
+import ru.m.tankz.control.Controller;
 import ru.m.tankz.game.Game;
 import ru.m.tankz.game.GameEvent;
-import ru.m.tankz.game.GameState;
 import ru.m.tankz.network.NetworkControlFactory;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.pack.GameEventResponse;
@@ -14,7 +14,7 @@ class NetworkGame extends Game {
     private var network:NetworkManager;
 
     public function new(network:NetworkManager) {
-        super(new GameState(network.room.game.type, 0), null);
+        super(network.room.game.type);
         this.network = network;
         this.controlFactory = new NetworkControlFactory();
         network.gameEventSignal.connect(onGameEventProto);
@@ -38,12 +38,12 @@ class NetworkGame extends Game {
         }
     }
 
-    override public function start():Void {
+    override private function onStart(start:Start):Void {
         var slot:RoomSlotProto = Lambda.find(network.room.slots, function(slot:RoomSlotProto) return slot.hasUser() && slot.user.uuid == network.user.uuid);
         if (slot != null) {
-            state.controls.push({playerId: [slot.slot.team, slot.slot.index], control: "human-0"});
+            start.state.controls.push({playerId: [slot.slot.team, slot.slot.index], controller: HUMAN(0)});
         }
-        super.start();
+        super.onStart(start);
     }
 
     override public function dispose():Void {

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

@@ -5,7 +5,7 @@ import flash.display.Graphics;
 import flash.display.Sprite;
 import flash.events.Event;
 import haxe.Timer;
-import haxework.view.LabelView;
+import haxework.view.form.LabelView;
 import haxework.view.SpriteView;
 import promhx.Promise;
 import ru.m.animate.Animate;
@@ -65,14 +65,14 @@ class Render extends SpriteView implements IRender {
 
     private function set_config(value:Config):Config {
         config = value;
-        setContentSize(mapWidth, mapHeight, "render");
+        setSize(mapWidth, mapHeight, "render");
         drawBackground();
         return config;
     }
 
     private function set_gridSize(value:GridSize):GridSize {
         gridSize = value;
-        setContentSize(mapWidth, mapHeight, "render");
+        setSize(mapWidth, mapHeight, "render");
         drawBackground();
         return gridSize;
     }
@@ -115,10 +115,10 @@ class Render extends SpriteView implements IRender {
 
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case START(_, level):
-                gridSize = level.size;
+            case START(start):
+                gridSize = start.level.size;
                 content.addEventListener(Event.ENTER_FRAME, onEnterFrame);
-            case COMPLETE(_, _):
+            case COMPLETE(_):
                 content.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
             case SPAWN(BRICK(bricks)):
                 drawBackground();
@@ -207,9 +207,7 @@ class Render extends SpriteView implements IRender {
                     var item = items[id];
                     entryLayer.removeChild(item.view);
                     playAnimate(item.rect.center, AnimateBundle.tankBoom());
-                    if (shot.score != null) {
                     showScore(item.rect.center, shot.score);
-                    }
                     items.remove(id);
                 }
             case DESTROY(BULLET(id)):
@@ -226,18 +224,14 @@ class Render extends SpriteView implements IRender {
                 if (items.exists(id)) {
                     var item = items[id];
                     playAnimate(item.rect.center, AnimateBundle.tankBoom());
-                    if (shot.score != null) {
                     showScore(item.rect.center, shot.score);
-                    }
                     cast(item, EagleRenderItem).death = true;
                 }
             case DESTROY(BONUS(id, shot)):
                 if (items.exists(id)) {
                     var item = items[id];
                     upperLayer.removeChild(item.view);
-                    if (shot.score != null) {
                     showScore(item.rect.center, shot.score);
-                    }
                     items.remove(id);
                 }
             case DESTROY(CELL(id, x, y, shot)):
@@ -266,9 +260,10 @@ class Render extends SpriteView implements IRender {
         });
     }
 
-    private function showScore(point:Point, score:Int):Void {
+    private function showScore(point:Point, score:Null<Int>):Void {
+        if (score != null && score != 0) {
             var view:LabelView = new LabelView();
-        view.skinId = "text";
+            view.style = "text";
             view.text = Std.string(score);
             view.update();
             view.redraw();
@@ -278,3 +273,4 @@ class Render extends SpriteView implements IRender {
             Timer.delay(function() upperLayer.removeChildSafety(view.content), 1000);
         }
     }
+}

src/client/haxe/ru/m/tankz/render/item/TankRenderItem.hx

@@ -1,5 +1,6 @@
 package ru.m.tankz.render.item;
 
+import haxework.view.theme.ITheme;
 import flash.display.BitmapData;
 import flash.display.DisplayObject;
 import flash.display.Sprite;
@@ -28,6 +29,8 @@ class TankRenderItem extends BitmapRenderItem {
     private var protectView:Animate;
     private var nameView:TextField;
 
+    @:provide static var theme:ITheme;
+
     public function new(rect:Rectangle) {
         super(rect);
         container = new Sprite();
@@ -42,8 +45,8 @@ class TankRenderItem extends BitmapRenderItem {
 
     private function buildNameView():TextField {
         var result = new BitmapTextField();
-        result.defaultTextFormat = new TextFormat(Style.fontFamily, 10, 0xffffff);
-        result.embedFonts = Style.fontEmbed;
+        result.defaultTextFormat = new TextFormat(theme.font.name, 10, 0xffffff);
+        result.embedFonts = theme.font.embed;
         result.autoSize = TextFieldAutoSize.LEFT;
         result.shadowColor = 0x000000;
         result.stroke = true;

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

@@ -1,22 +1,16 @@
 package ru.m.tankz.view;
 
-import ru.m.tankz.game.IGame;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 import haxework.resources.IResources;
-import haxework.view.ButtonView;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
+import haxework.view.group.VGroupView;
+import ru.m.tankz.game.IGame;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.sound.SoundManager;
-import ru.m.tankz.view.popup.LoginPopup;
 
 @:template class ClientView extends VGroupView {
     @:view("switcher") var switcherView:FrameSwitcher;
-    @:view var username:LabelView;
-    @:view("login") var loginButton:ButtonView;
-    @:view("logout") var logoutButton:ButtonView;
 
     @:provide var network:NetworkManager;
     @:provide var resources:IResources;
@@ -27,8 +21,6 @@ import ru.m.tankz.view.popup.LoginPopup;
     public function init():Void {
         resources.text.put('version', '${Const.VERSION}');
         switcher = switcherView;
-        network.stateSignal.connect(onConnectionState);
-        onConnectionState(network.state);
     }
 
     public function launch():Void {
@@ -36,7 +28,7 @@ import ru.m.tankz.view.popup.LoginPopup;
         content.stage.addEventListener(KeyboardEvent.KEY_UP, function(event:KeyboardEvent):Void {
             switch event.keyCode {
                 case Keyboard.ESCAPE:
-                    switcher.change(StartFrame.ID);
+                    switcher.change(MenuFrame.ID);
                 case Keyboard.M:
                     soundManager.mute = !soundManager.mute;
                 case Keyboard.P:
@@ -45,41 +37,6 @@ import ru.m.tankz.view.popup.LoginPopup;
                     }
             }
         });
-        switcher.change(StartFrame.ID);
-    }
-
-    private function onConnectionState(state:ConnectionState):Void {
-        L.d("ClientView", 'onConnectionState: ${state}');
-        switch state {
-            case ONLINE(user):
-                username.text = user.name;
-                logoutButton.visible = true;
-                loginButton.visible = false;
-            case CONNECTED:
-                username.text = "";
-                logoutButton.visible = false;
-                loginButton.visible = true;
-            case ERROR(error):
-                //L.e("ClientView", 'onConnectionState: ERROR', error);
-                L.w("ClientView", 'onConnectionState: ERROR');
-            case _:
-                username.text = "";
-                logoutButton.visible = false;
-                loginButton.visible = false;
-        }
-    }
-
-    private function login():Void {
-        LoginPopup.instance.show().then(function(user:User):Void {
-            L.d("Login", 'user: $user');
-        });
-    }
-
-    private function logout():Void {
-        network.logout();
-    }
-
-    private function close():Void {
-        switcher.change(StartFrame.ID);
+        switcher.change(MenuFrame.ID);
     }
 }

src/client/haxe/ru/m/tankz/view/ClientView.yaml

@@ -2,50 +2,15 @@
 views:
   - $type: haxework.view.frame.FrameSwitcher
     id: switcher
-    geometry.size.stretch: true
-    skinId: dark
-    views:
-      - id: start
-        $type: ru.m.tankz.view.StartFrame
-      - id: level
-        $type: ru.m.tankz.view.LevelFrame
-      - id: game
-        $type: ru.m.tankz.view.GameFrame
-      - id: result
-        $type: ru.m.tankz.view.ResultFrame
-      - id: settings
-        $type: ru.m.tankz.view.SettingsFrame
-      - id: record
-        $type: ru.m.tankz.view.RecordFrame
-      - id: room_list
-        $type: ru.m.tankz.view.network.RoomListFrame
-      - id: room
-        $type: ru.m.tankz.view.network.RoomFrame
-  - $type: haxework.view.HGroupView
-    skinId: panel
-    layout.margin: 10
-    views:
-      - id: settings
-        $type: haxework.view.ButtonView
-        skinId: button.settings
-        +onPress: $code:switcher.change('settings')
-      - $type: haxework.view.SpriteView
-        geometry.size.width: 50%
-      - id: username
-        $type: haxework.view.LabelView
-        skinId: text
-      - id: login
-        $type: haxework.view.ButtonView
-        skinId: button.login
-        +onPress: $code:login()
-      - id: logout
-        $type: haxework.view.ButtonView
-        skinId: button.logout
-        +onPress: $code:logout()
-        visible: false
-      - $type: haxework.view.SpriteView
-        geometry.size.width: 50%
-      - id: close
-        $type: haxework.view.ButtonView
-        skinId: button.close
-        +onPress: $code:close()
+    geometry.stretch: true
+    style: dark
+    factory:
+        _menu_: {$class: ru.m.tankz.view.MenuFrame}
+        _level_: {$class: ru.m.tankz.view.LevelFrame}
+        _start_: {$class: ru.m.tankz.view.StartFrame}
+        _game_: {$class: ru.m.tankz.view.GameFrame}
+        _result_: {$class: ru.m.tankz.view.ResultFrame}
+        _settings_: {$class: ru.m.tankz.view.SettingsFrame}
+        _record_: {$class: ru.m.tankz.view.RecordFrame}
+        _room_list_: {$class: ru.m.tankz.view.network.RoomListFrame}
+        _room_: {$class: ru.m.tankz.view.network.RoomFrame}

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

@@ -1,22 +1,24 @@
 package ru.m.tankz.view;
 
+import haxework.view.layout.DefaultLayout;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.VGroupView;
+import haxework.view.frame.FrameView;
 import ru.m.control.DeviceType;
 import ru.m.control.IControlBus;
 import ru.m.tankz.game.GameEvent;
-import ru.m.tankz.game.GameState;
+import ru.m.tankz.game.GameInit;
 import ru.m.tankz.game.IGame;
+import ru.m.tankz.game.record.GamePlayer;
 import ru.m.tankz.game.record.GameRecord;
-import ru.m.tankz.network.NetworkManager;
+import ru.m.tankz.local.LocalGame;
+import ru.m.tankz.network.NetworkGame;
 import ru.m.tankz.sound.SoundManager;
 import ru.m.tankz.storage.GameStorage;
 import ru.m.tankz.storage.SettingsStorage;
-import ru.m.tankz.Type;
 import ru.m.tankz.view.game.GameView;
 import ru.m.tankz.view.GamepadView;
 
-@:template class GameFrame extends VGroupView implements GameListener {
+@:template class GameFrame extends FrameView<GameInit> implements GameListener {
     public static inline var ID = "game";
 
     private static inline var TAG = "GameFrame";
@@ -24,22 +26,25 @@ import ru.m.tankz.view.GamepadView;
     @:view("game") private var gameView(default, null):GameView;
     @:view private var gamepad(default, null):GamepadView;
 
-    @:provide var network:NetworkManager;
     @:provide var soundManager:SoundManager;
-    @:provide var state:GameState;
-    @:provide var record:GameRecord;
     @:provide var switcher:FrameSwitcher;
     @:provide static var gameStorage:GameStorage;
     @:provide static var settings:SettingsStorage;
 
-    @:provide var game:IGame;
     @:provide static var bus:IControlBus;
 
+    private var game:IGame;
+    private var recorder:GameRecord;
+
+    public function new() {
+        super(id, new DefaultLayout());
+    }
+
     public function init():Void {
         bus.connect(gamepad);
     }
 
-    public function onShow():Void {
+    override public function onShow(data:GameInit):Void {
         gamepad.visible = false;
         // ToDo:
         for (i in 0...1) {
@@ -52,6 +57,12 @@ import ru.m.tankz.view.GamepadView;
                 }
             }
         }
+        game = switch data {
+            case LOCAL(start): new LocalGame(start);
+            case NETWORK(network): new NetworkGame(network);
+            case RECORD(record): new GamePlayer(record);
+            case _: null;
+        }
         gameView.type = game.type;
         soundManager.config = game.config;
         gameView.render.config = game.config;
@@ -74,36 +85,19 @@ import ru.m.tankz.view.GamepadView;
 
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case COMPLETE(state, winner):
-                this.state = state;
-                updateProgress(game, winner);
+            case COMPLETE(result):
                 stop();
-                switcher.change(ResultFrame.ID);
+                switcher.change(ResultFrame.ID, result);
             case _:
         }
     }
 
-    // ToDo:
-    private static function updateProgress(game:IGame, winner:TeamId):Void {
-        var complete = true;
-        for (rule in game.config.game.complete) {
-            if (rule.team != null && rule.team != winner) {
-                complete = false;
-            }
-        }
-        if (complete) {
-            var progress = gameStorage.get(new PackId(game.state.type));
-            progress.completeLevel(game.level.id, game.state.presetId);
-            gameStorage.set(progress);
-        }
-    }
-
-    public function onHide():Void {
+    override public function onHide():Void {
         stop();
         soundManager.stopAll();
     }
 
     public function close():Void {
-        switcher.change(LevelFrame.ID);
+        switcher.change(MenuFrame.ID);
     }
 }

src/client/haxe/ru/m/tankz/view/GameFrame.yaml

@@ -1,13 +1,12 @@
 ---
-views:
-  - $type: haxework.view.VGroupView
-    skinId: container
-    layout.overflow: true
+style: container
+overflow.x: crop
+overflow.y: crop
 views:
   - id: game
     $type: ru.m.tankz.view.game.GameView
   - id: gamepad
     $type: ru.m.tankz.view.GamepadView
     geometry.position: absolute
-    geometry.size.stretch: true
+    geometry.stretch: true
     visible: false

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;
     }
 
@@ -59,7 +60,7 @@ class GamepadView extends SpriteView implements IControlDevice {
         signal = new Signal2();
         areas = [];
         currentAreas = new Map();
-        skin = [new GamepadSkin(0x00ff00)];
+        skin = new GamepadSkin(0x00ff00);
         content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
         content.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
     }

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

@@ -1,70 +1,61 @@
 package ru.m.tankz.view;
 
-import haxework.view.ButtonView;
-import haxework.view.DataView;
+import haxework.view.data.DataView;
+import haxework.view.form.ButtonView;
+import haxework.view.form.LabelView;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
+import haxework.view.frame.FrameView;
+import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.bundle.ILevelBundle;
 import ru.m.tankz.config.Config;
 import ru.m.tankz.game.GameState;
-import ru.m.tankz.game.IGame;
-import ru.m.tankz.local.LocalGame;
 import ru.m.tankz.storage.GameStorage;
-import ru.m.tankz.Type;
-import ru.m.tankz.view.popup.LevelPopup;
+import ru.m.tankz.Type.PackId;
 
-@:template class LevelFrame extends VGroupView {
+@:template class LevelFrame extends FrameView<PackId> {
     public static inline var ID = "level";
 
+    @:provide static var switcher:FrameSwitcher;
+    @:provide static var storage:GameStorage;
+    @:provide static var configBundle:IConfigBundle;
+    @:provide static var levelBundle:ILevelBundle;
+
     @:view var header:LabelView;
     @:view var levels:DataView<LevelConfig, ButtonView>;
 
-    @:provide var state:GameState;
-    @:provide var game:IGame;
-    @:provide var switcher:FrameSwitcher;
-    @:provide var levelBundle:ILevelBundle;
-    @:provide var storage:GameStorage;
-
     private var pack:LevelPack;
-    private var levelPopup:LevelPopup;
+    private var config(get, never):Config;
 
-    public function onShow():Void {
-        header.text = state.type;
-        pack = levelBundle.get(new PackId(state.type));
-        levels.data = pack.data;
+    public function new() {
+        super(ID);
     }
 
-    private function start(level:LevelConfig, preset:GamePreset, control:ControlPreset):Void {
-        state.presetId = preset.id;
-        state.controls = control.values;
-        game = new LocalGame(state, level);
-        switcher.change(GameFrame.ID);
+    private function get_config():Config {
+        return configBundle.get(pack.id.type);
+    }
+
+    override public function onShow(data:PackId):Void {
+        header.text = data.type;
+        pack = levelBundle.get(data);
+        levels.data = pack.data;
     }
 
     private function levelViewFactory(index:Int, level:LevelConfig):ButtonView {
         var progress = storage.get(pack.id);
         var result = new ButtonView();
-        result.skinId = "button.level";
-        var presetsLine = [for (p in state.config.presets) progress.isPresetCompleted(level.id, p.id) ? '*' : '_'].join('');
+        result.style = "button.level";
+        var presetsLine = [for (p in config.presets) progress.isPresetCompleted(level.id, p.id) ? '*' : '_'].join('');
         result.text = '${level.id}\n${presetsLine}';
         result.disabled = !progress.isLevelAvailable(level.id);
         return result;
     }
 
     private function onLevelSelect(index:Int, level:LevelConfig, view:ButtonView):Void {
-        if (!storage.get(pack.id).isLevelAvailable(level.id)) {
-            return;
-        }
-        if (levelPopup == null) {
-            levelPopup = new LevelPopup();
-        }
-        levelPopup.setData(
-            level,
-            state.config.presets,
-            state.config.controls,
-            storage.get(pack.id)
-        );
-        levelPopup.show().then(function(result) result != null ? start(level, result.preset, result.control) : {});
+        if (storage.get(pack.id).isLevelAvailable(level.id)) {
+            switcher.change(StartFrame.ID, {
+                state: new GameState(pack.id.type),
+                level: level,
+            });
+        }
     }
 }

src/client/haxe/ru/m/tankz/view/LevelFrame.yaml

@@ -1,18 +1,29 @@
 ---
 views:
-  - $type: haxework.view.VGroupView
-    skinId: container
+  - $type: haxework.view.group.VGroupView
+    style: container
     views:
       - id: header
-        $type: haxework.view.LabelView
-        skinId: text.header
+        $type: haxework.view.form.LabelView
+        style: text.header
       - id: levels
-        $type: haxework.view.DataView
-        geometry.size.width: 100%
+        $type: haxework.view.data.DataView
+        geometry.width: 100%
+        geometry.height: 100%
+        overflow.y: scroll
         layout:
           $type: haxework.view.layout.TailLayout
           rowSize: 10
           margin: 5
-        factory: $this:levelViewFactory
-        +onItemSelect: $this:onLevelSelect
+        factory: ~levelViewFactory
+        +onItemSelect: ~onLevelSelect
         geometry.padding: 10
+  - $type: haxework.view.group.HGroupView
+    style: panel
+    layout.margin: 10
+    views:
+      - $type: haxework.view.SpriteView
+        geometry.width: 100%
+      - $type: haxework.view.form.ButtonView
+        style: button.prev
+        +onPress: ~switcher.change("menu")

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

@@ -0,0 +1,96 @@
+package ru.m.tankz.view;
+
+import haxework.view.form.ButtonView;
+import haxework.view.form.LabelView;
+import haxework.view.frame.FrameSwitcher;
+import haxework.view.frame.FrameView;
+import ru.m.tankz.game.GameInit;
+import ru.m.tankz.game.GameState;
+import ru.m.tankz.network.NetworkManager;
+import ru.m.tankz.Type;
+import ru.m.tankz.view.network.RoomFrame;
+import ru.m.tankz.view.network.RoomListFrame;
+import ru.m.tankz.view.popup.LoginPopup;
+
+@:template class MenuFrame extends FrameView<Dynamic> {
+
+    public static var ID(default, never):String = "menu";
+
+    @:provide var gameInit:GameInit;
+    @:provide var switcher:FrameSwitcher;
+    @:provide var network:NetworkManager;
+
+    @:view var username:LabelView;
+    @:view("login") var loginButton:ButtonView;
+    @:view("logout") var logoutButton:ButtonView;
+
+    public function new() {
+        super(ID);
+    }
+
+    override public function onShow(data:Dynamic):Void {
+        super.onShow(data);
+        network.stateSignal.connect(onConnectionState);
+        onConnectionState(network.state);
+    }
+
+    override public function onHide():Void {
+        super.onHide();
+        network.stateSignal.disconnect(onConnectionState);
+    }
+
+    private function startGame(type:GameType):Void {
+        gameInit = LOCAL({state: new GameState(type), level: null});
+        switcher.change(LevelFrame.ID, new PackId(type));
+    }
+
+    private function startNetwork():Void {
+        switch network.state {
+            case ONLINE(user):
+                if (network.room != null) {
+                    switcher.change(RoomFrame.ID, network.room);
+                    network.joinGame(network.room.game.id, true);
+                } else {
+                    switcher.change(RoomListFrame.ID);
+                }
+            case CONNECTED:
+                LoginPopup.instance.show().then(function(user):Void {
+                    if (user != null) {
+                        switcher.change(RoomListFrame.ID);
+                    }
+                });
+            case _:
+        }
+    }
+
+    private function onConnectionState(state:ConnectionState):Void {
+        L.d("ClientView", 'onConnectionState: ${state}');
+        switch state {
+            case ONLINE(user):
+                username.text = user.name;
+                logoutButton.visible = true;
+                loginButton.visible = false;
+            case CONNECTED:
+                username.text = "";
+                logoutButton.visible = false;
+                loginButton.visible = true;
+            case ERROR(error):
+                //L.e("ClientView", 'onConnectionState: ERROR', error);
+                L.w("ClientView", 'onConnectionState: ERROR');
+            case _:
+                username.text = "";
+                logoutButton.visible = false;
+                loginButton.visible = false;
+        }
+    }
+
+    private function login():Void {
+        LoginPopup.instance.show().then(function(user:User):Void {
+            L.d("Login", 'user: $user');
+        });
+    }
+
+    private function logout():Void {
+        network.logout();
+    }
+}

src/client/haxe/ru/m/tankz/view/MenuFrame.yaml

@@ -0,0 +1,65 @@
+---
+views:
+    - $type: haxework.view.group.VGroupView
+      style: container
+      layout.margin: 10
+      overflow.y: scroll
+      views:
+          - $type: haxework.view.form.LabelView
+            text: Tank'z
+            style: font
+            font.size: 100
+            geometry.margin.bottom: 30
+          - $type: haxework.view.form.ButtonView
+            style: button.menu
+            +onPress: ~startGame('classic')
+            text: Classic
+          - $type: haxework.view.form.ButtonView
+            style: button.menu
+            +onPress: ~startGame('dota')
+            text: DotA
+          - $type: haxework.view.form.ButtonView
+            style: button.menu
+            +onPress: ~startGame('death')
+            text: DeathMatch
+          - $type: haxework.view.form.ButtonView
+            style: button.menu
+            +onPress: ~switcher.change('record')
+            text: Records
+          - id: network
+            $type: haxework.view.form.ButtonView
+            style: button.menu
+            +onPress: ~startNetwork()
+            text: Network
+    - $type: haxework.view.form.LabelView
+      geometry.hAlign: right
+      geometry.vAlign: top
+      geometry.padding: [20, 5]
+      geometry.position: absolute
+      geometry.margin: [0, 20, 20, 0]
+      style: text.box
+      text: $r:text:version
+    - $type: haxework.view.group.HGroupView
+      style: panel
+      layout.margin: 10
+      views:
+        - id: settings
+          $type: haxework.view.form.ButtonView
+          style: button.settings
+          +onPress: ~switcher.change('settings')
+        - $type: haxework.view.SpriteView
+          geometry.width: 50%
+        - id: username
+          $type: haxework.view.form.LabelView
+          style: text
+        - id: login
+          $type: haxework.view.form.ButtonView
+          style: button.login
+          +onPress: ~login()
+        - id: logout
+          $type: haxework.view.form.ButtonView
+          style: button.logout
+          +onPress: ~logout()
+          visible: false
+        - $type: haxework.view.SpriteView
+          geometry.width: 50%

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

@@ -1,28 +1,27 @@
 package ru.m.tankz.view;
 
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.list.ListView;
+import haxework.view.frame.FrameView;
 import haxework.view.list.VListView;
-import haxework.view.VGroupView;
 import ru.m.tankz.game.record.GameRecord;
 import ru.m.tankz.storage.RecordStorage;
 
-@:template class RecordFrame extends VGroupView {
+@:template class RecordFrame extends FrameView<Dynamic> {
+
     public static var ID(default, never):String = "record";
 
+    @:provide static var switcher:FrameSwitcher;
+    @:provide static var recordStorage:RecordStorage;
+
     @:view var data:VListView<GameRecordInfo>;
 
-    @:provide var recordStorage:RecordStorage;
-    @:provide var switcher:FrameSwitcher;
-    @:provide var record:GameRecord;
+    public function new() {
+        super(ID);
+    }
 
-    public function onShow():Void {
+    override public function onShow(_:Dynamic):Void {
         var data = Lambda.array(recordStorage);
         data.sort(function(a:GameRecordInfo, b:GameRecordInfo) return Std.int(b.date.getTime() - a.date.getTime()));
         this.data.data = data;
     }
-
-    private function onRecordSelect(item:IListItemView<GameRecordInfo>):Void {
-
-    }
 }

src/client/haxe/ru/m/tankz/view/RecordFrame.yaml

@@ -1,18 +1,24 @@
 ---
 views:
-  - $type: haxework.view.VGroupView
-    skinId: container
-    geometry.padding: 20
+  - $type: haxework.view.group.VGroupView
+    style: container
     views:
-      - $type: haxework.view.LabelView
-        skinId: text.header
+      - $type: haxework.view.form.LabelView
+        style: text.header
         text: Records
       - id: data
         $type: haxework.view.list.VListView
-        factory: $code:function() return new ru.m.tankz.view.common.RecordView()
-        +onItemSelect: $this:onRecordSelect
+        factory: ~function() return new ru.m.tankz.view.common.RecordView()
         geometry.margin.top: 20
-        geometry.size.stretch: true
+        geometry.stretch: true
         scroll:
           $type: haxework.view.list.VScrollBarView
-            skinId: scroll
+  - $type: haxework.view.group.HGroupView
+    style: panel
+    layout.margin: 10
+    views:
+      - $type: haxework.view.SpriteView
+        geometry.width: 100%
+      - $type: haxework.view.form.ButtonView
+        style: button.prev
+        +onPress: ~switcher.change("menu")

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

@@ -1,46 +1,80 @@
 package ru.m.tankz.view;
 
-import haxework.view.DataView;
+import haxework.view.form.ButtonView;
+import haxework.view.data.DataView;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
-import ru.m.tankz.game.GameRunner;
+import haxework.view.frame.FrameView;
+import haxework.view.form.LabelView;
+import ru.m.tankz.bundle.ILevelBundle;
+import ru.m.tankz.game.GameEvent;
+import ru.m.tankz.game.GameInit;
 import ru.m.tankz.game.GameState;
-import ru.m.tankz.game.IGame;
+import ru.m.tankz.storage.GameStorage;
 import ru.m.tankz.view.common.LifeView;
 
-@:template class ResultFrame extends VGroupView {
+@:template class ResultFrame extends FrameView<Result> {
     public static var ID(default, never):String = "result";
 
     @:view("result") var resultView:DataView<PlayerState, LifeView>;
     @:view("level") var levelLabel:LabelView;
+    @:view("next") var nextButton:ButtonView;
 
     @:provide var frames:FrameSwitcher;
-    @:provide var state:GameState;
-    @:provide var game:IGame;
+    @:provide static var levelBundle:ILevelBundle;
+    @:provide static var gameStorage:GameStorage;
 
-    private function playerViewFactory(index:Int, player:PlayerState) {
+    private var result:Result;
+
+    public function new() {
+        super(ID);
+    }
+
+    private function playerViewFactory(index:Int, player:PlayerState):LifeView {
         var view = new LifeView();
-        var playerConfig = state.config.getPlayer(player.id);
+        var playerConfig = result.state.config.getPlayer(player.id);
         var tankType = playerConfig.tanks[0].type;
-        var tankConfig = state.config.getTank(tankType);
+        var tankConfig = result.state.config.getTank(tankType);
         view.tank = tankConfig == null ? 'ba' : tankConfig.skin;
-        view.color = state.getPlayerColor(player.id);
+        view.color = result.state.getPlayerColor(player.id);
         view.life = player.frags;
         view.score = player.score;
         return view;
     }
 
-    public function onShow() {
-        resultView.data =  Lambda.array(state.players);
-        //levelLabel.text = 'Level ${state.levelId}'; // ToDo: level?
+    override public function onShow(data:Result):Void {
+        result = data;
+        var players = Lambda.array(result.state.players);
+        players.sort(function(a, b) return a.id.compare(b.id));
+        resultView.data = players;
+        var label = '${result.state.type} Level ${result.level.id}';
+        if (result.level.name != null) {
+            label += '\n${result.level.name}';
+        }
+        levelLabel.text = label;
+        nextButton.disabled = !gameStorage.get(result.level.packId).isPresetAvailable(result.level.id + 1, result.state.presetId);
+        nextButton.text = 'Next (${result.level.id + 1})';
     }
 
-    private function next() {
-        //ToDo: next level?
+    private function levels():Void {
+        frames.change(LevelFrame.ID, result.level.packId);
     }
 
-    private function close() {
-        frames.change(LevelFrame.ID);
+    private function restart():Void {
+        frames.change(GameFrame.ID, LOCAL({state: result.state.clean(), level: result.level}));
+    }
+
+    private function next():Void {
+        var pack = levelBundle.get(result.level.packId);
+        if (pack.data.length > result.level.id + 1) {
+            var level = pack.data[result.level.id + 1];
+            var progress = gameStorage.get(pack.id);
+            if (progress.isPresetAvailable(level.id, result.state.presetId)) {
+                frames.change(GameFrame.ID, LOCAL({state: result.state.clean(), level: level}));
+            }
+        }
+    }
+
+    private function close():Void {
+        frames.change(MenuFrame.ID);
     }
 }

src/client/haxe/ru/m/tankz/view/ResultFrame.yaml

@@ -1,16 +1,39 @@
 ---
 views:
-  - $type: haxework.view.VGroupView
-    skinId: container
+  - $type: haxework.view.group.VGroupView
+    style: container
     views:
       - id: level
-        $type: haxework.view.LabelView
-        skinId: text.header
+        $type: haxework.view.form.LabelView
+        style: text.header
+        font.align: center
       - id: result
-        $type: haxework.view.DataView
-        factory: $this:playerViewFactory
+        $type: haxework.view.data.DataView
+        factory: ~playerViewFactory
+        geometry.height: 100%
+        overflow.y: scroll
         geometry.margin.top: 20
         layout:
           $type: haxework.view.layout.VerticalLayout
           hAlign: right
           margin: 10
+  - $type: haxework.view.group.HGroupView
+    style: panel
+    layout.margin: 10
+    views:
+      - $type: haxework.view.SpriteView
+        geometry.width: 50%
+      - id: levels
+        $type: haxework.view.form.ButtonView
+        text: Levels
+        +onPress: ~levels()
+      - id: restart
+        $type: haxework.view.form.ButtonView
+        text: Restart
+        +onPress: ~restart()
+      - id: next
+        $type: haxework.view.form.ButtonView
+        text: Next
+        +onPress: ~next()
+      - $type: haxework.view.SpriteView
+        geometry.width: 50%

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

@@ -1,7 +1,14 @@
 package ru.m.tankz.view;
 
-import haxework.view.VGroupView;
+import haxework.view.frame.FrameSwitcher;
+import haxework.view.frame.FrameView;
 
-@:template class SettingsFrame extends VGroupView {
+@:template class SettingsFrame extends FrameView<Dynamic> {
     public static var ID(default, never):String = "settings";
+
+    @:provide static var switcher:FrameSwitcher;
+
+    public function new() {
+        super(ID);
+    }
 }

src/client/haxe/ru/m/tankz/view/SettingsFrame.yaml

@@ -1,25 +1,19 @@
 ---
 views:
-  - $type: haxework.view.VGroupView
-    skinId: container
-    geometry.padding: 20
+  - $type: haxework.view.group.VGroupView
+    style: container
     views:
-      - $type: haxework.view.LabelView
-        skinId: text.header
+      - $type: haxework.view.form.LabelView
+        style: text.header
         text: Settings
-      - $type: haxework.view.ScrollView
-        geometry.size.stretch: true
-        scroll:
-          $type: haxework.view.list.VScrollBarView
-          skinId: scroll.vertical
-        view:
-          $type: haxework.view.GroupView
-          geometry.size.stretch: true
+      - $type: haxework.view.group.GroupView
+        geometry.width: 100%
+        geometry.height: 100%
+        overflow.y: scroll
         layout:
           $type: haxework.view.layout.TailLayout
           vAlign: top
           margin: 20
-            overflow: true
         views:
           - id: settings0
             $type: ru.m.tankz.view.settings.SettingsEditor
@@ -27,3 +21,12 @@ views:
           - id: settings1
             $type: ru.m.tankz.view.settings.SettingsEditor
             controlIndex: 1
+  - $type: haxework.view.group.HGroupView
+    style: panel
+    layout.margin: 10
+    views:
+      - $type: haxework.view.SpriteView
+        geometry.width: 100%
+      - $type: haxework.view.form.ButtonView
+        style: button.prev
+        +onPress: ~switcher.change("menu")

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

@@ -1,56 +1,113 @@
 package ru.m.tankz.view;
 
+import haxework.view.data.DataView;
+import haxework.view.form.ButtonView;
+import haxework.view.form.LabelView;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.VGroupView;
-import ru.m.tankz.game.GameState;
-import ru.m.tankz.network.NetworkManager;
-import ru.m.tankz.Type.GameType;
-import ru.m.tankz.view.network.RoomListFrame;
-import ru.m.tankz.view.network.RoomFrame;
-import ru.m.tankz.view.popup.FontPopup;
-import ru.m.tankz.view.popup.LoginPopup;
+import haxework.view.frame.FrameView;
+import ru.m.tankz.config.Config;
+import ru.m.tankz.control.Controller;
+import ru.m.tankz.control.PlayerControl;
+import ru.m.tankz.game.GameEvent;
+import ru.m.tankz.game.GameInit;
+import ru.m.tankz.game.PackProgress;
+import ru.m.tankz.storage.GameStorage;
+import ru.m.tankz.Type;
+import ru.m.tankz.view.common.SlotView;
 
-@:template class StartFrame extends VGroupView {
+using haxe.EnumTools.EnumValueTools;
+
+@:template class StartFrame extends FrameView<Start> {
 
     public static var ID(default, never):String = "start";
 
-    @:provide var state:GameState;
-    @:provide var switcher:FrameSwitcher;
-    @:provide var network:NetworkManager;
+    @:provide static var switcher:FrameSwitcher;
+    @:provide static var storage:GameStorage;
 
-    private var fontPopup:FontPopup;
+    private var progress:PackProgress;
 
-    private function startGame(type:GameType):Void {
-        state = new GameState(type);
-        switcher.change(LevelFrame.ID);
+    @:view var header:LabelView;
+    @:view("presets") var presetsView:DataView<GamePreset, ButtonView>;
+    @:view("slots") var slotsView:DataView<PlayerControl, SlotView>;
+
+    private var humanIndex:Int = 0;
+    private var humanTotal:Int = 2;
+
+
+    private var start:Start;
+
+    public function new() {
+        super(ID);
     }
 
-    private function startNetwork():Void {
-        switch network.state {
-            case ONLINE(user):
-                if (network.room != null) {
-                    switcher.change(RoomFrame.ID);
-                    network.joinGame(network.room.game.id, true);
-                } else {
-                    switcher.change(RoomListFrame.ID);
-                }
-            case CONNECTED:
-                LoginPopup.instance.show().then(function(user):Void {
-                    if (user != null) {
-                        switcher.change(RoomListFrame.ID);
+    override public function onShow(data:Start):Void {
+        super.onShow(data);
+        start = data;
+        this.progress = storage.get(start.level.packId);
+        header.text = '${start.state.type} - ${start.level.id}. ${start.level.name != null ? start.level.name : "#"}';
+        presetsView.data = start.state.config.presets;
+        slotsView.data = defaultControls(start.state.config);
     }
+
+    private static function defaultControls(config:Config):Array<PlayerControl> {
+        var controls:Array<PlayerControl> = [];
+        var preset = config.getPreset(0);
+        for (team in preset.teams) {
+            if (team.id != "bot") {  // ToDo:
+                for (player in team.players) {
+                    var playerId = new PlayerId(team.id, player.index);
+                    controls.push({
+                        playerId: playerId,
+                        color: config.getColor(playerId),
+                        controller: NONE,
                     });
-            case _:
                 }
             }
+        }
+        controls.sort(function(a, b) return a.playerId.compare(b.playerId));
+        if (controls.length > 0) {
+            controls[0].controller = HUMAN(0);
+            controls[0].name = ControllerParser.defaultName(controls[0].controller);
+        }
+        return controls;
+    }
 
-    private function choiceFont():Void {
-        if (fontPopup == null) {
-            fontPopup = new FontPopup();
+    private function slotViewFactory(index:Int, value:PlayerControl):SlotView {
+        var result = new SlotView();
+        result.select.onSelect.connect(function(controller:Controller) setController(value, controller));
+        result.control = value;
+        return result;
+    }
+
+    private function setController(value:PlayerControl, controller:Controller):Void {
+        switch controller {
+            case NONE:
+            case _:
+                for (view in slotsView.dataViews) {
+                    if (view.control.controller.equals(controller)) {
+                        view.control.controller = NONE;
+                        view.select.selected = NONE;
+                        view.control.name = null;
+                    }
+                }
+        }
+        value.controller = controller;
+        value.name = ControllerParser.defaultName(controller);
+    }
+
+    private function presetViewFactory(index:Int, value:GamePreset):ButtonView {
+        var result = new ButtonView();
+        result.style = 'button${!progress.isPresetCompleted(start.level.id, value.id) ? ".active" : ""}';
+        result.text = value.name;
+        result.disabled = !progress.isPresetAvailable(start.level.id, value.id);
+        return result;
+    }
+
+    private function onPresetSelect(value:GamePreset):Void {
+        if (progress.isPresetAvailable(start.level.id, value.id)) {
+            start.state.presetId = value.id;
+            start.state.controls = slotsView.data;
+            switcher.change(GameFrame.ID, LOCAL(start));
         }
-        fontPopup
-        .show()
-        .then(function(font) Style.register(font))
-        .catchError(function(e) {});
     }
 }

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

@@ -1,41 +1,39 @@
 ---
 views:
-    - $type: haxework.view.VGroupView
-      skinId: container
+  - $type: haxework.view.group.VGroupView
+    style: container
+    views:
+      - id: header
+        $type: haxework.view.form.LabelView
+        style: text.header
+      - id: slots
+        $type: haxework.view.data.DataView
+        geometry.padding: 10
+        geometry.width: 100%
+        geometry.height: 100%
+        layout.hAlign: center
+        overflow.y: scroll
+        factory: ~slotViewFactory
+        layout:
+          $type: haxework.view.layout.VerticalLayout
+          # $type: haxework.view.layout.TailLayout
+          margin: 5
+  - $type: haxework.view.group.HGroupView
+    style: panel
     layout.margin: 10
     views:
-          - $type: haxework.view.LabelView
-            text: Tank'z
-            skinId: font
-            fontSize: 100
-            geometry.margin.bottom: 30
-          - $type: haxework.view.ButtonView
-            skinId: button
-            +onPress: $code:startGame('classic')
-            text: Classic
-          - $type: haxework.view.ButtonView
-            skinId: button
-            +onPress: $code:startGame('dota')
-            text: DotA
-          - $type: haxework.view.ButtonView
-            skinId: button
-            +onPress: $code:startGame('death')
-            text: DeathMatch
-          - $type: haxework.view.ButtonView
-            skinId: button
-            +onPress: $code:switcher.change('record')
-            text: Records
-          - id: network
-            $type: haxework.view.ButtonView
-            skinId: button
-            +onPress: $code:startNetwork()
-            text: Network
-            #disabled: true
-    - $type: haxework.view.LabelView
-      geometry.hAlign: right
-      geometry.vAlign: top
-      geometry.padding: [20, 5]
-      geometry.position: absolute
-      geometry.margin: [0, 20, 20, 0]
-      skinId: text.box
-      text: $r:text:version
+      - $type: haxework.view.SpriteView
+        geometry.width: 50%
+      - id: presets
+        $type: haxework.view.data.DataView
+        factory: ~presetViewFactory
+        +onDataSelect: ~onPresetSelect
+        layout:
+          $type: haxework.view.layout.HorizontalLayout
+          hAlign: center
+          margin: 5
+      - $type: haxework.view.SpriteView
+        geometry.width: 50%
+      - $type: haxework.view.form.ButtonView
+        style: button.prev
+        +onPress: ~switcher.change("level", start.level.packId)

src/client/haxe/ru/m/tankz/view/common/LifeView.hx

@@ -1,27 +1,32 @@
 package ru.m.tankz.view.common;
 
-import haxework.view.HGroupView;
+import haxework.color.Color;
+import haxework.view.group.HGroupView;
 import haxework.view.ImageView;
-import haxework.view.LabelView;
+import haxework.view.form.LabelView;
 import openfl.Assets;
 import ru.m.tankz.game.GameState;
+import ru.m.tankz.Type;
 
 @:template class LifeView extends HGroupView {
-    @:provide static var currentState:GameState;
 
     @:view("tank") public var tankImage:ImageView;
     @:view("life") public var lifeLabel:LabelView;
     @:view("score") public var scoreLabel:LabelView;
 
+    public var playerId(default, default):PlayerId;
     public var state(null, set):PlayerState;
     public var tank(null, set):String;
-    public var color(null, set):Int;
+    public var color(null, set):Color;
     public var life(null, set):Int;
     public var score(null, set):Int;
 
     private inline function set_state(value:PlayerState):PlayerState {
-        state = value;
-        toUpdate();
+        playerId = value.id;
+        tank = value.tank;
+        color = value.color;
+        life = value.life;
+        score = value.score;
         return state;
     }
 
@@ -33,7 +38,7 @@ import ru.m.tankz.game.GameState;
         return tank;
     }
 
-    private inline function set_color(value:Int):Int {
+    private inline function set_color(value:Color):Color {
         tankImage.color = value;
         return value;
     }
@@ -48,17 +53,6 @@ import ru.m.tankz.game.GameState;
         return value;
     }
 
-    override public function update():Void {
-        super.update();
-        if (state != null && currentState != null) {
-            var tankConfig = currentState.config.getTank(state.tank);
-            tank = tankConfig == null ? 'ba' : tankConfig.skin;
-            color = currentState.config.getColor(state.id);
-            life = state.life;
-            score = state.score;
-        }
-    }
-
     public static inline function factory(index:Int, data:PlayerState):LifeView {
         var result = new LifeView();
         result.state = data;

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

@@ -4,10 +4,12 @@ views:
   - id: tank
     $type: haxework.view.ImageView
   - id: life
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [50, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 50
+    geometry.height: 38
   - id: score
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [100, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 100
+    geometry.height: 38

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

@@ -1,119 +0,0 @@
-package ru.m.tankz.view.common;
-
-import haxework.resources.IResources;
-import haxework.color.ColorUtil;
-import haxework.view.DataView;
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
-import haxework.view.skin.ISkin;
-import haxework.view.ToggleButtonView;
-import ru.m.tankz.control.Control;
-import ru.m.tankz.game.GameState;
-import ru.m.tankz.Type.TeamId;
-
-class TeamButton extends ToggleButtonView {
-    public var team(default, set):TeamId;
-
-    private function set_team(value:TeamId):TeamId {
-        if (team != value) {
-            team = value;
-            text = team.substr(0, 1).toUpperCase() + team.substr(1);
-        }
-        return team;
-    }
-}
-
-class TeamSkin implements ISkin<TeamButton> {
-
-    @:provide private static var resources:IResources;
-
-    public var color(default, default):Int;
-
-    public function new(color:Int) {
-        this.color = color;
-    }
-
-    public function draw(view:TeamButton):Void {
-        view.fontColor = view.on ? 0xffffff : resources.color.get("dark");
-        var graphics = view.content.graphics;
-        graphics.beginFill(view.on ? color : resources.color.get("light"));
-        graphics.lineStyle(2, color, 0.5);
-        graphics.drawRoundRect(0, 0, view.width, view.height, 5, 5);
-        graphics.endFill();
-        graphics.lineStyle();
-    }
-}
-
-@:template class PlayerView extends HGroupView {
-    private static inline var TEAM_NONE:TeamId = "none";
-
-    public var item_index(default, set):Int;
-    public var data(default, set):Array<PlayerState>;
-    public var colorize:Bool;
-
-    @:view var label(default, null):LabelView;
-    @:view var teams(default, null):DataView<TeamId, ToggleButtonView>;
-
-    @:provide var state:GameState;
-
-    private var player:PlayerState;
-
-    private function teamViewFactory(index:Int, team:TeamId) {
-        var view = new TeamButton();
-        var color = getTeamColor(team);
-        view.skin = [Style.text(color), new TeamSkin(color)];
-        view.geometry.padding = [10, 5];
-        view.team = team;
-        view.on = team == TEAM_NONE;
-        return view;
-    }
-
-    private function set_data(value:Array<PlayerState>):Array<PlayerState> {
-        data = value;
-        teams.data = [TEAM_NONE].concat([for (team in state.preset.teams) team.id]);
-        return data;
-    }
-
-    private function getTeamColor(teamId:TeamId):Int {
-        var color = 0xaaaaaa;
-        for (team in state.preset.teams) {
-            if (team.id == teamId) {
-                if (!team.color.zero) color = team.color;
-                break;
-            }
-        }
-        return color;
-    }
-
-    private function set_item_index(value:Int):Int {
-        item_index = value;
-        label.text = 'Player ${item_index+1}';
-        return item_index;
-    }
-
-    private function onTeamSelect(team:TeamId) {
-        if (player != null) {
-            player.controller = NONE;
-            player.color = 0;
-            player = null;
-        }
-        for (p in data) {
-            if (p.id.team == team) {
-                switch (p.controller) {
-                    case NONE:
-                        player = p;
-                        player.controller = HUMAN(item_index);
-                        if (colorize) {
-                            player.color = ColorUtil.multiply(state.config.getTeam(team).color, 1.7);
-                        }
-                        break;
-                    case _:
-                }
-            }
-        }
-        for (view in teams.views) {
-            var button = cast(view, TeamButton);
-            button.on = team == button.team;
-        }
-    }
-}

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

@@ -1,16 +0,0 @@
----
-geometry.margin: 5
-layout.margin: 10
-layout.vAlign: middle
-views:
-  - id: label
-    $type: haxework.view.LabelView
-    skinId: text
-  - id: teams
-    $type: haxework.view.DataView
-    factory: $this:teamViewFactory
-    layout:
-      $type: haxework.view.layout.TailLayout
-      rowSize: 5
-      margin: 3
-    +onDataSelect: $this:onTeamSelect

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

@@ -1,11 +1,10 @@
 package ru.m.tankz.view.common;
 
-import ru.m.tankz.game.record.GamePlayer;
-import ru.m.tankz.game.IGame;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
 import haxework.view.list.ListView;
+import ru.m.tankz.game.GameInit;
 import ru.m.tankz.game.record.GameRecord;
 import ru.m.tankz.storage.RecordStorage;
 
@@ -20,7 +19,6 @@ import ru.m.tankz.storage.RecordStorage;
 
     @:provide var recordStorage:RecordStorage;
     @:provide var switcher:FrameSwitcher;
-    @:provide var game:IGame;
 
     private function set_data(value:GameRecordInfo):GameRecordInfo {
         if (data != value) {
@@ -35,8 +33,7 @@ import ru.m.tankz.storage.RecordStorage;
 
     private function play():Void {
         var record = recordStorage.read(data.id);
-        game = new GamePlayer(record);
-        switcher.change(GameFrame.ID);
+        switcher.change(GameFrame.ID, RECORD(record));
     }
 
     private function delete():Void {

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

@@ -1,29 +1,33 @@
 ---
-geometry.size.height: 38
+geometry.height: 38
 layout.margin: 5
 layout.vAlign: middle
 views:
   - id: play
-    $type: haxework.view.ButtonView
-    skinId: button.start.small
-    +onPress: $code:play()
+    $type: haxework.view.form.ButtonView
+    style: button.start.small
+    +onPress: ~play()
   - id: date
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [250, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 200
+    geometry.height: 38
   - id: type
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [250, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 200
+    geometry.height: 38
   - id: level
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [50, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 100
+    geometry.height: 38
   - id: preset
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.fixed: [50, 38]
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.width: 100
+    geometry.height: 38
   - id: delete
-    $type: haxework.view.ButtonView
-    skinId: button.close.small
-    +onPress: $code:delete()
+    $type: haxework.view.form.ButtonView
+    style: button.close.small
+    +onPress: ~delete()

src/client/haxe/ru/m/tankz/view/common/SlotView.hx

@@ -0,0 +1,30 @@
+package ru.m.tankz.view.common;
+
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
+import haxework.view.form.SelectView;
+import ru.m.tankz.control.Controller;
+import ru.m.tankz.control.PlayerControl;
+
+@:template class SlotView extends HGroupView {
+
+    @:view("slot") public var slotLabel:LabelView;
+    @:view("select") public var select:SelectView<Controller>;
+
+    public var control(default, set):PlayerControl;
+
+    private function set_control(value:PlayerControl):PlayerControl {
+        control = value;
+        slotLabel.text = '${control.playerId.team} #${control.playerId.index}';
+        slotLabel.font.color = value.color;
+        select.selected = control.controller;
+        return control;
+    }
+
+    private function onControllerSelect(value:Controller):Void {
+        select.currentView.style = switch value {
+            case HUMAN(_): "button.active";
+            case _: "button";
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+---
+geometry.height: 48
+geometry.padding: 2
+layout.margin: 10
+views:
+  - id: slot
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.height: 100%
+    geometry.width: 150
+  - id: select
+    $type: haxework.view.form.SelectView<ru.m.tankz.control.Controller>
+    geometry.width: 150
+    labelBuilder: |
+      ~function(controller) {
+          var result = ControllerParser.defaultName(controller);
+          return result == null ? "None" : result;
+      }
+    data:
+        - ~ru.m.tankz.control.Controller.NONE
+        - ~ru.m.tankz.control.Controller.HUMAN(0)
+        - ~ru.m.tankz.control.Controller.HUMAN(1)
+    selected: ~ru.m.tankz.control.Controller.NONE
+    +onSelect: ~onControllerSelect

src/client/haxe/ru/m/tankz/view/game/ClassicGamePanel.hx

@@ -1,7 +1,7 @@
 package ru.m.tankz.view.game;
 
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
+import haxework.view.form.LabelView;
+import haxework.view.group.VGroupView;
 import ru.m.geom.Direction;
 import ru.m.tankz.game.GameEvent;
 import ru.m.tankz.game.GameState;
@@ -35,9 +35,9 @@ import ru.m.tankz.view.common.LifeView;
 
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case START(state, level):
-                this.level.text = 'Level ${level.id}';
-                refresh(state);
+            case START(start):
+                this.level.text = 'Level ${start.level.id}';
+                refresh(start.state);
             case CHANGE(TEAM_LIFE(teamId, life)):
                 if (teamId == ClassicGame.BOT) {
                     bot.life = life;

src/client/haxe/ru/m/tankz/view/game/ClassicGamePanel.yaml

@@ -1,16 +1,16 @@
 ---
 geometry.padding: 5
-geometry.size.height: 100%
+geometry.height: 100%
 layout.margin: 5
 layout.hAlign: left
 views:
   - id: level
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.height: 38
-    geometry.size.width: 100%
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.height: 38
+    geometry.width: 100%
   - $type: haxework.view.SpriteView
-    geometry.size.height: 50%
+    geometry.height: 50%
   - id: bot
     $type: ru.m.tankz.view.common.LifeView
     tank: ba

src/client/haxe/ru/m/tankz/view/game/DeathGamePanel.hx

@@ -1,11 +1,13 @@
 package ru.m.tankz.view.game;
 
-import haxework.view.DataView;
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
+import haxework.view.data.DataView;
+import haxework.view.form.LabelView;
+import haxework.view.group.VGroupView;
 import ru.m.geom.Direction;
+import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.game.GameEvent;
 import ru.m.tankz.game.GameState;
+import ru.m.tankz.preset.DeathGame;
 import ru.m.tankz.view.common.LifeView;
 
 @:template class DeathGamePanel extends VGroupView implements IGamePanel {
@@ -14,15 +16,31 @@ import ru.m.tankz.view.common.LifeView;
     @:view var level:LabelView;
     @:view var players:DataView<PlayerState, LifeView>;
 
+    @:provide var configBundle:IConfigBundle;
+
+    private function getView(playerId):LifeView {
+        for (view in players.dataViews) {
+            if (view.playerId == playerId) {
+                return view;
+            }
+        }
+        return null;
+    }
+
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case START(state, level):
-                this.level.text = 'Level ${level.id}';
-                players.data = Lambda.array(state.players);
+            case START(start):
+                this.level.text = 'Level ${start.level.id}';
+                players.data = Lambda.array(start.state.players);
+            case SPAWN(TANK(_, _, playerId, info)):
+                var skin = configBundle.get(DeathGame.TYPE).getTank(info.type).skin;
+                getView(playerId).tank = skin;
+                getView(playerId).color = info.color;
+            case CHANGE(PLAYER_LIFE(playerId, life)):
+                getView(playerId).life = life;
+            case CHANGE(PLAYER_SCORE(playerId, score)):
+                getView(playerId).score = score;
             case _:
-                for (view in players.views) {
-                    view.toUpdate();
-                }
         }
     }
 }

src/client/haxe/ru/m/tankz/view/game/DeathGamePanel.yaml

@@ -1,18 +1,18 @@
 ---
 geometry.padding: 5
-geometry.size.height: 100%
+geometry.height: 100%
 layout.margin: 5
 layout.hAlign: right
 views:
   - id: level
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.height: 38
-    geometry.size.width: 100%
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.height: 38
+    geometry.width: 100%
   - $type: haxework.view.SpriteView
-    geometry.size.height: 50%
+    geometry.height: 50%
   - id: players
-    $type: haxework.view.DataView
+    $type: haxework.view.data.DataView
     layout:
       $type: haxework.view.layout.VerticalLayout
-    factory: $code:ru.m.tankz.view.common.LifeView.factory
+    factory: ~ru.m.tankz.view.common.LifeView.factory

src/client/haxe/ru/m/tankz/view/game/DotaGamePanel.hx

@@ -1,7 +1,7 @@
 package ru.m.tankz.view.game;
 
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
 import ru.m.geom.Direction;
 import ru.m.tankz.game.GameEvent;
 import ru.m.tankz.game.GameState;
@@ -33,9 +33,9 @@ import ru.m.tankz.view.common.LifeView;
 
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case START(state, level):
-                this.level.text = 'Level ${level.id}';
-                refresh(state);
+            case START(start):
+                this.level.text = 'Level ${start.level.id}';
+                refresh(start.state);
             case CHANGE(TEAM_LIFE(teamId, life)):
                 getLifeView(teamId).life = life;
             case CHANGE(TEAM_SCORE(teamId, score)):

src/client/haxe/ru/m/tankz/view/game/DotaGamePanel.yaml

@@ -1,5 +1,5 @@
 ---
-geometry.size.width: 100%
+geometry.width: 100%
 layout.margin: 20
 views:
   - id: radiant
@@ -7,14 +7,14 @@ views:
     tank: bc
     color: 0xff4422
   - $type: haxework.view.SpriteView
-    geometry.size.width: 25%
+    geometry.width: 25%
   - id: level
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.height: 38
-    geometry.size.width: 50%
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.height: 38
+    geometry.width: 50%
   - $type: haxework.view.SpriteView
-    geometry.size.width: 25%
+    geometry.width: 25%
   - id: dire
     $type: ru.m.tankz.view.common.LifeView
     tank: bc

src/client/haxe/ru/m/tankz/view/game/GameView.hx

@@ -1,7 +1,7 @@
 package ru.m.tankz.view.game;
 
-import haxework.view.IGroupView;
-import haxework.view.VGroupView;
+import haxework.view.group.IGroupView;
+import haxework.view.group.VGroupView;
 import ru.m.geom.Direction;
 import ru.m.tankz.preset.ClassicGame;
 import ru.m.tankz.preset.DeathGame;
@@ -50,4 +50,18 @@ import ru.m.tankz.Type;
             case _: throw 'Unsupported position: ${position}';
         }
     }
+
+    override public function update():Void {
+        super.update();
+        if (parent != null) {
+            var s = Math.min(parent.width / width, parent.height / height);
+            if (s < 1) {
+                content.scaleX = content.scaleY = s;
+                content.x = (parent.width - width * s) / 2;
+                content.y = (parent.height - height * s) / 2;
+            } else {
+                content.scaleX = content.scaleY = 1;
+            }
+        }
+    }
 }

src/client/haxe/ru/m/tankz/view/game/GameView.yaml

@@ -1,22 +1,22 @@
 ---
 views:
   - id: top
-    $type: haxework.view.GroupView
+    $type: haxework.view.group.GroupView
     layout.hAlign: center
-    geometry.size.width: 100%
-  - $type: haxework.view.HGroupView
+    geometry.width: 100%
+  - $type: haxework.view.group.HGroupView
     views:
       - id: left
-        $type: haxework.view.GroupView
+        $type: haxework.view.group.GroupView
         layout.vAlign: middle
-        geometry.size.height: 100%
+        geometry.height: 100%
       - id: render
         $type: ru.m.tankz.render.Render
       - id: right
-        $type: haxework.view.GroupView
+        $type: haxework.view.group.GroupView
         layout.vAlign: middle
-        geometry.size.height: 100%
+        geometry.height: 100%
   - id: bottom
-    $type: haxework.view.GroupView
+    $type: haxework.view.group.GroupView
     layout.hAlign: center
-    geometry.size.width: 100%
+    geometry.width: 100%

src/client/haxe/ru/m/tankz/view/network/RoomFrame.hx

@@ -1,17 +1,16 @@
 package ru.m.tankz.view.network;
 
-import haxework.view.ButtonView;
+import haxework.view.form.ButtonView;
 import haxework.view.frame.FrameSwitcher;
+import haxework.view.frame.FrameView;
 import haxework.view.list.VListView;
-import haxework.view.TextView;
-import haxework.view.VGroupView;
-import ru.m.tankz.game.IGame;
-import ru.m.tankz.network.NetworkGame;
+import haxework.view.text.TextView;
+import ru.m.tankz.game.GameInit;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.room.RoomProto;
 import ru.m.tankz.proto.room.RoomSlotProto;
 
-@:template class RoomFrame extends VGroupView {
+@:template class RoomFrame extends FrameView<RoomProto> {
 
     public static inline var ID = "room";
 
@@ -21,7 +20,10 @@ import ru.m.tankz.proto.room.RoomSlotProto;
 
     @:provide var switcher:FrameSwitcher;
     @:provide var network:NetworkManager;
-    @:provide var game:IGame;
+
+    public function new() {
+        super(ID);
+    }
 
     private function refresh(room:RoomProto):Void {
         if (room != null) {
@@ -29,22 +31,19 @@ import ru.m.tankz.proto.room.RoomSlotProto;
             info.text = '${room.game.type} #${room.game.level}';
             slots.data = room.slots;
             if (room.game.started) {
-                if (this.game == null) {
-                    this.game = new NetworkGame(network);
-                }
-                switcher.change(GameFrame.ID);
+                switcher.change(GameFrame.ID, NETWORK(network));
             }
         } else {
             Timer.delay(function() switcher.change(RoomListFrame.ID), 1);
         }
     }
 
-    public function onShow():Void {
-        refresh(network.room);
+    override public function onShow(data:RoomProto):Void {
+        refresh(data);
         network.roomSignal.connect(refresh);
     }
 
-    public function onHide():Void {
+    override public function onHide():Void {
         network.roomSignal.disconnect(refresh);
     }
 }

src/client/haxe/ru/m/tankz/view/network/RoomFrame.yaml

@@ -1,38 +1,39 @@
 ---
+geometry.stretch: true
+layout:
+    $type: haxework.view.layout.VerticalLayout
 views:
-  - $type: haxework.view.VGroupView
-    skinId: container
+  - $type: haxework.view.group.VGroupView
+    style: container
     geometry.padding: 20
     layout.margin: 10
     views:
       - id: header
-        $type: haxework.view.LabelView
+        $type: haxework.view.form.LabelView
         geometry.margin.bottom: 20
-        skinId: text.header
+        style: text.header
         text: Game Room
-      - $type: haxework.view.HGroupView
+      - $type: haxework.view.group.HGroupView
         layout.margin: 10
         views:
           - id: info
-            $type: haxework.view.LabelView
+            $type: haxework.view.form.LabelView
             geometry.padding: [30, 10]
-            skinId: text.box
+            style: text.box
           - id: start
-            $type: haxework.view.ButtonView
-            skinId: button.simple
+            $type: haxework.view.form.ButtonView
             text: Start
-            +onPress: $code:network.startGame()
+            +onPress: ~network.startGame()
             visible: false
           - id: leave
-            $type: haxework.view.ButtonView
-            skinId: button.simple
+            $type: haxework.view.form.ButtonView
             text: Leave
-            +onPress: $code:network.leaveGame()
+            +onPress: ~network.leaveGame()
       - $type: haxework.view.SpriteView
-        geometry.size.width: 100%
-        geometry.size.height: 3
-        skinId: line
+        geometry.width: 100%
+        geometry.height: 3
+        style: line
       - id: slots
         $type: haxework.view.list.VListView
-        geometry.size.stretch: true
-        factory: $code:ru.m.tankz.view.network.SlotItemView.factory
+        geometry.stretch: true
+        factory: ~ru.m.tankz.view.network.SlotItemView.factory

src/client/haxe/ru/m/tankz/view/network/RoomItemView.hx

@@ -2,9 +2,9 @@ package ru.m.tankz.view.network;
 
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.room.RoomSlotProto;
-import haxework.view.ButtonView;
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
+import haxework.view.form.ButtonView;
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
 import haxework.view.list.ListView;
 import ru.m.tankz.proto.room.RoomProto;
 
@@ -22,7 +22,7 @@ import ru.m.tankz.proto.room.RoomProto;
 
     private function set_data(value:RoomProto):RoomProto {
         data = value;
-        creatorView.skinId = value.creator.uuid == network.user.uuid ? "text.box.active" : "text.box";
+        creatorView.style = value.creator.uuid == network.user.uuid ? "text.box.active" : "text.box";
         creatorView.text = value.creator.name;
         typeView.text = '${value.game.type} #${value.game.level}';
         var used = value.slots.filter(function(slot:RoomSlotProto) return slot.hasUser()).length;

src/client/haxe/ru/m/tankz/view/network/RoomItemView.yaml

@@ -1,27 +1,26 @@
 ---
-# geometry.size.width: 100%
-geometry.size.height: 48
+# geometry.width: 100%
+geometry.height: 48
 layout.margin: 10
 layout.hAlign: center
 views:
   - id: creator
-    $type: haxework.view.LabelView
-    geometry.size.height: 100%
-    geometry.size.width: 200
-    skinId: text.box
+    $type: haxework.view.form.LabelView
+    geometry.height: 100%
+    geometry.width: 200
+    style: text.box
   - id: type
-    $type: haxework.view.LabelView
-    geometry.size.height: 100%
-    geometry.size.width: 200
-    skinId: text.box
+    $type: haxework.view.form.LabelView
+    geometry.height: 100%
+    geometry.width: 200
+    style: text.box
   - id: users
-    $type: haxework.view.LabelView
-    geometry.size.height: 100%
-    geometry.size.width: 150
-    skinId: text.box
+    $type: haxework.view.form.LabelView
+    geometry.height: 100%
+    geometry.width: 150
+    style: text.box
   - id: join
-    $type: haxework.view.ButtonView
-    geometry.size.height: 100%
-    skinId: button.simple
+    $type: haxework.view.form.ButtonView
+    geometry.height: 100%
     text: Join
-    +onPress: $code:join()
+    +onPress: ~join()

src/client/haxe/ru/m/tankz/view/network/RoomListFrame.hx

@@ -1,13 +1,13 @@
 package ru.m.tankz.view.network;
 
 import haxework.view.frame.FrameSwitcher;
+import haxework.view.frame.FrameView;
 import haxework.view.list.VListView;
-import haxework.view.VGroupView;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.room.RoomProto;
 import ru.m.tankz.view.popup.CreateGamePopup;
 
-@:template class RoomListFrame extends VGroupView {
+@:template class RoomListFrame extends FrameView<Dynamic> {
     public static inline var ID = "room_list";
 
     @:view var games:VListView<RoomProto>;
@@ -15,13 +15,17 @@ import ru.m.tankz.view.popup.CreateGamePopup;
     @:provide var switcher:FrameSwitcher;
     @:provide var network:NetworkManager;
 
-    public function onShow():Void {
+    public function new() {
+        super(ID);
+    }
+
+    override public function onShow(_:Dynamic):Void {
         network.listRoomSignal.connect(onRoomList);
         network.roomSignal.connect(onRoom);
         network.listGame(true);
     }
 
-    public function onHide():Void {
+    override public function onHide():Void {
         network.listRoomSignal.disconnect(onRoomList);
         network.roomSignal.disconnect(onRoom);
         network.listGame(false);
@@ -41,7 +45,7 @@ import ru.m.tankz.view.popup.CreateGamePopup;
 
     private function onRoom(room:RoomProto):Void {
         if (room != null) {
-            switcher.change(RoomFrame.ID);
+            switcher.change(RoomFrame.ID, room);
         }
     }
 }

src/client/haxe/ru/m/tankz/view/network/RoomListFrame.yaml

@@ -1,20 +1,22 @@
 ---
+geometry.stretch: true
+layout:
+    $type: haxework.view.layout.VerticalLayout
 views:
-    - $type: haxework.view.VGroupView
-      skinId: container
+    - $type: haxework.view.group.VGroupView
+      style: container
       geometry.padding: 20
       views:
           - id: header
-            $type: haxework.view.LabelView
+            $type: haxework.view.form.LabelView
             geometry.margin.bottom: 20
-            skinId: text.header
+            style: text.header
             text: Games List
-          - $type: haxework.view.ButtonView
-            skinId: button.simple
+          - $type: haxework.view.form.ButtonView
             text: Create
-            +onPress: $code:create()
+            +onPress: ~create()
           - id: games
             $type: haxework.view.list.VListView
-            geometry.size.stretch: true
-            factory: $code:ru.m.tankz.view.network.RoomItemView.factory
+            geometry.stretch: true
+            factory: ~ru.m.tankz.view.network.RoomItemView.factory
             geometry.margin: 10

src/client/haxe/ru/m/tankz/view/network/SlotItemView.hx

@@ -1,8 +1,8 @@
 package ru.m.tankz.view.network;
 
-import haxework.view.ButtonView;
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
+import haxework.view.form.ButtonView;
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
 import haxework.view.list.ListView;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.network.NetworkManager;
@@ -26,12 +26,10 @@ import ru.m.tankz.proto.room.RoomSlotProto;
         userView.text = value.hasUser() ? value.user.name : "(NONE)";
         userView.visible = value.hasUser();
         selectButton.visible = !value.hasUser();
-        userView.skinId = (value.hasUser() && value.user.uuid == network.user.uuid) ? "text.box.active" : "text.box";
+        userView.style = (value.hasUser() && value.user.uuid == network.user.uuid) ? "text.box.active" : "text.box";
         var config = configBundle.get(network.room.game.type);
         var color = config.getColor([value.slot.team, value.slot.index]);
-        if (color != null) {
-            typeView.skin = Style.textBox(color);
-        }
+        typeView.font.color = color;
         return data;
     }
 

src/client/haxe/ru/m/tankz/view/network/SlotItemView.yaml

@@ -1,25 +1,24 @@
 ---
-geometry.size.height: 48
+geometry.height: 48
 geometry.padding: 2
 layout.margin: 10
 views:
   - id: type
-    $type: haxework.view.LabelView
-    skinId: text.box
-    geometry.size.height: 100%
-    geometry.size.width: 150
-  - $type: haxework.view.HGroupView
+    $type: haxework.view.form.LabelView
+    style: text.box
+    geometry.height: 100%
+    geometry.width: 150
+  - $type: haxework.view.group.HGroupView
     layout.hAlign: center
     layout.vAlign: middle
-    geometry.size.height: 100%
-    geometry.size.width: 300
+    geometry.height: 100%
+    geometry.width: 300
     views:
     - id: user
-      $type: haxework.view.LabelView
-      geometry.size.stretch: true
-      skinId: text.box
+      $type: haxework.view.form.LabelView
+      geometry.stretch: true
+      style: text.box
     - id: select
-      $type: haxework.view.ButtonView
-      skinId: button.simple
+      $type: haxework.view.form.ButtonView
       text: Select
-      +onPress: $this:select()
+      +onPress: ~select()

src/client/haxe/ru/m/tankz/view/popup/CreateGamePopup.hx

@@ -1,8 +1,8 @@
 package ru.m.tankz.view.popup;
 
-import haxework.view.DataView;
+import haxework.view.data.DataView;
 import haxework.view.popup.PopupView;
-import haxework.view.ToggleButtonView;
+import haxework.view.form.ToggleButtonView;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.bundle.ILevelBundle;
 import ru.m.tankz.config.Config;
@@ -35,7 +35,6 @@ private typedef Result = {
 
     private function gameTypeViewFactory(index:Int, type:GameType):ToggleButtonView {
         var result = new ToggleButtonView();
-        result.skinId = "button.simple";
         result.text = type;
         result.on = type == this.type;
         return result;
@@ -52,7 +51,7 @@ private typedef Result = {
 
     private function levelViewFactory(index:Int, value:LevelConfig):ToggleButtonView {
         var result = new ToggleButtonView();
-        result.skinId = "button.level";
+        result.style = "button.level";
         result.text = Std.string(value.id);
         return result;
     }

src/client/haxe/ru/m/tankz/view/popup/CreateGamePopup.yaml

@@ -2,75 +2,70 @@
 layout.hAlign: center
 layout.vAlign: middle
 view:
-  $type: haxework.view.VGroupView
+    $type: haxework.view.group.VGroupView
     layout.hAlign: center
-  geometry.size.stretch: true
+    geometry.stretch: true
     geometry.margin: 10
-  skinId: window
+    style: window
     views:
-    - $type: haxework.view.HGroupView
-      geometry.size.width: 100%
+        -   $type: haxework.view.group.HGroupView
+            geometry.width: 100%
             geometry.padding: 10
             layout.vAlign: middle
             views:
                 -   id: name
-          $type: haxework.view.LabelView
-          geometry.size.width: 100%
+                    $type: haxework.view.form.LabelView
+                    geometry.width: 100%
                     geometry.margin.left: 10
                     layout.hAlign: left
-          skinId: text
+                    style: text
                     text: New game
-        - $type: haxework.view.ButtonView
-          skinId: window.close
-          +onPress: $code:reject('close')
-    - $type: haxework.view.VGroupView
-      geometry.size.stretch: true
+                -   $type: haxework.view.form.ButtonView
+                    style: window.close
+                    +onPress: ~reject('close')
+        -   $type: haxework.view.group.VGroupView
+            geometry.stretch: true
             geometry.padding: [5, 20]
             layout.margin: 5
             layout.hAlign: center
             views:
-          - $type: haxework.view.LabelView
-            geometry.size.width: 100%
-            skinId: text
+                -   $type: haxework.view.form.LabelView
+                    geometry.width: 100%
+                    style: text
                     text: Type
                 -   id: type
-            $type: haxework.view.DataView
-            geometry.size.width: 100%
+                    $type: haxework.view.data.DataView
+                    geometry.width: 100%
                     layout:
                         $type: haxework.view.layout.TailLayout
                         margin: 10
-            factory: $this:gameTypeViewFactory
-            +onItemSelect: $this:onGameTypeSelect
+                    factory: ~gameTypeViewFactory
+                    +onItemSelect: ~onGameTypeSelect
                     data:
                         - "classic"
                         - "dota"
                         - "death"
-          - $type: haxework.view.LabelView
-            geometry.size.width: 100%
-            skinId: text
+                -   $type: haxework.view.form.LabelView
+                    geometry.width: 100%
+                    style: text
                     text: Level
-          - $type: haxework.view.ScrollView
-            geometry.size.stretch: true
-            scroll:
-                $type: haxework.view.list.VScrollBarView
-                skinId: scroll.vertical
-            view:
-                id: level
-                $type: haxework.view.DataView
-                geometry.size.width: 100%
+                -   id: level
+                    $type: haxework.view.data.DataView
+                    geometry.width: 100%
+                    geometry.height: 100%
+                    overflow.y: scroll
                     layout:
                         $type: haxework.view.layout.TailLayout
                         rowSize: 10
                         margin: 5
-                factory: $this:levelViewFactory
-                +onItemSelect: $this:onLevelSelect
+                    factory: ~levelViewFactory
+                    +onItemSelect: ~onLevelSelect
                     geometry.padding: 10
-    - $type: haxework.view.HGroupView
+        -   $type: haxework.view.group.HGroupView
             layout.hAlign: center
             layout.margin: 5
-      skinId: panel
+            style: panel
             views:
-        - $type: haxework.view.ButtonView
-          skinId: button.simple
+                -   $type: haxework.view.form.ButtonView
                     text: Create
-          +onPress: $code:submit()
+                    +onPress: ~submit()

src/client/haxe/ru/m/tankz/view/popup/FontPopup.hx

@@ -1,41 +0,0 @@
-package ru.m.tankz.view.popup;
-
-import flash.text.Font;
-import flash.text.FontType;
-import haxework.view.list.LabelListItem;
-import haxework.view.list.ListView;
-import haxework.view.popup.PopupView;
-
-class FontLabelView extends LabelListItem<Font> {
-
-    override private function set_data(value:Font):Font {
-        skinId = item_index % 2 == 0 ? "light" : "dark";
-        data = value;
-        text = value.fontName;
-        fontFamily = value.fontName;
-        fontEmbed = switch value.fontType {
-            case DEVICE: false;
-            case _: true;
-        };
-        return data;
-    }
-}
-
-@:template class FontPopup extends PopupView<Font> {
-
-    @:view var fonts:ListView<Font>;
-
-    private function init():Void {
-        var values = Font.enumerateFonts(true);
-        values.sort(function(a:Font, b:Font) {
-            return switch [a.fontType, b.fontType] {
-                case [DEVICE, _]: 1;
-                case [_, DEVICE]: -1;
-                case _: 0;
-            }
-        });
-        fonts.data = values;
-    }
-
-    private function fontViewFactory() return new FontLabelView();
-}

src/client/haxe/ru/m/tankz/view/popup/FontPopup.yaml

@@ -1,27 +0,0 @@
----
-view:
-    $type: haxework.view.VGroupView
-    geometry.size.width: 400
-    geometry.size.height: 80%
-    geometry.padding: 10
-    geometry.hAlign: center
-    geometry.vAlign: middle
-    skinId: dark
-    views:
-        - id: fonts
-          $type: haxework.view.list.VListView
-          geometry.size.stretch: true
-          factory: $this:fontViewFactory
-          +onItemSelect: $code:function(item) close(item.data)
-          scroll:
-              $type: haxework.view.list.VScrollBarView
-              skinId: scroll.vertical
-        - $type: haxework.view.HGroupView
-          geometry.size.width: 100%
-          geometry.margin.top: 10
-          layout.hAlign: right
-          views:
-              - $type: haxework.view.ButtonView
-                skinId: button.simple
-                text: Cancel
-                +onPress: $code:reject('cancel')

src/client/haxe/ru/m/tankz/view/popup/LevelPopup.hx

@@ -1,63 +0,0 @@
-package ru.m.tankz.view.popup;
-
-import haxework.view.ButtonView;
-import haxework.view.DataView;
-import haxework.view.LabelView;
-import haxework.view.popup.PopupView;
-import haxework.view.ToggleButtonView;
-import ru.m.tankz.config.Config;
-import ru.m.tankz.game.PackProgress;
-
-private typedef Result = {
-    var control:ControlPreset;
-    var preset:GamePreset;
-}
-
-@:template class LevelPopup extends PopupView<Result> {
-
-    private var level:LevelConfig;
-    private var progress:PackProgress;
-
-    @:view var name:LabelView;
-    @:view("presets") var presetsView:DataView<GamePreset, ButtonView>;
-    @:view("controls") var controlsView:DataView<ControlPreset, ToggleButtonView>;
-    private var control:ControlPreset;
-
-    public function setData(level:LevelConfig, presets:Array<GamePreset>, controls:Array<ControlPreset>, progress:PackProgress):Void {
-        this.level = level;
-        this.progress = progress;
-        name.text = '${level.id}. ${level.name != null ? level.name : "#"}';
-        presetsView.data = presets;
-        control = controls[0];
-        controlsView.data = controls;
-    }
-
-    private function presetViewFactory(index:Int, value:GamePreset):ButtonView {
-        var result = new ButtonView();
-        result.skinId = 'button.simple${!progress.isPresetCompleted(level.id, value.id) ? ".active" : ""}';
-        result.text = value.name;
-        result.disabled = !progress.isPresetAvailable(level.id, value.id);
-        return result;
-    }
-
-    private function onPresetSelect(value:GamePreset):Void {
-        if (progress.isPresetAvailable(level.id, value.id)) {
-            close({control: control, preset: value});
-        }
-    }
-
-    private function controlViewFactory(index:Int, value:ControlPreset):ToggleButtonView {
-        var result = new ToggleButtonView();
-        result.skinId = 'button.simple.active';
-        result.on = control == value;
-        result.text = value.name;
-        return result;
-    }
-
-    private function onControlSelect(index:Int, value:ControlPreset, view:ToggleButtonView):Void {
-        control = value;
-        for (v in controlsView.dataViews) {
-            v.on = v == view;
-        }
-    }
-}

src/client/haxe/ru/m/tankz/view/popup/LevelPopup.yaml

@@ -1,44 +0,0 @@
----
-layout.hAlign: center
-layout.vAlign: middle
-view:
-    $type: haxework.view.VGroupView
-    layout.hAlign: center
-    geometry.size.width: 400
-    geometry.size.height: 400
-    skinId: window
-    views:
-        - $type: haxework.view.HGroupView
-          geometry.size.width: 100%
-          geometry.padding: 10
-          layout.vAlign: middle
-          views:
-              - id: name
-                $type: haxework.view.LabelView
-                geometry.size.width: 100%
-                geometry.margin.left: 10
-                layout.hAlign: left
-                skinId: text
-              - $type: haxework.view.ButtonView
-                skinId: window.close
-                +onPress: $code:reject('close')
-        - $type: haxework.view.SpriteView
-          geometry.size.height: 100%
-        - id: controls
-          $type: haxework.view.DataView
-          factory: $this:controlViewFactory
-          +onItemSelect: $this:onControlSelect
-          layout:
-              $type: haxework.view.layout.HorizontalLayout
-              hAlign: center
-              margin: 5
-          skinId: panel
-        - id: presets
-          $type: haxework.view.DataView
-          factory: $this:presetViewFactory
-          +onDataSelect: $this:onPresetSelect
-          layout:
-              $type: haxework.view.layout.HorizontalLayout
-              hAlign: center
-              margin: 5
-          skinId: panel

src/client/haxe/ru/m/tankz/view/popup/LoginPopup.hx

@@ -1,9 +1,9 @@
 package ru.m.tankz.view.popup;
 
 import haxework.log.BaseLogger.LoggerUtil;
-import haxework.view.InputView;
+import haxework.view.form.InputView;
 import haxework.view.popup.PopupView;
-import haxework.view.TextView;
+import haxework.view.text.TextView;
 import ru.m.tankz.network.NetworkManager;
 
 @:template class LoginPopup extends PopupView<User> {

src/client/haxe/ru/m/tankz/view/popup/LoginPopup.yaml

@@ -2,65 +2,64 @@
 layout.hAlign: center
 layout.vAlign: middle
 view:
-    $type: haxework.view.VGroupView
+    $type: haxework.view.group.VGroupView
     layout.hAlign: center
-    geometry.size.width: 400
-    # geometry.size.height: 400
-    skinId: window
+    geometry.width: 400
+    # geometry.height: 400
+    style: window
     views:
-        - $type: haxework.view.HGroupView
-          geometry.size.width: 100%
+        - $type: haxework.view.group.HGroupView
+          geometry.width: 100%
           geometry.padding: 10
           layout.vAlign: middle
           views:
               - id: name
-                $type: haxework.view.LabelView
-                geometry.size.width: 100%
+                $type: haxework.view.form.LabelView
+                geometry.width: 100%
                 geometry.margin.left: 10
                 layout.hAlign: left
-                skinId: text
+                style: text
                 text: Login
-              - $type: haxework.view.ButtonView
-                skinId: window.close
-                +onPress: $code:reject('close')
-        - $type: haxework.view.VGroupView
-          geometry.size.width: 100%
-          # geometry.size.stretch: true
+              - $type: haxework.view.form.ButtonView
+                style: window.close
+                +onPress: ~reject('close')
+        - $type: haxework.view.group.VGroupView
+          geometry.width: 100%
+          # geometry.stretch: true
           geometry.padding: 20
           layout.margin: 5
           views:
-              - $type: haxework.view.LabelView
-                geometry.size.width: 100%
-                skinId: text
+              - $type: haxework.view.form.LabelView
+                geometry.width: 100%
+                style: text
                 text: Username
               - id: username
-                $type: haxework.view.InputView
-                geometry.size.width: 100%
-                geometry.size.height: 28
-                skinId: text.box
-              - $type: haxework.view.LabelView
-                geometry.size.width: 100%
-                skinId: text
+                $type: haxework.view.form.InputView
+                geometry.width: 100%
+                geometry.height: 28
+                style: text.box
+              - $type: haxework.view.form.LabelView
+                geometry.width: 100%
+                style: text
                 text: Password
                 visible: false
               - id: password
-                $type: haxework.view.InputView
+                $type: haxework.view.form.InputView
                 textField.displayAsPassword: true
-                geometry.size.width: 100%
-                geometry.size.height: 28
-                skinId: text.box
+                geometry.width: 100%
+                geometry.height: 28
+                style: text.box
                 visible: false
               - id: error
-                $type: haxework.view.TextView
-                geometry.size.width: 100%
-                skinId: text
+                $type: haxework.view.text.TextView
+                geometry.width: 100%
+                style: text
                 fill: false
-        - $type: haxework.view.HGroupView
+        - $type: haxework.view.group.HGroupView
           layout.hAlign: center
           layout.margin: 5
-          skinId: panel
+          style: panel
           views:
-            - $type: haxework.view.ButtonView
-              skinId: button.simple
+            - $type: haxework.view.form.ButtonView
               text: Submit
-              +onPress: $code:submit()
+              +onPress: ~submit()

src/client/haxe/ru/m/tankz/view/settings/ActionView.hx

@@ -1,7 +1,7 @@
 package ru.m.tankz.view.settings;
 
-import haxework.view.HGroupView;
-import haxework.view.LabelView;
+import haxework.view.group.HGroupView;
+import haxework.view.form.LabelView;
 import haxework.view.list.ListView;
 import openfl.Assets;
 import ru.m.control.DeviceAction;
@@ -72,7 +72,7 @@ class KeyboardMap {
     private function set_edit(value:Bool):Bool {
         if (edit != value) {
             edit = value;
-            action.skinId = key.skinId = edit ? "text.box.active" : "text.box";
+            action.style = key.style = edit ? "text.box.active" : "text.box";
         }
         return edit;
     }

src/client/haxe/ru/m/tankz/view/settings/ActionView.yaml

@@ -3,10 +3,12 @@ geometry.margin: 5
 layout.margin: 5
 views:
   - id: action
-    $type: haxework.view.LabelView
-    geometry.size.fixed: [180, 38]
-    skinId: text.box
+    $type: haxework.view.form.LabelView
+    geometry.width: 180
+    geometry.height: 38
+    style: text.box
   - id: key
-    $type: haxework.view.LabelView
-    geometry.size.fixed: [250, 38]
-    skinId: text.box
+    $type: haxework.view.form.LabelView
+    geometry.width: 250
+    geometry.height: 38
+    style: text.box

src/client/haxe/ru/m/tankz/view/settings/SettingsEditor.hx

@@ -1,9 +1,9 @@
 package ru.m.tankz.view.settings;
 
-import haxework.view.DataView;
-import haxework.view.GroupView;
-import haxework.view.LabelView;
-import haxework.view.VGroupView;
+import haxework.view.data.DataView;
+import haxework.view.group.GroupView;
+import haxework.view.form.LabelView;
+import haxework.view.group.VGroupView;
 import promhx.Deferred;
 import promhx.Promise;
 import ru.m.control.DeviceAction;

src/client/haxe/ru/m/tankz/view/settings/SettingsEditor.yaml

@@ -1,37 +1,33 @@
 layout.margin: 10
 layout.hAlign: center
-geometry.size.width: 400
+geometry.width: 400
 views:
   - id: label
-    $type: haxework.view.LabelView
-    skinId: text
+    $type: haxework.view.form.LabelView
+    style: text
   - id: panel
-    $type: haxework.view.GroupView
+    $type: haxework.view.group.GroupView
     layout:
         $type: haxework.view.layout.TailLayout
         rowSize: 2
         margin: 10
-    geometry.size.width: 100%
+    geometry.width: 100%
     views:
-      - $type: haxework.view.ButtonView
-        +onPress: $code:screen()
-        skinId: button.simple
+      - $type: haxework.view.form.ButtonView
+        +onPress: ~screen()
         text: Screen
-      - $type: haxework.view.ButtonView
-        +onPress: $code:change()
-        skinId: button.simple
+      - $type: haxework.view.form.ButtonView
+        +onPress: ~change()
         text: Change
-      - $type: haxework.view.ButtonView
-        +onPress: $code:clear()
-        skinId: button.simple
+      - $type: haxework.view.form.ButtonView
+        +onPress: ~clear()
         text: Clear
-      - $type: haxework.view.ButtonView
-        +onPress: $code:default_()
-        skinId: button.simple
+      - $type: haxework.view.form.ButtonView
+        +onPress: ~default_()
         text: Default
   - id: list
-    $type: haxework.view.DataView
+    $type: haxework.view.data.DataView
     layout:
       $type: haxework.view.layout.VerticalLayout
-    factory: $this:viewFactory
-    +onItemSelect: $this:onItemSelect
+    factory: ~viewFactory
+    +onItemSelect: ~onItemSelect

src/client/resources/image/icon/arrow-alt-circle-left-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-left" class="svg-inline--fa fa-arrow-alt-circle-left fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm116-292H256v-70.9c0-10.7-13-16.1-20.5-8.5L121.2 247.5c-4.7 4.7-4.7 12.2 0 16.9l114.3 114.9c7.6 7.6 20.5 2.2 20.5-8.5V300h116c6.6 0 12-5.4 12-12v-64c0-6.6-5.4-12-12-12z"></path></svg>

src/common/haxe/ru/m/tankz/Type.hx

@@ -26,6 +26,16 @@ abstract PlayerId(Array<Dynamic>) {
 
     private inline function get_index():Int return this[1];
 
+    public function compare(other:PlayerId):Int {
+        if (other == null) {
+            return 1;
+        }
+        if (other.team != team) {
+            return team > other.team ? 1 : -1;
+        }
+        return index - other.index;
+    }
+
     @:from static public inline function fromArray(value:Array<Dynamic>):PlayerId {
         return new PlayerId(value[0], value[1]);
     }

src/common/haxe/ru/m/tankz/config/Config.hx

@@ -4,14 +4,9 @@ import haxework.color.Color;
 import ru.m.tankz.control.Controller;
 import ru.m.tankz.Type;
 
-typedef CompleteRule = {
-    @:optional var team:TeamId;
-}
-
 typedef GameConfig = {
     var levels: Int;
     var friendlyFire:Bool;
-    var complete:Array<CompleteRule>;
 }
 
 typedef SpawnPoint = {
@@ -107,6 +102,7 @@ typedef GamePreset = {
 }
 
 typedef LevelConfig = {
+    @:optional var packId:PackId;
     @:optional var id:LevelId;
     var data:Array<BrickIndex>;
     @:optional var name:String;
@@ -119,25 +115,11 @@ typedef LevelPack = {
     var data:Array<LevelConfig>;
 }
 
-typedef PlayerControl = {
-    var playerId:PlayerId;
-    var control:String;
-    @:optional var color:Null<Int>;
-    @:optional var name:String;
-}
-
-typedef ControlPreset = {
-    var id:Int;
-    var name:String;
-    var values:Array<PlayerControl>;
-};
-
 typedef ConfigSource = {
     var game:GameConfig;
     var map: MapConfig;
     var bricks: Array<BrickConfig>;
     var presets: Array<GamePreset>;
-    var controls: Array<ControlPreset>;
     var points: Array<SpawnPoint>;
     var tanks: Array<TankConfig>;
     var bonuses: Array<BonusConfig>;
@@ -150,7 +132,6 @@ class Config {
     public var bricks(default, null):Array<BrickConfig>;
     public var tanks(default, null):Array<TankConfig>;
     public var presets(default, null):Array<GamePreset>;
-    public var controls(default, null):Array<ControlPreset>;
     public var points(default, null):Array<SpawnPoint>;
     public var bonuses(default, null):Array<BonusConfig>;
 
@@ -163,7 +144,7 @@ class Config {
     private var playersMap:Map<String, PlayerConfig>;
 
     public static function fromSource(type:GameType, source:ConfigSource):Config {
-        return new Config(type, source.game, source.map, source.bricks, source.presets, source.controls, source.points, source.tanks, source.bonuses);
+        return new Config(type, source.game, source.map, source.bricks, source.presets, source.points, source.tanks, source.bonuses);
     }
 
     public function new(
@@ -172,7 +153,6 @@ class Config {
         map:MapConfig,
         bricks:Array<BrickConfig>,
         presets:Array<GamePreset>,
-        controls:Array<ControlPreset>,
         points:Array<SpawnPoint>,
         tanks:Array<TankConfig>,
         bonuses:Array<BonusConfig>
@@ -182,7 +162,6 @@ class Config {
         this.map = map;
         this.bricks = bricks;
         this.presets = presets;
-        this.controls = controls;
         this.points = points;
         this.tanks = tanks;
         this.bonuses = bonuses;
@@ -270,10 +249,6 @@ class Config {
     }
 
     public function isHuman(playerId:PlayerId) {
-        var controller:Controller = AController.fromString(getPlayer(playerId).control);
-        return switch controller {
-            case HUMAN(_): true;
-            case _: false;
-        }
+        return ControllerParser.fromString(getPlayer(playerId).control).match(HUMAN(_));
     }
 }

src/common/haxe/ru/m/tankz/control/Controller.hx

@@ -6,21 +6,23 @@ enum Controller {
     BOT(type:String);
 }
 
-abstract AController(Controller) {
+class ControllerParser {
 
-    public inline function new(value:Controller) {
-        this = value;
-    }
-
-    @:from public static function fromString(value:String):AController {
-        return new AController(switch value.split("-") {
+    public static function fromString(value:String):Controller {
+        return switch value {
+            case null: NONE;
+            case x: switch x.split("-") {
                 case ["human", index]: HUMAN(Std.parseInt(index));
                 case ["bot", type]: BOT(type);
                 case _: NONE;
-        });
+            }
+        }
     }
 
-    @:to public inline function toController():Controller {
-        return this;
+    public static function defaultName(controller:Controller):String {
+        return switch controller {
+            case HUMAN(index): 'Player ${index + 1}';
+            case BOT(_) | NONE: null;
+        }
     }
 }

src/common/haxe/ru/m/tankz/control/PlayerControl.hx

@@ -0,0 +1,11 @@
+package ru.m.tankz.control;
+
+import haxework.color.Color;
+import ru.m.tankz.Type;
+
+typedef PlayerControl = {
+    var playerId:PlayerId;
+    var controller:Controller;
+    @:optional var color:Color;
+    @:optional var name:String;
+}

src/common/haxe/ru/m/tankz/game/Game.hx

@@ -1,14 +1,12 @@
 package ru.m.tankz.game;
 
-import ru.m.geom.Point;
-import ru.m.geom.Position;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.config.Config;
 import ru.m.tankz.control.Control;
 import ru.m.tankz.control.Controller;
 import ru.m.tankz.control.IControlFactory;
 import ru.m.tankz.control.NoneControlFactory;
-import ru.m.tankz.core.Entity;
+import ru.m.tankz.control.PlayerControl;
 import ru.m.tankz.core.EntityType;
 import ru.m.tankz.engine.IEngine;
 import ru.m.tankz.game.GameEvent;
@@ -33,10 +31,8 @@ import ru.m.tankz.Type;
 
     @:provide var configBundle:IConfigBundle;
 
-    public function new(state:GameState, level:LevelConfig) {
-        this.type = state.type;
-        this.state = state;
-        this.level = level;
+    public function new(type:GameType) {
+        this.type = type;
         this.teams = new Map();
         this.config = configBundle.get(type);
         this.controlFactory = new NoneControlFactory();
@@ -55,13 +51,6 @@ import ru.m.tankz.Type;
 
     private function changePause(value:Bool):Void {}
 
-    private function applyPosition(entity:Entity, position:Position):Void {
-        entity.rect.center = new Point(position.x, position.y);
-        if (position.direction != null) {
-            entity.rect.direction = position.direction;
-        }
-    }
-
     public inline function getTeam(teamId:TeamId):Team {
         return teams[teamId];
     }
@@ -72,15 +61,11 @@ import ru.m.tankz.Type;
 
     public function onGameEvent(event:GameEvent):Void {
         switch event {
-            case START(state, level):
-                this.state = state;
-                this.level = level;
-            case COMPLETE(state, winnerId):
-                this.state = state;
-                this.winner = winnerId;
-            case SPAWN(EAGLE(id, rect, teamId)):
-                var team = getTeam(teamId);
-                team.eagleId = id;
+            case START(start):
+                onStart(start);
+            case COMPLETE(result):
+                this.state = result.state;
+                this.winner = result.winner;
             case SPAWN(TANK(id, rect, playerId, info)):
                 if (controls.exists(playerId)) {
                     var control = controls[playerId];
@@ -99,7 +84,9 @@ import ru.m.tankz.Type;
         }
     }
 
-    public function start():Void {
+    private function onStart(start:Start):Void {
+        this.state = start.state;
+        this.level = start.level;
         // ToDo: Spawner not in Team?
         var points:Array<SpawnPoint> = level != null && level.points != null ? level.points : config.points;
         for (teamConfig in state.preset.teams) {
@@ -113,6 +100,7 @@ import ru.m.tankz.Type;
         }
         for (team in teams.iterator()) {
             for (player in team.players.iterator()) {
+                var controller = ControllerParser.fromString(player.config.control);
                 var playerControl = controlsById.get(player.id);
                 if (playerControl != null) {
                     if (playerControl.color != null) {
@@ -121,9 +109,11 @@ import ru.m.tankz.Type;
                     if (playerControl.name != null) {
                         player.state.name = playerControl.name;
                     }
+                    if (playerControl.controller != null && !playerControl.controller.match(NONE)) {
+                        controller = playerControl.controller;
                     }
-                var controlType:Controller = AController.fromString(playerControl != null ? playerControl.control : player.config.control);
-                var control = controlFactory.build(player.id, controlType);
+                }
+                var control = controlFactory.build(player.id, controller);
                 if (control != null) {
                     controls[player.id] = control;
                     control.bind(this, engine);
@@ -135,6 +125,9 @@ import ru.m.tankz.Type;
         }
     }
 
+    public function start():Void {
+    }
+
     public function dispose():Void {
         for (control in controls) {
             control.dispose();

src/common/haxe/ru/m/tankz/game/GameEvent.hx

@@ -1,12 +1,23 @@
 package ru.m.tankz.game;
 
-import ru.m.tankz.config.Config.LevelConfig;
 import haxework.color.Color;
 import ru.m.geom.Position;
 import ru.m.geom.Rectangle;
+import ru.m.tankz.config.Config;
 import ru.m.tankz.control.Control;
 import ru.m.tankz.Type;
 
+typedef Start = {
+    var state:GameState;
+    var level:LevelConfig;
+}
+
+typedef Result = {
+    var state:GameState;
+    var level:LevelConfig;
+    var winner:TeamId;
+}
+
 typedef TankInfo = {
     var type:TankType;
     var hits:Int;
@@ -74,13 +85,13 @@ enum ChangeEvent {
 }
 
 enum GameEvent {
-    START(state:GameState, level:LevelConfig);
+    START(start:Start);
     SPAWN(event:SpawnEvent);
     MOVE(event:MoveEvent);
     STOP(event:StopEvent);
     HIT(event:HitEvent);
     DESTROY(event:DestroyEvent);
     CHANGE(event:ChangeEvent);
-    COMPLETE(state:GameState, winnerId:TeamId);
+    COMPLETE(result:Result);
     ACTION(tankId:Int, action:TankAction);
 }

src/common/haxe/ru/m/tankz/game/GameRunner.hx

@@ -1,6 +1,5 @@
 package ru.m.tankz.game;
 
-import ru.m.tankz.config.Config.LevelConfig;
 import ru.m.geom.Line;
 import ru.m.geom.Point;
 import ru.m.tankz.control.Control;
@@ -20,8 +19,10 @@ class GameRunner extends Game implements EngineListener {
     private var timer:Timer;
     private var builder:EntityBuilder;
 
-    public function new(state:GameState, level:LevelConfig) {
-        super(state, level);
+    public function new(start:Start) {
+        super(start.state.type);
+        this.level = start.level;
+        this.state = start.state;
         this.builder = new EntityBuilder(config);
         this.engine = new Engine(config, level.size);
         this.engine.connect(this);
@@ -41,6 +42,11 @@ class GameRunner extends Game implements EngineListener {
         engine.update();
     }
 
+    override public function start():Void {
+        super.start();
+        gameEventSignal.emit(START({level:level, state:state}));
+    }
+
     override public function dispose():Void {
         super.dispose();
         if (timer != null) {
@@ -50,8 +56,8 @@ class GameRunner extends Game implements EngineListener {
         engine.dispose();
     }
 
-    override public function start():Void {
-        super.start();
+    override private function onStart(start:Start):Void {
+        super.onStart(start);
         var mapData = level.data.map(function(index:BrickIndex) return config.getBrickByIndex(index));
         engine.map.setData(mapData);
         for (team in teams.iterator()) {
@@ -69,7 +75,6 @@ class GameRunner extends Game implements EngineListener {
             }
         }
         gameEventSignal.emit(EventUtil.buildBricksSpawn(engine.map));
-        gameEventSignal.emit(START(state, level));
         //for (i in 0...10) spawnBonus();
     }
 
@@ -155,7 +160,7 @@ class GameRunner extends Game implements EngineListener {
 
     private function complete(winner:TeamId):Void {
         Timer.delay(function() {
-            gameEventSignal.emit(COMPLETE(state, winner));
+            gameEventSignal.emit(COMPLETE({state: state, level: level, winner: winner}));
         }, 3000);
     }
 
@@ -233,10 +238,12 @@ class GameRunner extends Game implements EngineListener {
                     gameEventSignal.emit(DESTROY(BULLET(bullet.id)));
                 }
             case [BULLET(bullet), EAGLE(eagle)]:
+                if (!eagle.death) {
                     if (!eagle.protect) {
                         gameEventSignal.emit(DESTROY(EAGLE(eagle.id, buildShot(bullet, eagle.score))));
                     }
                     gameEventSignal.emit(DESTROY(BULLET(bullet.id)));
+                }
             case _:
         }
     }
@@ -355,7 +362,7 @@ class GameRunner extends Game implements EngineListener {
                 engine.ticker.start();
                 timer = new Timer(30);
                 timer.run = update;
-            case COMPLETE(_, _):
+            case COMPLETE(_):
                 engine.ticker.stop();
                 if (timer != null) {
                     timer.stop();
@@ -378,6 +385,9 @@ class GameRunner extends Game implements EngineListener {
             case ACTION(tankId, STOP):
                 gameEventSignal.emit(STOP(TANK(tankId)));
                 engine.stop(tankId);
+            case SPAWN(EAGLE(id, rect, teamId)):
+                var team = getTeam(teamId);
+                team.eagleId = id;
             case SPAWN(BULLET(_, _, playerId, _)):
                 getPlayer(playerId).bullets++;
             case DESTROY(EAGLE(id, shot)):

src/common/haxe/ru/m/tankz/game/GameState.hx

@@ -3,6 +3,7 @@ package ru.m.tankz.game;
 import haxework.color.Color;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.config.Config;
+import ru.m.tankz.control.PlayerControl;
 import ru.m.tankz.Type;
 
 class State {
@@ -82,7 +83,6 @@ class GameState {
     public function new(type:GameType, presetId:PresetId = 0, state:GameState = null, controls:Array<PlayerControl> = null) {
         this.type = type;
         this.presetId = presetId;
-        //this.controls = controls == null ? config.controls[0].values : controls;
         this.controls = controls == null ? [] : controls;
         if (state == null) {
             this.teams = new Map();
@@ -145,4 +145,8 @@ class GameState {
         var playerState = players[id];
         return (playerState == null || playerState.color.zero) ? config.getColor(id) : playerState.color;
     }
+
+    public function clean():GameState {
+        return new GameState(type, presetId, null, controls);
+    }
 }

src/common/haxe/ru/m/tankz/game/PackProgress.hx

@@ -27,7 +27,7 @@ class PackProgress {
     }
 
     public function isPresetAvailable(levelId:LevelId, presetId:PresetId):Bool {
-        return presetId == 0 || completed.exists(levelId) && completed.get(levelId).presets.get(presetId - 1) != null;
+        return isLevelAvailable(levelId) && (presetId == 0 || (completed.exists(levelId) && completed.get(levelId).presets.get(presetId - 1) != null));
     }
 
     public function isPresetCompleted(levelId:LevelId, presetId:PresetId):Bool {

src/common/haxe/ru/m/tankz/game/record/GamePlayer.hx

@@ -12,7 +12,7 @@ class GamePlayer extends Game {
     private var ticker:Ticker;
 
     public function new(record:GameRecord) {
-        super(record.state, null);
+        super(record.state.type);
         this.record = record;
         this.data = null;
         this.ticker = new Ticker();
@@ -38,7 +38,7 @@ class GamePlayer extends Game {
                 events++;
                 gameEventSignal.emit(event.event);
                 switch event.event {
-                    case GameEvent.COMPLETE(_, _):
+                    case GameEvent.COMPLETE(_):
                         stop();
                     case _:
                 }

src/common/haxe/ru/m/tankz/map/Grid.hx

@@ -1,12 +1,9 @@
 package ru.m.tankz.map;
 
-import ru.m.tankz.config.Config.GridSize;
-import ru.m.tankz.config.Config.CellSize;
+import haxe.ds.HashMap;
 import ru.m.geom.Line;
 import ru.m.geom.Point;
 import ru.m.geom.Rectangle;
-import haxe.ds.HashMap;
-
 
 class GridCell {
     public var cellX(default, null):Int;
@@ -42,7 +39,6 @@ class GridCell {
     }
 }
 
-
 class Grid {
     public var cellWidth(default, null):Int;
     public var cellHeight(default, null):Int;

src/common/haxe/ru/m/tankz/map/LevelMap.hx

@@ -1,11 +1,9 @@
 package ru.m.tankz.map;
 
-import ru.m.tankz.Type.BrickType;
 import haxe.ds.HashMap;
-import ru.m.tankz.map.Grid;
 import ru.m.geom.Point;
 import ru.m.tankz.config.Config;
-
+import ru.m.tankz.map.Grid;
 
 class LevelMap {
 
@@ -30,7 +28,7 @@ class LevelMap {
         cellWidth = config.cell.width;
         cellHeight = config.cell.width;
         gridWidth = size != null ? size.width : config.grid.width;
-        gridHeight = size != null ? size.height : config.grid.width;
+        gridHeight = size != null ? size.height : config.grid.height;
         bricksMap = new HashMap();
         bricks = [];
         grid = new Grid(

src/common/resources/config/classic.yaml

@@ -1,7 +1,5 @@
 game:
   friendlyFire: false
-  complete:
-    - team: human
 
 map:
   cell:
@@ -196,20 +194,3 @@ presets:
           - {<<: *bot, index: 3, control: bot-hard}
           - {<<: *bot, index: 4, control: bot-hard}
           - {<<: *bot, index: 5, control: bot-hard}
-
-controls:
-    - id: 0
-      name: 1 Player
-      values:
-          - playerId: [human, 0]
-            control: human-0
-            name: Player 1
-    - id: 1
-      name: 2 Player
-      values:
-          - playerId: [human, 0]
-            control: human-0
-            name: Player 1
-          - playerId: [human, 1]
-            control: human-1
-            name: Player 2

src/common/resources/config/death.yaml

@@ -1,7 +1,5 @@
 game:
   friendlyFire: true
-  complete:
-    - team: alpha
 
 map:
   cell:
@@ -91,20 +89,3 @@ tanks:
     skin: pc
 
 bonuses: []
-
-controls:
-    - id: 0
-      name: 1 Player
-      values:
-          - playerId: [alpha, 0]
-            control: human-0
-            name: Player 1
-    - id: 1
-      name: 2 Player
-      values:
-          - playerId: [alpha, 0]
-            control: human-0
-            name: Player 1
-          - playerId: [beta, 0]
-            control: human-1
-            name: Player 2

src/common/resources/config/dota.yaml

@@ -1,7 +1,5 @@
 game:
   friendlyFire: true
-  complete:
-    - team: radiant
 
 map:
   cell:
@@ -115,34 +113,3 @@ bonuses:
   - {type: life}
   - {type: shovel, duration: 10}
   - {type: star}
-
-controls:
-    - id: 0
-      name: 1 Player
-      values:
-          - playerId: [radiant, 0]
-            control: human-0
-            color: 0xff8866
-            name: Player 1
-    - id: 1
-      name: 2 Player Coop
-      values:
-          - playerId: [radiant, 0]
-            control: human-0
-            color: 0xff8866
-            name: Player 1
-          - playerId: [radiant, 1]
-            control: human-1
-            color: 0xff8866
-            name: Player 2
-    - id: 2
-      name: 2 Player VS
-      values:
-          - playerId: [radiant, 0]
-            control: human-0
-            color: 0xff8866
-            name: Player 1
-          - playerId: [dire, 0]
-            control: human-1
-            color: 0x4294ff
-            name: Player 2

src/editor/haxe/ru/m/tankz/editor/Editor.hx

@@ -4,6 +4,7 @@ import haxework.provider.Provider;
 import haxework.resources.IResources;
 import haxework.resources.Resources;
 import haxework.view.Root;
+import haxework.view.theme.ITheme;
 import ru.m.tankz.bundle.ConfigBundle;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.bundle.ILevelBundle;
@@ -14,7 +15,8 @@ import ru.m.tankz.editor.view.MapFrame;
 class Editor {
     private static inline var TAG = 'Editor';
 
-    @:provide private static var resources:IResources;
+    @:provide static var resources:IResources;
+    @:provide static var theme:ITheme;
 
     public static function main() {
         L.push(new haxework.log.TraceLogger());
@@ -31,7 +33,7 @@ class Editor {
         resources = new Resources();
         resources.text.put('version', '${Const.VERSION}');
 
-        Style.register();
+        theme = new AppTheme();
 
         Provider.setFactory(IConfigBundle, ConfigBundle);
         Provider.setFactory(ILevelBundle, LevelBundle);

src/editor/haxe/ru/m/tankz/editor/view/EditorView.hx

@@ -1,22 +1,9 @@
 package ru.m.tankz.editor.view;
 
-import haxework.view.ButtonView;
 import haxework.view.frame.FrameSwitcher;
-import haxework.view.IGroupView;
-import haxework.view.IView;
-import haxework.view.ToggleButtonView;
-import haxework.view.VGroupView;
+import haxework.view.group.VGroupView;
 
 @:template class EditorView extends VGroupView {
     @:view public var switcher(default, null):FrameSwitcher;
-    @:view public var tabs(default, null):IGroupView;
-
-    public function onPress(v:ButtonView):Void {
-        switcher.change(v.id);
-    }
-
-    private function onFrameSwitch(frame:IView<Dynamic>):Void {
-        for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;
-    }
 }
 

src/editor/haxe/ru/m/tankz/editor/view/EditorView.yaml

@@ -1,39 +1,29 @@
 ---
 $type: haxework.view.VGroupView
-skinId: dark
-geometry.size.stretch: true
+style: dark
+geometry.stretch: true
 layout.hAlign: center
 views:
   # Tabs
   - id: tabs
-    $type: haxework.view.HGroupView
-    geometry.margin.bottom: -2
-    views:
-      - id: map
-        $type: haxework.view.ToggleButtonView
-        skinId: button.tab
-        text: Map
-        +onPress: $this:onPress
-      - id: tank
-        $type: haxework.view.ToggleButtonView
-        skinId: button.tab
-        text: Tank
-        +onPress: $this:onPress
+    $type: haxework.view.data.ButtonGroup<String>
+    geometry.margin.bottom: -4
+    layout.margin: 2
+    buttonStyle: button.tab
+    +onDataSelect: ~function(id) switcher.change(id)
+    data:
+      - "map"
+      - "tank"
+    selected: "map"
   # Switcher
   - id: switcher
     $type: haxework.view.frame.FrameSwitcher
-    skinId: border
-    +onSwitch: $this:onFrameSwitch
-    geometry.size.stretch: true
-    geometry.padding: 5
-    views:
-      - id: map
-        $type: ru.m.tankz.editor.view.MapFrame
-      - id: tank
-        $type: ru.m.tankz.editor.view.TankFrame
+    geometry.stretch: true
+    factory:
+      _map_: {$class: ru.m.tankz.editor.view.MapFrame}
+      _tank_: {$class: ru.m.tankz.editor.view.TankFrame}
   # Version
-  - $type: haxework.view.LabelView
-    skinId: text
+  - $type: haxework.view.form.LabelView
     geometry.position: absolute
     geometry.vAlign: top
     geometry.hAlign: right

src/editor/haxe/ru/m/tankz/editor/view/MapFrame.hx

@@ -1,8 +1,8 @@
 package ru.m.tankz.editor.view;
 
-import haxework.view.DataView;
-import haxework.view.InputView;
-import haxework.view.VGroupView;
+import haxework.view.data.DataView;
+import haxework.view.frame.FrameView;
+import haxework.view.form.InputView;
 import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.config.Config;
 import ru.m.tankz.editor.FileUtil;
@@ -13,7 +13,7 @@ import ru.m.tankz.preset.ClassicGame;
 import ru.m.tankz.Type;
 import ru.m.tankz.util.LevelUtil;
 
-@:template class MapFrame extends VGroupView {
+@:template class MapFrame extends FrameView<Dynamic> {
     public static inline var ID = 'map';
     public static inline var TAG = 'map';
 
@@ -30,6 +30,10 @@ import ru.m.tankz.util.LevelUtil;
     @:provide var configBundle:IConfigBundle;
     @:provide var config:Config;
 
+    public function new() {
+        super(ID);
+    }
+
     public function init():Void {
         fileName = "level000.txt";
         type = ClassicGame.TYPE;

src/editor/haxe/ru/m/tankz/editor/view/MapFrame.yaml

@@ -1,91 +1,85 @@
 ---
-$type: haxework.view.VGroupView
-geometry.size.stretch: true
-layout.margin: 2
-layout.vAlign: top
-layout.hAlign: center
+geometry.stretch: true
+geometry.padding: 10
+overflow.y: scroll
+layout:
+  $type: haxework.view.layout.VerticalLayout
+  margin: 2
+  vAlign: top
+  hAlign: center
 views:
-  - $type: haxework.view.HGroupView
+  - $type: haxework.view.group.HGroupView
     layout.margin: 5
     views:
-      - $type: haxework.view.ButtonView
-        skinId: button.simple
+      - $type: haxework.view.form.ButtonView
         text: Classic
-        +onPress: $code:function(_) type = 'classic'
-      - $type: haxework.view.ButtonView
-        skinId: button.simple
+        +onPress: ~function(_) type = 'classic'
+      - $type: haxework.view.form.ButtonView
         text: DotA
-        +onPress: $code:function(_) type = 'dota'
-      - $type: haxework.view.ButtonView
-        skinId: button.simple
+        +onPress: ~function(_) type = 'dota'
+      - $type: haxework.view.form.ButtonView
         text: DeathMatch
-        +onPress: $code:function(_) type = 'death'
-  - $type: haxework.view.HGroupView
+        +onPress: ~function(_) type = 'death'
+  - $type: haxework.view.group.HGroupView
     layout.vAlign: middle
     views:
-      - $type: haxework.view.LabelView
-        skinId: text
+      - $type: haxework.view.form.LabelView
         text: "Name:"
       - id: levelName
-        $type: haxework.view.InputView
-        skinId: text.box
-        geometry.size.width: 300
-        geometry.size.height: 26
+        $type: haxework.view.form.InputView
+        geometry.width: 300
+        geometry.height: 26
         text: ""
-      - $type: haxework.view.LabelView
-        skinId: text
+      - $type: haxework.view.form.LabelView
         text: "Size:"
         geometry.margin.left: 20
       - id: width
-        $type: haxework.view.InputView
-        skinId: text.box
-        geometry.size.fixed: [50, 26]
-      - $type: haxework.view.LabelView
-        skinId: text
+        $type: haxework.view.form.InputView
+        geometry.width: 50
+        geometry.height: 26
+      - $type: haxework.view.form.LabelView
         text: "x"
       - id: height
-        $type: haxework.view.InputView
-        skinId: text.box
-        geometry.size.fixed: [50, 26]
-      - $type: haxework.view.ButtonView
-        skinId: button.start.small
-        +onPress: $code:applySize()
-      - $type: haxework.view.ButtonView
-        skinId: button.close.small
-        +onPress: $code:resetSize()
+        $type: haxework.view.form.InputView
+        geometry.width: 50
+        geometry.height: 26
+      - $type: haxework.view.form.ButtonView
+        style: button.start.small
+        +onPress: ~applySize()
+      - $type: haxework.view.form.ButtonView
+        style: button.close.small
+        +onPress: ~resetSize()
     # map
-  - $type: haxework.view.HGroupView
+  - $type: haxework.view.group.HGroupView
     views:
       - id: spawnPointList
-        $type: haxework.view.DataView
+        $type: haxework.view.data.DataView
         geometry.padding: 3
         layout:
           $type: haxework.view.layout.VerticalLayout
           hAlign: center
           margin: 5
-        factory: $code:ru.m.tankz.editor.view.map.SpawnPointView.factory
-        +onDataSelect: $this:selectSpawnPoint
+        factory: ~ru.m.tankz.editor.view.map.SpawnPointView.factory
+        +onDataSelect: ~selectSpawnPoint
       - id: mapView
         $type: ru.m.tankz.editor.view.map.MapEditView
       - id: brickList
-        $type: haxework.view.DataView
+        $type: haxework.view.data.DataView
         geometry.padding: 3
         layout:
           $type: haxework.view.layout.VerticalLayout
           hAlign: center
           margin: 5
-        factory: $code:ru.m.tankz.editor.view.map.BrickView.factory
-        +onDataSelect: $this:selectBrick
-  - $type: haxework.view.HGroupView
+        factory: ~ru.m.tankz.editor.view.map.BrickView.factory
+        +onDataSelect: ~selectBrick
+  - $type: haxework.view.group.HGroupView
     layout.margin: 5
     views:
       - id: openButton
-        $type: haxework.view.ButtonView
-        skinId: button.simple
+        $type: haxework.view.form.ButtonView
         text: Open
-        +onPress: $code:open()
+        +onPress: ~open()
       - id: saveButton
-        $type: haxework.view.ButtonView
-        skinId: button.simple
+        $type: haxework.view.form.ButtonView
         text: Save
-        +onPress: $code:save()
+        +onPress: ~save()

src/editor/haxe/ru/m/tankz/editor/view/TankFrame.hx

@@ -1,18 +1,22 @@
 package ru.m.tankz.editor.view;
 
-import ru.m.tankz.editor.view.tank.TankView;
-import haxework.view.IGroupView;
 import haxework.color.Color;
-import haxework.view.InputView;
-import haxework.view.VGroupView;
+import haxework.view.form.InputView;
+import haxework.view.frame.FrameView;
+import haxework.view.group.IGroupView;
+import ru.m.tankz.editor.view.tank.TankView;
 
-@:template class TankFrame extends VGroupView {
+@:template class TankFrame extends FrameView<Dynamic> {
     public static inline var ID = 'tank';
 
     @:view var tanks(default, null):IGroupView;
     @:view("color") var colorLabel(default, null):InputView;
     private var color(default, set):Color;
 
+    public function new() {
+        super(ID);
+    }
+
     public function init():Void {
         color = 0x00ff00;
     }

src/editor/haxe/ru/m/tankz/editor/view/TankFrame.yaml

@@ -1,12 +1,14 @@
 ---
-geometry.size.stretch: true
+geometry.stretch: true
 geometry.padding: 10
-layout.hAlign: center
-layout.margin: 10
+layout:
+  $type: haxework.view.layout.VerticalLayout
+  hAlign: center
+  margin: 10
 views:
   - id: tanks
-    $type: haxework.view.GroupView
-    geometry.size.width: 100%
+    $type: haxework.view.group.GroupView
+    geometry.width: 100%
     layout:
       $type: haxework.view.layout.TailLayout
       rowSize: 4
@@ -29,10 +31,9 @@ views:
       - $type: ru.m.tankz.editor.view.tank.TankView
         image: "$asset:image:resources/image/tank/bd-0.png"
   - id: color
-    $type: haxework.view.InputView
-    skinId: text.box
-    +onChange: $code:function(value) color = value
-    geometry.size.width: 120
+    $type: haxework.view.form.InputView
+    +onChange: ~function(value) color = value
+    geometry.width: 120
     layout.hAlign: right
   - $type: ru.m.tankz.editor.ColorView
-    +onSelect: $code:function(value) color = value
+    +onSelect: ~function(value) color = value

src/editor/haxe/ru/m/tankz/editor/view/tank/TankView.hx

@@ -22,7 +22,7 @@ class TankView extends View<Bitmap> {
     inline private function set_image(value:BitmapData):BitmapData {
         image = value;
         content.bitmapData = BitmapUtil.colorize(image, color);
-        setContentSize(image.width, image.height);
+        setSize(image.width, image.height);
         return image;
     }
 

src/server/haxe/ru/m/tankz/server/game/GameManager.hx

@@ -22,7 +22,7 @@ class _GameListener implements GameListener {
     public function onGameEvent(event:GameEvent):Void {
         dispatcher.dispatchEvent(game, event);
         switch event {
-            case COMPLETE(_, _):
+            case COMPLETE(_):
                 dispatcher.delete(game.id);
                 dispose();
             case _:

src/server/haxe/ru/m/tankz/server/game/ServerGame.hx

@@ -1,7 +1,8 @@
 package ru.m.tankz.server.game;
 
+import ru.m.tankz.control.Controller;
 import ru.m.tankz.bundle.ILevelBundle;
-import ru.m.tankz.config.Config;
+import ru.m.tankz.control.PlayerControl;
 import ru.m.tankz.core.EntityType;
 import ru.m.tankz.game.EventUtil;
 import ru.m.tankz.game.GameEvent;
@@ -23,7 +24,10 @@ class ServerGame extends GameRunner {
     @:provide static var levelBundle:ILevelBundle;
 
     public function new(room:RoomProto) {
-        super(new GameState(room.game.type, 0), levelBundle.get(new PackId(room.game.type)).data[room.game.level]);
+        super({
+            state: new GameState(room.game.type, 0),
+            level: levelBundle.get(new PackId(room.game.type)).data[room.game.level],
+        });
         this.controlFactory = new ServerControlFactory();
         this.room = room;
     }
@@ -78,7 +82,7 @@ class ServerGame extends GameRunner {
         .filter(function(slot:RoomSlotProto) return slot.hasUser())
         .map(function(slot:RoomSlotProto):PlayerControl return {
             playerId: [slot.slot.team, slot.slot.index],
-            control: "human-0",
+            controller: HUMAN(0),
             name: slot.user.name,
         });
         super.start();
@@ -88,7 +92,7 @@ class ServerGame extends GameRunner {
         var result = [];
         result.push(EventUtil.buildBricksSpawn(engine.map));
         result = result.concat(EventUtil.buildCellsDestroyed(engine.map));
-        result.push(START(state, level));
+        result.push(START({state: state, level: level}));
         for (entity in engine.entities) {
             switch EntityTypeResolver.of(entity) {
                 case EAGLE(eagle): result.push(EventUtil.buildEagleSpawn(eagle));