InfernalGames/tankz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[client] add AppTheme

Browse Source
This commit is contained in:
shmyga
2019-07-09 17:45:07 +03:00
parent 24f5b0c218
commit 1ec1c3baae
14 changed files with 172 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/client/haxe/ru/m/tankz/AppTheme.hx Normal file
View File

@@ -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),
]);
}
}

1
src/client/haxe/ru/m/tankz/Client.hx
View File

@@ -26,7 +26,6 @@ class Client {
#if linux
LinuxIcon.apply();
#end
Style.register();
var view:ClientView = new ClientView();
Root.bind(view);
view.launch();

3
src/client/haxe/ru/m/tankz/Init.hx
View File

@@ -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();

7
src/client/haxe/ru/m/tankz/Preloader.hx
View File

@@ -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);

164
src/client/haxe/ru/m/tankz/Style.hx
View File

@@ -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");
}
}

7
src/client/haxe/ru/m/tankz/render/item/TankRenderItem.hx
View File

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

7
src/client/haxe/ru/m/tankz/view/StartFrame.hx
View File

@@ -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) {});*/
}
}

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

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

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

@@ -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)

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

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

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

@@ -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 {

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

@@ -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

2
src/common/haxe/ru/m/tankz/control/Controller.hx
View File

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

2
src/editor/haxe/ru/m/tankz/editor/Editor.hx
View File

@@ -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);