In this video we create our main game component that wraps our game setup and game board sub-components.
In this video we build the component, markup, and interaction logic of our game setup component - which is used to set game options.
We wrap up our game setup component by implementing the styles for the markup we’re generating.
In this video we stub out all of the rest of the components we need to finish the client. In addition, we wire them all up to the game board component.
The first sub component we implement is our card component, which will be used frequently on our game board.
The next component we implement is our stacks, which are used to display the currently played cards in the game.
Our final component is our player hand. In this video, we wrap up all of the rest of our React code that we will be writing in this course.
This video goes over the high level architecture of our server code.
We start off our implementation of the diff function with a basic test harness.
Our next diff function will handle diffing arrays.
We finish our simple diff function with being able to handle objects.
Next up we implement our merge function that accepts diffs in the form of those generated by the makeDiff function.
In this video we load up our cards into a special data structure.
Our first “room” that we implement is the application. In this video, we also create our client class and hook it into socket.io so that the server can now send actions directly to the clients.
This video completes the app store, by integrating it into the SET_VIEW action as well as socket.io connection events.
Next up we implement the server-side code for our lobby, and see how we will be handling events from the client.
Now we stub out a few of the classes we’ll need for our game implementation and finish our implementation of the lobby.
The first game handlers that we implement are for setting game options and sending messages.
Next up we implement many of the core bits of the game logic.
The final bit of server code we have to write is the state machine for the game!
In this video we wrap up the project with showing how to deploy our application to Heroku, as well as demonstrating some of the potential issues that may come up.
Now we’re going to see how JSX can be used to create our shadow DOM, instead of having to rely in createElement.
This video goes over what component state is and how we can properly handle events in our React applications.
We finish our counter application example by talking about how we can modify a component’s state.
We start our todo example by putting together a basic form that allows us to toggle a checkbox.
Next up we take a look at how we can create stateless components.
One of the most important things to be able to do in React is to render lists of elements. In this video we go over how to do that.
Now we take a look at how we can handle events in React.
We wrap up our todo application with a discussion of how to deal with forms and component lifecycle events.
We kick off our project by creating some of the basic folders and files that will be needed to continue building our build system.
Before we continue with configuring our project, we need to install and configure the core babel compiler as well as the babel plugins that we will be using in this course.
With Babel installed and configured, we can move on to setting up eslint.
With eslint configured properly, we then integrate it into our editor to provide instant feedback while we work.
Now we install gulp, and configure it to allow us to compile our server code. We also take a look at how we can use sourcemaps in node applications.
With our build step out of the way, we now implement our watch and run tasks for our server - allowing us to be able to have our server be restarted automatically on file changes.
This video shows a basic way that we can hook unit tests into our application using the jasmine testing framework.
In this video we create a basic express app that servers out a templated view as well as our app’s favicon image.
To speed up the next few videos, in this video we install all the necessary packages for webpack.
Now we put together the configuration for our webpack client build.
In this video we finish the production configuration, integrate the webpack compiler with our gulpfile, and include font awesome into our project.
Next up we implement our final gulp tasks, and integrate them into being able to launch an entire development environment with a single command. We also setup the webpack dev server to serve out our client code when in development.
With our development server running, we next put together our configuration for hot module replacement; allowing us to hot-reload our styles without having to refresh the browser window.
Before we can take a look at hot-reloading our components, first we must install react and react-dom and take a look at how we will be using them in the context of our module loader.
We finish our build pipeline with enabling hot module replacement for react components.
We take a look at how we can debug our client code inside of both chrome and Visual Studio Code.
Finally we see how we can debug node applications inside of Visual Studio Code with sourcemap support.
To conclude this section, we recap how to work with the project structure we created in this section. This video is for people who wish to use the bundled project structure starter pack instead of going through the set themselves.
To start with, we install the rest of the NPM packages that we will be using in this course. We also switch from using babel-runtime to using babel-polyfill, as well as change a potentially annoying eslint rule.
The first thing we do is configure react-router to instantiate the proper top-level components for the two screens that we will have in this project (lobby and game).
Before we start implementing our components, we have to style our application’s base layout.
We kick off our implementation of the lobby component with our JSX markup and styles for our sidebar buttons as well as our game list.
Before finishing our lobby, we take a look at how we can use react to create reusable input controls.
We finish our lobby by implementing our chat box.
Before we start implementing our dispatcher, stores and actions, we look at a high level overview of how our client-side architecture will come together.
We start off our implementation of the dispatcher with unit tests that describe the API surface of our dispatcher.
With our tests out of the way, we put together the implementation of the dispatcher.
In this video we stub out our store classes.
To finish off our basic infrastructure for our action framework, we need a way to access our dispatcher and stores from within certain components in our application. In this video, we use React contexts to achieve that.
Our first action and store observable will be for our implementation of a dialog subsystem. In this video, we implement the dialog action as well as the observable sequence for keeping track of them being open.
We finish our dialog subsystem by implementing the part where they become rendered, as well as the required styles to go along with it.
Before we start our login dialog, we implement a way to show us our actions as they get dispatched for debugging reasons.
In this video we finish our login dialog.
One of the most important things we deal with is managing our operations, such as logging in or selecting a card. In this video we put together the code that will handle operations for us mostly automatically.
We finish up most of the lobby by integrating it with our dispatched operations.
In this video we hook up our router to our action dispatcher so that we can properly navigate between the lobby and the game components.
Before we start writing our game components, we first implement a basic dummy store for our game so that we have some data to work with.
The first game component we implement is the game sidebar.
Here we see an overview of how React uses the shadow DOM to keep our physical DOM up to date.
For our first bit of real-world React, we take a look at how we can interact with it to create shadow DOM elements and render them to the physical DOM.
In this video we finally finish our reflection node.
In this video we fix the problems we had with showing the meta data list for the tree itself.
We continue our reflection node development in this video.
Let's take a look at what the community gave us on Unitys wiki pages and use one of the most useful systems to send messages back and forth between any class without a need to connect them in any shape or form. Also, we will start developing our reflection node, one of the most powerful nodes to handle any reflection job you may need in your agent's AI
Interrupt node is a very powerful node if it is being used properly. Using this node you can check for a condition to see if another child node should still contuned ticking or not.
Adding nodes to handle flow logic of the agent is always a good thing. In this video we will add three nodes that will help in that regard, Until Failure, Until Success and Repeat nodes.
Another useful node that will check if the agent can here a sound or not. We will see how can we use a component's feature to determine the sound level at any given position.
Another one of useful nodes that will be a short cut for coding is to check if the agent is within distance of another position or not. in this video we develop our own WithinDistance node.
We had a slight issue with our can see node, in this episode we will fix that issue.
I can't think of any character that an AI system that won't implement line of sight in one way or another. In other words, almost always, you need to check if something is in your agent's field of view or not. Of course you can use a condition node and assign a delegate to it and get the job done but, wouldn't it be easier to have a node dedicated for this job to reduce the number of lines you as a user need to type every time you want something like this? In this episode we develop our Can See node.
The ability to generate a random number and compare it to a predefined number is almost always part of artificial intelligence systems and logic. For example when you want to spawn an item in a reward chest and want to choose rarity to spawn an item from a data base. in that example, you would generate a random float and compare it to .3 for 30 percent chance rarity. In this video, we will develop the random probability node.
Unlike it's name, there is nothing related to multi-threading when we talk about parallel nodes. A parallel node is some what like a sequence node. The difference is, regardless of the result of previous child nodes status, this node will tick every one of its children and then decide if it should be a success or failure in condition itself when all of those children where ticked.
Action nodes are the place that all the behavior happens, above any action node you can have a very complex tree using sequence and selector nodes, but, action nodes are where you do the real action and behaviors. In this episode we develop a few action nodes that are essential or life saving. The Action node itself; with counter, flip/flop, timer and condition nodes.
Wouldn't it be nice to be able to randomly tick a branch in the sequence or selector system? in this video we develop two other nodes, random sequence, and random selector.
The selector node, hand in hand with sequence node can handle most of the logical transitions between the tree branches in any behavior tree node. In this video we develop our own selector node.
In this video we develop one of the essential nodes for any behavior tree system, the sequence node.
In this video we start developing our behavior tree nodes. Our very first nodes are the simplest ones, success and failure nodes.
Before we start adding nodes specific for any behavior tree, we have few issues and bugs that need to be fixed
Base node will have all the general functionality of every behavior tree node in it, so you can say that it's a special class that needs good attention. Also, start node, is the very first node that would be ticked and the node that would send back the result to the tree when the whole tree is evaluated.
In this video, we will start putting functionality into our behavior trees graph and its schema classes.
Starting our behavior tree (finally) we do the normal approach of stubbing our classes first.
Last part of code refactoring! Also, adding code for sorting nodes based on their rect x component, this will be a needed feature when it comes to behavior trees.
In this video, not only do we refactor our system more to fix a few issues and make it more robust, but also, we will start injecting a few lines of code here and there that will be used for behavior tree system later.