[update] :-)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "puzzlez",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",
@@ -15,7 +15,8 @@
         "haxework": "git@bitbucket.org:shmyga/haxework.git",
         "lime": "7.6.3",
         "openfl": "8.9.5",
-        "hxcpp": "4.0.52"
+        "hxcpp": "4.0.52",
+        "svg": "1.1.3"
     },
     "dependencies": {}
 }

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

@@ -4,11 +4,13 @@ import haxework.color.Color;
 import haxework.view.geometry.Box;
 import haxework.view.geometry.SizeValue;
 import haxework.view.theme.Theme;
+import openfl.Assets;
+import ru.m.skin.ButtonSVGSkin;
 
 class PuzzlezTheme extends Theme {
 
     public function new() {
-        super({name: "Georgia"}, {light: "gray"}, {base: 22});
+        super({embed: true}, {light: "gray"}, {base: 22});
         data.get("frame").data.set("geometry.padding", Box.fromFloat(8));
         register(new Style("view", [
             "skin.background.color" => colors.light,
@@ -20,5 +22,24 @@ class PuzzlezTheme extends Theme {
         register(new Style("text.error", [
             "font.color" => Color.fromString("red"),
         ], "text"));
+        registerButton("close", "times-circle-solid.svg", false, 0xcc5500);
+    }
+
+    private function registerButton(name:String, resource:String, solid:Bool = false, color:Color = null):Void {
+        if (color == null) {
+            color = colors.light;
+        }
+        var size = 42;
+        var smallSize = 32;
+        register(new Style('button.$name', [
+            "geometry.width" => SizeValue.fromInt(size),
+            "geometry.height" => SizeValue.fromInt(size),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), color, solid),
+        ]));
+        register(new Style('button.$name.small', [
+            "geometry.width" => SizeValue.fromInt(smallSize),
+            "geometry.height" => SizeValue.fromInt(smallSize),
+            "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), color, solid),
+        ]));
     }
 }

src/haxe/ru/m/puzzlez/source/FileSource.hx

@@ -3,6 +3,7 @@ package ru.m.puzzlez.source;
 import flash.display.BitmapData;
 import flash.net.SharedObject;
 import haxe.crypto.Md5;
+import haxe.DynamicAccess;
 import haxe.io.Bytes;
 import promhx.Promise;
 import ru.m.puzzlez.core.Id;
@@ -50,7 +51,8 @@ class FileSource implements IImageSource<Dynamic> {
         var fileData = SharedObject.getLocal(id);
         fileData.clear();
         fileData.flush();
-        Reflect.deleteField(listData.data, id);
+        var access:DynamicAccess<String> = listData.data;
+        access.remove(id);
         listData.flush();
     }
 }

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

@@ -1,4 +1,4 @@
-package ru.m.puzzlez.source;
+package ru.m.puzzlez.storage;
 
 import haxework.storage.SharedObjectStorage;
 import ru.m.puzzlez.core.GameState;

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

@@ -7,7 +7,7 @@ import ru.m.puzzlez.core.GameEvent;
 import ru.m.puzzlez.core.GameState;
 import ru.m.puzzlez.core.IGame;
 import ru.m.puzzlez.render.IRender;
-import ru.m.puzzlez.source.GameStorage;
+import ru.m.puzzlez.storage.GameStorage;
 
 @:template class GameFrame extends FrameView<GameState> {
     public static var ID = "game";

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

@@ -3,15 +3,16 @@ package ru.m.puzzlez.view;
 import haxework.view.data.DataView;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
-import ru.m.puzzlez.core.GameState;
+import haxework.view.popup.ConfirmView;
-import ru.m.puzzlez.source.GameStorage;
+import ru.m.puzzlez.core.Id.ImageId;
+import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.view.PuzzleImageView;
 
 @:template class GameListFrame extends FrameView<Dynamic> {
 
     public static var ID(default, never) = "game_list";
 
-    @:view var images:ActionDataView<GameState, PuzzleImageView, Action>;
+    @:view var images:ActionDataView<ImageId, PuzzleImageView, Action>;
 
     @:provide var switcher:FrameSwitcher;
     @:provide var storage:GameStorage;
@@ -21,18 +22,22 @@ import ru.m.puzzlez.view.PuzzleImageView;
     }
 
     override public function onShow(data:Dynamic):Void {
-        images.data = storage.list();
+        images.data = storage.listIds();
     }
 
-    private function start(state:GameState):Void {
+    private function start(id:ImageId):Void {
-        switcher.change(GameFrame.ID, state);
+        switcher.change(GameFrame.ID, storage.read(id));
     }
 
-    private function onAction(state:GameState, action:Action):Void {
+    private function onAction(id:ImageId, action:Action):Void {
         switch action {
-            case CLOSE:
+            case REMOVE:
-                storage.delete(state.preset.imageId);
+                ConfirmView.confirm("Delete?").then(function(result) {
-                images.data = storage.list();
+                    if (result) {
+                        storage.delete(id);
+                        images.data = storage.listIds();
+                    }
+                });
         }
     }
 

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

@@ -8,7 +8,7 @@ views:
       margin: 5
       vAlign: middle
     geometry.stretch: true
-    factory: ~ru.m.puzzlez.view.PuzzleImageView.stateFactory
+    factory: ~ru.m.puzzlez.view.PuzzleImageView.factory
     +onDataSelect: ~start
     +onDataAction: ~onAction
     geometry.margin: 5

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

@@ -4,17 +4,21 @@ import haxework.view.data.DataView;
 import haxework.view.form.ButtonView;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
+import haxework.view.popup.ConfirmView;
 import ru.m.puzzlez.core.Id;
 import ru.m.puzzlez.FileUtil;
 import ru.m.puzzlez.source.FileSource;
+import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.storage.ImageStorage;
+import ru.m.puzzlez.view.PuzzleImageView;
 
 @:template class ImageListFrame extends FrameView<ImageListSource<Dynamic>> {
     public static var ID = "image_list";
 
-    @:view var images:DataView<ImageId, PuzzleImageView>;
+    @:view var images:ActionDataView<ImageId, PuzzleImageView, Action>;
     @:view var select:ButtonView;
     @:provide var imageStorage:ImageStorage;
+    @:provide var gameStorage:GameStorage;
     @:provide var switcher:FrameSwitcher;
 
     private var source:ImageListSource<Dynamic>;
@@ -47,8 +51,28 @@ import ru.m.puzzlez.storage.ImageStorage;
         });
     }
 
-    private function start(image:ImageId):Void {
+    private function onAction(imageId:ImageId, action:Action):Void {
-        switcher.change(PresetFrame.ID, image);
+        switch action {
+            case REMOVE:
+                var fileSource:FileSource = Std.instance(source.source, FileSource);
+                if (fileSource != null) {
+                    ConfirmView.confirm("Delete?").then(function(result) {
+                        if (result) {
+                            fileSource.remove(imageId);
+                            loading.promise = fileSource.getList().then(function(result) images.data = result);
+                        }
+                    });
+                }
+        }
+    }
+
+    private function start(imageId:ImageId):Void {
+        var state = gameStorage.read(imageId);
+        if (state != null) {
+            switcher.change(GameFrame.ID, state);
+        } else {
+            switcher.change(PresetFrame.ID, imageId);
+        }
     }
 
     private function back():Void {

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

@@ -2,7 +2,7 @@
 style: frame
 views:
   - id: images
-    $type: haxework.view.data.DataView
+    $type: haxework.view.data.ActionDataView
     layout:
       $type: haxework.view.layout.TailLayout
       margin: 5
@@ -10,6 +10,7 @@ views:
     geometry.stretch: true
     factory: ~ru.m.puzzlez.view.PuzzleImageView.factory
     +onDataSelect: ~start
+    +onDataAction: ~onAction
     geometry.margin: 5
     overflow.y: scroll
   - id: select

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

@@ -1,16 +1,17 @@
 package ru.m.puzzlez.view;
 
-import haxework.view.data.DataView.ActionDataView;
+import haxework.view.data.DataView;
+import haxework.view.form.ButtonView;
 import haxework.view.form.LabelView;
 import haxework.view.group.GroupView;
 import haxework.view.ImageView;
-import ru.m.puzzlez.core.GameState;
 import ru.m.puzzlez.core.GameUtil;
 import ru.m.puzzlez.core.Id;
+import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.storage.ImageStorage;
 
 enum Action {
-    CLOSE;
+    REMOVE;
 }
 
 @:template class PuzzleImageView extends GroupView {
@@ -37,7 +38,9 @@ enum Action {
 
     @:view("image") var imageView:ImageView;
     @:view("label") var labelView:LabelView;
-    @:provide var imageStorage:ImageStorage;
+    @:view("remove") var removeButton:ButtonView;
+    @:provide static var imageStorage:ImageStorage;
+    @:provide static var gameStorage:GameStorage;
     private var loading:LoadingWrapper;
 
     public function new() {
@@ -45,25 +48,22 @@ enum Action {
         loading = new LoadingWrapper(this);
     }
 
-    private function close():Void {
+    private function emit(action:Action):Void {
         var dataView:ActionDataView<Dynamic, PuzzleImageView, Action> = Std.instance(parent, ActionDataView);
         if (dataView != null) {
             var index = dataView.dataViews.indexOf(this);
-            dataView.onDataAction.emit(dataView.data[index], CLOSE);
+            dataView.onDataAction.emit(dataView.data[index], action);
         }
     }
 
     public static function factory(index:Int, imageId:ImageId):PuzzleImageView {
         var result = new PuzzleImageView();
         result.imageId = imageId;
-        return result;
+        var state = gameStorage.read(imageId);
-    }
+        if (state != null) {
-
+            var progress = GameUtil.calcProgress(state);
-    public static function stateFactory(index:Int, state:GameState):PuzzleImageView {
+            result.text = '${progress.complete}/${progress.total}';
-        var result = new PuzzleImageView();
+        }
-        result.imageId = state.preset.imageId;
-        var progress = GameUtil.calcProgress(state);
-        result.text = '${progress.complete}/${progress.total}';
         return result;
     }
 }

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

@@ -8,9 +8,9 @@ views:
     fillType: COVER
   - id: label
     $type: haxework.view.form.LabelView
-  - id: close
+  - id: remove
     $type: haxework.view.form.ButtonView
     propagation: false
     geometry.hAlign: right
-    text: X
+    style: button.close.small
-    +onPress: ~close()
+    +onPress: ~emit(Action.REMOVE)

src/haxe/ru/m/skin/ButtonSVGSkin.hx

@@ -0,0 +1,56 @@
+package ru.m.skin;
+
+import format.SVG;
+import haxework.color.Color;
+import haxework.view.form.ButtonView;
+import haxework.view.skin.ISkin;
+
+using StringTools;
+using haxework.color.ColorUtil;
+
+@:style class ButtonSVGSkin implements ISkin<ButtonView> {
+
+    @:style(null) public var svg:String;
+    @:style(0) public var color:Null<Color>;
+    @:style(false) public var solid:Null<Bool>;
+
+    private var svgs:Map<ButtonState, SVG>;
+
+    public function new(?svg:String, ?color:Color, ?solid:Bool) {
+        this.svg = svg;
+        this.color = color;
+        this.solid = solid;
+        init(solid);
+    }
+
+    private inline function buildSVG(color:Color):SVG {
+        return new SVG(svg.replace("currentColor", '#${color}'));
+    }
+
+    private function init(solid:Bool):Void {
+        var color = color;
+        if (solid) {
+            color = color.multiply(1.5);
+        }
+        svgs = new Map();
+        svgs.set(UP, buildSVG(color));
+        svgs.set(DOWN, buildSVG(color.diff(-24)));
+        svgs.set(OVER, buildSVG(color.diff(24)));
+        svgs.set(DISABLED, buildSVG(color.grey()));
+    }
+
+    public function draw(view:ButtonView):Void {
+        var svg = svgs.get(view.state);
+        var graphics = view.content.graphics;
+        graphics.beginFill(0, 0);
+        graphics.drawRect(0, 0, view.width, view.height);
+        graphics.beginFill(color);
+        if (!solid) {
+            graphics.lineStyle(2, color.multiply(1.5));
+        }
+        // ToDo: padding
+        svg.render(graphics, 0, 0, Std.int(view.width * 0.8), Std.int(view.height * 0.8));
+        graphics.lineStyle();
+        graphics.endFill();
+    }
+}

src/resources/image/icon/arrow-alt-circle-left-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-left" class="svg-inline--fa fa-arrow-alt-circle-left fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm116-292H256v-70.9c0-10.7-13-16.1-20.5-8.5L121.2 247.5c-4.7 4.7-4.7 12.2 0 16.9l114.3 114.9c7.6 7.6 20.5 2.2 20.5-8.5V300h116c6.6 0 12-5.4 12-12v-64c0-6.6-5.4-12-12-12z"></path></svg>

src/resources/image/icon/arrow-alt-circle-right-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-right" class="svg-inline--fa fa-arrow-alt-circle-right fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>

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

@@ -0,0 +1,6 @@
+<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>

src/resources/image/icon/bars-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>

src/resources/image/icon/cog-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path></svg>

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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,7 @@
+<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>

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

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-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 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>

src/resources/image/icon/window-close-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path></svg>