Login layout
This layout is virtually identical to the previous chat room tutorial login layout. It simply serves to allow the user to enter a username in to a text box. The username is stored in a global variable and used to log in to the signalling server on the next layout.
Game layout
The Game layout now has an object for the host's paddle on the left, and the ball. When a peer joins, their paddle will be created on the right. Both players always see the host on the left and the peer (the second player to join) on the right.
The ChatLog textarea has been replaced with an ordinary Text object, so objects can be seen beneath it. An array is used to simulate scrolling up the messages, which will be described in more detail shortly.
The events for this layout deal with the same signalling events the previous chat example did. However on top of that it also deals with synchronising the paddles and the ball in real-time. For simplicity this example does not include a chat, so player's only inputs are their paddle positions, controlled by mouse. Also for simplicity, there is no lag compensation. If there is high latency, the peer on the right may miss the ball even if they see themselves hit it, because only the host tests for a collision and they see the peer on a long delay. Since lag compensation can be a little tricky, we won't deal with it in this tutorial - the fourth tutorial (real-time game) covers that. The game should still work fine over low-latency connections such as LANs.
This is a relatively complex example, with a total of 40 events. We'll begin looking at these events on the next page.