[add] (render) image background support

package.json

@@ -1,6 +1,6 @@
 {
     "name": "puzzlez",
-    "version": "0.3.4",
+    "version": "0.3.5",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",

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

@@ -33,10 +33,14 @@ class PuzzlezTheme extends Theme {
             "geometry.width" => SizeValue.fromInt(size),
             "geometry.height" => SizeValue.fromInt(size),
             "skin" => function() return new ButtonSVGSkin(),
+            "skin.color" => colors.light,
         ]));
         register(new Style("icon.close", [
             "skin.svg" => Assets.getText("resources/image/icon/times-circle-solid.svg"),
         ]));
+        register(new Style("icon.setting", [
+            "skin.svg" => Assets.getText("resources/image/icon/cog-solid.svg"),
+        ]));
         register(new Style("icon.small", [
             "geometry.width" => SizeValue.fromInt(smallSize),
             "geometry.height" => SizeValue.fromInt(smallSize),

src/haxe/ru/m/puzzlez/render/Render.hx

@@ -100,7 +100,7 @@ class Render extends SpriteView implements IRender {
         imageView.y = state.preset.imageRect.y;
         imageView.graphics.clear();
         imageView.graphics.lineStyle(2, 0xCCCCCC);
-        imageView.graphics.beginFill(0x555555, 0.6);
+        imageView.graphics.beginFill(0x555555, 0.4);
         imageView.graphics.drawRect(0, 0, state.preset.imageRect.width, state.preset.imageRect.height);
         imageView.graphics.endFill();
         imageView.graphics.lineStyle();
@@ -145,6 +145,12 @@ class Render extends SpriteView implements IRender {
                 content.graphics.drawRect(0, 0, width, height);
                 content.graphics.endFill();
             case Background.IMAGE(id):
+                imageStorage.resolve(id).then(result -> {
+                    content.graphics.clear();
+                    content.graphics.beginBitmapFill(result);
+                    content.graphics.drawRect(0, 0, width, height);
+                    content.graphics.endFill();
+                });
         }
     }
 

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

@@ -1,23 +1,95 @@
 package ru.m.puzzlez.view;
 
-import haxework.view.skin.ButtonColorSkin;
-import haxework.view.form.ButtonView;
 import haxework.color.Color;
+import haxework.view.data.DataView;
+import haxework.view.form.ButtonView;
 import haxework.view.popup.PopupView;
+import haxework.view.skin.Skin;
+import haxework.view.SpriteView;
+import haxework.view.utils.DrawUtil;
+import openfl.Assets;
+import openfl.utils.AssetType;
 import promhx.Promise;
+import ru.m.puzzlez.core.Id.ImageId;
 import ru.m.puzzlez.render.Background;
+import ru.m.puzzlez.storage.ImageStorage;
 
 @:template class BackgroundPopup extends PopupView<Background> {
 
+    private static var colorsList:Array<Color> = [
+        '#FFFFFF',
+        '#001f3f',
+        '#0074D9',
+        '#7FDBFF',
+        '#39CCCC',
+        '#3D9970',
+        '#2ECC40',
+        '#01FF70',
+        '#FFDC00',
+        '#FF851B',
+        '#FF4136',
+        '#85144b',
+        '#F012BE',
+        '#B10DC9',
+        '#111111',
+        '#AAAAAA',
+        '#DDDDDD',
+    ];
+
+    @:view("selected") var selectedView:SpriteView;
+    @:view("colors") var colorsView:DataView<Color, ButtonView>;
+    @:view("textures") var texturesView:DataView<ImageId, ButtonView>;
+
+    public var selected(default, set):Background;
+
+    @:provide var imageStorage:ImageStorage;
+
+    public function new() {
+        super();
+        colorsView.data = colorsList;
+        var textures = [];
+        for (name in Assets.list(AssetType.IMAGE)) {
+            if (StringTools.startsWith(name, 'resources/texture')) {
+                textures.push(new ImageId('asset', name));
+            }
+        }
+        texturesView.data = textures;
+    }
+
+    private function set_selected(value:Background):Background {
+        selected = value;
+        switch selected {
+            case NONE:
+                selectedView.skin = null;
+            case COLOR(color):
+                selectedView.skin = Skin.color(color);
+            case IMAGE(id):
+                imageStorage.resolve(id).then(result -> {
+                    selectedView.skin = Skin.bitmap(result, REPEAT);
+                    selectedView.toRedraw();
+                });
+        }
+        selectedView.toRedraw();
+        return selected;
+    }
+
     private function colorButtonFactory(index:Int, color:Color):ButtonView {
         var result = new ButtonView();
         result.text = "  ";
-        result.skin = new ButtonColorSkin(color);
+        result.skin = Skin.buttonColor(color);
         return result;
     }
 
-    public static function choise(message:String = null):Promise<Background> {
+    private function textureButtonFactory(index:Int, imageId:ImageId):ButtonView {
+        var result = new ButtonView();
+        result.text = "  ";
+        result.skin = Skin.buttonBitmap(Assets.getBitmapData(imageId.id), REPEAT);
+        return result;
+    }
+
+    public static function choise(current:Background):Promise<Background> {
         var result = new BackgroundPopup();
+        result.selected = current;
         return result.show();
     }
 }

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

@@ -1,7 +1,7 @@
 ---
 view:
   $type: haxework.view.group.VGroupView
-  geometry.width: 400
+  geometry.width: 640
   geometry.height: 200
   geometry.padding: 10
   geometry.hAlign: center
@@ -16,46 +16,38 @@ view:
         - id: header
           text: Choise background
           $type: haxework.view.form.LabelView
-    - $type: haxework.view.group.HGroupView
+    - id: selected
+      $type: haxework.view.SpriteView
       geometry.width: 100%
-      views:
+      geometry.height: 100
-        - $type: haxework.view.form.ButtonView
+    - id: colors
-          text: Default
+      $type: haxework.view.data.DataView
-          +onPress: ~close(NONE)
-        - $type: haxework.view.data.DataView
       factory: ~colorButtonFactory
       geometry.width: 100%
       layout:
         $type: haxework.view.layout.TailLayout
         margin: 5
-          data:
+      +onDataSelect: ~(color) -> selected = COLOR(color)
-            - '#FFFFFF'
+    - id: textures
-            - '#001f3f'
+      $type: haxework.view.data.DataView
-            - '#0074D9'
+      factory: ~textureButtonFactory
-            - '#7FDBFF'
+      geometry.width: 100%
-            - '#39CCCC'
+      layout:
-            - '#3D9970'
+        $type: haxework.view.layout.TailLayout
-            - '#2ECC40'
+        margin: 5
-            - '#01FF70'
+      +onDataSelect: ~(imageId) -> selected = IMAGE(imageId)
-            - '#FFDC00'
-            - '#FF851B'
-            - '#FF4136'
-            - '#85144b'
-            - '#F012BE'
-            - '#B10DC9'
-            - '#111111'
-            - '#AAAAAA'
-            - '#DDDDDD'
-          +onDataSelect: ~(color) -> close(COLOR(color))
     - id: image
       $type: ru.m.view.ColorView
-      +onSelect: ~function(color) close(COLOR(color))
+      geometry.hAlign: center
+      +onSelect: ~(color) -> selected = COLOR(color)
     - $type: haxework.view.group.HGroupView
       geometry.width: 100%
       layout.hAlign: center
       layout.margin: 10
       views:
+        - $type: haxework.view.form.ButtonView
+          text: Default
+          +onPress: ~close(NONE)
         - $type: haxework.view.form.ButtonView
           text: OK
-          +onPress: ~reject('ok')
+          +onPress: ~close(selected)
-          visible: false

src/haxe/ru/m/puzzlez/view/GameFrame.hx

@@ -1,5 +1,7 @@
 package ru.m.puzzlez.view;
 
+import promhx.Promise;
+import haxework.view.popup.ConfirmView;
 import haxe.Timer;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
@@ -73,7 +75,7 @@ import ru.m.puzzlez.storage.SettingsStorage;
     }
 
     private function choiseBackground():Void {
-        BackgroundPopup.choise().then((background:Null<Background>) -> {
+        BackgroundPopup.choise(settings.background).then(background -> {
             if (background != null) {
                 settings.background = background;
                 render.toRedraw();
@@ -82,6 +84,14 @@ import ru.m.puzzlez.storage.SettingsStorage;
     }
 
     private function back():Void {
-        switcher.back();
+        (if (game != null && game.state.status == COMPLETE) {
+            Promise.promise(true);
+        } else {
+            ConfirmView.confirm("Exit?");
+        }).then(result -> {
+            if (result) {
+                switcher.change(StartFrame.ID);
+            }
+        });
     }
 }

src/haxe/ru/m/puzzlez/view/GameFrame.yaml

@@ -10,14 +10,16 @@ views:
     geometry.width: 100%
     geometry.height: 100%
   - $type: haxework.view.form.ButtonView
-    text: Background
+    style: icon.setting
     geometry.position: absolute
     geometry.hAlign: left
     geometry.vAlign: top
+    geometry.margin: [5, 0, 5, 0]
     +onPress: ~choiseBackground()
   - $type: haxework.view.form.ButtonView
-    text: Back
+    style: icon.close
     geometry.position: absolute
     geometry.hAlign: right
     geometry.vAlign: top
+    geometry.margin: [0, 5, 5, 0]
     +onPress: ~back()

src/resources/image/icon/keyboard-light.svg

@@ -1,6 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="keyboard" role="img"
-     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-keyboard fa-w-18 fa-5x">
-    <path fill="currentColor"
-          d="M528 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm16 336c0 8.823-7.177 16-16 16H48c-8.823 0-16-7.177-16-16V112c0-8.823 7.177-16 16-16h480c8.823 0 16 7.177 16 16v288zM168 268v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm-336 80v-24c0-6.627-5.373-12-12-12H84c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm384 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zM120 188v-24c0-6.627-5.373-12-12-12H84c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm-96 152v-8c0-6.627-5.373-12-12-12H180c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h216c6.627 0 12-5.373 12-12z"
-          class=""></path>
-</svg>

src/resources/image/icon/play-circle-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play-circle" class="svg-inline--fa fa-play-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg>

src/resources/image/icon/sign-in-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sign-in fa-w-16 fa-2x"><path fill="currentColor" d="M137.2 110.3l21.9-21.9c9.3-9.3 24.5-9.4 33.9-.1L344.9 239c9.5 9.4 9.5 24.7 0 34.1L193 423.7c-9.4 9.3-24.5 9.3-33.9-.1l-21.9-21.9c-9.7-9.7-9.3-25.4.8-34.7l77.6-71.1H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h191.5l-77.6-71.1c-10-9.1-10.4-24.9-.7-34.5zM512 352V160c0-53-43-96-96-96h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84c17.7 0 32 14.3 32 32v192c0 17.7-14.3 32-32 32h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84c53 0 96-43 96-96z" class=""></path></svg>

src/resources/image/icon/sign-out-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-out" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sign-out fa-w-16 fa-2x"><path fill="currentColor" d="M180 448H96c-53 0-96-43-96-96V160c0-53 43-96 96-96h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H96c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm117.9-303.1l77.6 71.1H184c-13.3 0-24 10.7-24 24v32c0 13.3 10.7 24 24 24h191.5l-77.6 71.1c-10.1 9.2-10.4 25-.8 34.7l21.9 21.9c9.3 9.3 24.5 9.4 33.9.1l152-150.8c9.5-9.4 9.5-24.7 0-34.1L353 88.3c-9.4-9.3-24.5-9.3-33.9.1l-21.9 21.9c-9.7 9.6-9.3 25.4.7 34.6z" class=""></path></svg>

src/resources/image/icon/tablet-android-alt-light.svg

@@ -1,7 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="tablet-android-alt" role="img"
-     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
-     class="svg-inline--fa fa-tablet-android-alt fa-w-14 fa-3x">
-    <path fill="currentColor"
-          d="M352 96v256H96V96h256m48-96H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM48 480c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v416c0 8.8-7.2 16-16 16H48zM372 64H76c-6.6 0-12 5.4-12 12v296c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12zm-96 352H172c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h104c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12z"
-          class=""></path>
-</svg>

work.md

@@ -2,3 +2,4 @@
 * parts groups
 * navigation
 * render: table scale/move
+* images paginator