[render] add background choise button

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

@@ -4,6 +4,7 @@ import haxework.App;
 import haxework.log.TraceLogger;
 import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.storage.ImageStorage;
+import ru.m.puzzlez.storage.SettingsStorage;
 import ru.m.puzzlez.view.PuzzlezAppView;
 import ru.m.update.Updater;
 
@@ -15,6 +16,7 @@ class PuzzlezApp extends App {
         // ToDo: fix @:provide macro
         GameStorage;
         ImageStorage;
+        SettingsStorage;
         Const.init();
         L.push(new TraceLogger());
         updater = new Updater(Const.VERSION, "https://shmyga.ru/repo/puzzlez/packages.json");

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

@@ -0,0 +1,10 @@
+package ru.m.puzzlez.render;
+
+import haxework.color.Color;
+import ru.m.puzzlez.core.Id;
+
+enum Background {
+    NONE;
+    COLOR(color:Color);
+    IMAGE(id:ImageId);
+}

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

@@ -1,5 +1,6 @@
 package ru.m.puzzlez.render;
 
+import ru.m.puzzlez.storage.SettingsStorage;
 import flash.display.BitmapData;
 import flash.display.PNGEncoderOptions;
 import flash.display.Sprite;
@@ -23,6 +24,8 @@ class Render extends SpriteView implements IRender {
     public var signal(default, null):Signal<GameEvent>;
     public var scale(get, set):Float;
 
+    @:provide static var settings:SettingsStorage;
+
     private function get_scale():Float {
         return tableView.scaleX;
     }
@@ -97,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);
+        imageView.graphics.beginFill(0x555555, 0.6);
         imageView.graphics.drawRect(0, 0, state.preset.imageRect.width, state.preset.imageRect.height);
         imageView.graphics.endFill();
         imageView.graphics.lineStyle();
@@ -132,6 +135,19 @@ class Render extends SpriteView implements IRender {
         }
     }
 
+    override public function redraw():Void {
+        switch settings.background {
+            case Background.NONE:
+                super.redraw();
+            case Background.COLOR(color):
+                content.graphics.clear();
+                content.graphics.beginFill(color);
+                content.graphics.drawRect(0, 0, width, height);
+                content.graphics.endFill();
+            case Background.IMAGE(id):
+        }
+    }
+
     private function onMouseDown(event:MouseEvent):Void {
         var point:FlashPoint = new FlashPoint(event.stageX, event.stageY);
         var objects = tableView.getObjectsUnderPoint(point);

src/haxe/ru/m/puzzlez/storage/SettingsStorage.hx

@@ -0,0 +1,24 @@
+package ru.m.puzzlez.storage;
+
+import haxework.storage.SharedObjectStorage;
+import ru.m.puzzlez.render.Background;
+
+@:provide class SettingsStorage extends SharedObjectStorage {
+    private inline static var VERSION = 1;
+    private inline static var BACKGROUND_KEY = "background";
+
+    public var background(get, set):Background;
+
+    private inline function get_background():Background {
+        return exists(BACKGROUND_KEY) ? read(BACKGROUND_KEY) : NONE;
+    }
+
+    private inline function set_background(value:Background):Background {
+        write(BACKGROUND_KEY, value);
+        return value;
+    }
+
+    public function new() {
+        super('setting/${VERSION}');
+    }
+}

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

@@ -1,14 +1,18 @@
 package ru.m.puzzlez.view;
 
 import haxe.Timer;
+import haxework.color.Color;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
 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.view.ColorPopup;
 
 @:template class GameFrame extends FrameView<GameState> {
     public static var ID = "game";
@@ -17,6 +21,7 @@ import ru.m.puzzlez.storage.GameStorage;
     private var game:IGame;
     @:provide var switcher:FrameSwitcher;
     @:provide var storage:GameStorage;
+    @:provide var settings:SettingsStorage;
 
     private var saveTimer:Timer;
 
@@ -69,6 +74,15 @@ import ru.m.puzzlez.storage.GameStorage;
         }
     }
 
+    private function choiseBackground():Void {
+        ColorPopup.choise().then((color:Null<Color>) -> {
+            if (color != null) {
+                settings.background = COLOR(color);
+                render.toRedraw();
+            }
+        });
+    }
+
     private function back():Void {
         switcher.back();
     }

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

@@ -9,6 +9,12 @@ views:
     $type: ru.m.puzzlez.render.Render
     geometry.width: 100%
     geometry.height: 100%
+  - $type: haxework.view.form.ButtonView
+    text: Background
+    geometry.position: absolute
+    geometry.hAlign: left
+    geometry.vAlign: top
+    +onPress: ~choiseBackground()
   - $type: haxework.view.form.ButtonView
     text: Back
     geometry.position: absolute

src/haxe/ru/m/view/ColorPopup.hx

@@ -0,0 +1,13 @@
+package ru.m.view;
+
+import promhx.Promise;
+import haxework.color.Color;
+import haxework.view.popup.PopupView;
+
+@:template class ColorPopup extends PopupView<Color> {
+
+    public static function choise(message:String = null):Promise<Color> {
+        var result = new ColorPopup();
+        return result.show();
+    }
+}

src/haxe/ru/m/view/ColorPopup.yaml

@@ -0,0 +1,28 @@
+---
+view:
+  $type: haxework.view.group.VGroupView
+  geometry.width: 400
+  geometry.height: 200
+  geometry.padding: 10
+  geometry.hAlign: center
+  geometry.vAlign: middle
+  style: frame
+  views:
+    - $type: haxework.view.group.HGroupView
+      geometry.width: 100%
+      layout.margin: 10
+      views:
+        - id: header
+          $type: haxework.view.form.LabelView
+    - id: image
+      $type: ru.m.view.ColorView
+      +onSelect: ~close
+    - $type: haxework.view.group.HGroupView
+      geometry.width: 100%
+      layout.hAlign: center
+      layout.margin: 10
+      views:
+        - $type: haxework.view.form.ButtonView
+          text: OK
+          +onPress: ~close('ok')
+          visible: false

src/haxe/ru/m/view/ColorView.hx

@@ -0,0 +1,36 @@
+package ru.m.view;
+
+import flash.events.MouseEvent;
+import haxework.color.Color;
+import haxework.signal.Signal;
+import haxework.view.ImageView;
+import openfl.Assets;
+
+class ColorView extends ImageView {
+
+    public var onSelect(default, null):Signal<Color> = new Signal();
+
+    public function new() {
+        super(Assets.getBitmapData("resources/colors.png"));
+        content.cacheAsBitmap = true;
+        content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
+    }
+
+    private function onMouseDown(event:MouseEvent):Void {
+        content.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
+        content.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+        onMouseMove(event);
+    }
+
+    private function onMouseMove(event:MouseEvent):Void {
+        if (event.localX >= width || event.localY >= height) {
+            return;
+        }
+        onSelect.emit(image.getPixel32(Std.int(event.localX), Std.int(event.localY)));
+    }
+
+    private function onMouseUp(event:MouseEvent):Void {
+        content.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
+        content.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+    }
+}