12/16/2023 0 Comments Clicky game reactYour leaderboard will use it to show the current ranking. leaderboard: This is the array of fake players.authenticate: This is the same parameter that you were adding to the Login component in the previous version.The purpose of passing this parameter is to make your leaderboard highlight the current player. For now, you are using one of the fake players defined before so you can see how everything works. currentPlayer: This defines who the current player is.Then, inside the svg element, you added the Leaderboard component with the following parameters: These players have the following properties: id, maxScore, name, and picture. In the new version of this file, you defined a constant called leaderboard that holds an array of fake players. propTypes definition and export statement src /components directory with the following code: import React from 'react' import PropTypes from 'prop-types' const Login = ( props ) => //. To do this, create a new file called Login. The next step is to add a login button in your game, so your players can authenticate via Auth0. However, before using these values, you will need to code a little.įor starters, you will need to issue the following command in the root directory of your game to install the auth0 -web package: npm i you will see, this package facilitates the integration between Auth0 and SPAs. The last two things you will need to do is to copy the values from the Domain and Client ID fields. br).Īfter inputting all your URLs on this field, hit the Save button or press ctrl + s (if you are using a MacBook, you will need to press command + s instead). So, if you are going to publish your game on the web, be sure to add its public URL there as well (e.g. As the dashboard explains, after the player authenticates, Auth0 will only call back one of the URLs in this field. The first one is to add the http : / /localhost : 3000 value to the field called Allowed Callback URLs. There are three things that you will need to do in this tab. Instead, you will need to use the Settings tab, so head to it. As you will learn how to integrate React and Auth0 in this article, you won't need to use this tab. When you click this button, the dashboard will redirect you to the Quick Start tab of your new application. You can type Aliens, Go Home! as the name and choose the Single Page Web Application type (your game is an SPA based on React after all). The dashboard will show you a form where you will have to inform the name of your application and its type. To do this, head to the Applications page on the Auth0 dashboard and click on the Create Application button. If you don't have one yet, you can sign up for a free Auth0 account hereĪfter creating your account, you just have to create an Auth0 Application to represent your game. To make Auth0 manage the identity of your players, you have to have an Auth0 account. This feature will enable players to sign in, so your game can track their max score and show their rank. The first thing you will do to make your game look like a real game is to implement the leaderboard feature. You can find the final code developed in this article in the following GitHub repository: Aliens Go Home - Part 3 Implementing the Leaderboard Feature in Your React Game The knowledge acquired throughout this series will also allow you to create other types of animations that are orchestrated by React and Redux, not only games. TL DR: In this series, you will learn how to make React and Redux control a bunch of SVG elements to create a game.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |