Over the years, with the advancement of technology, different breakthroughs have been made in our interaction with computers. The experience that was limited to viewing 2D objects on a screen has evolved to the stage that we have augmented reality and virtual reality, in which we can have an immersive experience in our applications with the help of headsets connected to our machines. We will explore building an application using React VR.

This opens up endless possibilities. It allows users to experience computers and the world like they have never done before. From Virtual Tours of Tourist Centres to magnificent virtual reality games with Oculus and Vives.

In this article, we are going to be looking at how to build a scoreboard with running commentary to give sports lovers a different way to experience games.

Requirements – build-scoreboard-running-commentary-react-vr

To get started, you would need the following:

  • NodeJS and NPM installed locally.
  • Basic knowledge of JavaScript.
  • Knowledge of ReactJS.

When you have the requirements listed above, let’s continue with the article.

Creating the project with React VR

First, we need to install the React VR CLI tool. We will need this to initialize new ReactVR projects. To install the tool, run this command on your terminal:

npm install -g react-vr-cli

Once this is done, we create our simple ReactVR project. To create a ReactVR application run the following command:

react-vr init scoreboard-vr

react-vr init

To start the development server, run this command on your terminal:

cd scoreboard-vr
npm start

Now that we have set up the base application, you can view the app here: http://localhost:8081/vr/. This will launch something similar to this:

3D preview

Creating scenery

When you create the project using the init function, some basic files are created by default. Since we are making a scoreboard application, we want to set the scenery. In the index.vr.js replace the contents of the render function with this:

[...]
render() {
return (
<View style={{
flex: 1, flexDirection: 'column', width: 2, alignItems: 'stretch'
}}>
<Pano source={asset('lille-pitch.jpg')}/>
</View>
[...]

We set the source to the image in our static_assets directory . When you visit the app, we have:

Scenery screenshot 1

Scenery screenshot 2

Changing the background

If you wish to change the background, you can do so by placing the image you want in the static_assets folder and then supplying the relative path to the image in the Pano component of your index.vr.js:

[...]
<Pano source={asset('relative/file/path')} />
[...]

Components

For this application, we have one basic component, the commentary component. This component, as the name suggests, is responsible for displaying commentary as the game goes on. Ideally, we can get comments using an API or a service, but in this case, we are going to use some stock JSON data obtained from Goal.com.

Teams component

We create a component that displays the teams, we make a components directory and then create Teams.js in it:

mkdir components
touch Teams.js

Our Team component looks like this:

import React, {Component} from 'react';
import {
View,
Text,
} from 'react-vr';

export default ({teamA, teamB}) => {
return (
<View>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
layoutOrigin: [0.5, 1],
paddingLeft: 0.1,
paddingRight: 0.1,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{ translate: [0, 0, -4],}],
width: '50'
}}
>{teamA} vs {teamB} !</Text>
</View>
);
}

In our index.vr.js we use the component:

[...]
import Teams from './components/Teams';
[...]
export class scoreboard_vr extends React.Component {
render(){
[...]
<Teams teamA={"Losc Lille"} teamB={"Moncao"} />
[...]
);
}

Now when we go back to our app, we have this:

Scoreboard with teams

Commentary component

Our comment component is also a text component, but here, we display the time and what occurred at that time. We make the file by running the following in our components directory:

touch Commentary.js

Our Commentary.js looks like this:

import React, { Component } from 'react';
import {
View,
Text,
} from 'react-vr';

export default ({ time, comment }) => {
return (
<View>
<Text
style={{
backgroundColor: '#ffffff',
color : '#333333',
fontSize: 0.8,
layoutOrigin: [0.5, 0],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{
translate: [0, 0, -7]
}],
}}
>{time} - {comment}</Text>
</View>
);
}

Comment model

In our comment model, we have our comments stored in an array as shown in the file below. We create a model directory in the root of our application and then create the comment.js file that is shown below:

mkdir models
touch comments.js

Add this code to comment.js file:

export class Comments {
comments =
[
{
"time": "1",
"comment": "Attempt blocked. Falcao (Monaco) right footed shot from the left side of the box is blocked. Assisted by Stevan Jovetic."
},
{
"time": "3",
"comment": "Foul by Falcao (Monaco)."
},
{
"time": "3",
"comment": "Ibrahim Amadou (Lille) wins a free kick in the attacking half."
}, {
"time": "5",
"comment": "João Moutinho (Monaco) wins a free kick in the defensive half."
}, {
"time": "5",
"comment": "Foul by Thiago Maia (Lille)"
}, {
"time": "5",
"comment": "Offside, Lille. Yves Bissouma tries a through ball, but Anwar El Ghazi is caught offside."
}, {
"time": "24",
"comment": "Goal! Lille 0, Monaco 1. Stevan Jovetic (Monaco) right footed shot from outside the box to the bottom right corner."
}, {
"time": "90",
"comment": "Match ends, Lille 0, Monaco 4."
}
];
}

Displaying our comments

In our index.vr.js we fetch the comments and then display them via a loop in the view. Instead of displaying all our comments at once, what we can do is to display the comments in particular chunks. In this case we are going to display them four at a time:

[...]
import Commentary from './components/Commentary';
import { Comments } from './models/comments';
[...]
export class scoreboard_vr extends React.Component {
constructor(props) {
super(props);
this.state = {
comment_index: 0,
};
}

componentDidMount(){
let comments = new Comments().comments.length;
setInterval(() => {
this.setState({
comment_index : (this.state.comment_index > comments.length) ? comments.length-4 : this.state.comment_index+3
})
}, 5000);
};

render() {
let comment_list = new Comments().comments;
let comment_length = comment_list.length;
let comments = (this.state.comment_index < comment_length ) ?
comment_list.slice(this.state.comment_index, this.state.comment_index+3) :
comment_list.slice(comment_length-1, comment_length);
return (
[...]
{comments.map(function (comment) {
return <Commentary time={comment.time} comment={comment.comment} />
})}
[...]
);
}
};

We first set the comment index to zero and then the final view is updated periodically using the ComponentDidMount method. So if you were fetching your data from an external API, you could keep fetching data and updating by placing the logic to fetch the data in the method.

Board with comments

Styling the Comments
To adjust how close the comment view is to the user, we revisit the commentary component. Instead of making the comments appear so close to the user, we adjust the distance from the user in the styling by changing the Commentary.js component style to :

[...]
export default ({ time, comment }) => {
return (
[...]
<Text
style={{
backgroundColor: '#ffffff',
color : '#333333',
fontSize: 0.8,
layoutOrigin: [0.5, 0],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'left',
textAlignVertical: 'center',
transform: [{
translate: [1, 1, -15]
}],
width : 15
}}
>
[...]
</Text>
[...]
);
}

In the above, we set :

transfrom: [{ translate: [1,1, -15]}]

This moves the commentary text to about 15m away from the user and this can be adjusted to fit your preference.

Board repositioned

Conclusion

In this article, we have successfully seen one of the many implementations of React VR and how to use it. Here’s a link to the GitHub repository if interested.