---
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="Rust" icon="seti: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:


```rust
fn main() {
    use slint::Model;

    let main_window = MainWindow::new().unwrap();

    // Fetch the tiles from the model
    let mut tiles: Vec<TileData> = main_window.get_memory_tiles().iter().collect();
    // Duplicate them to ensure that we have pairs
    tiles.extend(tiles.clone());

    // Randomly mix the tiles
    use rand::seq::SliceRandom;
    let mut rng = rand::rng();
    tiles.shuffle(&mut rng);

    // Assign the shuffled Vec to the model property
    let tiles_model = std::rc::Rc::new(slint::VecModel::from(tiles));
    main_window.set_memory_tiles(tiles_model.clone().into());

    main_window.run().unwrap();
}
```

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="C++" icon="seti:cpp">
  Change the `main` function and includes in `src/main.cpp` to the following:


```cpp
#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();
}
```


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/slint/model/">`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/slint/vectormodel/">`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" icon="node">

Change `main.js` to the following:


```js
import * as slint from "slint-ui";
const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
const mainWindow = new ui.MainWindow();

const initial_tiles = [...mainWindow.memory_tiles];
const tiles = initial_tiles.concat(
    initial_tiles.map((tile) => Object.assign({}, tile)),
);

for (let i = tiles.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * i);
    [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
}

const model = new slint.ArrayModel(tiles);
mainWindow.memory_tiles = model;

await mainWindow.run();
```

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="api/classes/ArrayModel/">`slint.ArrayModel`</LangRefLink> which implements the <LangRefLink lang="nodejs" relpath="api/classes/Model/">`Model`</LangRefLink> interface.
`ArrayModel` allows you to make changes and you can use it to replace the static generated model.
  </TabItem>
  <TabItem label="Python" icon="seti:python">

Change `main.py` to the following:


```python

import slint
import sys
import os
import random
import itertools
import copy
import datetime


class MainWindow(slint.loader.ui.app_window.MainWindow):
    def __init__(self):
        super().__init__()
        initial_tiles = self.memory_tiles
        tiles = slint.ListModel(
            itertools.chain(
                map(copy.copy, initial_tiles), map(copy.copy, initial_tiles)
            )
        )
        random.shuffle(tiles)
        self.memory_tiles = tiles


main_window = MainWindow()
main_window.show()
main_window.run()
```

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="api/classes/listmodel/">`slint.ListModel`</LangRefLink> which is a subclass of <LangRefLink lang="python" relpath="api/classes/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>