diff --git a/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx b/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx index 8907c7f..99a0d49 100644 --- a/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx +++ b/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx @@ -6,14 +6,14 @@ import haxework.color.ColorUtil; import haxework.view.form.ButtonView; import haxework.view.skin.ISkin; -class ButtonSVGSkin implements ISkin { +@:style class ButtonSVGSkin implements ISkin { - private var svg:String; - private var color:Color; + @:style(null) private var svg:String; + @:style(0) private var color:Null; private var svgs:Map; - public function new(svg:String, color:Color) { + public function new(?svg:String, ?color:Color) { this.svg = svg; this.color = color; init(); diff --git a/src/client/haxe/ru/m/tankz/AppTheme.hx b/src/client/haxe/ru/m/tankz/AppTheme.hx index 9945137..9d8186b 100644 --- a/src/client/haxe/ru/m/tankz/AppTheme.hx +++ b/src/client/haxe/ru/m/tankz/AppTheme.hx @@ -1,15 +1,11 @@ package ru.m.tankz; -import haxework.view.geometry.Geometry; +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.layout.Layout; -import haxework.view.skin.Skin; -import haxework.view.skin.SpriteSkin; -import haxework.view.theme.GeometryStyle; import haxework.view.theme.ITheme; -import haxework.view.theme.LayoutStyle; -import haxework.view.theme.SkinStyle; import haxework.view.theme.Theme; import openfl.Assets; import ru.m.skin.ButtonSVGSkin; @@ -31,53 +27,82 @@ class AppTheme extends Theme { override private function reload():Void { super.reload(); - styles.put("light", [ - new SkinStyle(Skin.color(colors.light)), + data.set("light", [ + "skin.background.color" => colors.light, ]); - styles.put("dark", [ - new SkinStyle(Skin.color(colors.dark)), + + data.set("dark", [ + "skin.background.color" => colors.dark, ]); - styles.put("font", text()); - styles.put("text.header", text(null, bigFontSize).concat([ - new SkinStyle(new SpriteSkin({color: 0x000000, alpha: 0.1}, {color: colors.light})), - new GeometryStyle(new Geometry().setPadding([50, 8]).setMargin([0, 0, 0, 30])) - ])); - styles.put("button.menu", text(null, bigFontSize).concat([ - new SkinStyle(Skin.buttonColor(colors.light)), - new GeometryStyle(new Geometry().setSize(250, 50)), - ])); - styles.put("text.box", text().concat([ - new SkinStyle(new SpriteSkin({color: 0x000000, alpha: 0.1}, {color: colors.light})), - ])); - styles.put("text.box.active", text().concat([ - new SkinStyle(new SpriteSkin({color: 0x55aa55}, {color: 0x88dd88})), - ])); - styles.put("button.level", text(null, veryBigFontSize).concat([ - new SkinStyle(Skin.buttonColor(colors.light)), - new GeometryStyle(new Geometry().setSize(64, 64)), + + data.set("font", create([ + "_" => null, + ], ["text"])); + + data.set("text.header", create([ + "font.size" => bigFontSize, + "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, 0, 30]), + ], ["text"])); + + data.set("button.menu", create([ + "font.size" => bigFontSize, + "geometry.padding" => Box.fromFloat(0), + "geometry.width" => SizeValue.fromInt(250), + "geometry.height" => SizeValue.fromInt(50), + ], ["button"])); + + data.set("text.box", create([ + "skin.background.color" => Color.fromInt(0x000000), + "skin.background.alpha" => 0.1, + "skin.border.color" => colors.light, + ], ["text"])); + + data.set("text.box.active", create([ + "skin.background.color" => Color.fromInt(0x55aa55), + "skin.background.alpha" => 1, + "skin.border.color" => Color.fromInt(0x88dd88), + ], ["text"])); + + data.set("button.level", create([ + "font.size" => veryBigFontSize, + "geometry.width" => SizeValue.fromInt(64), + "geometry.height" => SizeValue.fromInt(64), + "geometry.padding" => Box.fromFloat(0), + ], ["button"])); + + data.set("container", create([ + "font.size" => veryBigFontSize, + "geometry.width" => SizeValue.fromString("100%"), + "geometry.height" => SizeValue.fromString("100%"), + "layout.hAlign" => HAlign.CENTER, + "layout.vAlign" => VAlign.MIDDLE, + ], ["dark"])); + + data.set("panel", create([ + "font.size" => veryBigFontSize, + "geometry.width" => SizeValue.fromString("100%"), + "geometry.padding" => Box.fromArray([10, 5]), + "layout.vAlign" => VAlign.MIDDLE, + ], ["light"])); + + data.set("window", create([ + "geometry.padding" => Box.fromFloat(2), + ], ["dark", "border"])); + + data.set("line", create([ + "_" => null, + ], ["border"])); + + data.set("window.close", create([ + "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), ])); - styles.put("container", [ - new GeometryStyle(new Geometry().setSize("100%", "100%")), - new LayoutStyle(new Layout().setAlign(CENTER, MIDDLE)), - new SkinStyle(Skin.color(colors.dark)), - ]); - styles.put("panel", [ - new GeometryStyle(new Geometry().setSize("100%", -1).setPadding([10, 5])), - new LayoutStyle(new Layout().setAlign(NONE, MIDDLE)), - new SkinStyle(Skin.color(colors.light)), - ]); - styles.put("window", [ - new SkinStyle(new SpriteSkin({color: colors.dark}, {color: colors.border})), - new GeometryStyle(new Geometry().setPadding(2)), - ]); - styles.put("line", [ - new SkinStyle(Skin.color(colors.border)), - ]); - styles.put("window.close", [ - new GeometryStyle(new Geometry().setSize(36, 36)), - new SkinStyle(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"); @@ -87,13 +112,15 @@ class AppTheme extends Theme { } private function registerButton(name:String, resource:String):Void { - styles.put('button.$name', [ - new GeometryStyle(new Geometry().setSize(42, 42)), - new SkinStyle(new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light)), + data.set('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), ]); - styles.put('button.$name.small', [ - new GeometryStyle(new Geometry().setSize(32, 32)), - new SkinStyle(new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light)), + data.set('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), ]); } diff --git a/src/client/haxe/ru/m/tankz/view/GamepadView.hx b/src/client/haxe/ru/m/tankz/view/GamepadView.hx index b16e89f..b423226 100644 --- a/src/client/haxe/ru/m/tankz/view/GamepadView.hx +++ b/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 { +@:style class GamepadSkin implements ISkin { - public var color(default, default):Int; + @:style(0) public var color(default, default):Null; - public function new(color:Int = 0) { + public function new(?color:Color) { this.color = color; } diff --git a/src/client/haxe/ru/m/tankz/view/common/RecordView.yaml b/src/client/haxe/ru/m/tankz/view/common/RecordView.yaml index 978758d..1d0981a 100644 --- a/src/client/haxe/ru/m/tankz/view/common/RecordView.yaml +++ b/src/client/haxe/ru/m/tankz/view/common/RecordView.yaml @@ -10,22 +10,22 @@ views: - id: date $type: haxework.view.form.LabelView style: text.box - geometry.width: 250 + geometry.width: 200 geometry.height: 38 - id: type $type: haxework.view.form.LabelView style: text.box - geometry.width: 250 + geometry.width: 200 geometry.height: 38 - id: level $type: haxework.view.form.LabelView style: text.box - geometry.width: 250 + geometry.width: 100 geometry.height: 38 - id: preset $type: haxework.view.form.LabelView style: text.box - geometry.width: 250 + geometry.width: 100 geometry.height: 38 - id: delete $type: haxework.view.form.ButtonView