[client] game room frames update

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tankz",
-    "version": "0.13.4",
+    "version": "0.14.0",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",

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

@@ -22,6 +22,7 @@ class Style {
     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;
@@ -45,6 +46,14 @@ class Style {
         ]);
     }
 
+    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);
@@ -111,7 +120,7 @@ class Style {
             Skin.geometry(new Geometry().setPadding([25, 8])),
         ]);
         resources.skin.put("border", [
-            Skin.border(ColorUtil.multiply(lightColor, 1.5), 1, 2),
+            Skin.border(borderColor, 1, 2),
         ]);
         resources.skin.put("scroll", [
             Skin.scrollVertical(lightColor, ColorUtil.diff(lightColor, 128)),
@@ -134,13 +143,16 @@ class Style {
         ]);
         resources.skin.put("window", [
             Skin.color(darkColor),
-            Skin.border(ColorUtil.multiply(lightColor, 1.5), 1, 2),
+            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");

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

@@ -1,8 +1,10 @@
 ---
+layout.overflow: true
 views:
   - $type: haxework.view.frame.FrameSwitcher
     id: switcher
     geometry.size.stretch: true
+    layout.overflow: true
     skinId: dark
     views:
       - id: start

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

@@ -26,7 +26,7 @@ import ru.m.tankz.proto.room.RoomSlotProto;
     private function refresh(room:RoomProto):Void {
         if (room != null) {
             start.visible = room.creator.uuid == network.user.uuid;
-            info.text = '[${room.creator.name}] ${room.game.type} ${room.game.level} (${room.users.length})';
+            info.text = '${room.game.type} #${room.game.level}';
             slots.data = room.slots;
             if (room.game.started) {
                 if (this.game == null) {
@@ -39,10 +39,6 @@ import ru.m.tankz.proto.room.RoomSlotProto;
         }
     }
 
-    private function selectSlot(slot:RoomSlotProto):Void {
-        network.selectSlot(slot.slot);
-    }
-
     public function onShow():Void {
         refresh(network.room);
         network.roomSignal.connect(refresh);

src/client/haxe/ru/m/tankz/view/network/RoomFrame.yaml

@@ -1,27 +1,38 @@
 ---
 views:
-    - $type: haxework.view.VGroupView
+  - $type: haxework.view.VGroupView
-      skinId: container
+    skinId: container
-      geometry.padding: 20
+    geometry.padding: 20
-      layout.margin: 10
+    layout.margin: 10
-      views:
+    views:
-          - id: header
+      - id: header
+        $type: haxework.view.LabelView
+        geometry.margin.bottom: 20
+        skinId: text.header
+        text: Game Room
+      - $type: haxework.view.HGroupView
+        layout.margin: 10
+        views:
+          - id: info
             $type: haxework.view.LabelView
-            geometry.margin.bottom: 20
+            geometry.padding: [30, 10]
-            skinId: text.header
+            skinId: text.box
-            text: Game Room
           - id: start
             $type: haxework.view.ButtonView
             skinId: button.simple
             text: Start
             +onPress: $code:network.startGame()
             visible: false
-          - id: info
+          - id: leave
-            $type: haxework.view.LabelView
+            $type: haxework.view.ButtonView
-            geometry.size.width: 100%
+            skinId: button.simple
-            skinId: text.box
+            text: Leave
-          - id: slots
+            +onPress: $code:network.leaveGame()
-            $type: haxework.view.list.VListView
+      - $type: haxework.view.SpriteView
-            geometry.size.stretch: true
+        geometry.size.width: 100%
-            factory: $code:ru.m.tankz.view.network.SlotItemView.factory
+        geometry.size.height: 3
-            +onItemSelect: $code:function(item) selectSlot(item.data)
+        skinId: line
+      - id: slots
+        $type: haxework.view.list.VListView
+        geometry.size.stretch: true
+        factory: $code:ru.m.tankz.view.network.SlotItemView.factory

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

@@ -1,5 +1,8 @@
 package ru.m.tankz.view.network;
 
+import ru.m.tankz.network.NetworkManager;
+import ru.m.tankz.proto.room.RoomSlotProto;
+import haxework.view.ButtonView;
 import haxework.view.HGroupView;
 import haxework.view.LabelView;
 import haxework.view.list.ListView;
@@ -10,14 +13,27 @@ import ru.m.tankz.proto.room.RoomProto;
     public var item_index(default, default):Int;
     public var data(default, set):RoomProto;
 
-    @:view var label:LabelView;
+    @:view("creator") var creatorView:LabelView;
+    @:view("type") var typeView:LabelView;
+    @:view("users") var usersView:LabelView;
+    @:view("join") var joinButton:ButtonView;
+
+    @:provide static var network:NetworkManager;
 
     private function set_data(value:RoomProto):RoomProto {
         data = value;
-        label.text = '[${value.creator.name}] ${value.game.type} ${value.game.level} (${value.users.length})';
+        creatorView.skinId = value.creator.uuid == network.user.uuid ? "text.box.active" : "text.box";
+        creatorView.text = value.creator.name;
+        typeView.text = '${value.game.type} #${value.game.level}';
+        var used = value.slots.filter(function(slot:RoomSlotProto) return slot.hasUser()).length;
+        usersView.text = value.game.started ? 'started' : '${used}/${value.slots.length}';
         return data;
     }
 
+    private function join():Void {
+        network.joinGame(data.game.id, true);
+    }
+
     public static function factory():RoomItemView {
         return new RoomItemView();
     }

src/client/haxe/ru/m/tankz/view/network/RoomItemView.yaml

@@ -1,8 +1,27 @@
 ---
-geometry.size.width: 100%
+# geometry.size.width: 100%
 geometry.size.height: 48
+layout.margin: 10
+layout.hAlign: center
 views:
-    - id: label
+  - id: creator
-      $type: haxework.view.LabelView
+    $type: haxework.view.LabelView
-      geometry.size.stretch: true
+    geometry.size.height: 100%
-      skinId: text.box
+    geometry.size.width: 200
+    skinId: text.box
+  - id: type
+    $type: haxework.view.LabelView
+    geometry.size.height: 100%
+    geometry.size.width: 200
+    skinId: text.box
+  - id: users
+    $type: haxework.view.LabelView
+    geometry.size.height: 100%
+    geometry.size.width: 150
+    skinId: text.box
+  - id: join
+    $type: haxework.view.ButtonView
+    geometry.size.height: 100%
+    skinId: button.simple
+    text: Join
+    +onPress: $code:join()

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

@@ -1,11 +1,11 @@
 package ru.m.tankz.view.network;
 
-import ru.m.tankz.view.popup.CreateGamePopup;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.list.VListView;
 import haxework.view.VGroupView;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.room.RoomProto;
+import ru.m.tankz.view.popup.CreateGamePopup;
 
 @:template class RoomListFrame extends VGroupView {
     public static inline var ID = "room_list";
@@ -44,9 +44,4 @@ import ru.m.tankz.proto.room.RoomProto;
             switcher.change(RoomFrame.ID);
         }
     }
-
-    private function selectRoom(room:RoomProto):Void {
-        network.joinGame(room.game.id, true);
-    }
-
 }

src/client/haxe/ru/m/tankz/view/network/RoomListFrame.yaml

@@ -18,4 +18,3 @@ views:
             geometry.size.stretch: true
             factory: $code:ru.m.tankz.view.network.RoomItemView.factory
             geometry.margin: 10
-            +onItemSelect: $code:function(item) selectRoom(item.data)

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

@@ -1,8 +1,10 @@
 package ru.m.tankz.view.network;
 
+import haxework.view.ButtonView;
 import haxework.view.HGroupView;
 import haxework.view.LabelView;
 import haxework.view.list.ListView;
+import ru.m.tankz.bundle.IConfigBundle;
 import ru.m.tankz.network.NetworkManager;
 import ru.m.tankz.proto.room.RoomSlotProto;
 
@@ -11,17 +13,32 @@ import ru.m.tankz.proto.room.RoomSlotProto;
     public var item_index(default, default):Int;
     public var data(default, set):RoomSlotProto;
 
-    @:view var label:LabelView;
+    @:view("type") var typeView:LabelView;
+    @:view("user") var userView:LabelView;
+    @:view("select") var selectButton:ButtonView;
 
     @:provide static var network:NetworkManager;
+    @:provide static var configBundle:IConfigBundle;
 
     private function set_data(value:RoomSlotProto):RoomSlotProto {
         data = value;
-        label.text = '${value.slot.team}-${value.slot.index} ${value.hasUser() ? value.user.name : '(NONE)'}';
+        typeView.text = '${value.slot.team} #${value.slot.index}';
-        label.skinId = (value.hasUser() && value.user.uuid == network.user.uuid) ? "text.box.active" : "text.box";
+        userView.text = value.hasUser() ? value.user.name : "(NONE)";
+        userView.visible = value.hasUser();
+        selectButton.visible = !value.hasUser();
+        userView.skinId = (value.hasUser() && value.user.uuid == network.user.uuid) ? "text.box.active" : "text.box";
+        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);
+        }
         return data;
     }
 
+    private function select():Void {
+        network.selectSlot(data.slot);
+    }
+
     public static function factory():SlotItemView {
         return new SlotItemView();
     }

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

@@ -1,8 +1,25 @@
 ---
-geometry.size.width: 100%
 geometry.size.height: 48
+geometry.padding: 2
+layout.margin: 10
 views:
-    - id: label
+  - id: type
+    $type: haxework.view.LabelView
+    skinId: text.box
+    geometry.size.height: 100%
+    geometry.size.width: 150
+  - $type: haxework.view.HGroupView
+    layout.hAlign: center
+    layout.vAlign: middle
+    geometry.size.height: 100%
+    geometry.size.width: 300
+    views:
+    - id: user
       $type: haxework.view.LabelView
       geometry.size.stretch: true
       skinId: text.box
+    - id: select
+      $type: haxework.view.ButtonView
+      skinId: button.simple
+      text: Select
+      +onPress: $this:select()

src/common/haxe/ru/m/tankz/config/Config.hx

@@ -233,7 +233,7 @@ class Config {
         return playersMap.get(playerId);
     }
 
-    public function getColor(playerId:PlayerId):Color {
+    public function getColor(playerId:PlayerId):Null<Color> {
         var player = getPlayer(playerId);
         if (player != null && player.color != null) {
             return player.color;
@@ -242,7 +242,7 @@ class Config {
         if (team != null) {
             return team.color;
         }
-        return -1;
+        return null;
     }
 
     public function getPoint(teamId:TeamId, type:String, index:Int = -1):SpawnPoint {