---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Creating the tiles
description: Creating the tiles
---

import { Code } from '@astrojs/starlight/components';
import { extractLines } from '/src/utils/utils.ts';
import { Tabs, TabItem } from '@astrojs/starlight/components';

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 [`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.
  </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`](https://slint.dev/docs/node/).
You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a [`slint.ArrayModel`](https://slint.dev/docs/node/classes/arraymodel.html) which implements the [`Model`](https://slint.dev/docs/node/interfaces/model.html) 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.8
    ```

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"/>

  </TabItem>
</Tabs>
{/* 

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 [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).

You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
`VecModel` 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> */}
