[client] add AppTheme

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

@@ -0,0 +1,130 @@
+package ru.m.tankz;
+
+import haxework.view.core.Geometry;
+import haxework.view.core.HAlign;
+import haxework.view.core.VAlign;
+import haxework.view.layout.Layout;
+import haxework.view.skin.Skin;
+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);
+        data.set("light", [
+            Skin.color(colors.light),
+        ]);
+        data.set("dark", [
+            Skin.color(colors.dark),
+        ]);
+        data.set("font", [
+            Skin.text(colors.text, 0, font.name, font.embed),
+        ]);
+        data.set("text", [
+            Skin.text(colors.text, baseFontSize, font.name, font.embed),
+        ]);
+        data.set("scroll.vertical", [
+            Skin.scrollVertical(colors.light, colors.dark),
+        ]);
+        data.set("text.header", [
+            Skin.color(0x000000, 0.1),
+            Skin.border(colors.light, 1, 2),
+            Skin.text(colors.text, bigFontSize, font.name, font.embed),
+            Skin.geometry(new Geometry().setPadding([50, 8]).setMargin([0, 0, 0, 30])),
+        ]);
+        data.set("button", [
+            Skin.buttonColor(colors.light),
+            Skin.text(colors.text, bigFontSize, font.name, font.embed),
+            Skin.size(250, 50),
+        ]);
+        data.set("text.box", [
+            Skin.color(0x000000, 0.1),
+            Skin.border(colors.light, 1, 2),
+            Skin.text(colors.text, baseFontSize, font.name, font.embed),
+        ]);
+        data.set("text.box.active", [
+            Skin.color(0x55aa55),
+            Skin.border(0x88dd88, 1, 2),
+            Skin.text(colors.text, baseFontSize, font.name, font.embed),
+        ]);
+        data.set("button.simple", [
+            Skin.buttonColor(colors.light),
+            Skin.text(colors.text, baseFontSize, font.name, font.embed),
+            Skin.geometry(new Geometry().setPadding([25, 8])),
+        ]);
+        data.set("button.simple.active", [
+            Skin.buttonColor(colors.light, colors.active),
+            Skin.text(colors.active, baseFontSize, font.name, font.embed),
+            Skin.geometry(new Geometry().setPadding([25, 8])),
+        ]);
+        data.set("button.tab", [
+            Skin.tabColor(colors.light),
+            Skin.text(colors.text, baseFontSize, font.name, font.embed),
+            Skin.geometry(new Geometry().setPadding([25, 8])),
+        ]);
+        data.set("border", [
+            Skin.border(colors.border, 1, 2),
+        ]);
+        data.set("scroll", [
+            Skin.scrollVertical(colors.light, colors.light.diff(128)),
+        ]);
+        data.set("button.level", [
+            Skin.buttonColor(colors.light),
+            Skin.text(colors.text, veryBigFontSize, font.name, font.embed),
+            Skin.size(64, 64),
+        ]);
+
+        data.set("container", [
+            Skin.geometry(new Geometry().setSize("100%", "100%")),
+            Skin.layout(new Layout().setAlign(CENTER, MIDDLE)),
+            Skin.color(colors.dark),
+        ]);
+        data.set("panel", [
+            Skin.geometry(new Geometry().setSize("100%", -1).setPadding([10, 5])),
+            Skin.layout(new Layout().setAlign(NONE, MIDDLE)),
+            Skin.color(colors.light),
+        ]);
+        data.set("window", [
+            Skin.color(colors.dark),
+            Skin.border(colors.border, 1, 2),
+            Skin.geometry(new Geometry().setPadding(2)),
+        ]);
+        data.set("line", [
+            Skin.color(colors.border),
+        ]);
+        data.set("window.close", [
+            Skin.size(36, 36),
+            new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), colors.light),
+        ]);
+        registerButton("settings", "cog-solid.svg");
+        registerButton("close", "times-circle-solid.svg");
+        registerButton("next", "arrow-alt-circle-right-solid.svg");
+        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 {
+        data.set('button.$name', [
+            Skin.size(42, 42),
+            new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light),
+        ]);
+        data.set('button.$name.small', [
+            Skin.size(32, 32),
+            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

@@ -6,6 +6,7 @@ import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.Lib;
 import haxework.view.core.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.color = AppTheme.COLORS.dark;
-        progress.backColor = Style.lightColor;
+        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/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.defaultTextFormat = new TextFormat(theme.font.name, 10, 0xffffff);
-        result.embedFonts = Style.fontEmbed;
+        result.embedFonts = theme.font.embed;
         result.autoSize = TextFieldAutoSize.LEFT;
         result.shadowColor = 0x000000;
         result.stroke = true;

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

@@ -55,9 +55,10 @@ import ru.m.tankz.view.popup.LoginPopup;
         if (fontPopup == null) {
             fontPopup = new FontPopup();
         }
-        fontPopup
+        // ToDo: update Them
+        /*fontPopup
         .show()
-        .then(function(font) Style.register(font))
+        .then(function(font) AppTheme.register(font))
-        .catchError(function(e) {});
+        .catchError(function(e) {});*/
     }
 }

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

@@ -1,28 +1,23 @@
 package ru.m.tankz.view.common;
 
-import haxework.view.ButtonView;
 import haxework.view.HGroupView;
 import haxework.view.LabelView;
+import haxework.view.SelectView;
 import ru.m.tankz.control.Controller;
 import ru.m.tankz.control.PlayerControl;
 
 @:template class SlotView extends HGroupView {
 
-    @:view("slot") var slotLabel:LabelView;
+    @:view("slot") public var slotLabel:LabelView;
-    @:view("player") var playerButton:ButtonView;
+    @: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})';
-        playerButton.skinId = switch control.controller {
+        slotLabel.skin = theme.textBox(value.color != null ? value.color : theme.colors.text);
-            case HUMAN(_): "button.simple.active";
+        select.selected = control.controller;
-            case _: "button.simple";
-        }
-        var name = ControllerParser.defaultName(control.controller);
-        playerButton.text = name != null ? name : "None";
-        slotLabel.skin = Style.textBox(value.color != null ? value.color : Style.textColor);
         return control;
     }
 

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

@@ -8,15 +8,14 @@ views:
     skinId: text.box
     geometry.size.height: 100%
     geometry.size.width: 150
-  - id: player
-    $type: haxework.view.ButtonView
-    skinId: button.simple
-    geometry.size.height: 100%
-    geometry.size.width: 120
-    text: "-"
   - id: select
     $type: haxework.view.SelectView<ru.m.tankz.control.Controller>
     labelSkinId: text.box
+    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)

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

@@ -30,7 +30,7 @@ import ru.m.tankz.proto.room.RoomSlotProto;
         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.skin = theme.textBox(color);
         }
         return data;
     }

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

@@ -39,32 +39,26 @@ private typedef Result = {
 
     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 onControlSelect(index:Int, value:PlayerControl, view:SlotView):Void {
+    private function setController(value:PlayerControl, controller:Controller):Void {
-        if (!value.controller.match(NONE)) {
+        switch controller {
-            value.controller = NONE;
+            case NONE:
-            value.name = null;
+            case _:
-        } else {
+                for (view in slotsView.dataViews) {
-            humanIndex++;
+                    if (view.control.controller.equals(controller)) {
-            if (humanIndex == humanTotal) {
+                        view.control.controller = NONE;
-                humanIndex = 0;
+                        view.select.selected = NONE;
+                        view.control.name = null;
                     }
-            var controller = HUMAN(humanIndex);
-            for (v in slotsView.dataViews) {
-                if (v.control.controller.equals(controller)) {
-                    v.control.controller = NONE;
-                    v.control.name = null;
-                    v.control = v.control;
                 }
         }
         value.controller = controller;
         value.name = ControllerParser.defaultName(controller);
     }
-        view.control = value;
-    }
 
     private function presetViewFactory(index:Int, value:GamePreset):ButtonView {
         var result = new ButtonView();

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

@@ -36,7 +36,6 @@ view:
           $type: haxework.view.layout.VerticalLayout
           # $type: haxework.view.layout.TailLayout
           margin: 5
-        +onItemSelect: ~onControlSelect
     - id: presets
       $type: haxework.view.DataView
       factory: ~presetViewFactory

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

@@ -21,7 +21,7 @@ class ControllerParser {
 
     public static function defaultName(controller:Controller):String {
         return switch controller {
-            case HUMAN(index): 'Player $index';
+            case HUMAN(index): 'Player ${index + 1}';
             case BOT(_) | NONE: null;
         }
     }

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

@@ -31,7 +31,7 @@ class Editor {
         resources = new Resources();
         resources.text.put('version', '${Const.VERSION}');
 
-        Style.register();
+        AppTheme.register();
 
         Provider.setFactory(IConfigBundle, ConfigBundle);
         Provider.setFactory(ILevelBundle, LevelBundle);