Playing the RoShambo Game

Firstly, access the game application by navigating to the frontend route URL provided in the OpenShift web console.

The current version of the game does not include the camera feature, so you’ll be playing against the computer in a dummy mode. Once the frontend loads, you’ll see the main screen where you can click Start Game, learn how to select your move (rock, paper, or scissors), and select Join Game. You’ll then be taken to the waiting lobby to begin.

In the waiting lobby, we can now head to the administration backend to start the game. To do this, navigate to the backend route URL provided in the OpenShift web console Topology.

You’ll be prompted to enter the credentials, which are below, but can also be found in the application.properties file in the roshambo-backend directory of the project.

Username:

Password:

Once you’ve logged in, you’ll see the administration dashboard where you can start the game by clicking the New Game button.

After starting the game, head back to the frontend and select your move. The computer will also select a move, and the game will display the result when the timer is finished. Generally, we’d give the frontend link to users, and display the administration page on a main screen.

To enable the camera feature and play the game using hand gestures, we need to update the game application deployment. First, open the Argo CD web interface and navigate to the game application, and select APP DETAILS.

Here, select PARAMETERS from the dropdown menu, and hit EDIT. Locate the backend.image parameter and change its image tag to camera.

Now, save the changes and wait for Argo CD to update the game application deployment.

Once the deployment is updated, refresh the game application in your web browser. You should now see a prompt requesting access to your device’s camera. Allow camera access to proceed.

The game will now use your device’s camera to capture your hand gestures. Make a gesture representing your move (rock, paper, or scissors) in front of the camera.

When you make a hand gesture in front of the camera, the game application captures the image using the device’s camera API. The captured image is then sent to the backend API as part of the game request, and will determine your move based on the hand gesture.

The game will then display the AI’s move and the result of the game (win, lose, or draw).

In this section, we explored the different ways to play the RoShambo game. We started by playing against the computer without the camera feature, then enabled the camera feature to play using hand gestures. In the next section, we’ll all play together!