[add] image preview

package.json

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

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

@@ -12,7 +12,7 @@ import ru.m.skin.ButtonSVGSkin;
 class PuzzlezTheme extends Theme {
 
     public function new() {
-        super({embed: true}, {light: "gray"}, {base: 22});
+        super({embed: true}, {light: "gray"}, {base: Device.isMobile() ? 32 : 22});
         register(new Style("frame", [
             "geometry.padding" => Box.fromFloat(8),
         ]));
@@ -27,8 +27,8 @@ class PuzzlezTheme extends Theme {
             "font.color" => Color.fromString("red"),
         ], "text"));
 
-        var size = Device.isMobile() ? 64 : 42;
+        var size = Device.isMobile() ? 72 : 42;
-        var smallSize = Device.isMobile() ? 42 : 32;
+        var smallSize = Device.isMobile() ? 64 : 32;
         register(new Style("icon", [
             "geometry.width" => SizeValue.fromInt(size),
             "geometry.height" => SizeValue.fromInt(size),
@@ -36,10 +36,13 @@ class PuzzlezTheme extends Theme {
             "skin.color" => colors.light,
         ]));
         register(new Style("icon.close", [
-            "skin.svg" => Assets.getText("resources/image/icon/times-circle-solid.svg"),
+            "skin.svg" => Assets.getText("resources/icon/times-circle-solid.svg"),
         ]));
         register(new Style("icon.setting", [
-            "skin.svg" => Assets.getText("resources/image/icon/cog-solid.svg"),
+            "skin.svg" => Assets.getText("resources/icon/cog-solid.svg"),
+        ]));
+        register(new Style("icon.image", [
+            "skin.svg" => Assets.getText("resources/icon/image-polaroid.svg"),
         ]));
         register(new Style("icon.small", [
             "geometry.width" => SizeValue.fromInt(smallSize),

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

@@ -1,18 +1,19 @@
 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;
+import haxework.view.popup.ConfirmView;
+import promhx.Promise;
 import ru.m.puzzlez.core.Game;
 import ru.m.puzzlez.core.GameEvent;
 import ru.m.puzzlez.core.GameState;
 import ru.m.puzzlez.core.IGame;
-import ru.m.puzzlez.render.Background;
 import ru.m.puzzlez.render.IRender;
 import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.storage.SettingsStorage;
+import ru.m.puzzlez.view.popup.BackgroundPopup;
+import ru.m.puzzlez.view.popup.PreviewPopup;
 
 @:template class GameFrame extends FrameView<GameState> {
     public static var ID = "game";
@@ -74,6 +75,10 @@ import ru.m.puzzlez.storage.SettingsStorage;
         }
     }
 
+    private function showPreview():Void {
+        PreviewPopup.showPreview(game.state);
+    }
+
     private function choiseBackground():Void {
         BackgroundPopup.choise(settings.background).then(background -> {
             if (background != null) {

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

@@ -1,21 +1,24 @@
 ---
 style: frame
-geometry.width: 100%
+layout:
-geometry.height: 100%
+  $type: haxework.view.layout.HorizontalLayout
-overflow.x: crop
-overflow.y: crop
 views:
+  - $type: haxework.view.group.VGroupView
+    geometry.height: 100%
+    geometry.padding: 5
+    views:
+      - $type: haxework.view.form.ButtonView
+        style: icon.image
+        +onPress: ~showPreview()
+      - $type: haxework.view.SpriteView
+        geometry.stretch: true
+      - $type: haxework.view.form.ButtonView
+        style: icon.setting
+        +onPress: ~choiseBackground()
   - id: render
     $type: ru.m.puzzlez.render.Render
     geometry.width: 100%
     geometry.height: 100%
-  - $type: haxework.view.form.ButtonView
-    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
     style: icon.close
     geometry.position: absolute

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

@@ -8,6 +8,7 @@ import haxework.view.frame.FrameView;
 import ru.m.puzzlez.core.GameUtil;
 import ru.m.puzzlez.core.Id;
 import ru.m.puzzlez.storage.ImageStorage;
+import ru.m.puzzlez.view.common.PresetView;
 
 @:template class PresetFrame extends FrameView<ImageId> {
     public static var ID = "preset";

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

@@ -25,7 +25,7 @@ views:
         text: Start
         +onPress: ~start()
   - id: image
-    $type: ru.m.puzzlez.view.PresetView
+    $type: ru.m.puzzlez.view.common.PresetView
     geometry.stretch: true
     geometry.margin: 15
   - $type: haxework.view.form.ButtonView

src/haxe/ru/m/puzzlez/view/common/PresetView.hx

@@ -1,4 +1,4 @@
-package ru.m.puzzlez.view;
+package ru.m.puzzlez.view.common;
 
 import flash.display.BitmapData;
 import flash.display.Graphics;

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

@@ -1,4 +1,4 @@
-package ru.m.puzzlez.view;
+package ru.m.puzzlez.view.popup;
 
 import haxework.color.Color;
 import haxework.view.data.DataView;

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

@@ -1,7 +1,7 @@
 ---
 view:
   $type: haxework.view.group.VGroupView
-  geometry.width: 640
+  geometry.width: 660
   geometry.height: 200
   geometry.padding: 10
   geometry.hAlign: center

src/haxe/ru/m/puzzlez/view/popup/PreviewPopup.hx

@@ -0,0 +1,25 @@
+package ru.m.puzzlez.view.popup;
+
+import flash.events.MouseEvent;
+import haxework.view.popup.PopupView;
+import promhx.Promise;
+import ru.m.puzzlez.core.GameState;
+import ru.m.puzzlez.storage.ImageStorage;
+import ru.m.puzzlez.view.common.PresetView;
+
+@:template class PreviewPopup extends PopupView<Dynamic> {
+
+    @:view("preview") var previewView:PresetView;
+    @:provide static var imageStorage:ImageStorage;
+
+    public function new() {
+        super();
+        content.addEventListener(MouseEvent.CLICK, _ -> close(null));
+    }
+
+    public static function showPreview(state:GameState):Promise<Dynamic> {
+        var result = new PreviewPopup();
+        result.previewView.state = state;
+        return result.show();
+    }
+}

src/haxe/ru/m/puzzlez/view/popup/PreviewPopup.yaml

@@ -0,0 +1,29 @@
+---
+view:
+  $type: haxework.view.group.VGroupView
+  geometry.width: 100%
+  geometry.height: 100%
+  geometry.padding: 10
+  geometry.hAlign: center
+  geometry.vAlign: middle
+  layout.margin: 10
+  style: frame
+  views:
+    - $type: haxework.view.group.HGroupView
+      geometry.width: 100%
+      layout.margin: 10
+      views:
+        - id: header
+          text: Image preview
+          $type: haxework.view.form.LabelView
+    - id: preview
+      $type: ru.m.puzzlez.view.common.PresetView
+      geometry.stretch: true
+    - $type: haxework.view.group.HGroupView
+      geometry.width: 100%
+      layout.hAlign: center
+      layout.margin: 10
+      views:
+        - $type: haxework.view.form.ButtonView
+          text: OK
+          +onPress: ~close(null)

src/resources/icon/image-polaroid.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image-polaroid" role="img"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-image-polaroid fa-w-14 fa-2x">
+    <path fill="currentColor"
+          d="M128 192a32 32 0 1 0-32-32 32 32 0 0 0 32 32zM416 32H32A32 32 0 0 0 0 64v384a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32zm-32 320H64V96h320zM268.8 209.07a16 16 0 0 0-25.6 0l-49.32 65.75L173.31 244a16 16 0 0 0-26.62 0L96 320h256z"
+          class=""></path>
+</svg>

src/resources/icon/image-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>

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

@@ -1,6 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="backspace" role="img"
-     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-backspace fa-w-20 fa-5x">
-    <path fill="currentColor"
-          d="M469.66 181.65l-11.31-11.31c-3.12-3.12-8.19-3.12-11.31 0L384 233.37l-63.03-63.03c-3.12-3.12-8.19-3.12-11.31 0l-11.31 11.31c-3.12 3.12-3.12 8.19 0 11.31L361.38 256l-63.03 63.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0L384 278.63l63.03 63.03c3.12 3.12 8.19 3.12 11.31 0l11.31-11.31c3.12-3.12 3.12-8.19 0-11.31L406.63 256l63.03-63.03a8.015 8.015 0 0 0 0-11.32zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm32 320c0 17.64-14.36 32-32 32H205.26c-8.55 0-16.58-3.33-22.63-9.37L32 256l150.63-150.63c6.04-6.04 14.08-9.37 22.63-9.37H576c17.64 0 32 14.36 32 32v256z"
-          class=""></path>
-</svg>

work.md

@@ -1,4 +1,3 @@
-* background settings
 * parts groups
 * navigation
 * render: table scale/move