yewstack · ranile · Jan 12, 2022 · Dec 9, 2021 · Dec 29, 2021 · Dec 30, 2021
diff --git a/Cargo.toml b/Cargo.toml
@@ -14,6 +14,7 @@ members = [
   "examples/counter",
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
+  "examples/function_memory_game",
   "examples/function_todomvc",
   "examples/futures",
   "examples/game_of_life",

diff --git a/examples/function_memory_game/Cargo.toml b/examples/function_memory_game/Cargo.toml
@@ -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",
+]
diff --git a/examples/function_memory_game/README.md b/examples/function_memory_game/README.md
@@ -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)
diff --git a/examples/function_memory_game/index.html b/examples/function_memory_game/index.html
@@ -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>
diff --git a/examples/function_memory_game/public/8-ball.png b/examples/function_memory_game/public/8-ball.png
diff --git a/examples/function_memory_game/public/back.png b/examples/function_memory_game/public/back.png
diff --git a/examples/function_memory_game/public/baked-potato.png b/examples/function_memory_game/public/baked-potato.png
diff --git a/examples/function_memory_game/public/dinosaur.png b/examples/function_memory_game/public/dinosaur.png
diff --git a/examples/function_memory_game/public/favicon.ico b/examples/function_memory_game/public/favicon.ico
diff --git a/examples/function_memory_game/public/kronos.png b/examples/function_memory_game/public/kronos.png
diff --git a/examples/function_memory_game/public/rocket.png b/examples/function_memory_game/public/rocket.png
diff --git a/examples/function_memory_game/public/skinny-unicorn.png b/examples/function_memory_game/public/skinny-unicorn.png
diff --git a/examples/function_memory_game/public/that-guy.png b/examples/function_memory_game/public/that-guy.png
diff --git a/examples/function_memory_game/public/zeppelin.png b/examples/function_memory_game/public/zeppelin.png
diff --git a/examples/function_memory_game/scss/chess_board.scss b/examples/function_memory_game/scss/chess_board.scss
@@ -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;
+  }
+}
diff --git a/examples/function_memory_game/scss/chess_board_card.scss b/examples/function_memory_game/scss/chess_board_card.scss
@@ -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;
+  }
+}
diff --git a/examples/function_memory_game/scss/game_progress.scss b/examples/function_memory_game/scss/game_progress.scss
@@ -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;
+    }
+  }
+}
diff --git a/examples/function_memory_game/scss/game_status_board.scss b/examples/function_memory_game/scss/game_status_board.scss
@@ -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;
+  }
+}
diff --git a/examples/function_memory_game/scss/index.scss b/examples/function_memory_game/scss/index.scss
@@ -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';
diff --git a/examples/function_memory_game/scss/score_board.scss b/examples/function_memory_game/scss/score_board.scss
@@ -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;
+    }
+  }
+}
diff --git a/examples/function_memory_game/scss/score_board_best_score.scss b/examples/function_memory_game/scss/score_board_best_score.scss
@@ -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;
+    }
+  }
+}
diff --git a/examples/function_memory_game/src/components.rs b/examples/function_memory_game/src/components.rs
@@ -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;