---
title: Polishing the Tile
description: Polishing the Tile
---

import { Code } from '@astrojs/starlight/components';
import { extractLines } from '@slint/common-files/src/utils/utils.ts';

In this step, you add a curtain-like cover that opens when clicked. Slint files have an implicit z order for drawing items.
Each subsequent item is drawn above the previous one. So a `Rectangle` on line 10 would be underneath another declared later
in the file on line 50. To give the impression of curtains that cover the image,
declare two rectangles after the <span class="hljs-built_in">Image</span>, so that Slint draws them over 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/app-window.slint` file with the following:

import polishingTheTile from '/src/content/code/main_polishing_the_tile.rs?raw'

<Code code={extractLines(polishingTheTile, 10, 61)} lang="slint" />

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>
