[client] improve StartFrame

CHANGELOG.md

@@ -1,3 +1,12 @@
+0.16.0
+------
+* Added `GamepadView` for sensor control
+* Added `AppTheme`
+* Replace `LevelPopup` with `StartFrame`
+* Added `LevelPack`
+* Added scrolls to lists
+* Fixed `GameView` size for small screens
+
 0.15.0
 ------
 * Added display tank player name in `Render`

WORK.md

@@ -8,4 +8,4 @@
 * improve bonuses system
 * screen gamepad on mobiles
 * resize render on mobiles
-* save state in classic game
+* save human state in classic game

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

@@ -1,5 +1,6 @@
 package ru.m.tankz;
 
+import flash.text.TextFormatAlign;
 import haxework.color.Color;
 import haxework.view.geometry.Box;
 import haxework.view.geometry.HAlign;
@@ -41,6 +42,7 @@ class AppTheme extends Theme {
 
         register(new Style("text.header", [
             "font.size" => fontSize.big,
+            "font.align" => TextFormatAlign.CENTER,
             "skin.background.color" => Color.fromInt(0x000000),
             "skin.background.alpha" => 0.1,
             "skin.border.color" => colors.light,

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

@@ -1,8 +1,8 @@
 package ru.m.tankz.view;
 
-import haxework.view.layout.DefaultLayout;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
+import haxework.view.layout.DefaultLayout;
 import ru.m.control.DeviceType;
 import ru.m.control.IControlBus;
 import ru.m.tankz.game.GameEvent;
@@ -23,16 +23,15 @@ import ru.m.tankz.view.GamepadView;
 
     private static inline var TAG = "GameFrame";
 
-    @:view("game") private var gameView(default, null):GameView;
+    @:provide static var soundManager:SoundManager;
-    @:view private var gamepad(default, null):GamepadView;
+    @:provide static var switcher:FrameSwitcher;
-
-    @:provide var soundManager:SoundManager;
-    @:provide var switcher:FrameSwitcher;
     @:provide static var gameStorage:GameStorage;
     @:provide static var settings:SettingsStorage;
-
     @:provide static var bus:IControlBus;
 
+    @:view("game") private var gameView(default, null):GameView;
+    @:view private var gamepad(default, null):GamepadView;
+
     private var game:IGame;
     private var recorder:GameRecord;
 
@@ -61,7 +60,6 @@ import ru.m.tankz.view.GamepadView;
             case LOCAL(start): new LocalGame(start);
             case NETWORK(network): new NetworkGame(network);
             case RECORD(record): new GamePlayer(record);
-            case _: null;
         }
         gameView.type = game.type;
         soundManager.config = game.config;
@@ -98,6 +96,6 @@ import ru.m.tankz.view.GamepadView;
     }
 
     public function close():Void {
-        switcher.change(MenuFrame.ID);
+        switcher.change(LevelFrame.ID, game.level.packId);
     }
 }

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

@@ -10,3 +10,10 @@ views:
     geometry.position: absolute
     geometry.stretch: true
     visible: false
+  - $type: haxework.view.form.ButtonView
+    style: button.close
+    geometry.position: absolute
+    geometry.hAlign: right
+    geometry.vAlign: bottom
+    geometry.margin: 10
+    +onPress: ~close()

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

@@ -12,6 +12,8 @@ import ru.m.tankz.game.GameState;
 import ru.m.tankz.storage.GameStorage;
 import ru.m.tankz.view.common.LifeView;
 
+using ru.m.tankz.view.ViewUtil;
+
 @:template class ResultFrame extends FrameView<Result> {
     public static var ID(default, never):String = "result";
 
@@ -46,13 +48,9 @@ import ru.m.tankz.view.common.LifeView;
         var players = Lambda.array(result.state.players);
         players.sort(function(a, b) return a.id.compare(b.id));
         resultView.data = players;
-        var label = '${result.state.type} Level ${result.level.id}';
+        levelLabel.text = data.level.levelLabel();
-        if (result.level.name != null) {
-            label += '\n${result.level.name}';
-        }
-        levelLabel.text = label;
         nextButton.disabled = !gameStorage.get(result.level.packId).isPresetAvailable(result.level.id + 1, result.state.presetId);
-        nextButton.text = 'Next (${result.level.id + 1})';
+        nextButton.text = 'Next #${result.level.id + 1}';
     }
 
     private function levels():Void {
@@ -73,8 +71,4 @@ import ru.m.tankz.view.common.LifeView;
             }
         }
     }
-
-    private function close():Void {
-        frames.change(MenuFrame.ID);
-    }
 }

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

@@ -16,6 +16,7 @@ import ru.m.tankz.Type;
 import ru.m.tankz.view.common.SlotView;
 
 using haxe.EnumTools.EnumValueTools;
+using ru.m.tankz.view.ViewUtil;
 
 @:template class StartFrame extends FrameView<Start> {
 
@@ -28,12 +29,11 @@ using haxe.EnumTools.EnumValueTools;
 
     @:view var header:LabelView;
     @:view("presets") var presetsView:DataView<GamePreset, ButtonView>;
-    @:view("slots") var slotsView:DataView<PlayerControl, SlotView>;
+    @:view("teams") var teamsView:DataView<Array<PlayerControl>, DataView<PlayerControl, SlotView>>;
 
     private var humanIndex:Int = 0;
     private var humanTotal:Int = 2;
 
-
     private var start:Start;
 
     public function new() {
@@ -44,32 +44,45 @@ using haxe.EnumTools.EnumValueTools;
         super.onShow(data);
         start = data;
         this.progress = storage.get(start.level.packId);
-        header.text = '${start.state.type} - ${start.level.id}. ${start.level.name != null ? start.level.name : "#"}';
+        header.text = start.level.levelLabel();
         presetsView.data = start.state.config.presets;
-        slotsView.data = defaultControls(start.state.config);
+        teamsView.data = defaultControls(start.state.config);
     }
 
-    private static function defaultControls(config:Config):Array<PlayerControl> {
+    private static function defaultControls(config:Config):Array<Array<PlayerControl>> {
-        var controls:Array<PlayerControl> = [];
+        var result:Array<Array<PlayerControl>> = [];
         var preset = config.getPreset(0);
+        var human = false;
         for (team in preset.teams) {
             if (team.id != "bot") {  // ToDo:
+                var controls:Array<PlayerControl> = [];
                 for (player in team.players) {
                     var playerId = new PlayerId(team.id, player.index);
-                    controls.push({
+                    var control:PlayerControl = {
                         playerId: playerId,
                         color: config.getColor(playerId),
                         controller: NONE,
-                    });
+                    }
+                    if (!human) {
+                        control.controller = HUMAN(0);
+                        control.name = ControllerParser.defaultName(control.controller);
+                        human = true;
+                    }
+                    controls.push(control);
+                }
+                result.push(controls);
             }
         }
+        return result;
     }
-        controls.sort(function(a, b) return a.playerId.compare(b.playerId));
+
-        if (controls.length > 0) {
+    private function teamViewFactory(index:Int, value:Array<PlayerControl>):DataView<PlayerControl, SlotView> {
-            controls[0].controller = HUMAN(0);
+        var result = new DataView();
-            controls[0].name = ControllerParser.defaultName(controls[0].controller);
+        result.style = "light";
-        }
+        result.geometry.padding = 5;
-        return controls;
+        result.factory = slotViewFactory;
+        result.data = value;
+        return result;
     }
 
     private function slotViewFactory(index:Int, value:PlayerControl):SlotView {
@@ -83,7 +96,8 @@ using haxe.EnumTools.EnumValueTools;
         switch controller {
             case NONE:
             case _:
-                for (view in slotsView.dataViews) {
+                for (teamView in teamsView.dataViews) {
+                    for (view in teamView.dataViews) {
                         if (view.control.controller.equals(controller)) {
                             view.control.controller = NONE;
                             view.select.selected = NONE;
@@ -91,6 +105,7 @@ using haxe.EnumTools.EnumValueTools;
                         }
                     }
                 }
+        }
         value.controller = controller;
         value.name = ControllerParser.defaultName(controller);
     }
@@ -106,7 +121,11 @@ using haxe.EnumTools.EnumValueTools;
     private function onPresetSelect(value:GamePreset):Void {
         if (progress.isPresetAvailable(start.level.id, value.id)) {
             start.state.presetId = value.id;
-            start.state.controls = slotsView.data;
+            var controls = [];
+            for (item in teamsView.data) {
+                controls = controls.concat(item);
+            }
+            start.state.controls = controls;
             switcher.change(GameFrame.ID, LOCAL(start));
         }
     }

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

@@ -6,18 +6,18 @@ views:
       - id: header
         $type: haxework.view.form.LabelView
         style: text.header
-      - id: slots
+      - id: teams
         $type: haxework.view.data.DataView
         geometry.padding: 10
         geometry.width: 100%
         geometry.height: 100%
         layout.hAlign: center
         overflow.y: scroll
-        factory: ~slotViewFactory
+        factory: ~teamViewFactory
         layout:
-          $type: haxework.view.layout.VerticalLayout
+          $type: haxework.view.layout.TailLayout
-          # $type: haxework.view.layout.TailLayout
           margin: 5
+          rowSize: 2
   - $type: haxework.view.group.HGroupView
     style: panel
     layout.margin: 10

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

@@ -0,0 +1,14 @@
+package ru.m.tankz.view;
+
+import ru.m.tankz.config.Config;
+
+class ViewUtil {
+
+    public static function levelLabel(level:LevelConfig):String {
+        var result:Array<String> = ['${level.packId.type} #${level.id}'];
+        if (level.name != null) {
+            result.push(level.name);
+        }
+        return result.join("\n");
+    }
+}

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

@@ -1,8 +1,9 @@
 package ru.m.tankz.view.common;
 
-import haxework.view.group.HGroupView;
 import haxework.view.form.LabelView;
 import haxework.view.form.SelectView;
+import haxework.view.group.HGroupView;
+import haxework.view.skin.SpriteSkin;
 import ru.m.tankz.control.Controller;
 import ru.m.tankz.control.PlayerControl;
 
@@ -16,7 +17,11 @@ import ru.m.tankz.control.PlayerControl;
     private function set_control(value:PlayerControl):PlayerControl {
         control = value;
         slotLabel.text = '${control.playerId.team} #${control.playerId.index}';
-        slotLabel.font.color = value.color;
+        var skin:SpriteSkin = cast slotLabel.skin;
+        skin.border.color = value.color;
+        skin.border.alpha = 0.8;
+        skin.background.color = value.color;
+        skin.background.alpha = 0.2;
         select.selected = control.controller;
         return control;
     }