PlayArena.js
- It is parent of Board component.
- It reads the spec, and stores all information about game board such as image url, height etc in an object. It also stores all information about the pieces such as x, y coordinates, image urls, piece types in an array. It then passes all this information to the Board component.
- It is very important that on initial render we pass complete information regarding pieces and board images to Board component. For more details check documentation of Board component. Thus we first fetch data from firebase to generate array which contains information about all the pieces. Once we have all this information about pieces and game board then only we render the Board component.
- We have moved all the logic for cards such as shuffling card Deck, display card visibility information to this component. The reason is that because the Board component is rendered just once and all the manipulations are handled in javascript. But this component can be rendered as many times as we want, thus we found this component to be best place to add logic to display card visibility information.