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
53// ANCHOR: mainwindow_interface
54export component MainWindow inherits Window {
55 width: 326px;
56 height: 326px;
57
58 callback check_if_pair_solved(); // Added
59 in property <bool> disable_tiles; // Added
60
61 in-out property <[TileData]> memory_tiles: [
62 { image: @image-url("icons/at.png") },
63// ANCHOR_END: mainwindow_interface
64 { image: @image-url("icons/balance-scale.png") },
65 { image: @image-url("icons/bicycle.png") },
66 { image: @image-url("icons/bus.png") },
67 { image: @image-url("icons/cloud.png") },
68 { image: @image-url("icons/cogs.png") },
69 { image: @image-url("icons/motorcycle.png") },
70 { image: @image-url("icons/video.png") },
71 ];
72
73 // ANCHOR: tile_click_logic
74 for tile[i] in memory_tiles : MemoryTile {
75 x: mod(i, 4) * 74px;
76 y: floor(i / 4) * 74px;
77 width: 64px;
78 height: 64px;
79 icon: tile.image;
80 open_curtain: tile.image_visible || tile.solved;
81 // propagate the solved status from the model to the tile
82 solved: tile.solved;
83 clicked => {
84 // old: tile.image_visible = !tile.image_visible;
85 // new:
86 if (!root.disable_tiles) {
87 tile.image_visible = !tile.image_visible;
88 root.check_if_pair_solved();
89 }
90 }
91 }
92 // ANCHOR_END: tile_click_logic
93}
94