-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Example of function memory game (#2255)
* example of function memory game * refactor: remove unnecessary manual PartialEq implementation * refactor: remove unnecessary license note * refactor: update implementation and doc with suggestions * refactor: fix format and lint issues
- Loading branch information
Showing
34 changed files
with
834 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
[package] | ||
name = "function_memory_game" | ||
version = "0.1.0" | ||
authors = ["Howard.Zuo <leftstick@qq.com>"] | ||
edition = "2018" | ||
license = "MIT OR Apache-2.0" | ||
|
||
[dependencies] | ||
serde = { version = "1.0", features = ["derive"] } | ||
strum = "0.23" | ||
strum_macros = "0.23" | ||
gloo = "0.4" | ||
nanoid = "0.4" | ||
rand = "0.8" | ||
getrandom = { version = "0.2", features = ["js"] } | ||
yew = { path = "../../packages/yew" } | ||
|
||
[dependencies.web-sys] | ||
version = "0.3" | ||
features = [ | ||
"HtmlInputElement", | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
# Memory Game Example | ||
|
||
[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Ffunction_memory_game)](https://examples.yew.rs/function_memory_game) | ||
|
||
This is an implementation of [Memory Game](https://github.com/bradlygreen/Memory-Game) for Yew using function components and hooks. | ||
|
||
## Concepts | ||
|
||
- Uses [`function_components`](https://yew.rs/docs/next/concepts/function-components) | ||
- Uses [`gloo::storage`](https://docs.rs/gloo-storage/0.2.0/gloo_storage/index.html) to persist the state | ||
- Uses [`gloo::timers`](https://docs.rs/gloo-timers/0.2.2/gloo_timers/index.html) to schedule asynchronous callback | ||
|
||
## Note | ||
|
||
Images are authorized by [@bradlygreen](https://github.com/bradlygreen), see [authorization-issue](https://github.com/bradlygreen/Memory-Game/issues/6) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<link rel="icon" href="public/favicon.ico" /> | ||
<title>Yew • Function Memory Game</title> | ||
<base data-trunk-public-url /> | ||
|
||
<link data-trunk rel="sass" href="scss/index.scss" /> | ||
<link data-trunk rel="copy-dir" href="public/" /> | ||
|
||
</head> | ||
<body></body> | ||
</html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
.chess-board { | ||
margin-top: 20px; | ||
width: 100%; | ||
background-color: #fff; | ||
height: 530px; | ||
border-radius: 4px; | ||
padding: 10px 5px; | ||
display: flex; | ||
flex-wrap: wrap; | ||
justify-content: center; | ||
align-items: center; | ||
align-content: space-around; | ||
.chess-board-card-container:nth-child(4n) { | ||
margin-right: 0px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 450px) { | ||
.chess-board { | ||
height: 480px; | ||
padding: 10px 0px; | ||
} | ||
} | ||
@media screen and (max-width: 370px) { | ||
.chess-board { | ||
height: 450px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
.chess-board-card-container { | ||
width: 100px; | ||
height: 121px; | ||
margin-right: 3px; | ||
cursor: pointer; | ||
position: relative; | ||
perspective: 800px; | ||
|
||
.card { | ||
width: 100%; | ||
height: 100%; | ||
transition: transform 1s; | ||
transform-style: preserve-3d; | ||
} | ||
|
||
.card.flipped { | ||
transform: rotateY(180deg); | ||
} | ||
|
||
.card img { | ||
display: block; | ||
height: 100%; | ||
width: 100%; | ||
position: absolute; | ||
backface-visibility: hidden; | ||
} | ||
|
||
.card .back { | ||
background: blue; | ||
transform: rotateY(0deg); | ||
} | ||
|
||
.card .front { | ||
background: blue; | ||
transform: rotateY(180deg); | ||
} | ||
} | ||
|
||
@media screen and (max-width: 450px) { | ||
.chess-board-card-container { | ||
width: 92px; | ||
height: 111px; | ||
margin-right: 1px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 395px) { | ||
.chess-board-card-container { | ||
width: 85px; | ||
height: 102px; | ||
margin-right: 1px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 360px) { | ||
.chess-board-card-container { | ||
width: 70px; | ||
height: 84px; | ||
margin-right: 1px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
.game-progress { | ||
width: 120px; | ||
height: 100px; | ||
padding: 10px; | ||
background-color: #bbada0; | ||
border-radius: 5px; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
color: #eae0d1; | ||
|
||
span { | ||
font-size: 19px; | ||
font-weight: bold; | ||
display: block; | ||
width: 100%; | ||
text-align: center; | ||
} | ||
|
||
h2 { | ||
color: #fff; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 450px) { | ||
.game-progress { | ||
width: 105px; | ||
span { | ||
font-size: 17px; | ||
} | ||
} | ||
} | ||
|
||
@media screen and (max-width: 380px) { | ||
.game-progress { | ||
width: 95px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 360px) { | ||
.game-progress { | ||
width: 90px; | ||
span { | ||
font-size: 15px; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
.game-status-container { | ||
position: relative; | ||
margin-top: 10px; | ||
width: 100%; | ||
height: 20px; | ||
line-height: 20px; | ||
text-align: center; | ||
font-size: 18px; | ||
font-weight: bold; | ||
button { | ||
border: none; | ||
cursor: pointer; | ||
background: transparent; | ||
color: #5979ac; | ||
font-size: 17px; | ||
font-weight: bold; | ||
} | ||
.sec-past { | ||
position: absolute; | ||
right: 10px; | ||
font-size: 15px; | ||
font-weight: normal; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
* { | ||
box-sizing: border-box; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
html, | ||
body { | ||
height: 100vh; | ||
width: 100vw; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
body { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.game-panel { | ||
width: 450px; | ||
height: 670px; | ||
border: 4px solid #bdbdbd; | ||
border-radius: 2px; | ||
background-color: #faf8ef; | ||
padding: 10px; | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
|
||
@media screen and (max-width: 450px) { | ||
.game-panel { | ||
width: 100%; | ||
height: 100%; | ||
justify-content: space-around; | ||
} | ||
} | ||
|
||
@import './score_board.scss'; | ||
@import './score_board_best_score.scss'; | ||
@import './game_progress'; | ||
@import './chess_board.scss'; | ||
@import './chess_board_card.scss'; | ||
@import './game_status_board.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
.score-board { | ||
width: 100%; | ||
height: 100px; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
.logo { | ||
width: 160px; | ||
height: 100px; | ||
line-height: 90px; | ||
padding: 5px; | ||
border-radius: 5px; | ||
background-color: #5979ac; | ||
color: #fff; | ||
text-align: center; | ||
} | ||
a { | ||
text-decoration: none; | ||
color: #fff; | ||
} | ||
} | ||
|
||
// score board -> logo | ||
|
||
@media screen and (max-width: 450px) { | ||
.score-board .logo { | ||
width: 150px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 380px) { | ||
.score-board .logo { | ||
width: 140px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 360px) { | ||
.score-board { | ||
.logo { | ||
width: 110px; | ||
} | ||
a { | ||
font-size: 18px; | ||
} | ||
} | ||
} |
46 changes: 46 additions & 0 deletions
46
examples/function_memory_game/scss/score_board_best_score.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
.best-score { | ||
width: 120px; | ||
height: 100px; | ||
padding: 10px; | ||
background-color: #bbada0; | ||
border-radius: 5px; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
color: #eae0d1; | ||
span { | ||
font-size: 19px; | ||
font-weight: bold; | ||
display: block; | ||
width: 100%; | ||
text-align: center; | ||
} | ||
|
||
h2 { | ||
color: #fff; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 450px) { | ||
.best-score { | ||
width: 105px; | ||
span { | ||
font-size: 17px; | ||
} | ||
} | ||
} | ||
@media screen and (max-width: 380px) { | ||
.best-score { | ||
width: 95px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 360px) { | ||
.best-score { | ||
width: 90px; | ||
span { | ||
font-size: 15px; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
pub mod app; | ||
pub mod chessboard; | ||
pub mod chessboard_card; | ||
pub mod game_status_board; | ||
pub mod score_board; | ||
pub mod score_board_best_score; | ||
pub mod score_board_logo; | ||
pub mod score_board_progress; |
Oops, something went wrong.
fff1ffa
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yew master branch benchmarks (Lower is better)
yew-struct-keyed 01_run1k
172.567
202.496
0.85
yew-struct-keyed 02_replace1k
192.423
227.742
0.84
yew-struct-keyed 03_update10th1k_x16
421.674
392.518
1.07
yew-struct-keyed 04_select1k
86.3475
66.215
1.30
yew-struct-keyed 05_swap1k
99.2515
103.1055
0.96
yew-struct-keyed 06_remove-one-1k
30.7395
29.1145
1.06
yew-struct-keyed 07_create10k
2114.381
2513.9295
0.84
yew-struct-keyed 08_create1k-after1k_x2
407.3905
556.7850000000001
0.73
yew-struct-keyed 09_clear1k_x8
204.85
244.8705
0.84
yew-struct-keyed 21_ready-memory
0.9196929931640624
0.9196929931640624
1
yew-struct-keyed 22_run-memory
1.4500503540039062
1.4347686767578125
1.01
yew-struct-keyed 23_update5-memory
1.47119140625
1.4614906311035156
1.01
yew-struct-keyed 24_run5-memory
1.4699134826660156
1.495513916015625
0.98
yew-struct-keyed 25_run-clear-memory
1.0886917114257812
1.198444366455078
0.91
yew-struct-keyed 31_startup-ci
1858.56725
1881.345
0.99
yew-struct-keyed 32_startup-bt
29.76999999999999
34.477999999999994
0.86
yew-struct-keyed 34_startup-totalbytes
363.7998046875
363.7998046875
1
This comment was automatically generated by workflow using github-action-benchmark.