update haxework. ep3

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

@@ -1,26 +0,0 @@
-package ru.m.skin;
-
-import flash.display.Graphics;
-import haxework.gui.ButtonView;
-import haxework.gui.skin.ButtonColorSkin;
-
-class SimpleButtonSkin extends ButtonColorSkin {
-
-    public var borderColor(default, default):Int;
-
-    public function new(color:Int = 0xffffff, borderColor:Int = 0xffffff) {
-        super(color, 0.6);
-        this.borderColor = borderColor;
-    }
-
-    override public function draw(view:ButtonView):Void {
-        var color:Int = selectColor(view);
-        var graphics:Graphics = view.content.graphics;
-        graphics.clear();
-        graphics.beginFill(color, alpha);
-        graphics.lineStyle(2, borderColor);
-        //graphics.drawRoundRect(0, 0, view.width, view.height, 10, 10);
-        graphics.drawRect(0, 0, view.width, view.height);
-        graphics.endFill();
-    }
-}

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

@@ -33,6 +33,7 @@ class Client {
         var view:ClientView = new ClientView();
         Root.bind(view);
         view.launch();
+
     }
 }
 

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

@@ -1,13 +1,14 @@
 ---
 $type: haxework.gui.VGroupView
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
+layout.hAlign: center
+layout.vAlign: middle
 skin: $r:skin:light
 views:
 - id: switcher
   $type: haxework.gui.frame.FrameSwitcher
-  width: 960
+  geometry.size.width: 960
-  height: 720
+  geometry.size.height: 720
   skin: $r:skin:dark
   views:
    - id: start

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

@@ -1,6 +1,6 @@
 package ru.m.tankz;
 
-import ru.m.skin.SimpleButtonSkin;
+import haxework.gui.utils.ColorUtils;
 import haxework.gui.skin.Skin;
 import haxework.gui.skin.ButtonBitmapSkin;
 import haxework.gui.utils.DrawUtil;
@@ -26,14 +26,26 @@ class Style {
         resources.skin.put("light", [Skin.color(lightColor)]);
         resources.skin.put("dark", [Skin.color(darkColor)]);
         resources.skin.put("text", [Skin.text(textColor, 16, fontFamily)]);
-        resources.skin.put("button", [button, Skin.text(textColor, 18, fontFamily), Skin.size(250, 60)]);
+        resources.skin.put("button", [
+            button,
+            Skin.text(textColor, 18, fontFamily),
+            Skin.size(250, 60)
+        ]);
         resources.skin.put("button.simple", [
-            new SimpleButtonSkin(lightColor, textColor),
+            Skin.buttonColor(lightColor),
             Skin.text(textColor, 16, fontFamily),
             Skin.size(100, 36),
         ]);
+        resources.skin.put("button.toggle", [
+            Skin.tabColor(lightColor),
+            Skin.text(textColor, 16, fontFamily),
+            Skin.size(200, 36),
+        ]);
         resources.skin.put("button.close", [
             new ButtonBitmapSkin(Assets.getBitmapData("resources/image/ui/close.png"))
         ]);
+        resources.skin.put("border", [
+            Skin.border(ColorUtils.multiply(lightColor, 1.5), 1, 2),
+        ]);
     }
 }

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

@@ -1,40 +0,0 @@
----
-button:
-  width: 250
-  height: 60
-  skin:
-    $type: haxework.gui.skin.ButtonBitmapSkin
-    upImage: "@asset:image:resources/image/ui/button/normal.png"
-    downImage: "@asset:image:resources/image/ui/button/down.png"
-    overImage: "@asset:image:resources/image/ui/button/over.png"
-    fillType: NINEPATH
-  fontFamily: Courirer New
-  fontColor: 0xE7E0BB
-  fontSize: 18
-
-button_simple:
-  width: 100
-  height: 36
-  skin:
-    $type: ru.m.skin.SimpleButtonSkin
-  fontFamily: Courirer New
-  fontColor: 0xffffff
-  fontSize: 18
-  shadowColor: 0x000000
-
-label:
-  fontColor: 0xffffff
-  fontFamily: Courirer New
-  fontSize: 16
-  shadowColor: 0x000000
-
-close:
-  inLayout: false
-  hAlign: LEFT
-  vAlign: BOTTOM
-  leftMargin: 10
-  bottomMargin: 10
-  contentSize: true
-  skin:
-    $type: haxework.gui.skin.ButtonBitmapSkin
-    image: "@asset:image:resources/image/ui/close.png"

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

@@ -1,5 +1,6 @@
 package ru.m.tankz.frame;
 
+import haxework.gui.core.Geometry.Position;
 import flash.events.Event;
 import haxe.ds.Option;
 import haxe.Timer;
@@ -19,7 +20,6 @@ import ru.m.tankz.sound.SoundManager;
 import ru.m.tankz.storage.SaveStorage;
 import ru.m.tankz.Type.GameType;
 
-
 @:template class GameFrame extends VGroupView {
 
     private static inline var TAG = "GameFrame";
@@ -60,7 +60,7 @@ import ru.m.tankz.Type.GameType;
     private function start(state:GameState):Void {
         for (type in panels.keys()) {
             panels.get(type).visible = type == state.type;
-            panels.get(type).inLayout = type == state.type;
+            panels.get(type).geometry.position = type == state.type ? LAYOUT : ABSOLUTE;
         }
         // ToDo: local / network game
         switch (1) {
@@ -76,7 +76,7 @@ import ru.m.tankz.Type.GameType;
                 network.game = cast game;
         }
         panels.get(state.type).game = game;
-        content.addEventListener(Event.ENTER_FRAME, redraw);
+        content.addEventListener(Event.ENTER_FRAME, _redraw);
         render.draw(game.engine);
         sound.play('start');
     }
@@ -86,7 +86,7 @@ import ru.m.tankz.Type.GameType;
             timer.stop();
             timer = null;
         }
-        content.removeEventListener(Event.ENTER_FRAME, redraw);
+        content.removeEventListener(Event.ENTER_FRAME, _redraw);
         if (game != null) {
             game.dispose();
             game = null;
@@ -95,14 +95,14 @@ import ru.m.tankz.Type.GameType;
     }
 
     private function onGameStateChange(s:GameState):GameState {
-        panels.get(s.type).invalidate();
+        panels.get(s.type).toUpdate();
         return s;
     }
 
     private function onGameComplete(result:Option<GameState>):Void {
         switch (result) {
             case Option.Some(s):
-                panels.get(s.type).invalidate();
+                panels.get(s.type).toUpdate();
             case Option.None:
         }
         switch (game.next()) {
@@ -125,7 +125,7 @@ import ru.m.tankz.Type.GameType;
         game.engine.update();
     }
 
-    private function redraw(_):Void {
+    private function _redraw(_):Void {
         render.draw(game.engine);
     }
 }

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

@@ -1,24 +1,24 @@
 ---
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
+layout.hAlign: center
+layout.vAlign: middle
 views:
   - id: dotaPanel
     $type: ru.m.tankz.frame.game.DotaGamePanel
-  pWidth: 100
+    geometry.size.width: 100%
-  height: 20
+    geometry.size.height: 20
+    geometry.position: absolute
     visible: false
-  inLayout: false
   - $type: haxework.gui.HGroupView
-  pWidth: 100
+    geometry.size.stretch: true
-  pHeight: 100
+    layout.hAlign: center
+    layout.vAlign: middle
     views:
       - id: render
         $type: ru.m.tankz.render.Render
-    contentSize: true
       - id: classicPanel
         $type: ru.m.tankz.frame.game.ClassicGamePanel
-    width: 200
+        geometry.size.width: 200
-    pHeight: 100
+        geometry.size.height: 100%
+        geometry.position: absolute
         visible: false
-    inLayout: false
-

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

@@ -1,31 +1,28 @@
 ---
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
 views:
 - $type: haxework.gui.LabelView
   skin: $r:skin:text
-  pWidth: 100
+  geometry.size.percent.width: 100
-  height: 20
+  geometry.size.fixed.height: 20
   text: Settings
 - $type: haxework.gui.HGroupView
-  pWidth: 100
+  geometry.size.stretch: true
-  pHeight: 100
   views:
   - $type: ru.m.tankz.frame.settings.SettingsEditor
-    pWidth: 50
+    geometry.size.percent.width: 50
-    pHeight: 100
+    geometry.size.percent.height: 100
     controlIndex: 0
   - $type: ru.m.tankz.frame.settings.SettingsEditor
-    pWidth: 50
+    geometry.size.percent.width: 50
-    pHeight: 100
+    geometry.size.percent.height: 100
     controlIndex: 1
 - id: close
   $type: haxework.gui.ButtonView
   skin: $r:skin:button.close
   +onPress: $this:onPress
-  inLayout: false
+  geometry.position: absolute
-  hAlign: LEFT
+  geometry.margin.left: 10
-  vAlign: BOTTOM
+  geometry.margin.bottom: 10
-  leftMargin: 10
+  geometry.vAlign: bottom
-  bottomMargin: 10
+  geometry.hAlign: left
-  contentSize: true

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

@@ -1,13 +1,12 @@
 ---
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
+layout.hAlign: center
+layout.vAlign: middle
 views:
 - $type: haxework.gui.ImageView
   image: $asset:image:resources/image/ui/logo.png
-  contentSize: true
+  geometry.margin.bottom: 15
-  bottomMargin: 15
 - $type: haxework.gui.VGroupView
-  contentSize: true
   views:
   - id: classic
     $type: haxework.gui.ButtonView
@@ -28,21 +27,19 @@ views:
     visible: false
 - $type: haxework.gui.LabelView
   skin: $r:skin:text
-  inLayout: false
+  geometry.position: absolute
-  contentSize: true
+  geometry.margin.right: 10
-  vAlign: BOTTOM
+  geometry.margin.bottom: 10
-  hAlign: RIGHT
+  geometry.vAlign: bottom
-  rightMargin: 10
+  geometry.hAlign: right
-  bottomMargin: 10
   text: $r:text:version
 - id: settings
   $type: haxework.gui.ButtonView
-  inLayout: false
+  geometry.position: absolute
-  hAlign: LEFT
+  geometry.margin.left: 10
-  vAlign: BOTTOM
+  geometry.margin.bottom: 10
-  leftMargin: 10
+  geometry.vAlign: bottom
-  bottomMargin: 10
+  geometry.hAlign: left
-  contentSize: true
   skin:
     - $type: haxework.gui.skin.ButtonBitmapSkin
       image: $asset:image:resources/image/ui/settings.png

src/client/haxe/ru/m/tankz/frame/StartGameFrame.hx

@@ -70,6 +70,7 @@ import ru.m.tankz.Type;
                 this.players.data = [];
             }
         }
+        toUpdate();
         return presetId;
     }
 

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

@@ -1,37 +1,35 @@
 ---
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
 views:
   - id: presets
     $type: ru.m.tankz.frame.start.PresetsView
-  contentSize: true
+    geometry.size.width: 100%
-  topMargin: 10
+    geometry.margin.top: 10
+    layout.hAlign: center
   - $type: haxework.gui.HGroupView
-  pWidth: 100
+    skin: $r:skin:border
-  pHeight: 100
+    geometry.size.stretch: true
     views:
       - id: players
         $type: haxework.gui.list.VListView<PlayerId>
         factory: { $class: ru.m.tankz.frame.start.PlayerView }
-    pWidth: 50
+        geometry.size.percent: [50, 100]
-    pHeight: 100
+        geometry.padding: 10
-    paddings: 10
         scroll:
           $type: haxework.gui.list.VScrollBarView
-      width: 10
+          geometry.size.width: 10
-      pHeight: 100
+          geometry.size.height: 100%
           skin:
             - $type: [haxework.gui.list.ScrollBarSkin.vertical]
       - id: levels
         $type: haxework.gui.list.VListView<Int>
         factory: { $class: ru.m.tankz.frame.start.LevelView }
         +onItemSelect: $this:onListItemClick
-    pWidth: 50
+        geometry.size.percent: [50, 100]
-    pHeight: 100
+        geometry.padding: 10
-    paddings: 10
         scroll:
           $type: haxework.gui.list.VScrollBarView
-      width: 10
+          geometry.size.width: 10
-      pHeight: 100
+          geometry.size.height: 100%
           skin:
             - $type: [haxework.gui.list.ScrollBarSkin.vertical]

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

@@ -1,16 +1,18 @@
+---
+layout.vAlign: middle
 views:
   - id: botstate
     $type: haxework.gui.LabelView
-  $style: label
+    skin: $r:skin:text
-  pWidth: 100
+    geometry.size.width: 100%
-  height: 20
+    geometry.size.height: 20
   - id: player1state
     $type: haxework.gui.LabelView
-  $style: label
+    skin: $r:skin:text
-  pWidth: 100
+    geometry.size.width: 100%
-  height: 20
+    geometry.size.height: 20
   - id: player2state
     $type: haxework.gui.LabelView
-  $style: label
+    skin: $r:skin:text
-  pWidth: 100
+    geometry.size.width: 100%
-  height: 20
+    geometry.size.height: 20

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

@@ -1,6 +1,7 @@
+---
 views:
   - id: state
     $type: haxework.gui.LabelView
-  $style: label
+    skin: $r:skin:text
-  pWidth: 100
+    geometry.size.width: 100%
-  height: 20
+    geometry.size.height: 20

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

@@ -64,7 +64,7 @@ class KeyboardMap {
 
     public function edit():Promise<Int> {
         cast(this.skin[0], ColorSkin).color = 0x00ff00;
-        invalidate();
+        toRedraw();
         editDeferred = new Deferred();
         content.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
         return editDeferred.promise();
@@ -73,7 +73,7 @@ class KeyboardMap {
     private function onKeyDown(event: KeyboardEvent):Void {
         content.stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
         cast(this.skin[0], ColorSkin).color = 0x000000;
-        invalidate();
+        toRedraw();
 
         data.key = event.keyCode;
         key.text = keyLabel(data.key);

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

@@ -1,19 +1,19 @@
 ---
-pWidth: 100
+geometry.size.width: 100%
-height: 44
+geometry.size.height: 44
-margins: 5
+geometry.margin: 5
 views:
 - id: action
   $type: haxework.gui.LabelView
   skin: $r:skin:text
-  pWidth: 50
+  geometry.size.width: 50%
-  pHeight: 100
+  geometry.size.height: 100%
   text: ""
 - id: key
   $type: haxework.gui.LabelView
   skin: $r:skin:text
-  pWidth: 50
+  geometry.size.width: 50%
-  pHeight: 100
+  geometry.size.height: 100%
   text: ""
 skin:
   - $type: haxework.gui.skin.ColorSkin

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

@@ -51,13 +51,13 @@ import ru.m.tankz.storage.SettingsStorage;
         for (item in list.data) {
             item.key = -1;
         }
-        list.invalidate();
+        list.toUpdate();
         _save();
     }
 
     private function _reset():Void {
         list.data = SettingsStorage.getDefault(controlIndex).data;
-        list.invalidate();
+        list.toUpdate();
         _save();
     }
 

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

@@ -1,11 +1,11 @@
-layoutMargin: 10
+layout.margin: 10
+layout.hAlign: center
 views:
 - id: label
   $type: haxework.gui.LabelView
   skin: $r:skin:text
 - $type: haxework.gui.HGroupView
-  contentSize: true
+  layout.margin: 10
-  layoutMargin: 10
   views:
   - id: change
     $type: haxework.gui.ButtonView
@@ -25,9 +25,8 @@ views:
 - id: list
   $type: haxework.gui.list.VListView<ru.m.tankz.control.ActionItem>
   factory: { $class: ru.m.tankz.frame.settings.ActionView }
-  pWidth: 100
+  geometry.size.stretch: true
-  pHeight: 100
   scroll:
     $type: haxework.gui.list.VScrollBarView
-    width: 1
+    geometry.position: absolute
-    pHeight: 100
+    visible: false

src/client/haxe/ru/m/tankz/frame/start/LevelView.yaml

@@ -1,13 +1,12 @@
 ---
-pWidth: 100
+geometry.size.width: 100%
-height: 44
+geometry.size.height: 44
-margins: 5
+geometry.margin: 5
 views:
   - id: label
     $type: haxework.gui.LabelView
-  $style: label
+    skin: $r:skin:text
-  pWidth: 100
+    geometry.size.stretch: true
-  pHeight: 100
     text: ""
 skin:
   - $type: haxework.gui.skin.ColorSkin

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

@@ -1,14 +1,13 @@
 ---
-pWidth: 50
+geometry.size.width: 50%
-height: 44
+geometry.size.height: 44
-margins: 5
+geometry.margin: 5
-layoutMargin: 10
+layout.margin: 10
 views:
   - id: index
     $type: haxework.gui.LabelView
     $style: label
-  pHeight: 100
+    geometry.size.stretch: true
-  pWidth: 100
     skin:
       - $type: haxework.gui.skin.ColorSkin
         color: 0x000000
@@ -17,4 +16,3 @@ views:
     shadowColor: 0x000000
   - id: control
     $type: haxework.gui.ButtonView
-  contentSize: true

src/client/haxe/ru/m/tankz/frame/start/PresetsView.hx

@@ -1,27 +1,26 @@
 package ru.m.tankz.frame.start;
 
 import haxework.resources.IResources;
-import haxework.provider.Provider;
-import ru.m.skin.SimpleButtonSkin;
-import ru.m.signal.Signal.Signal1;
-import haxework.gui.ToggleButtonView;
-import ru.m.tankz.Type;
 import haxework.gui.ButtonView;
-import ru.m.tankz.config.Config.GamePreset;
 import haxework.gui.HGroupView;
-
+import haxework.gui.ToggleButtonView;
+import ru.m.signal.Signal;
+import ru.m.tankz.config.Config.GamePreset;
+import ru.m.tankz.Type;
 
 class PresetsView extends HGroupView {
 
     public var data(default, set):Array<GamePreset>;
     public var selected(default, set):PresetId;
 
-    public var change(default, null):Signal1<PresetId>;
+    public var change(default, null):Signal<PresetId>;
+
+    @:provide private static var resources:IResources;
 
     public function new() {
         super();
-        layoutMargin = 10;
+        layout.margin = 10;
-        change = new Signal1();
+        change = new Signal();
     }
 
     private function set_data(value:Array<GamePreset>):Array<GamePreset> {
@@ -29,16 +28,15 @@ class PresetsView extends HGroupView {
         removeAllViews();
         for (item in data) {
             var view = new ToggleButtonView();
-            view.skin = [new SimpleButtonSkin()];
+            view.skin = resources.skin.get("button.toggle");
-            view.onSkin = [new SimpleButtonSkin(0x00ff00)];
             view.text = item.id;
-            view.width = 250;
-            view.height = 36;
             view.fontFamily = "Courirer New";
             view.fontColor = 0xffffff;
             view.fontSize = 18;
             view.shadowColor = 0x000000;
             view.onPress.connect(onPress);
+            //ToDo: update text and size
+            view.redraw();
             view.update();
             addView(view);
         }

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

@@ -53,10 +53,8 @@ class Render extends SpriteView {
         g.beginFill(0x000000);
         g.drawRect(0, 0, mapWidth, mapHeight);
         g.endFill();
-        if (contentSize) {
+        geometry.size.content.width = mapWidth;
-            width = mapWidth;
+        geometry.size.content.height = mapHeight;
-            height = mapHeight;
-        }
     }
 
     public function draw(game:Engine):Void {