this is a course on how to build a checkers game using reactJS
We're starting today from a 2p-local game, out goal is to add a basic computer player
- review code for 2p-local
- what are the functions which control the game logic?
- how will we use them to program the computer player?
- 1p v cp local
- select cp game or 2p local game
- onUpdate lifecycle -> trigger cp play
- algorithm for selecting move, test
let's take a quick read through the app, starting with ./src/App.js to understand what the parts are, and how things are running already
./src/App.js
//...
import { calculateAllTurnOptions, strictValidMoves } from './util';
//...
we see right away which utility functions we'll be using. Let's take a look at the function signatures for those in ./src/util.js to understand them a bit more
./src/util.js
//...
export const strictValidMoves = (pieces, col, row, isJumping)=> {
//...
export const calculateAllTurnOptions = (pieces, player, calculateValidMoves)=> {
//..
so strictValidMoves
takes a boardful of pieces, a column & row coordinate, and a boolean of whether we're jumping
probably what this does is tell us for a given piece (given by [col, row]
) what the valid moves available under "strict" rules are... isJumping will filter out non-jumps while we're already jumping.
calculateAllTurnOptions
takes a boardful of pieces, which player we're asking about, and a function to calculate valid moves with
so we can understand that this function will give us a list of valid moves & multi-jump move options for our computer player to select between.
./src/App.js
//...
render() {
return (
<div className="App">
{this.state.winner ? (
<div className='winner'>
{ this.state.winner } WINS!
</div>
) : (
<Game onWinner={this.onWinner}
rules={this.state.rules}
mode='cp'
cpMove={this.cpMove}
/>
)}
</div>
);
}
//...
we see in the render()
function that we're setting some rules and rendering a Game
Component... let's take a read there to see how it works
./src/Game.js
//...
import {
validMoves,
strictValidMoves,
calculatePiecesAfterMove,
initCheckersBoard
} from './util';
//...
first we see this list of utility functions
===
- 2p over network
- assume game server exists
- create a user UX
- signin UX
- create game UX
- join game UX
- use network hook to send my moves & load other player's moves
- chat?
- cloud game server
- aws account
- dynamoDB
- POST /user
- apiGateway, lambda, dynamo table + create call
- /login -> JWT
- apiGateway, lambda, dynamo check call
- POST /game
- apiGateway + JWT authorizer, lambda, dynamo table + create call
- /joinTable
- apiGateway, lambda, dynamo update call
- PUT /game { move }
- apiGateway, lambda, dynamo update call
- GET /game/:id
- apiGatewat, lambda, dynamo read call
- chat?