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