example of function memory game by leftstick · Pull Request #2255 · yewstack/yew

leftstick · 2021-12-09T08:56:01Z

Description

Example of function memory game.
It is a different case to demonstrate how functional components work.

check below demo:

Checklist

I have run cargo make pr-flow
I have reviewed my own code

voidpumpkin · 2021-12-11T16:59:40Z

@leftstick We really appreciate your PR, and I personally love the look of the example.
But sorry we have a lot of examples to maintain already, so currently we only merge examples that highlight distinct features of the library.
Also we already have functional components in the function_todomvc example, sorry.

But you could add a new page in the yew docs for community examples/links. Then add a link to your example repository there!

siku2 · 2021-12-11T17:46:02Z

I think this example is significantly more interesting than the function_todomvc example.
I know that function_todomvc gains some value by providing a direct comparison to struct components but I honestly don't see that as a big deal. It also adds maintenance overhead since the expectation is that the example is a one to one comparison to the other todomvc example.

I'd much rather incorporate this example and put a few struct to function component comparisons in the documentation.

leftstick · 2021-12-13T03:05:13Z

@voidpumpkin @siku2 thanks for your suggestion. Since it is the first time I tried rust, the implementation might not elegant enough. Let me know if you have any further comments.

voidpumpkin

All looks good except all the manual PartialEq implementations.

voidpumpkin · 2021-12-20T10:18:31Z

+#[derive(Properties, Clone)]
+pub struct Props {
+    pub cards: Vec<Card>,
+    pub on_flip: Callback<RawCard>,
+}
+
+impl PartialEq for Props {
+    fn eq(&self, other: &Props) -> bool {
+        let s_cards = &self.cards;
+        let o_cards = &other.cards;
+        let s_cards_len = s_cards.len();
+        let o_cards_len = o_cards.len();
+
+        match s_cards_len == o_cards_len {
+            false => false,
+            true => s_cards.iter().all(|c| o_cards.contains(c)),
+        }
+    }
+}


I'm a little confused why not derive PartialEq automatically?

Suggested change

#[derive(Properties, Clone)]

pub struct Props {

pub cards: Vec<Card>,

pub on_flip: Callback<RawCard>,

}

impl PartialEq for Props {

fn eq(&self, other: &Props) -> bool {

let s_cards = &self.cards;

let o_cards = &other.cards;

let s_cards_len = s_cards.len();

let o_cards_len = o_cards.len();

match s_cards_len == o_cards_len {

false => false,

true => s_cards.iter().all(|c| o_cards.contains(c)),

}

}

}

#[derive(Properties, Clone, PartialEq)]

pub struct Props {

pub cards: Vec<Card>,

pub on_flip: Callback<RawCard>,

}

@voidpumpkin Thanks for your suggestion. I misunderstood the automatic PartialEq before. I tried replace with automatic implementation, it's working properly.
I've committed the change

ranile

Might also want to use the new syntax for function component macro (one where function name is the component name). It's also fine as is

ranile · 2021-12-29T15:51:15Z

+## LICENSE
+
+[MIT License](https://raw.githubusercontent.com/yewstack/yew/examples/function_memory_game/master/LICENSE)


Why is the license specified here? Why is it only MIT? The example's Cargo.toml says the license is MIT to Apache 2.0.

@hamza1311 this example should not have a specific license. I will remove this part

voidpumpkin · 2021-12-29T15:58:23Z

@leftstick also take a look at comments in #2313

I had a copy of your PR before you fixed yours so @siku2 reviewed that one

voidpumpkin

Minor comments

leftstick · 2022-01-06T09:59:27Z

@voidpumpkin code changed. Thanks for reviewing

voidpumpkin · 2022-01-06T17:43:55Z

Please rebase onto master for tests to be fixed

leftstick · 2022-01-07T01:52:58Z

Please rebase onto master for tests to be fixed

@voidpumpkin done. Thanks for reminding

ranile

Just formatting and warnings. Otherwise, looks good

ranile · 2022-01-07T10:48:06Z

+
+        match props.status {
+            Status::Ready => html! {
+                <span >{"Ready"}</span>


Suggested change

{"Ready"}

{"Ready"}

@hamza1311 Would you please share how you got such error? I ran with cargo make lint, there is no any warning. Thanks

This is not a warning, just a formatting issue. The warnings are in other comment where @voidpumpkin explained how to run the lints

ranile · 2022-01-07T10:48:28Z

+                <span >{"Ready"}</span>
+            },
+            Status::Playing => html! {
+                <span >{"Playing"}</span>


Suggested change

{"Playing"}

{"Playing"}

ranile · 2022-01-07T10:48:43Z

+    html! {
+      <div class="chess-board-card-container">
+          <div class={classes!("card", flipped.then(|| "flipped"))} {onclick}>
+              <img class="front" src={get_link_by_cardname} />


Please fix the warnings

@hamza1311 would you please share how you got those warnings? I got everything alright with cargo make lint. Thanks

@leftstick Those are yew custom warnings that work with only nightly compiler
https://yew.rs/docs/concepts/html/introduction#lints

leftstick · 2022-01-12T02:02:24Z

@voidpumpkin @hamza1311 done. Thanks for reviewing

ranile

Looks good. Thanks for the PR

voidpumpkin closed this Dec 11, 2021

voidpumpkin reopened this Dec 11, 2021

voidpumpkin added the A-examples Area: The examples label Dec 15, 2021

voidpumpkin requested changes Dec 23, 2021

View reviewed changes

voidpumpkin mentioned this pull request Dec 28, 2021

Add example of function memory game #2313

Closed

3 tasks

leftstick force-pushed the master branch from dcbe4b0 to 1622662 Compare December 29, 2021 04:08

voidpumpkin previously approved these changes Dec 29, 2021

View reviewed changes

ranile reviewed Dec 29, 2021

View reviewed changes

leftstick dismissed voidpumpkin’s stale review via 393207c December 30, 2021 01:57

voidpumpkin requested changes Jan 3, 2022

View reviewed changes

leftstick force-pushed the master branch from 393207c to 64dfc6c Compare January 6, 2022 09:50

voidpumpkin previously approved these changes Jan 6, 2022

View reviewed changes

leftstick dismissed voidpumpkin’s stale review via 7f3f41d January 7, 2022 01:48

leftstick force-pushed the master branch from 64dfc6c to 7f3f41d Compare January 7, 2022 01:48

voidpumpkin previously approved these changes Jan 7, 2022

View reviewed changes

voidpumpkin requested a review from ranile January 7, 2022 07:27

ranile reviewed Jan 7, 2022

View reviewed changes

voidpumpkin added the S-waiting-on-author Status: awaiting action from the author of the issue/PR label Jan 10, 2022

leftstick added 5 commits January 12, 2022 09:59

example of function memory game

8018368

refactor: remove unnecessary manual PartialEq implementation

0555a6a

refactor: remove unnecessary license note

b6afec0

refactor: update implementation and doc with suggestions

1505379

refactor: fix format and lint issues

31f3494

leftstick dismissed voidpumpkin’s stale review via 31f3494 January 12, 2022 02:00

leftstick force-pushed the master branch from 7f3f41d to 31f3494 Compare January 12, 2022 02:00

voidpumpkin removed the S-waiting-on-author Status: awaiting action from the author of the issue/PR label Jan 12, 2022

voidpumpkin approved these changes Jan 12, 2022

View reviewed changes

voidpumpkin mentioned this pull request Jan 12, 2022

Add implementation types to examples table #2361

Merged

3 tasks

ranile approved these changes Jan 12, 2022

View reviewed changes

ranile merged commit fff1ffa into yewstack:master Jan 12, 2022

		## LICENSE

		[MIT License](https://raw.githubusercontent.com/yewstack/yew/examples/function_memory_game/master/LICENSE)

Uh oh!

Conversation

leftstick commented Dec 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

voidpumpkin commented Dec 11, 2021

Uh oh!

siku2 commented Dec 11, 2021

Uh oh!

leftstick commented Dec 13, 2021

Uh oh!

voidpumpkin left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ranile left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

voidpumpkin commented Dec 29, 2021

Uh oh!

voidpumpkin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

leftstick commented Jan 6, 2022

Uh oh!

voidpumpkin commented Jan 6, 2022

Uh oh!

leftstick commented Jan 7, 2022

Uh oh!

ranile left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leftstick Jan 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

voidpumpkin Jan 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leftstick commented Jan 12, 2022

Uh oh!

ranile left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

leftstick commented Dec 9, 2021 •

edited

Loading

voidpumpkin left a comment •

edited

Loading

leftstick Jan 11, 2022 •

edited

Loading

voidpumpkin Jan 11, 2022 •

edited

Loading