udacity / nd032-c3-asynchronous-programming-with-javascript-project-starter

This repo contains the starter files for the project of the course

Welcome to the One and only UdaciRacer Simulation Game

Project Introduction

Here is a partially built-out game that races cars—your job is to complete it! Throughout the game logic, you will find "TODO" comments that must be completed in order for the game to work. You are going to use the asynchronous skills you gained in the course to fill in the blanks in this game.

The game mechanics are this: you select a player and track, the game begins and you accelerate your racer by clicking an acceleration button. As you accelerate so do the other players and the leaderboard live-updates as players change position on the track. The final view is a results page displaying the players' rankings.

The game has three main views:

1. The form to create a race

2. The race progress view (this includes the live-updating leaderboard and acceleration button)

3. The race results view

Starter Code

We have supplied you with the following:

1. An API. The API is provided in the form of a binary held in the bin folder. You never need to open the binary file, as there are no edits you can make to it. Your work will be 100% in the front end.

2. HTML Views. The focus of this course is not UI development or styling practice, so we have already provided you with pieces of UI, all you have to do is call them at the right times.

Getting Started

In order to build this game, we need to run two things: the game engine API and the front end.

Start the Server

The game engine has been compiled down to a binary so that you can run it on any system. Because of this, you cannot edit the API in any way, it is just a black box that we interact with via the API endpoints.

To run the server, locate your operating system and run the associated command in your terminal at the root of the project.

Your OS	Command to start the API
Mac	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-darwin-amd64
Windows	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-windows-amd64.exe
Linux (Ubuntu, etc..)	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-linux-amd64

Note that this process will use your terminal tab, so you will have to open a new tab and navigate back to the project root to start the front end.

WINDOWS USERS -- Setting Environment Variables

If you are using a windows machine:

1. cd into the root of the project containing data.json
2. Run the following command to add the environment variable: set DATA_FILE=./data.json

If you still run into issues running the API server on your machine, you can run this project in the Udacity classroom.

Start the Frontend

First, run your preference of npm install && npm start or yarn && yarn start at the root of this project. Then you should be able to access http://localhost:3000.

Project Requirements

This starter code base has directions for you in src/client/assets/javascript/index.js. There you will be directed to use certain asynchronous methods to achieve tasks. You will know you're making progress as you can play through more and more of the game.

API Calls

To complete the project you must first create the calls to the API. These will all be fetch requests, and all information needed to create the request is provided in the instructions. The API calls are all at the bottom of the file: src/client/assets/javascript/index.js.

Below are a list of the API endpoints and the shape of the data they return. These are all of the endpoints you need to complete the game. Consult this information often as you complete the project:

[GET] api/tracks List of all tracks

• id: number (1)
• name: string ("Track 1")
• segments: number

[GET] api/cars List of all cars

• id: number (3)
• driver_name: string ("Racer 1")
• top_speed: number (500)
• acceleration: number (10)
• handling: number (10)

[GET] api/races/${id} Information about a single race

• status: RaceStatus ("unstarted" | "in-progress" | "finished")
• positions object[] ([{ car: object, final_position: number (omitted if empty), speed: number, segment: number}])

[POST] api/races Create a race

• id: number
• track: string
• player_id: number
• cars: Cars[] (array of cars in the race)
• results: Cars[] (array of cars in the position they finished, available if the race is finished)

[POST] api/races/${id}/start Begin a race

• Returns nothing

[POST] api/races/${id}/accelerate Accelerate a car

• Returns nothing

To complete the race logic, find all the TODO tags in index.js and read the instructions.

nd032-c3-asynchronous-programming-with-javascript-project-starter's Issues

Running `http://localhost:8000/api/races/{race_id}/start` is throwing an error

Hi,

The server.exe is throwing the following error in the terminal when I try to start the race using http://localhost:8000/api/races/1/start endpoint. Before invoking this endpoint, I ran the http://localhost:8000/api/races endpoint to create the race. It successfully gave me the race id.

Created the race successfully

Starting the race is giving an error

Server terminal throwing an error while starting the race

renderAt throws an error length of null

nd032-c3-asynchronous-programming-with-javascript-project-starter/src/client/assets/javascript/index.js

Line 300 in 9d55121

function renderAt(element, html) {

function renderAt(element, html) takes in the parameters elementEither the id or the class name of the element at which to render and the HTML the actual content to render the check inside

	if (element.match(/^\./).length) {
		node = document.getElementsByClassName(element)
	}

	if (element.match(/^#/).length) {
		node = document.getElementById(element)
	}

Either of the condition will always fail ie when the id is supplied the class will fail as the evaluation
element.match(/^#/).length will be evaluating length of null the reverse is true.

fetch requests don't work in the workplace

There is an issue running the backend server on the workspace & windows.

Incorrect track information after starting the race

Regardless of which racer and track I choose It always returns track 1 within the renderRacerStartView();
I have been advised by one of the mentors that it might be related to the issue with the starter code.

handleAccelerate inconsistent signature and function call.

nd032-c3-asynchronous-programming-with-javascript-project-starter/src/client/assets/javascript/index.js

Line 73 in 9d55121

handleAccelerate(target)

handleAccelerate is invoked at this line with the event target as param however the signature does not have parameters.

Issues launching server

On the main readme the the docs tell you to use the argument before calling the executable, it should be the other way around. Instead of this:

WRONG

Your OS	Command to start the API
Mac	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-osx
Windows	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server.exe
Linux (Ubuntu, etc..)	ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-linux

It should be this:

RIGHT

Your OS	Command to start the API
Mac	./bin/server-osx ORIGIN_ALLOWED=http://localhost:3000
Windows	./bin/server.exe ORIGIN_ALLOWED=http://localhost:3000
Linux (Ubuntu, etc..)	./bin/server-linux ORIGIN_ALLOWED=http://localhost:3000

Missing close brace for returned promise

nd032-c3-asynchronous-programming-with-javascript-project-starter/src/client/assets/javascript/index.js

Line 136 in 9d55121

}

This line lacks a closing ) brace in the starter code.

Please fix this typo

There is a typo in the starter code, it is located on line 185 which gives an error in the console.
It is written "reuslts", where obviously should be "results".
Check the screenshot attached:

Thanks and see ya!

Windows defender says that the files contains trojan

When I try to download the starter files I get the following threat:

Insufficient(no) parameters supplied to function

nd032-c3-asynchronous-programming-with-javascript-project-starter/src/client/assets/javascript/index.js

Line 87 in 9d55121

renderAt('#race', renderRaceStartView())

The function signature is
function renderRaceStartView(track, racers)
However it's call on the above line without params and inside the function, it looks like the function cannot do without the track hence the function will raise a reference error when executing this line <h1>Race: ${track.name}</h1> I think it should either implicitly be specified as Todo or to the minimum the track be passed.

Incompatible node version

Since Async functions are not supported in Node versions older than 7.6 that would be a great idea to provide information regarding proper Node version in README file.
As I initially had Node version 6.9.5 I got following error as I was trying to start Frontend.

yarn run v1.17.3
$ node src/server/index.js
/udacity/nd032-c3-asynchronous-programming-with-javascript-project-starter/src/server/index.js:18
app.get('/', async (req, res) => {
                   ^
SyntaxError: Unexpected token (
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```