Rename tutorial to quickstart (#4941)

docs/quickstart/cpp/src/CMakeLists.txt

@@ -0,0 +1,20 @@
+# Copyright © SixtyFPS GmbH <info@slint.dev>
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.21)
+
+if (NOT TARGET Slint::Slint)
+    find_package(Slint REQUIRED)
+endif()
+
+add_executable(memory_tutorial_initial main_initial.cpp)
+target_link_libraries(memory_tutorial_initial PRIVATE Slint::Slint)
+slint_target_sources(memory_tutorial_initial appwindow.slint)
+
+add_executable(memory_tutorial_tiles_from_cpp main_tiles_from_cpp.cpp)
+target_link_libraries(memory_tutorial_tiles_from_cpp PRIVATE Slint::Slint)
+slint_target_sources(memory_tutorial_tiles_from_cpp memory_tiles_from_cpp.slint)
+
+add_executable(memory_tutorial_game_logic main_game_logic.cpp)
+target_link_libraries(memory_tutorial_game_logic PRIVATE Slint::Slint)
+slint_target_sources(memory_tutorial_game_logic memory_game_logic.slint)

docs/quickstart/cpp/src/SUMMARY.md

@@ -0,0 +1,12 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+# Summary
+
+- [Introduction](./introduction.md)
+- [Getting Started](./getting_started.md)
+- [Memory Tile](./memory_tile.md)
+- [Polishing the Tile](./polishing_the_tile.md)
+- [From One To Multiple Tiles](./from_one_to_multiple_tiles.md)
+- [Creating The Tiles From C++](./creating_the_tiles_from_cpp.md)
+- [Game Logic In C++](./game_logic_in_cpp.md)
+- [Ideas For The Reader](./ideas_for_the_reader.md)
+- [Conclusion](./conclusion.md)

docs/quickstart/cpp/src/appwindow.slint

@@ -0,0 +1,12 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+// ANCHOR: main_window
+// ui/appwindow.slint
+export component MainWindow inherits Window {
+    Text {
+        text: "hello world";
+        color: green;
+    }
+}
+// ANCHOR_END: main_window

docs/quickstart/cpp/src/conclusion.md

@@ -0,0 +1,14 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Conclusion
+
+This tutorial showed you how to combine built-in Slint elements with C++ code to build a
+game. There is much more to Slint, such as layouts, widgets, or styling.
+
+We recommend the following links to continue:
+
+-   [Examples](https://github.com/slint-ui/slint/tree/master/examples): The Slint repository has several demos and examples. These are a great starting point to learn how to use many Slint features.
+    -   [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
+    -   [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example and you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
+-   [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
+-   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for the Rust crate that allows you to dynamically load Slint files.

docs/quickstart/cpp/src/creating_the_tiles_from_cpp.md

@@ -0,0 +1,27 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Creating The Tiles From C++
+
+This step places the game tiles randomly.
+
+Change the `main` function and includes in `src/main.cpp` to the following:
+
+```cpp
+{{#include main_tiles_from_cpp.cpp:main}}
+```
+
+The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the C++ code.
+
+For each top-level property, Slint generates a getter and a setter function. In this case `get_memory_tiles` and `set_memory_tiles`.
+Since `memory_tiles` is a Slint array, it's represented as a [`std::shared_ptr<slint::Model>`](https://slint.dev/docs/cpp/api/classslint_1_1model).
+
+You can't change the model generated by Slint, but you can extract the tiles from it and put them
+in a [`slint::VectorModel`](https://slint.dev/docs/cpp/api/classslint_1_1vectormodel) which inherits from `Model`.
+`VectorModel` lets you make changes and you can use it to replace the static generated model.
+
+Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
+the icons when a player clicks on them.
+
+There's one last aspect missing now, the rules for the game.
+
+<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>

docs/quickstart/cpp/src/from_one_to_multiple_tiles.md

@@ -0,0 +1,40 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# From One To Multiple Tiles
+
+After modeling a single tile, this step creates a grid of them. For the grid to be a game board, you need two features:
+
+1. **A data model**: An array created as a C++ model, where each element describes the tile data structure, such as:
+
+    - URL of the image
+    - Whether the image is visible
+    - If the player has solved this tile.
+
+2. A way of creating multiple instances of the tiles.
+
+With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
+to create multiple instances of the same element.
+
+The <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
+the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
+index with spacing between the tiles.
+
+First, add the tile data structure definition at the top of the `ui/appwindow.slint` file:
+
+```slint
+{{#include ../../rust/src/main_multiple_tiles.rs:tile_data}}
+```
+
+Next, replace the _export component <span class="hljs-title">MainWindow</span> inherits Window { ... }_ section at the bottom of the `ui/appwindow.slint` file with the following:
+
+```slint
+{{#include ../../rust/src/main_multiple_tiles.rs:main_window}}
+```
+
+The <code><span class="hljs-keyword">for</span> tile\[i\] <span class="hljs-keyword">in</span> memory_tiles:</code> syntax declares a variable `tile` which contains the data of one element from the `memory_tiles` array,
+and a variable `i` which is the index of the tile. The code uses the `i` index to calculate the position of a tile, based on its row and column,
+using modulo and integer division to create a 4 by 4 grid.
+
+Running the code opens a window that shows 8 tiles, which a player can open individually.
+
+<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>

docs/quickstart/cpp/src/game_logic_in_cpp.md

@@ -0,0 +1,48 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Game Logic In C++
+
+This step implements the rules of the game in C++.
+
+Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
+language.
+
+The game rules enforce that at most two tiles have their curtain open. If the tiles match, then the game
+considers them solved and they remain open. Otherwise, the game waits briefly so the player can memorize
+the location of the icons, and then closes the curtains again.
+
+Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the C++ code when the user clicks on a tile.
+
+```slint
+{{#include ../../rust/src/main_game_logic_in_rust.rs:mainwindow_interface}}
+```
+
+This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the C++ code that it should
+check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
+tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed!
+
+The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.
+
+Add the following handler in the <span class="hljs-title">MainWindow</span> `for` loop `clicked` handler:
+
+```slint
+{{#include ../../rust/src/main_game_logic_in_rust.rs:tile_click_logic}}
+```
+
+On the C++ side, you can now add a handler to the `check_if_pair_solved` callback, that checks if a player opened two tiles.
+If they match, the code sets the `solved` property to true in the model. If they don't
+match, start a timer that closes the tiles after one second. While the timer is running, disable every tile so
+a player can't click anything during this time.
+
+Insert this code before the `main_window->run()` call:
+
+```cpp
+{{#include main_game_logic.cpp:game_logic}}
+```
+
+The code uses a [ComponentWeakHandle](https://slint.dev/docs/cpp/api/classslint_1_1ComponentWeakHandle) pointer of the `main_window`. This is
+important because capturing a copy of the `main_window` itself within the callback handler would result in circular ownership.
+The `MainWindow` owns the callback handler, which itself owns a reference to the `MainWindow`, which must be weak
+instead of strong to avoid a memory leak.
+
+These were the last changes and running the code opens a window that allows a player to play the game by the rules.

docs/quickstart/cpp/src/getting_started.md

@@ -0,0 +1,75 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Getting Started
+
+This tutorial uses C++ as the host programming language. Slint also supports other programming languages like
+[Rust](https://slint.dev/docs/rust/slint/) or [JavaScript](https://slint.dev/docs/node/).
+
+We recommend using [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
+
+Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
+
+Before using the template, you need a C++ compiler that supports C++ 20 and to install [CMake](https://cmake.org/download/) 3.21 or newer.
+
+Clone or download template repository:
+
+```sh
+git clone https://github.com/slint-ui/slint-cpp-template memory
+cd memory
+```
+
+The `CMakeLists.txt` uses the line `add_executable(my_application src/main.cpp)` to set `src/main.cpp` as the main C++ code file.
+
+Change the content of `src/main.cpp` to the following:
+
+```cpp
+{{#include main_initial.cpp:main}}
+```
+
+Also in `CMakeLists.txt` the line
+`slint_target_sources(my_application ui/appwindow.slint)` is a Slint function used to
+add the `appwindow.slint` file to the target.
+
+Change the contents of `ui/appwindow.slint` to the following:
+
+```slint
+{{#include appwindow.slint:main_window}}
+```
+
+Configure with CMake:
+
+```sh
+cmake -B build
+```
+
+_Note_: When configuring with CMake, the FetchContent module fetches the source code of Slint via git.
+This may take some time when building for the first time, as the process needs to build
+the Slint runtime and compiler.
+
+Build with CMake:
+
+```sh
+cmake --build build
+```
+
+Run the application binary on Linux or macOS:
+
+```sh
+./build/my_application
+```
+
+Windows:
+
+```sh
+build\my_application.exe
+```
+
+This opens a window with a green "Hello World" greeting.
+
+If you are stepping through this tutorial on a Windows machine, you can run it with
+
+```sh
+my_application
+```
+
+![Screenshot of initial tutorial app showing Hello World](https://slint.dev/blog/memory-game-tutorial/getting-started.png "Hello World")

docs/quickstart/cpp/src/icons

@@ -0,0 +1 @@
+../../../../examples/memory/icons

docs/quickstart/cpp/src/ideas_for_the_reader.md

@@ -0,0 +1,16 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Ideas For The Reader
+
+The game is visually bare. Here are some ideas on how you could make further changes to enhance it:
+
+-   The tiles could have rounded corners, to look less sharp. Use the [border-radius](https://slint.dev/docs/slint/src/language/builtins/elements#rectangle)
+    property of _[Rectangle](https://slint.dev/docs/slint/src/language/builtins/elements#rectangle)_ to achieve that.
+
+-   In real-world memory games, the back of the tiles often have some common graphic. You could add an image with
+    the help of another _[Image](https://slint.dev/docs/slint/src/language/builtins/elements#image)_
+    element. Note that you may have to use _Rectangle_'s _clip property_
+    element around it to ensure that the image is clipped away when the curtain effect opens.
+
+Let us know in the comments on [Github Discussions](https://github.com/slint-ui/slint/discussions)
+how you polished your code, or feel free to ask questions about how to implement something.

docs/quickstart/cpp/src/introduction.md

@@ -0,0 +1,16 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Introduction
+
+This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in C++.
+
+The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
+There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
+same icon. The objective is to locate all icon pairs. The player can uncover two tiles at the same time. If they
+aren't the same, the game obscures the icons again.
+If the player uncovers two tiles with the same icon, then they remain visible - they're solved.
+
+This is how the game looks in action:
+
+<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/memory_clip.mp4"
+        class="img-fluid img-thumbnail rounded"></video>

docs/quickstart/cpp/src/main_game_logic.cpp

@@ -0,0 +1,69 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+// clang-format off
+// main.cpp
+
+#include "memory_game_logic.h" // generated header from memory_game_logic.slint
+
+#include <random> // Added
+
+int main()
+{
+    auto main_window = MainWindow::create();
+    auto old_tiles = main_window->get_memory_tiles();
+    std::vector<TileData> new_tiles;
+    new_tiles.reserve(old_tiles->row_count() * 2);
+    for (int i = 0; i < old_tiles->row_count(); ++i) {
+        new_tiles.push_back(*old_tiles->row_data(i));
+        new_tiles.push_back(*old_tiles->row_data(i));
+    }
+    std::default_random_engine rng {};
+    std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
+
+    auto tiles_model = std::make_shared<slint::VectorModel<TileData>>(new_tiles);
+    main_window->set_memory_tiles(tiles_model);
+
+    // ANCHOR: game_logic
+
+    main_window->on_check_if_pair_solved(
+            [main_window_weak = slint::ComponentWeakHandle(main_window)] {
+                auto main_window = *main_window_weak.lock();
+                auto tiles_model = main_window->get_memory_tiles();
+                int first_visible_index = -1;
+                TileData first_visible_tile;
+                for (int i = 0; i < tiles_model->row_count(); ++i) {
+                    auto tile = *tiles_model->row_data(i);
+                    if (!tile.image_visible || tile.solved)
+                        continue;
+                    if (first_visible_index == -1) {
+                        first_visible_index = i;
+                        first_visible_tile = tile;
+                        continue;
+                    }
+                    bool is_pair_solved = tile == first_visible_tile;
+                    if (is_pair_solved) {
+                        first_visible_tile.solved = true;
+                        tiles_model->set_row_data(first_visible_index,
+                                                  first_visible_tile);
+                        tile.solved = true;
+                        tiles_model->set_row_data(i, tile);
+                        return;
+                    }
+                    main_window->set_disable_tiles(true);
+
+                    slint::Timer::single_shot(std::chrono::seconds(1),
+                        [=]() mutable {
+                            main_window->set_disable_tiles(false);
+                            first_visible_tile.image_visible = false;
+                            tiles_model->set_row_data(first_visible_index,
+                                                      first_visible_tile);
+                            tile.image_visible = false;
+                            tiles_model->set_row_data(i, tile);
+                        });
+                }
+            });
+    // ANCHOR_END: game_logic
+    main_window->run();
+}
+// clang-format on

docs/quickstart/cpp/src/main_initial.cpp

@@ -0,0 +1,14 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+// ANCHOR: main
+// src/main.cpp
+
+#include "appwindow.h" // generated header from memory.slint
+
+int main(int argc, char **argv)
+{
+    auto main_window = MainWindow::create();
+    main_window->run();
+}
+// ANCHOR_END: main

docs/quickstart/cpp/src/main_tiles_from_cpp.cpp

@@ -0,0 +1,29 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+// main.cpp
+
+#include "memory_tiles_from_cpp.h" // generated header from memory_tiles_from_cpp.slint
+// ANCHOR: main
+// ...
+
+#include <random> // Added
+
+int main()
+{
+    auto main_window = MainWindow::create();
+    auto old_tiles = main_window->get_memory_tiles();
+    std::vector<TileData> new_tiles;
+    new_tiles.reserve(old_tiles->row_count() * 2);
+    for (int i = 0; i < old_tiles->row_count(); ++i) {
+        new_tiles.push_back(*old_tiles->row_data(i));
+        new_tiles.push_back(*old_tiles->row_data(i));
+    }
+    std::default_random_engine rng {};
+    std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
+    auto tiles_model = std::make_shared<slint::VectorModel<TileData>>(new_tiles);
+    main_window->set_memory_tiles(tiles_model);
+
+    main_window->run();
+}
+// ANCHOR_END: main

docs/quickstart/cpp/src/memory_game_logic.slint

@@ -0,0 +1,93 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+struct TileData {
+    image: image,
+    image_visible: bool,
+    solved: bool,
+}
+
+component MemoryTile inherits Rectangle {
+    callback clicked;
+    in property <bool> open_curtain;
+    in property <bool> solved;
+    in property <image> icon;
+
+    height: 64px;
+    width: 64px;
+    background: solved ? #34CE57 : #3960D5;
+    animate background { duration: 800ms; }
+
+    Image {
+        source: icon;
+        width: parent.width;
+        height: parent.height;
+    }
+
+    // Left curtain
+    Rectangle {
+        background: #193076;
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+    }
+
+    // Right curtain
+    Rectangle {
+        background: #193076;
+        x: open_curtain ? parent.width : (parent.width / 2);
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+        animate x { duration: 250ms; easing: ease-in; }
+    }
+
+    TouchArea {
+        clicked => {
+            // Delegate to the user of this element
+            root.clicked();
+        }
+    }
+}
+
+// ANCHOR: mainwindow_interface
+export component MainWindow inherits Window {
+    width: 326px;
+    height: 326px;
+
+    callback check_if_pair_solved(); // Added
+    in property <bool> disable_tiles; // Added
+
+    in-out property <[TileData]> memory_tiles: [
+       { image: @image-url("icons/at.png") },
+// ANCHOR_END: mainwindow_interface
+       { image: @image-url("icons/balance-scale.png") },
+       { image: @image-url("icons/bicycle.png") },
+       { image: @image-url("icons/bus.png") },
+       { image: @image-url("icons/cloud.png") },
+       { image: @image-url("icons/cogs.png") },
+       { image: @image-url("icons/motorcycle.png") },
+       { image: @image-url("icons/video.png") },
+    ];
+
+    // ANCHOR: tile_click_logic
+    for tile[i] in memory_tiles : MemoryTile {
+        x: mod(i, 4) * 74px;
+        y: floor(i / 4) * 74px;
+        width: 64px;
+        height: 64px;
+        icon: tile.image;
+        open_curtain: tile.image_visible || tile.solved;
+        // propagate the solved status from the model to the tile
+        solved: tile.solved;
+        clicked => {
+            // old: tile.image_visible = !tile.image_visible;
+            // new:
+            if (!root.disable_tiles) {
+                tile.image_visible = !tile.image_visible;
+                root.check_if_pair_solved();
+            }
+        }
+    }
+    // ANCHOR_END: tile_click_logic
+}

docs/quickstart/cpp/src/memory_tile.md

@@ -0,0 +1,51 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Memory Tile
+
+With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the
+visual building block that consists of an underlying filled rectangle background, the icon image. Later steps add a covering rectangle that acts as a curtain.
+
+You declare the background rectangle as 64 logical pixels wide and tall
+filled with a soothing tone of blue.
+
+Lengths in Slint have a unit, here, the `px` suffix.
+This makes the code easier to read and the compiler can detect when you accidentally
+mix values with different units attached to them.
+
+Copy the following code into `ui/appwindow.slint` file, replacing the current content:
+
+```slint
+{{#include memory_tile.slint:main_window}}
+```
+
+The code exports the <span class="hljs-title">MainWindow</span> component so that the C++ code can access it later.
+
+Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hljs-built_in">Image</span> element that
+loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the location of `ui/appwindow.slint`.
+
+You need to install this icon and others you use later first. You can download a pre-prepared
+[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) to the `ui` folder,
+
+If you are on Linux or macOS, download and extract it with the following commands:
+
+```sh
+cd ui
+curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
+unzip icons.zip
+cd ..
+```
+
+If you are on Windows, use the following commands:
+
+```sh
+cd ui
+powershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zip
+powershell Expand-Archive -Path icons.zip -DestinationPath .
+cd ..
+```
+
+This unpacks an `icons` directory containing several icons.
+
+Compiling the program with `cmake --build build` and running with the `./build/my_application` opens a window that shows the icon of a bus on a blue background.
+
+![Screenshot of the first tile](https://slint.dev/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

docs/quickstart/cpp/src/memory_tile.slint

@@ -0,0 +1,20 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+// ANCHOR: main_window
+component MemoryTile inherits Rectangle {
+    width: 64px;
+    height: 64px;
+    background: #3960D5;
+
+    Image {
+        source: @image-url("icons/bus.png");
+        width: parent.width;
+        height: parent.height;
+    }
+}
+
+export component MainWindow inherits Window {
+    MemoryTile {}
+}
+// ANCHOR_END: main_window

docs/quickstart/cpp/src/memory_tiles_from_cpp.slint

@@ -0,0 +1,80 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+struct TileData {
+    image: image,
+    image_visible: bool,
+    solved: bool,
+}
+
+component MemoryTile inherits Rectangle {
+    callback clicked;
+    in property <bool> open_curtain;
+    in property <bool> solved;
+    in property <image> icon;
+
+    height: 64px;
+    width: 64px;
+    background: solved ? #34CE57 : #3960D5;
+    animate background { duration: 800ms; }
+
+    Image {
+        source: icon;
+        width: parent.width;
+        height: parent.height;
+    }
+
+    // Left curtain
+    Rectangle {
+        background: #193076;
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+    }
+
+    // Right curtain
+    Rectangle {
+        background: #193076;
+        x: open_curtain ? parent.width : (parent.width / 2);
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+        animate x { duration: 250ms; easing: ease-in; }
+    }
+
+    TouchArea {
+        clicked => {
+            // Delegate to the user of this element
+            root.clicked();
+        }
+    }
+}
+
+export component MainWindow inherits Window {
+    width: 326px;
+    height: 326px;
+
+    in-out property <[TileData]> memory_tiles: [
+       { image: @image-url("icons/at.png") },
+       { image: @image-url("icons/balance-scale.png") },
+       { image: @image-url("icons/bicycle.png") },
+       { image: @image-url("icons/bus.png") },
+       { image: @image-url("icons/cloud.png") },
+       { image: @image-url("icons/cogs.png") },
+       { image: @image-url("icons/motorcycle.png") },
+       { image: @image-url("icons/video.png") },
+    ];
+    for tile[i] in memory_tiles : MemoryTile {
+        x: mod(i, 4) * 74px;
+        y: floor(i / 4) * 74px;
+        width: 64px;
+        height: 64px;
+        icon: tile.image;
+        open_curtain: tile.image_visible || tile.solved;
+        // propagate the solved status from the model to the tile
+        solved: tile.solved;
+        clicked => {
+            tile.image_visible = !tile.image_visible;
+        }
+    }
+}

docs/quickstart/cpp/src/polishing_the_tile.md

@@ -0,0 +1,42 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+# Polishing the Tile
+
+In this step, you add a curtain-like cover that opens when clicked. You do this by declaring two rectangles
+below the <span class="hljs-built_in">Image</span>, so that Slint draws them after the Image and thus on top of the image.
+
+The <span class="hljs-built_in">TouchArea</span> element declares a transparent rectangular region that allows
+reacting to user input such as a mouse click or tap. The element forwards a callback to the <em>MainWindow</em> indicating that a user clicked the tile.
+
+The <em>MainWindow</em> reacts by flipping a custom <em>open_curtain</em> property.
+Property bindings for the animated width and x properties also use the custom <em>open_curtain</em> property.
+
+The following table shows more detail on the two states:
+
+| _open_curtain_ value:   | false                                                                        | true                                                                                                          |
+| ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Left curtain rectangle  | Fill the left half by setting the width _width_ to half the parent's width   | Width of zero makes the rectangle invisible                                                                   |
+| Right curtain rectangle | Fill the right half by setting _x_ and _width_ to half of the parent's width | _width_ of zero makes the rectangle invisible. _x_ moves to the right, sliding the curtain open when animated |
+
+To make the tile extensible, replace the hard-coded icon name with an _icon_
+property that can be set when instantiating the element.
+
+For the final polish, add a
+_solved_ property used to animate the color to a shade of green when a player finds a pair.
+
+Replace the code inside the `ui/appwindow.slint` file with the following:
+
+```slint
+{{#include ../../rust/src/main_polishing_the_tile.rs:tile}}
+```
+
+The code uses `root` and `self`. `root` refers to the outermost
+element in the component, the <span class="hljs-title">MemoryTile</span> in this case. `self` refers
+to the current element.
+
+The code exports the <span class="hljs-title">MainWindow</span> component. This is necessary so that you can later access it
+from application business logic.
+
+Running the code opens a window with a rectangle that opens up to show the bus icon when clicked. Subsequent clicks close and open the curtain again.
+
+<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>