<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Creating The Tiles From JavaScript

What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
We'll do so by accessing the `memory_tiles` property through the JavaScript code - in our case `memory_tiles`.
Since `memory_tiles` is an array in the `.slint` language, it's represented as a JavaScript [`Array`](https://slint.dev/docs/node/).
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
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 us to make modifications and we can use it to replace the static generated model.

We modify `main.js` like so:

```js
{{#include main_tiles_from_js.js:main}}
```

Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure
the icons when clicking. There's only 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>
