Let's discuss your "Game of Life"

Project Link - https://jenovs.github.io/fcc-game_of_life/

Created using React/Redux. No jQuery :wink:

It was easier than I thought, the hardest part was wiring the controls so they donā€™t interfere with each other.

Code needs cleanup and maybe some optimization, but for now Iā€™ll leave it as is and will come back to it later.

1 Like

Looks good mate! I like the population feature. Itā€™s neat to keep track of it

Project Link - https://codepen.io/FaizAhmadF/full/kkkGGX/

Finally I completed my Game of ife! :slight_smile:
It was one of the most challenging projects for me!I have made using react only.Please give your feedbacks.
Niow I have one react project left and I am confused whether I should learn Redux now or left it for sometime in futureā€¦because I have a lot of pressure to get job and I want to complete Freecodecamp curriculum as soon as possible!:worried:

My project link - http://codepen.io/ubershibs/pen/xEPrJW

I made it with React onlyā€¦ Definitely ran into some issues where Redux/ImmutableJS would have been helpful. Kept managing to mutate my grid and it got messy, but I got it together eventuallyā€¦ If anyone has any thoughts, please feel freeā€¦ Love the feedback.

It looks great, but I see couple bugs:

  • It doesnā€™t seem to pause while the board itā€™s generating
  • When I hit clear, the board resume generating from zero
  • I canā€™t seem to customize the board at all

I would also suggest replacing setInterval with requestAnimationFrame. Itā€™s is much more optimal and saves a lot of CPU

2 Likes

Ok it looks like the bugs happens when I press any of the three buttons of ā€œRestart withā€

Right, thanks for pointing those out. Iā€™ve fixed those now, but am just learning about requestAnimationFrameā€¦ Itā€™ll take me a little while to refactor with that in mind, but it seems like a much better option. Thanks for pointing that out!

Awesome it looks like itā€™s fixed!

Although itā€™s not required, I would suggest trying to see if you can make the app able to have userā€™s input while itā€™s being generate (to be more interactive), as well have the board not restricted to its boundaries ( I noticed the behavior is different close the boundaries).

Other than that, good job!

Sorry - what do you mean behaviour is different close to the boundaries?

Thanks for all the tips, by the way. Really helpful.

No problem.

Sorry I shouldā€™ve been more specific: it would be nice to have the board able to render cells on the opposite side when it across the boundary.

In other words, have a continuous board that itā€™s not restricted by the boundaries (if that make sense).

Check out other projects in this thread for examples and see how the cells behaves when it reaches to the boundaries

OKā€¦ I see what you mean, and I switched my logic up to support that now, as well. Thanks again, Neotriz!

Thank you SO MUCH for the requestAnimationFrame adviceā€¦ I read up on it, and it was so easy to switch it over from setInterval, and the difference is likeā€¦ night and day. Itā€™s awesome!

1 Like

Total neophyte question here but I have not yet been able to figure this out: In general, what ā€œtriggersā€ the grid to make the next change? How do you get the thing to ā€œrunā€?

When I wrote stuff like this in Javascript there was usually a self-referencing function that repeated itself every tenth of a second or so. But how is this done in React?

In React, youā€™d periodically update the component state, triggering a redraw of the current component. setTimeout is the approach I used.

If you are talking about what triggers when the page is loaded, itā€™s Reactā€™s componentDidMount

1 Like

Thank you!

Also shortly after I posted I found a good article on the life cycle of React components:

http://busypeoples.github.io/post/react-component-lifecycle/

1 Like

Mine actually uses React conceptsā€¦ Imagine my surprise when I finished and checked out the code of the example project and itā€™s mostly jQuery, lol.

Still could use some (any) optimization, but seems to be one of the faster implementations Iā€™ve seen on CodePen. Mostly because it uses canvas. If anyone reading this hasnā€™t started this project - use canvas for your board! The DOM isnā€™t made for this sort of thing!

Project Link - http://codepen.io/Tattomoosa/pen/BLqbLW

1 Like

Hello everyone!
Project link
Why when i click to cell, my component not re render? I changed redux store but nothing happened

Are you trying to initiate re-render when you first open the game, nothingā€™s happening at first, there just is a randomly populated field, and you click a white or green cell?