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:
Tobias Hunger 2021-06-26 22:06:13 +02:00 committed by Olivier Goffart
parent 13d7f5e7bd
commit e01bd87df8
35 changed files with 216 additions and 243 deletions

View file

@ -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)

View file

@ -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.

View file

@ -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>

View file

@ -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

View file

@ -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.

View file

@ -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.
![Screenshot of initial tutorial app showing Hello World](https://sixtyfps.io/blog/memory-game-tutorial/getting-started.png "Hello World")
![Screenshot of initial tutorial app showing Hello World](https://sixtyfps.io/blog/memory-game-tutorial/getting-started.png "Hello World")

View file

@ -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.

View file

@ -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>

View file

@ -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.
![Screenshot of the first tile](https://sixtyfps.io/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

View file

@ -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

View file

@ -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