---
title: Creating the tiles
description: Creating the tiles
---

import { Code } from '@astrojs/starlight/components';
import { extractLines } from '@slint/common-files/src/utils/utils';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';

This step places the game tiles randomly.

<Tabs syncKey="dev-language">
  <TabItem label="C++" >
  Change the `main` function and includes in `src/main.cpp` to the following:

import mainTilesFromCpp from '/src/content/code/main_tiles_from_cpp.cpp?raw'

<Code code={extractLines(mainTilesFromCpp, 10, 28)} lang="cpp"/>


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 <LangRefLink lang="cpp" relpath="api/classslint_1_1model">`std::shared_ptr<slint::Model>`</LangRefLink>.

You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a <LangRefLink lang="cpp" relpath="api/classslint_1_1vectormodel">`slint::VectorModel`</LangRefLink> which inherits from `Model`.
`VectorModel` lets you make changes and you can use it to replace the static generated model.
  </TabItem>
  <TabItem label="NodeJS">

Change `main.js` to the following:

import mainTilesFromJs from '/src/content/code/main_tiles_from_js.js?raw'

<Code code={extractLines(mainTilesFromJs, 6, 23)} lang="js"/>

The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the JavaScript code.

As `memory_tiles` is an array, it's represented as a JavaScript `Array`.
You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a <LangRefLink lang="nodejs" relpath="classes/ArrayModel">`slint.ArrayModel.html`</LangRefLink> which implements the <LangRefLink lang="nodejs" relpath="classes/Model.html">`Model`</LangRefLink> interface.
`ArrayModel` allows you to make changes and you can use it to replace the static generated model.
  </TabItem>
  <TabItem label="Rust">
  The code uses the `rand` dependency for the randomization. Add it to the `Cargo.toml` file using the `cargo` command.

    ```sh
    cargo add rand@0.9
    ```

Change the main function to the following:

import mainTilesFromRust from '/src/content/code/main_tiles_from_rust.rs?raw'

<Code code={extractLines(mainTilesFromRust, 6, 26)} lang="rust"/>

The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the Rust 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 represented as a <LangRefLink lang="rust-slint" relpath="trait.Model">`Rc<dyn slint::Model>`</LangRefLink>.

You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a <LangRefLink lang="rust-slint" relpath="struct.VecModel">`VecModel`</LangRefLink> which implements the `Model` trait.
`VecModel` lets you make changes and you can use it to replace the static generated model.

  </TabItem>

  <TabItem label="Python">

Change `main.py` to the following:

import mainTilesFromPython from '/src/content/code/main_tiles_from_python.py?raw'

<Code code={extractLines(mainTilesFromPython, 3, 30)} lang="python"/>

The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the Python code.

As `memory_tiles` is an array, it's represented as a Slint `ListModel`.
You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a <LangRefLink lang="python" relpath="slint#ListModel">`slint.ListModel`</LangRefLink> which is a subclass of <LangRefLink lang="python" relpath="slint#Model">`Model`</LangRefLink> interface.
`ListModel` allows you to make changes and you can use it to replace the static generated model.

  </TabItem>
</Tabs>


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>
