feat(app): use display size types

package.json

@@ -1,6 +1,6 @@
 {
     "name": "puzzlez",
-    "version": "0.4.4",
+    "version": "0.5.0",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",
@@ -13,7 +13,7 @@
         "yargs": "^13.2.4"
     },
     "haxeDependencies": {
-        "haxework": "2.0.0",
+        "haxework": "2.1.0",
         "lime": "8.0.0",
         "openfl": "9.2.0",
         "hxcpp": "4.2.1",

src/app/haxe/ru/m/puzzlez/PuzzlezTheme.hx

@@ -22,7 +22,7 @@ class PuzzlezTheme extends Theme {
     ];
 
     public function new() {
-        super({embed: true}, {light: "gray"}, {base: Device.isMobile() ? 32 : 22});
+        super({embed: true}, {light: "gray"}, {base: "4h"});
         register(new Style("frame", [
             "geometry.padding" => Box.fromFloat(8),
         ]));
@@ -30,18 +30,15 @@ class PuzzlezTheme extends Theme {
             "skin.background.color" => colors.light,
             "skin.border.color" => colors.border,
             "geometry.padding" => Box.fromFloat(3),
-            "geometry.width" => SizeValue.fromInt(320),
-            "geometry.height" => SizeValue.fromInt(240),
+            "geometry.width" => SizeValue.fromString("50h"),
+            "geometry.height" => SizeValue.fromString("40h"),
         ]));
         register(new Style("text.error", [
             "font.color" => Color.fromString("red"),
         ], "text"));
-
-        var size = Device.isMobile() ? 72 : 42;
-        var smallSize = Device.isMobile() ? 64 : 32;
         register(new Style("icon", [
-            "geometry.width" => SizeValue.fromInt(size),
-            "geometry.height" => SizeValue.fromInt(size),
+            "geometry.width" => SizeValue.fromString("8h"),
+            "geometry.height" => SizeValue.fromString("8h"),
             "skin" => function() return new ButtonSVGSkin(),
             "skin.color" => colors.light,
         ]));
@@ -51,8 +48,8 @@ class PuzzlezTheme extends Theme {
             ]));
         }
         register(new Style("icon.small", [
-            "geometry.width" => SizeValue.fromInt(smallSize),
-            "geometry.height" => SizeValue.fromInt(smallSize),
+            "geometry.width" => SizeValue.fromString("6h"),
+            "geometry.height" => SizeValue.fromString("6h"),
         ]));
         register(new Style("icon.red", [
             "skin.color" => 0xcc0000,
@@ -74,10 +71,14 @@ class PuzzlezTheme extends Theme {
         ], "button"));
 
         register(new Style("label.header", [
-            "font.size" => 36,
+            "font.size" => SizeValue.fromString("5h"),
             "geometry.hAlign" => HAlign.CENTER,
             "geometry.margin.top" => 10,
             "geometry.margin.bottom" => 10,
         ], "label"));
+        register(new Style("button.background", [
+            "geometry.width" => SizeValue.fromString("10h"),
+            "geometry.height" => SizeValue.fromString("10h"),
+        ]));
     }
 }

src/app/haxe/ru/m/puzzlez/view/PresetFrame.yaml

@@ -29,6 +29,7 @@ views:
         geometry.margin.left: 15
         text: Network
         +onPress: ~start(true)
+        visible: false
   - id: image
     $type: ru.m.puzzlez.view.common.PresetView
     geometry.stretch: true

src/app/haxe/ru/m/puzzlez/view/popup/BackgroundPopup.hx

@@ -1,18 +1,18 @@
 package ru.m.puzzlez.view.popup;
 
 import hw.color.Color;
+import hw.view.SpriteView;
 import hw.view.data.DataView;
 import hw.view.form.ButtonView;
 import hw.view.popup.PopupView;
 import hw.view.skin.Skin;
-import hw.view.SpriteView;
 import hw.view.utils.DrawUtil;
 import openfl.Assets;
 import openfl.utils.AssetType;
 import promhx.Promise;
+import ru.m.puzzlez.image.ImageData;
 import ru.m.puzzlez.proto.game.ImageId;
 import ru.m.puzzlez.render.Background;
-// import ru.m.puzzlez.settings.ImageStorage;
 
 @:singleton @:template class BackgroundPopup extends PopupView<Background> {
 
@@ -64,10 +64,10 @@ import ru.m.puzzlez.render.Background;
             case COLOR(color):
                 selectedView.skin = Skin.color(color);
             case IMAGE(id):
-                /*imageStorage.resolve(id).then(result -> {
+                ImageData.fromImageId(id).resolve().then(result -> {
                     selectedView.skin = Skin.bitmap(result, REPEAT);
                     selectedView.toRedraw();
-                });*/
+                });
         }
         selectedView.toRedraw();
         return selected;
@@ -75,6 +75,7 @@ import ru.m.puzzlez.render.Background;
 
     private function colorButtonFactory(index:Int, color:Color):ButtonView {
         var result = new ButtonView();
+        result.style = "button.background";
         result.text = "  ";
         result.skin = Skin.buttonColor(color);
         return result;
@@ -82,6 +83,7 @@ import ru.m.puzzlez.render.Background;
 
     private function textureButtonFactory(index:Int, imageId:ImageId):ButtonView {
         var result = new ButtonView();
+        result.style = "button.background";
         result.text = "  ";
         result.skin = Skin.buttonBitmap(Assets.getBitmapData(imageId.id), REPEAT);
         return result;

src/app/haxe/ru/m/puzzlez/view/popup/BackgroundPopup.yaml

@@ -1,8 +1,8 @@
 ---
 view:
   $type: hw.view.group.VGroupView
-  geometry.width: 660
-  geometry.height: 200
+  geometry.width: "100h"
+  geometry.height: "90h"
   geometry.padding: 10
   geometry.hAlign: center
   geometry.vAlign: middle
@@ -19,7 +19,7 @@ view:
     - id: selected
       $type: hw.view.SpriteView
       geometry.width: 100%
-      geometry.height: 200
+      geometry.height: "40h"
     - id: colors
       $type: hw.view.data.DataView
       factory: ~colorButtonFactory