mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-31 15:47:26 +00:00
Janitor: Fix warnings about markdown files
These might change the layout of the rendered markdown files. This will also fix some typos along the way:-)
This commit is contained in:
parent
13d7f5e7bd
commit
e01bd87df8
35 changed files with 216 additions and 243 deletions
|
@ -9,4 +9,4 @@
|
|||
- [Game Logic In Rust](./game_logic_in_rust.md)
|
||||
- [Ideas For The Reader](./ideas_for_the_reader.md)
|
||||
- [Running In A Browser Using WebAssembly](./running_in_a_browser.md)
|
||||
- [Conclusion](./conclusion.md)
|
||||
- [Conclusion](./conclusion.md)
|
||||
|
|
|
@ -7,4 +7,3 @@ see how these look like and can be used, such as the [todo example](https://gith
|
|||
|
||||
A slightly more polished version of this memory puzzle game is [available in the SixtyFPS repository](
|
||||
https://github.com/sixtyfpsui/sixtyfps/tree/master/examples/memory). And you can <a href="https://sixtyfps.io/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
|
||||
|
|
|
@ -29,4 +29,3 @@ Running this gives us a window on the screen that now shows a 4 by 4 grid of rec
|
|||
the icons when clicking. There's only one last aspect missing now, the rules for the game.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://sixtyfps.io/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>
|
||||
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
# From One To Multiple Tiles
|
||||
|
||||
After modeling a single tile, let's create a grid of them. For the grid to be our game board, we need two features:
|
||||
|
||||
|
||||
1. A data model: This shall be an array where each element describes the tile data structure, such as the
|
||||
url of the image, whether the image shall be visible and if this tile has been solved. We modify the model
|
||||
from Rust code.
|
||||
1. A way of creating many instances of the tiles, with the above `.60` markup code.
|
||||
|
||||
|
||||
In SixtyFPS we can declare an array of structures using brackets, to create a model. We can use the <span class="hljs-keyword">for</span> loop
|
||||
to create many instances of the same element. In `.60` the for loop is declarative and automatically updates when
|
||||
the model changes. We instantiate all the different <span class="hljs-title">MemoryTile</span> elements and place them on a grid based on their
|
||||
|
|
|
@ -12,7 +12,6 @@ check if a pair of tiles has been solved. And we need to add a property that Rus
|
|||
tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed! First, we paste
|
||||
the callback and property declarations into <span class="hljs-title">MainWindow</span>:
|
||||
|
||||
|
||||
```60
|
||||
{{#include main_game_logic_in_rust.rs:mainwindow_interface}}
|
||||
```
|
||||
|
@ -41,4 +40,4 @@ The `MainWindow` owns the callback handler, which itself owns a reference to the
|
|||
instead of strong to avoid a memory leak.
|
||||
|
||||
These were the last changes and running the result gives us a window on the screen that allows us
|
||||
to play the game by the rules.
|
||||
to play the game by the rules.
|
||||
|
|
|
@ -25,4 +25,4 @@ Finally we copy the hello world program from the [SixtyFPS documentation](https:
|
|||
|
||||
We run this example with `cargo run` and a window will appear with the green "Hello World" greeting.
|
||||
|
||||

|
||||

|
||||
|
|
|
@ -12,4 +12,3 @@ The game is visually a little bare. Here are some ideas how you could make furth
|
|||
|
||||
Let us know in the comments on Github Discussions how you polished your code, or feel free to ask questions about
|
||||
how to implement something.
|
||||
|
||||
|
|
|
@ -11,4 +11,4 @@ graphics are hiding. If two tiles with the same icon are uncovered, then they re
|
|||
This is how the game looks like in action:
|
||||
|
||||
<video autoplay loop muted playsinline src="https://sixtyfps.io/blog/memory-game-tutorial/memory_clip.mp4"
|
||||
class="img-fluid img-thumbnail rounded"></video>
|
||||
class="img-fluid img-thumbnail rounded"></video>
|
||||
|
|
|
@ -4,7 +4,7 @@ With the skeleton in place, let's look at the first element of the game, the mem
|
|||
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 `.60` language have a unit, here
|
||||
the `px` suffix. That makes the code easier to read and the compiler can detect when your're accidentally
|
||||
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.
|
||||
|
||||
We copy the following code inside of the `sixtyfps!` macro:
|
||||
|
@ -28,5 +28,5 @@ This should unpack an `icons` directory containing a bunch of icons.
|
|||
|
||||
Running the program with `cargo run` gives us a window on the screen that shows the icon of a bus on a
|
||||
blue background.
|
||||
|
||||
|
||||

|
||||
|
|
|
@ -8,11 +8,11 @@ that the tile was clicked on. In the <em>MainWindow</em> we react by flipping a
|
|||
That in turn is used in property bindings for the animated width and x properties. Let's look at the two states a bit
|
||||
more in detail:
|
||||
|
||||
|*open_curtain* value: |false|true|
|
||||
|-----------------------|-----|----|
|
||||
|Left curtain rectangle |Fill the left half by setting the width *width* to half the parent's width|Width of zero makes the rectangle invisible|
|
||||
|Right curtain rectangle|Fill the right half by setting *x* and *width* to half of the parent's width|*width* of zero makes the rectangle invisible. *x* is moved to the right, to slide the curtain open when animated|
|
||||
|
||||
| *open_curtain* value: | false | true |
|
||||
| --- | --- | --- |
|
||||
| Left curtain rectangle | Fill the left half by setting the width *width* to half the parent's width | Width of zero makes the rectangle invisible |
|
||||
| Right curtain rectangle | Fill the right half by setting *x* and *width* to half of the parent's width | *width* of zero makes the rectangle invisible. *x* is moved to the right, to slide the curtain open when animated |
|
||||
|
||||
In order to make our tile extensible, the hard-coded icon name is replaced with an *icon*
|
||||
property that can be set from the outside when instantiating the element. For the final polish, we add a
|
||||
*solved* property that we use to animate the color to a shade of green when we've found a pair, later. We
|
||||
|
|
|
@ -50,7 +50,7 @@ crate-type = ["cdylib"]
|
|||
|
||||
This is required because wasm-pack require rust to generate a `"cdylib"`.
|
||||
|
||||
You also need to modity the `main.rs` by adding the `wasm_bindgen(start)`
|
||||
You also need to modify the `main.rs` by adding the `wasm_bindgen(start)`
|
||||
attribute to the main function and export it with the `pub` keyword:
|
||||
|
||||
```rust,noplayground
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue