The first components we will create are part of the UI layer. There will be a top bar with the players' names and a turn counter, the cards with their name and description, the hand with the current player cards, and the three overlays.
Building the user interface
Our first component - the top bar
The top bar, our first component, will be placed at the top of the page and will display the names of the two players and a turn counter in the middle. It will also show an arrow facing the name of the player currently taking their turn.
It will look like this:
![](https://static.packt-cdn.com/products/9781787127463/graphics/assets/8739ced8-2ec7-4a72-af0f-fa01f814c080.png)