[client] update RecordFrame

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

@@ -3,6 +3,7 @@ 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;
@@ -10,7 +11,6 @@ import haxework.view.ITextView;
 import haxework.view.layout.Layout;
 import haxework.view.skin.ISkin;
 import haxework.view.skin.Skin;
-import haxework.resources.IResources;
 import openfl.Assets;
 import ru.m.skin.ButtonSVGSkin;
 
@@ -34,7 +34,18 @@ class Style {
         return Skin.text(color, baseFontSize, fontFamily, fontEmbed);
     }
 
-    public static function register(font:Font = null) {
+    public static function registerButton(name:String, resource:String):Void {
+        resources.skin.put('button.$name', [
+            Skin.size(64, 64),
+            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 register(font:Font = null):Void {
         resources.color.put("light", lightColor);
         resources.color.put("dark", darkColor);
         if (font == null) {
@@ -102,6 +113,9 @@ class Style {
         resources.skin.put("border", [
             Skin.border(ColorUtil.multiply(lightColor, 1.5), 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),
@@ -128,21 +142,9 @@ class Style {
             new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), lightColor),
         ]);
 
-        resources.skin.put("button.settings", [
-            Skin.size(64, 64),
-            new ButtonSVGSkin(Assets.getText("resources/image/icon/cog-solid.svg"), lightColor),
-        ]);
-        resources.skin.put("button.close", [
-            Skin.size(64, 64),
-            new ButtonSVGSkin(Assets.getText("resources/image/icon/times-circle-solid.svg"), lightColor),
-        ]);
-        resources.skin.put("button.next", [
-            Skin.size(64, 64),
-            new ButtonSVGSkin(Assets.getText("resources/image/icon/arrow-alt-circle-right-solid.svg"), lightColor),
-        ]);
-        resources.skin.put("button.start", [
-            Skin.size(64, 64),
-            new ButtonSVGSkin(Assets.getText("resources/image/icon/play-circle-solid.svg"), lightColor),
-        ]);
+        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");
     }
 }

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

@@ -17,12 +17,14 @@ import ru.m.tankz.storage.RecordStorage;
     @:provide var record:GameRecord;
 
     public function onShow():Void {
-        data.data = Lambda.array(recordStorage);
+        var data = Lambda.array(recordStorage);
+        data.sort(function(a:GameRecord, b:GameRecord) return Std.int(a.date.getTime() - b.date.getTime()));
+        this.data.data = data;
     }
 
     private function onRecordSelect(item:IListItemView<GameRecord>):Void {
-        record = item.data;
-        switcher.change(GameFrame.ID);
+        //record = item.data;
+        //switcher.change(GameFrame.ID);
     }
 
     private function close() {

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

@@ -2,16 +2,20 @@
 views:
   - $type: haxework.view.VGroupView
     skinId: container
+    geometry.padding: 20
     views:
       - $type: haxework.view.LabelView
         skinId: text.header
         text: Records
       - id: data
         $type: haxework.view.list.VListView
-        factory: $code:function() return new haxework.view.list.LabelListItem()
+        factory: $code:function() return new ru.m.tankz.view.common.RecordView()
         +onItemSelect: $this:onRecordSelect
         geometry.margin.top: 20
         geometry.size.stretch: true
+        scroll:
+            $type: haxework.view.list.VScrollBarView
+            skinId: scroll
   - $type: haxework.view.HGroupView
     skinId: panel
     views:

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

@@ -0,0 +1,46 @@
+package ru.m.tankz.view.common;
+
+import haxework.view.frame.FrameSwitcher;
+import haxework.view.HGroupView;
+import haxework.view.LabelView;
+import haxework.view.list.ListView;
+import ru.m.tankz.game.record.GameRecord;
+import ru.m.tankz.storage.RecordStorage;
+
+@:template class RecordView extends HGroupView implements IListItemView<GameRecord> {
+    @:view var date:LabelView;
+    @:view var type:LabelView;
+    @:view var level:LabelView;
+    @:view var preset:LabelView;
+
+    public var item_index(default, default):Int;
+    public var data(default, set):GameRecord;
+
+    @:provide var recordStorage:RecordStorage;
+    @:provide var switcher:FrameSwitcher;
+    @:provide var record:GameRecord;
+
+    private function set_data(value:GameRecord):GameRecord {
+        if (data != value) {
+            data = value;
+            date.text = data.date.toString();
+            type.text = data.type;
+            level.text = Std.string(data.levelId);
+            preset.text = Std.string(data.presetId);
+        }
+        return data;
+    }
+
+    private function play():Void {
+        record = data;
+        switcher.change(GameFrame.ID);
+    }
+
+    private function delete():Void {
+        recordStorage.delete(data.id);
+        // ToDo:
+        var list = cast(parent.parent.parent, ListView<Dynamic>);
+        list.data.splice(item_index, 1);
+        list.toUpdate();
+    }
+}

src/client/haxe/ru/m/tankz/view/common/RecordView.yaml

@@ -0,0 +1,29 @@
+---
+geometry.size.height: 38
+layout.margin: 5
+layout.vAlign: middle
+views:
+  - id: play
+    $type: haxework.view.ButtonView
+    skinId: button.start.small
+    +onPress: $code:play()
+  - id: date
+    $type: haxework.view.LabelView
+    skinId: text.box
+    geometry.size.fixed: [250, 38]
+  - id: type
+    $type: haxework.view.LabelView
+    skinId: text.box
+    geometry.size.fixed: [250, 38]
+  - id: level
+    $type: haxework.view.LabelView
+    skinId: text.box
+    geometry.size.fixed: [50, 38]
+  - id: preset
+    $type: haxework.view.LabelView
+    skinId: text.box
+    geometry.size.fixed: [50, 38]
+  - id: delete
+    $type: haxework.view.ButtonView
+    skinId: button.close.small
+    +onPress: $code:delete()