1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4struct TileData {
5 image: image,
6 image_visible: bool,
7 solved: bool,
8}
9
10component MemoryTile inherits Rectangle {
11 callback clicked;
12 in property <bool> open_curtain;
13 in property <bool> solved;
14 in property <image> icon;
15
16 height: 64px;
17 width: 64px;
18 background: solved ? #34CE57 : #3960D5;
19 animate background { duration: 800ms; }
20
21 Image {
22 source: icon;
23 width: parent.width;
24 height: parent.height;
25 }
26
27 // Left curtain
28 Rectangle {
29 background: #193076;
30 width: open_curtain ? 0px : (parent.width / 2);
31 height: parent.height;
32 animate width { duration: 250ms; easing: ease-in; }
33 }
34
35 // Right curtain
36 Rectangle {
37 background: #193076;
38 x: open_curtain ? parent.width : (parent.width / 2);
39 width: open_curtain ? 0px : (parent.width / 2);
40 height: parent.height;
41 animate width { duration: 250ms; easing: ease-in; }
42 animate x { duration: 250ms; easing: ease-in; }
43 }
44
45 TouchArea {
46 clicked => {
47 // Delegate to the user of this element
48 root.clicked();
49 }
50 }
51}
52
53export component MainWindow inherits Window {
54 width: 326px;
55 height: 326px;
56
57 in-out property <[TileData]> memory_tiles: [
58 { image: @image-url("icons/at.png") },
59 { image: @image-url("icons/balance-scale.png") },
60 { image: @image-url("icons/bicycle.png") },
61 { image: @image-url("icons/bus.png") },
62 { image: @image-url("icons/cloud.png") },
63 { image: @image-url("icons/cogs.png") },
64 { image: @image-url("icons/motorcycle.png") },
65 { image: @image-url("icons/video.png") },
66 ];
67 for tile[i] in memory_tiles : MemoryTile {
68 x: mod(i, 4) * 74px;
69 y: floor(i / 4) * 74px;
70 width: 64px;
71 height: 64px;
72 icon: tile.image;
73 open_curtain: tile.image_visible || tile.solved;
74 // propagate the solved status from the model to the tile
75 solved: tile.solved;
76 clicked => {
77 tile.image_visible = !tile.image_visible;
78 }
79 }
80}
81