docs: Use it's, etc. more consistently (#2287)

This commit is contained in:
Tobias Hunger 2023-02-24 17:42:22 +01:00 committed by GitHub
parent 0bd99a17fa
commit 42d1fbdbcf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 126 additions and 126 deletions

View file

@ -1,13 +1,12 @@
# Conclusion
In this tutorial, we have demonstrated how to combine some built-in Slint elements with Rust code to build a little
game. There are many more features that we have not talked about, such as layouts, widgets, or styling.
game. There are many more features that we haven't talked about, such as layouts, widgets, or styling.
We recommend the following links to continue:
* [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected a few demos and examples. These are a great starting point to learn how to use many Slint features.
* [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
* [Memory Puzzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
* [Slint API Docs](https://slint-ui.com/docs/rust/slint/): The reference documentation for the main Rust crate.
* [Slint Interpreter API Docs](https://slint-ui.com/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load `.slint` files.

View file

@ -10,7 +10,7 @@ cargo add rand@0.8
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 Rust code. For each top-level property,
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
Since `memory_tiles` is an array in the `.slint` language, it is represented as a [`Rc<dyn slint::Model>`](https://slint-ui.com/docs/rust/slint/trait.model).
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`Rc<dyn slint::Model>`](https://slint-ui.com/docs/rust/slint/trait.model).
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
in a [`VecModel`](https://slint-ui.com/docs/rust/slint/struct.vecmodel) which implements the `Model` trait.
`VecModel` allows us to make modifications and we can use it to replace the static generated model.

View file

@ -26,7 +26,7 @@ We add the following handler in <span class="hljs-title">MainWindow</span>:
On the Rust side, we can now add an handler to the `check_if_pair_solved` callback, that will check if
two tiles are opened. If they match, the `solved` property is set to true in the model. If they don't
match, start a timer that will close them after one second. While the timer is running, we disable every tile so
one cannot click anything during this time.
one can't click anything during this time.
Insert this code before the `main_window.run()` call:

View file

@ -3,7 +3,7 @@
With the skeleton in place, let's look at the first element of the game, the memory tile. It will be the
visual building block that consists of an underlying filled rectangle background, the icon image. Later we'll add a
covering rectangle that acts as a curtain. The background rectangle is declared to be 64 logical pixels wide and tall,
and it is filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
and it's filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
the `px` suffix. That makes the code easier to read and the compiler can detect when your are accidentally
mixing values with different units attached to them.
@ -16,7 +16,7 @@ We copy the following code inside of the `slint!` macro:
Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
When using the `slint!` macro, the path is relative to the folder in which the Cargo.toml is located.
When using .slint files, it is relative to the folder of the .slint file containing it.
When using .slint files, it's relative to the folder of the .slint file containing it.
This icon and others we're going to use later need to be installed first. You can download a
[Zip archive](https://slint-ui.com/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
following two commands:

View file

@ -55,21 +55,21 @@ file. The Slint runtime expects the `<canvas>` element to have the id `id = "can
```html
<html>
<body>
<!-- canvas required by the Slint runtime -->
<canvas id="canvas"></canvas>
<script type="module">
// import the generated file.
import init from './pkg/memory.js';
init();
</script>
</body>
<body>
<!-- canvas required by the Slint runtime -->
<canvas id="canvas"></canvas>
<script type="module">
// import the generated file.
import init from "./pkg/memory.js";
init();
</script>
</body>
</html>
```
Unfortunately, loading ES modules is not allowed for files on the file system when accessed from a
Unfortunately, loading ES modules isn't allowed for files on the file system when accessed from a
`file://` URL, so we can't simply open the index.html. Instead we need to serve it through a web server.
For example, using Python, it is as simple as running
For example, using Python, it's as simple as running
```sh
python3 -m http.server