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.
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.