diff --git a/src/client/haxe/ru/m/tankz/AppTheme.hx b/src/client/haxe/ru/m/tankz/AppTheme.hx new file mode 100644 index 0000000..1a912e4 --- /dev/null +++ b/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), + ]); + } + +} diff --git a/src/client/haxe/ru/m/tankz/Client.hx b/src/client/haxe/ru/m/tankz/Client.hx index 16e1570..316ed1a 100755 --- a/src/client/haxe/ru/m/tankz/Client.hx +++ b/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(); diff --git a/src/client/haxe/ru/m/tankz/Init.hx b/src/client/haxe/ru/m/tankz/Init.hx index 87afe9e..9110267 100644 --- a/src/client/haxe/ru/m/tankz/Init.hx +++ b/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(); diff --git a/src/client/haxe/ru/m/tankz/Preloader.hx b/src/client/haxe/ru/m/tankz/Preloader.hx index 3140274..9c8e950 100644 --- a/src/client/haxe/ru/m/tankz/Preloader.hx +++ b/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.backColor = Style.lightColor; + progress.color = AppTheme.COLORS.dark; + progress.backColor = AppTheme.COLORS.light; progress.size = [200, 200]; addChild(progress); onResize(null); diff --git a/src/client/haxe/ru/m/tankz/Style.hx b/src/client/haxe/ru/m/tankz/Style.hx deleted file mode 100644 index 2d572a1..0000000 --- a/src/client/haxe/ru/m/tankz/Style.hx +++ /dev/null @@ -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 { - 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"); - } -} diff --git a/src/client/haxe/ru/m/tankz/render/item/TankRenderItem.hx b/src/client/haxe/ru/m/tankz/render/item/TankRenderItem.hx index 39abb8b..c496c5f 100644 --- a/src/client/haxe/ru/m/tankz/render/item/TankRenderItem.hx +++ b/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.embedFonts = Style.fontEmbed; + result.defaultTextFormat = new TextFormat(theme.font.name, 10, 0xffffff); + result.embedFonts = theme.font.embed; result.autoSize = TextFieldAutoSize.LEFT; result.shadowColor = 0x000000; result.stroke = true; diff --git a/src/client/haxe/ru/m/tankz/view/StartFrame.hx b/src/client/haxe/ru/m/tankz/view/StartFrame.hx index 972a02c..11887a9 100644 --- a/src/client/haxe/ru/m/tankz/view/StartFrame.hx +++ b/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)) - .catchError(function(e) {}); + .then(function(font) AppTheme.register(font)) + .catchError(function(e) {});*/ } } diff --git a/src/client/haxe/ru/m/tankz/view/common/SlotView.hx b/src/client/haxe/ru/m/tankz/view/common/SlotView.hx index 850cbd8..c2025ba 100644 --- a/src/client/haxe/ru/m/tankz/view/common/SlotView.hx +++ b/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("player") var playerButton:ButtonView; + @:view("slot") public var slotLabel:LabelView; + @:view("select") public var select:SelectView; 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 { - case HUMAN(_): "button.simple.active"; - 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); + slotLabel.skin = theme.textBox(value.color != null ? value.color : theme.colors.text); + select.selected = control.controller; return control; } diff --git a/src/client/haxe/ru/m/tankz/view/common/SlotView.yaml b/src/client/haxe/ru/m/tankz/view/common/SlotView.yaml index c11e193..0f477d8 100644 --- a/src/client/haxe/ru/m/tankz/view/common/SlotView.yaml +++ b/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 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) diff --git a/src/client/haxe/ru/m/tankz/view/network/SlotItemView.hx b/src/client/haxe/ru/m/tankz/view/network/SlotItemView.hx index a5bea4e..285b6db 100644 --- a/src/client/haxe/ru/m/tankz/view/network/SlotItemView.hx +++ b/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; } diff --git a/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.hx b/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.hx index d02c873..1e0de4c 100644 --- a/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.hx +++ b/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.hx @@ -39,31 +39,25 @@ 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 { - if (!value.controller.match(NONE)) { - value.controller = NONE; - value.name = null; - } else { - humanIndex++; - if (humanIndex == humanTotal) { - humanIndex = 0; - } - 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; + private function setController(value:PlayerControl, controller:Controller):Void { + switch controller { + case NONE: + case _: + for (view in slotsView.dataViews) { + if (view.control.controller.equals(controller)) { + view.control.controller = NONE; + view.select.selected = NONE; + view.control.name = null; + } } - } - value.controller = controller; - value.name = ControllerParser.defaultName(controller); } - view.control = value; + value.controller = controller; + value.name = ControllerParser.defaultName(controller); } private function presetViewFactory(index:Int, value:GamePreset):ButtonView { diff --git a/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.yaml b/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.yaml index 880417c..cae840a 100644 --- a/src/client/haxe/ru/m/tankz/view/popup/LevelPopup.yaml +++ b/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 diff --git a/src/common/haxe/ru/m/tankz/control/Controller.hx b/src/common/haxe/ru/m/tankz/control/Controller.hx index 251c55f..30becbc 100644 --- a/src/common/haxe/ru/m/tankz/control/Controller.hx +++ b/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; } } diff --git a/src/editor/haxe/ru/m/tankz/editor/Editor.hx b/src/editor/haxe/ru/m/tankz/editor/Editor.hx index 67a7b5b..88bacda 100644 --- a/src/editor/haxe/ru/m/tankz/editor/Editor.hx +++ b/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);