All right.
So just a quick recap on what we have done so far.
We created our cell.
We created a universe.
We implemented a method on getting our index.
That way that we can create the hour, count the number of live neighbors our cell has, and then our
tick method, which we exposed via bind gene so that the JavaScript is able to access this functionality.
It's just allowing us to implement the game of life rules.
On whether the next generation of cells are dead or alive, depending on the four rules that we got.
And then we also implemented a way in for our program to display our dead cell or our live cell.
So we're pretty close to being done with implementing this game.
There are two more methods that we need to define, and one of the methods is our constructor, which
is going to initialize our universe for us.
So we're just going to call this new and it's going to return back a universe for us.
So we know that we need a width and we also know that we need a height.
And our universe struct up here.
Also needs cells.
So now we have to add in our cells.
So we're going to just do a random assortment of where our cells will be.
So we're going to do cells from zero to height, times width, 64 times 64.
Since that is the size of our universe, that is how many cells we need to have.
And then we're going to map these values.
And what we're going to do is say if I mod two is equal to zero or I mod seven is equal to zero and
you can change two or seven however you like.
Those are just the values that I happen to pick.
If I mod two or seven is equal to zero then our cell is going to be alive.
Otherwise our cell will be dead.
And that's just going to give us a random placement of cells onto our universe for us.
And then we want to collect those values that way.
We have a vector of them.
And in here we're going to create our universe with our width, height and our cells.
All right, so it looks like I have a little air.
What am I forgetting?
It helps if I put it inside.
Oh, not parentheses.
There we go.
Okay.
And just to make this pretty, I'm going to do cargo format.
That way we follow the standard formatting.
And then lastly, the the last method we need to define is our render and that is going to just refer
to self return a string and self dot to string.
So this is all that we needed to do inside of our lib rs So now with us having made changes to this,
we are going to run and pack.
Build and everything compiled successfully, which is great.
So now that we need we need to just do a couple of additional setups.
So we'll go over to our index.html HTML file inside of our WW directory and we are going to add an A
pre tag which is going to create a element on our web page called the Game of Life Canvas.
And we want to make sure that that element exists before.
We try to draw our our universe.
And then I also want to add in some styling again, just copy and paste this in.
I'm not going to go over the CSS styling behind it.
So from the code that I got, you just feel free to copy and paste it in and that's all we need to do
inside of indexed HTML.
So I'm going to close that out.
I'm also going to close in DEC our package.
So now inside of indexed JSON and our UWW directory as well.
I went ahead and cleared out this file so you can do the same if you want.
But otherwise I'm going to import in our universe from.
Our Chasm game of life.
And then inside here, we're going to want to get access to the element that we added into our index
at HTML.
So we named it the Game of Life Canvas, and now we want to go ahead and create our universe.
So we will say Universe New and Universe dot new is referring to our new method that we created here
and JavaScript is able to see it because of the ASM bi engine that we gave this entire implementation
block on the universe.
So the way that this is going to run is that the JavaScript is going to use a request animation frame
loop, and then on each iteration it's going to draw the current universe by calling on the universe
tick method that we implemented right here.
So we can implement this by saying we're going to have a constant render loop, we'll do an anonymous
function and we will say pre dot text content is equal to universe, dot render render.
Again, referring to the render method that we implemented right there.
And now we are going to say Universe.
Tick.
And now we're going to request animation frame on render loop.
And then to get this to reinforce just the first time we are going to execute a request animation frame
on render loop and then that will put us inside of our loop.
So now we need to change directory so KD into W, W, W and now just to make sure that we have all of
our dependencies installed, we'll run npm install.
And wait for it to.
Finish.
All right.
And now we can run in PM.
Run.
And it looks like it's compiling a compiled successfully.
So now if we go to local host refresh the page and we now have our game of life implementation working.
So you can see we have live cells here.
Because we have the full squares and then all the empty squares are dead cells.
And you can see that all of our cells are just interacting and you can let this run for as long as you
want.
And watch how your universe continues to change and how the cells continue to come alive and or die
based on the rules that we implemented.
So congratulations on getting this working.
Hopefully you can see that working in Webassembly is actually pretty straightforward overall.
I hope you enjoyed creating this little game and have a much better understanding on how to use Webassembly
as you dive further in on your journey with rust.
Please feel free to ask me any questions in the Q&A section if you have any.