Modern Full-Stack Development

 The Basic Layout: BaseLayout.tsx
The BaseLayout component starts with some React imports, as you’d reasonably expect 
for a React component:
import React, { Component } from "react";
Chapter 11   time for fun: BattleJong, the Client

---

314
Then, we have three application imports, one for the ControlArea component, one 
for the PlayerBoard component, and one for our state object code:
import ControlArea from "./ControlArea";
import PlayerBoard from "./PlayerBoard";
import { createState } from "../state";
After that, it’s time to build a component. This is how it starts:
class BaseLayout extends Component {
  state = createState(this);
I again use the same pattern as in MailBag, where state is housed in the topmost 
object, and the state object is constructed via a call to createState(), which is code 
you’ll see later.
Next, we run into the render() method:
render() {
  return (
    

      

        
      

      

        
      

    

 );
}
Everything is contained with a single 

, and that 

 has the appContainer 
style class from main.css applied, which is as follows:
.appContainer {
  position : absolute;
  height : 750px;
  left : 50%;
  top : 50%;
Chapter 11   time for fun: BattleJong, the Client

---

315
  transform : translate(-50%, -50%);
  border : 2px solid #0000ff;
  border-radius : 10px 10px 10px 10px;
  -moz-border-radius : 10px 10px 10px 10px;
  -webkit-border-radius : 10px 10px 10px 10px;
  display : grid;
  grid-template-columns : 960px 300px;
  -webkit-box-shadow : 0 0 25px 0 rgba(255, 200, 0, 0.75);
  -moz-box-shadow : 0 0 25px 0 rgba(255, 200, 0, 0.75);
  box-shadow : 0 0 25px 0 rgba(255, 200, 0, 0.75);
}
The entire element is to be centered both horizontally and vertically, which is 
where the left and top values come into play. But that only works if position is set to 
absolute and if the element has a defined height, so those are both done. Then, one 
final piece of the centering puzzle is needed: the translate transformation. This shifts the 
topmost 

 halfway left and up, which, all together, gets the centering I want.
I also apply a blue border and round the corners to make it look nice and apply a 
drop shadow around the whole thing (extending in all four directions) so that it has 
something of a glowing yellow look to it. Finally, display is set to grid, and two columns 
are defined, the first for the gameboard and the second for the control area.
Speaking of the gameboard, that’s the next element in the hierarchy, the one with the 
playerBoard style class applied, and that class is
.playerBoard {
  grid-column : 1 / 2;
}
As you know from the previous project, that puts this 

 into the first column. 
Then, into this 

 goes a PlayerBoard component, passing it the state object. 
Obviously, we’ll be looking at that shortly.
The second child 

 is the second column and is where the control area goes. It 
has the following style applied:
.controlArea {
  height : 240px;
  margin : 10px;
  padding : 10px;
Chapter 11   time for fun: BattleJong, the Client

---

316
  grid-column : 2 / 3;
  border : 1px solid #000000;
  border-radius : 10px 10px 10px 10px;
  -moz-border-radius : 10px 10px 10px 10px;
  -webkit-border-radius : 10px 10px 10px 10px;
}
In this case, I don’t want the control area to take up the entire column, so I define 
a height. I also add some margin and padding to keep its contents from bumping up 
against the border (and to give some separation between the outer border and the 
control area’s border). Of course, I have to tell the grid layout where this element goes 
in the grid, so that’s done. Finally, the control area is given a border with some rounded 
corners, again just for aesthetics.
The control area houses the aptly named ControlArea component, and why not 
jump right into that now?