This is part 1 of the "Web client communication to Unreal and back" series.

Before we start trying to send messages back and forth between the web client and the streaming game package, we will make a simple stateful control in a fresh web client.

Please make sure you have read the following article prior to proceeding.

Create a web client
Use PureWeb’s React web client template to create a custom end user experience.

We are going to create a button that is similar to the fullscreen button in the top right corner of the web client template. The web client will remember its state of TRUE or FALSE and change the icon of the new button based on that value.

Define the Button

Once you have downloaded a new copy of the web client, open the App.tsx file in your code editor of choice.  Around line 150, find the declaration for the EmbeddedView, the first line of which looks something like this:

const EmbeddedView: React.FC<ViewProps> = (props: ViewProps) => {

The fullscreen button allows users to make the game stream (the EmbeddedView in our web client) full screen or not. Essentially, this button is a TRUE or FALSE value connected to the button; we want to do something similar.

Find the Button declaration in the embedded view that looks similar to the below:

<Button
	onClick={() => setIsFull(true)}
	style={{ position: 'absolute', top: 10, right: 10 }}
	className={isIPhone || isFull || props.StreamerStatus !== StreamerStatus.Connected ? 'hidden' : ''}>
	<Icon name="expand" />
</Button>

Add code directly after to create a new button, and place it on the screen with the following code:

<Button
	onClick={() => toggleLight(!lightIsOn)}
	style={{ position: 'absolute', top: 50, right: 10 }}>
	<Icon name={lightIsOn ? "toggle on" : "toggle off"} />
</Button>

This is a bit different than the fullscreen button, so what’s happening here?

  1. The onClick handler toggleLight has not been defined yet, but we will address that in a moment.
  2. The position "top: 50" places the new button directly underneath the fullscreen button.
  3. The icon checks a lightIsOn property to decide whether to use the toggle on or toggle off icon from the https://react.semantic-ui.com/elements/icon/ library.

If we try to run the web client now, it won’t do anything yet. Let’s add the onClick handler and finish up part 1.

Add the ClickHandler

At the top of the EmbeddedView you’ll find the declaration for isFull, which looks like this:

const [isFull, setIsFull] = useState(false);

We will model our lightIsOn property after isFull. Type or paste this line into your code.

const [lightIsOn, toggleLight] = useState(false);

This gives us a new property called lightIsOn and a function called toggleLight. useState(false) sets the lightIsOn property to false when it’s declared.

Looking back at the button definition created earlier, the onClick handler calls toggleLight function and sets lightIsOn to whatever the opposite value is. So if the button is clicked when lightIsOn is FALSE, lightIsOn gets changed to TRUE, and vice versa.

In the Icon name section, we check the value of lightIsOn; if it is TRUE the web client displays the toggle on icon, if it is FALSE, the toggle off button is rendered instead.

Go to Part 2!