[client] apply LayoutSkin

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

@@ -8,7 +8,6 @@ import flash.events.KeyboardEvent;
 import flash.text.Font;
 import haxework.gui.frame.FrameSwitcher;
 import haxework.gui.Root;
-import haxework.gui.VGroupView;
 import haxework.log.TraceLogger;
 import haxework.provider.Provider;
 import haxework.resources.IResources;
@@ -42,26 +41,25 @@ class Client {
     }
 }
 
-@:template class ClientView extends VGroupView {
+@:template class ClientView extends FrameSwitcher {
     private static inline var TAG = 'Tankz';
 
-    @:view private var switcher(default, null):FrameSwitcher;
     @:provide var resources:IResources;
 
     public function init():Void {
         var font:Font = Font.enumerateFonts()[0];
         resources.text.put('font', 'Bookman Old Style');
         resources.text.put('version', 'v${Const.VERSION} (${Const.BUILD})');
-        Provider.set(FrameSwitcher, switcher);
+        Provider.set(FrameSwitcher, this);
     }
 
     public function launch():Void {
         content.stage.stageFocusRect = false;
         content.stage.addEventListener(KeyboardEvent.KEY_UP, function(event:KeyboardEvent):Void {
             if (event.keyCode == Keyboard.ESCAPE) {
-                switcher.change(StartFrame.ID);
+                change(StartFrame.ID);
             }
         });
-        switcher.change(StartFrame.ID);
+        change(StartFrame.ID);
     }
 }

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

@@ -1,16 +1,7 @@
 ---
-$type: haxework.gui.VGroupView
-geometry.size.stretch: true
-layout.hAlign: center
-layout.vAlign: middle
-skinId: light
-views:
-  - id: switcher
 $type: haxework.gui.frame.FrameSwitcher
-    skinId: dark
 geometry.size.stretch: true
-    layout.hAlign: center
+skinId: dark
-    layout.vAlign: middle
 views:
   - id: start
     $type: ru.m.tankz.frame.StartFrame

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

@@ -1,5 +1,6 @@
 package ru.m.tankz;
 
+import haxework.gui.layout.Layout;
 import haxework.color.ColorUtil;
 import haxework.gui.core.Geometry;
 import haxework.gui.core.HAlign;
@@ -18,10 +19,6 @@ class Style {
     private static var textColor = 0xE7E0BB;
     private static var fontFamily = "Courirer New";
 
-    private static function iconButton():Geometry {
-        return new Geometry().setSize(64, 64).setMargin(30).setPosition(ABSOLUTE);
-    }
-
     public static function register() {
         resources.skin.put("light", [
             Skin.color(lightColor),
@@ -69,16 +66,27 @@ class Style {
             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([20, 10])),
+            Skin.layout(new Layout().setAlign(NONE, MIDDLE)),
+            Skin.color(lightColor),
+        ]);
+
         resources.skin.put("button.settings", [
-            Skin.geometry(iconButton().setAlign(LEFT, BOTTOM)),
+            Skin.size(64, 64),
             new ButtonSVGSkin(Assets.getText("resources/image/icon/cog-solid.svg"), lightColor),
         ]);
         resources.skin.put("button.close", [
-            Skin.geometry(iconButton().setAlign(LEFT, BOTTOM)),
+            Skin.size(64, 64),
             new ButtonSVGSkin(Assets.getText("resources/image/icon/times-circle-solid.svg"), lightColor),
         ]);
         resources.skin.put("button.next", [
-            Skin.geometry(iconButton().setAlign(RIGHT, BOTTOM)),
+            Skin.size(64, 64),
             new ButtonSVGSkin(Assets.getText("resources/image/icon/arrow-alt-circle-right-solid.svg"), lightColor),
         ]);
     }

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

@@ -1,12 +1,11 @@
 ---
-geometry.size.stretch: true
+views:
-layout.hAlign: center
+  - $type: haxework.gui.VGroupView
-layout.vAlign: middle
+    skinId: container
     views:
       - id: level
         $type: haxework.gui.LabelView
         skinId: text.header
-
       - id: result
         $type: haxework.gui.DataView
         factory: $this:playerViewFactory
@@ -15,12 +14,15 @@ views:
           $type: haxework.gui.layout.VerticalLayout
           hAlign: right
           margin: 10
-
+  - $type: haxework.gui.HGroupView
+    skinId: panel
+    views:
       - id: close
         $type: haxework.gui.ButtonView
         skinId: button.close
         +onPress: $code:close()
-
+      - $type: haxework.gui.SpriteView
+        geometry.size.width: 100%
       - id: next
         $type: haxework.gui.ButtonView
         skinId: button.next

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

@@ -1,7 +1,7 @@
 ---
-geometry.size.stretch: true
+views:
-layout.hAlign: center
+  - $type: haxework.gui.VGroupView
-layout.vAlign: middle
+    skinId: container
     views:
       - $type: haxework.gui.LabelView
         skinId: text.header
@@ -13,6 +13,9 @@ views:
             controlIndex: 0
           - $type: ru.m.tankz.frame.settings.SettingsEditor
             controlIndex: 1
+  - $type: haxework.gui.HGroupView
+    skinId: panel
+    views:
       - id: close
         $type: haxework.gui.ButtonView
         skinId: button.close

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

@@ -1,14 +1,12 @@
 ---
-geometry.size.stretch: true
+views:
-layout.hAlign: center
+  - $type: haxework.gui.VGroupView
-layout.vAlign: middle
+    skinId: container
+    layout.margin: 3
     views:
       - $type: haxework.gui.ImageView
         image: $asset:image:resources/image/ui/logo.png
         geometry.margin.bottom: 15
-  - $type: haxework.gui.VGroupView
-    layout.margin: 3
-    views:
       - id: classic
         $type: haxework.gui.ButtonView
         skinId: button
@@ -26,14 +24,15 @@ views:
         text: Network (in developing)
         fontColor: 0xff0000
         visible: false
-  - $type: haxework.gui.LabelView
+  - $type: haxework.gui.HGroupView
-    skinId: text
+    skinId: panel
-    geometry.position: absolute
+    views:
-    geometry.margin: 10
-    geometry.vAlign: bottom
-    geometry.hAlign: right
-    text: $r:text:version
       - id: settings
         $type: haxework.gui.ButtonView
         skinId: button.settings
         +onPress: $this:onPress
+      - $type: haxework.gui.SpriteView
+        geometry.size.width: 100%
+      - $type: haxework.gui.LabelView
+        skinId: text
+        text: $r:text:version

src/client/haxe/ru/m/tankz/frame/classic/ClassicGameFrame.yaml

@@ -1,9 +1,8 @@
 ---
-layout:
+skinId: container
-  $type: haxework.gui.layout.HorizontalLayout
+views:
-  margin: 5
+  - $type: haxework.gui.HGroupView
-  hAlign: center
+    layout.margin: 5
-  vAlign: middle
     views:
       - id: render
         $type: ru.m.tankz.render.Render

src/client/haxe/ru/m/tankz/frame/classic/ClassicLevelFrame.yaml

@@ -1,7 +1,7 @@
 ---
+skinId: container
 layout:
   $type: haxework.gui.layout.VerticalLayout
-  hAlign: center
 views:
   - $type: haxework.gui.LabelView
     skinId: text.header

src/client/haxe/ru/m/tankz/frame/dota/DotaGameFrame.yaml

@@ -1,7 +1,8 @@
 ---
-layout:
+skinId: container
-  $type: haxework.gui.layout.VerticalLayout
+views:
-  margin: 5
+  - $type: haxework.gui.VGroupView
+    layout.margin: 5
     views:
       - id: panel
         $type: ru.m.tankz.frame.dota.DotaGamePanel

src/client/haxe/ru/m/tankz/frame/dota/DotaLevelFrame.yaml

@@ -1,7 +1,7 @@
 ---
+skinId: container
 layout:
   $type: haxework.gui.layout.VerticalLayout
-  hAlign: center
 views:
   - $type: haxework.gui.LabelView
     skinId: text.header

src/common/haxe/ru/m/tankz/preset/ClassicGame.hx

@@ -2,18 +2,9 @@ package ru.m.tankz.preset;
 
 import ru.m.tankz.Type;
 
-
+class ClassicGame {
-class ClassicGame extends GamePreset {
-
     public static var TYPE(default, never):GameType = 'classic';
 
     public static var HUMAN(default, never):TeamId = 'human';
     public static var BOT(default, never):TeamId = 'bot';
-
-    public static var PLAYER1(default, never):PresetId = 'player1';
-    public static var PLAYER2(default, never):PresetId = 'player2';
-
-    public function new() {
-        super(TYPE, [HUMAN, BOT], [PLAYER1, PLAYER2]);
-    }
 }

src/common/haxe/ru/m/tankz/preset/DotaGame.hx

@@ -2,19 +2,9 @@ package ru.m.tankz.preset;
 
 import ru.m.tankz.Type;
 
-
+class DotaGame {
-class DotaGame extends GamePreset {
-
     public static var TYPE(default, never):GameType = 'dota';
 
     public static var RADIANT(default, never):TeamId = 'radiant';
     public static var DIRE(default, never):TeamId = 'dire';
-
-    public static var PLAYER1(default, never):PresetId = 'player1';
-    public static var PLAYER2_COOP(default, never):PresetId = 'player2_coop';
-    public static var PLAYER2_VS(default, never):PresetId = 'player2_vs';
-
-    public function new() {
-        super(TYPE, [RADIANT, DIRE], [PLAYER1, PLAYER2_COOP, PLAYER2_VS]);
-    }
 }

src/common/haxe/ru/m/tankz/preset/GamePreset.hx

@@ -1,17 +0,0 @@
-package ru.m.tankz.preset;
-
-import ru.m.tankz.Type;
-
-
-class GamePreset {
-
-    public var type(default, null):GameType;
-    public var teams(default, null):Array<TeamId>;
-    public var presets(default, null):Array<PresetId>;
-
-    public function new(type:GameType, teams:Array<TeamId>, presets:Array<PresetId>) {
-        this.type = type;
-        this.teams = teams;
-        this.presets = presets;
-    }
-}