[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,34 +1,25 @@
 ---
-$type: haxework.gui.VGroupView
+$type: haxework.gui.frame.FrameSwitcher
 geometry.size.stretch: true
-layout.hAlign: center
+skinId: dark
-layout.vAlign: middle
-skinId: light
 views:
-  - id: switcher
+  - id: start
-    $type: haxework.gui.frame.FrameSwitcher
+    $type: ru.m.tankz.frame.StartFrame
-    skinId: dark
+    # classic
-    geometry.size.stretch: true
+  - id: classic.level
-    layout.hAlign: center
+    $type: ru.m.tankz.frame.classic.ClassicLevelFrame
-    layout.vAlign: middle
+  - id: classic.game
-    views:
+    $type: ru.m.tankz.frame.classic.ClassicGameFrame
-      - id: start
+    # dota
-        $type: ru.m.tankz.frame.StartFrame
+  - id: dota.level
-        # classic
+    $type: ru.m.tankz.frame.dota.DotaLevelFrame
-      - id: classic.level
+  - id: dota.game
-        $type: ru.m.tankz.frame.classic.ClassicLevelFrame
+    $type: ru.m.tankz.frame.dota.DotaGameFrame
-      - id: classic.game
+    # result
-        $type: ru.m.tankz.frame.classic.ClassicGameFrame
+  - id: result
-        # dota
+    $type: ru.m.tankz.frame.ResultFrame
-      - id: dota.level
+    # - id: network
-        $type: ru.m.tankz.frame.dota.DotaLevelFrame
+    #   $type: ru.m.tankz.frame.NetworkFrame
-      - id: dota.game
+    # settings
-        $type: ru.m.tankz.frame.dota.DotaGameFrame
+  - id: settings
-        # result
+    $type: ru.m.tankz.frame.SettingsFrame
-      - id: result
-        $type: ru.m.tankz.frame.ResultFrame
-      # - id: network
-      #   $type: ru.m.tankz.frame.NetworkFrame
-        # settings
-      - id: settings
-        $type: ru.m.tankz.frame.SettingsFrame

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,27 +1,29 @@
 ---
-geometry.size.stretch: true
-layout.hAlign: center
-layout.vAlign: middle
 views:
-  - id: level
+  - $type: haxework.gui.VGroupView
-    $type: haxework.gui.LabelView
+    skinId: container
-    skinId: text.header
+    views:
-
+      - id: level
-  - id: result
+        $type: haxework.gui.LabelView
-    $type: haxework.gui.DataView
+        skinId: text.header
-    factory: $this:playerViewFactory
+      - id: result
-    geometry.margin.top: 20
+        $type: haxework.gui.DataView
-    layout:
+        factory: $this:playerViewFactory
-      $type: haxework.gui.layout.VerticalLayout
+        geometry.margin.top: 20
-      hAlign: right
+        layout:
-      margin: 10
+          $type: haxework.gui.layout.VerticalLayout
-
+          hAlign: right
-  - id: close
+          margin: 10
-    $type: haxework.gui.ButtonView
+  - $type: haxework.gui.HGroupView
-    skinId: button.close
+    skinId: panel
-    +onPress: $code:close()
+    views:
-
+      - id: close
-  - id: next
+        $type: haxework.gui.ButtonView
-    $type: haxework.gui.ButtonView
+        skinId: button.close
-    skinId: button.next
+        +onPress: $code:close()
-    +onPress: $code:next()
+      - $type: haxework.gui.SpriteView
+        geometry.size.width: 100%
+      - id: next
+        $type: haxework.gui.ButtonView
+        skinId: button.next
+        +onPress: $code:next()

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

@@ -1,19 +1,22 @@
 ---
-geometry.size.stretch: true
-layout.hAlign: center
-layout.vAlign: middle
 views:
-  - $type: haxework.gui.LabelView
+  - $type: haxework.gui.VGroupView
-    skinId: text.header
+    skinId: container
-    text: Settings
-  - $type: haxework.gui.HGroupView
-    layout.margin: 20
     views:
-      - $type: ru.m.tankz.frame.settings.SettingsEditor
+      - $type: haxework.gui.LabelView
-        controlIndex: 0
+        skinId: text.header
-      - $type: ru.m.tankz.frame.settings.SettingsEditor
+        text: Settings
-        controlIndex: 1
+      - $type: haxework.gui.HGroupView
-  - id: close
+        layout.margin: 20
-    $type: haxework.gui.ButtonView
+        views:
-    skinId: button.close
+          - $type: ru.m.tankz.frame.settings.SettingsEditor
-    +onPress: $this:onPress
+            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
+        +onPress: $this:onPress

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

@@ -1,14 +1,12 @@
 ---
-geometry.size.stretch: true
-layout.hAlign: center
-layout.vAlign: middle
 views:
-  - $type: haxework.gui.ImageView
-    image: $asset:image:resources/image/ui/logo.png
-    geometry.margin.bottom: 15
   - $type: haxework.gui.VGroupView
+    skinId: container
     layout.margin: 3
     views:
+      - $type: haxework.gui.ImageView
+        image: $asset:image:resources/image/ui/logo.png
+        geometry.margin.bottom: 15
       - 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
+      - id: settings
-    geometry.vAlign: bottom
+        $type: haxework.gui.ButtonView
-    geometry.hAlign: right
+        skinId: button.settings
-    text: $r:text:version
+        +onPress: $this:onPress
-  - id: settings
+      - $type: haxework.gui.SpriteView
-    $type: haxework.gui.ButtonView
+        geometry.size.width: 100%
-    skinId: button.settings
+      - $type: haxework.gui.LabelView
-    +onPress: $this:onPress
+        skinId: text
+        text: $r:text:version

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

@@ -1,11 +1,10 @@
 ---
-layout:
+skinId: container
-  $type: haxework.gui.layout.HorizontalLayout
-  margin: 5
-  hAlign: center
-  vAlign: middle
 views:
-  - id: render
+  - $type: haxework.gui.HGroupView
-    $type: ru.m.tankz.render.Render
+    layout.margin: 5
-  - id: panel
+    views:
-    $type: ru.m.tankz.frame.classic.ClassicGamePanel
+      - id: render
+        $type: ru.m.tankz.render.Render
+      - id: panel
+        $type: ru.m.tankz.frame.classic.ClassicGamePanel

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,9 +1,10 @@
 ---
-layout:
+skinId: container
-  $type: haxework.gui.layout.VerticalLayout
-  margin: 5
 views:
-  - id: panel
+  - $type: haxework.gui.VGroupView
-    $type: ru.m.tankz.frame.dota.DotaGamePanel
+    layout.margin: 5
-  - id: render
+    views:
-    $type: ru.m.tankz.render.Render
+      - id: panel
+        $type: ru.m.tankz.frame.dota.DotaGamePanel
+      - id: render
+        $type: ru.m.tankz.render.Render

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;
-    }
-}