Light Out game | Day 12

#javascript #webdev #beginners #programming

Today I have made a Light Out Game , Not From the Scratch 😅
It was an Exercise of the React Course BY Colt Steele.
The Game Look Like This 👇

Working

When you clicks on any cell it will toggles his neighbouring cells. When all the Cells are off you won the Game.

Your Task is to First Make a Board which have cells in it and you can use the Table to show the Cells in the Board(as a table Data.)

Once you are done with that You have to do that every time You Refreshes the site the cell will randomly be on/off.

After that you have to apply that whenever u click on a particular cell it will also toggles it's neighbouring cells.

Component Design

App
As often, this is a very simple component. It just renders the Board component.

Board
The most sophisticated component. It will hold the state that represents the in-memory grid of true/false for lights-on/off. Since the state for the board lives here, this is also were the setState() calls will need to go — and therefore, all the functions that call setState().
Cell
A simpler component. This will simply render a div, where the CSS classes will indicate whether this cell is lit or unlit. This is what the user clicks on — but it will need to call a function it receives from the Board, since that will need to update the state.

When the game is won, the board should not be shown, but a simple “You Won” message should show in its place.

Happy Coding ☺️

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.