NodeChat Development

Have gotten a bunch of PR’s this past week, since this is the last week of class. Everyone is finishing up their release 4,  which means the project has made some great progress.

We now have the continuous integration system Travis, that helps with managing the app. And, we are working on es-lint and prettier, there is still some configuring to do but it’s almost up and running.

So with all the changes, there was a bit of backtracking I had to fix. One of the PR’s changed how the messages were sent to the screen but they forgot to change some corresponding code, so it ended up breaking the messages altogether so no messages would display correctly on the screen. It was a pretty easy fix, but I am not sure about keeping it. The change puts the JSX for a message into a variable, then we just render that. The problem with that is it doesn’t get updated anymore when state changes. I have to look into it more later, but I might have to go back to making the JSX just before it is rendered.

Here is the PR that fixed the above bug and a few others: https://github.com/OTRChat/NodeChat/pull/72.

The other bugs include:

  •  package.json – formatting bugs that formed when I did a manual merge.
  • Fixed avatar’s so you can now upload custom avatars. This change required changes to the server aswell, this is the PR that changed the server https://github.com/OTRChat/server/pull/4.
  • package-lock.json – There was a problem merging so I just deleted the old version and made a new one.

 

 

Finding a JS bug using chrome developer Tools

Another issue was filed in the cube-roll project, Issue #4 which was a problem with the games score not updating. It turned out to be a small fix but I wanted to go through how I found where in the code the bug was.

I first started the game and duplicated the problem.

I then looked through the code and find what I think gets called when I get a point. I found that line 90 of the world.js file is where the logic for updating the score was.

After finding the area of code where I thought the problem could be, I opened the developers tools in chrome and then I navigated to the sources tab. In the sources tab I navigate to the file I want world.js. I can now setup breakpoints, after that I started the game and duplicated the problem again. This time since I setup the breakpoints the game pause on the breakpoint and I could look at the values of the data in the developer tools.

As you can see in Figure 1 this is what happens when you trigger a breakpoint.

A snippet of the chrome developer tool
Figure 1

After doing the above a few times in multiple areas of the code, I located the line of code with the problem. Inside, hud.js there is the function setText() that is called from line 98 of the world.js file.

Inside setText() I found the below typo:

setText(id, text){
    this.elements[id].test=text; // .test should be .text
    this.redraw=true;
}

Now that I found the problem I was able to fix the typo and submit a PR:

https://github.com/mklan/cube-roll/pull/5

Fixed restart bug in Three.js game cube-roll

While I was looking for a game to help develop, I found the game cube-roll on github.

The bug I fixed was issue 1 : cannot restart game, the problem occurred after you play a round, the game will freeze and you were not able to restart it.

This turned out to be a fun project to work on, it was challenging at the start. Since, I have never worked on a game before so I didn’t know what the code was doing. But after looking through the code for a bit, I found out that the game was using Three.js. Three.js is a javascript 3D library I was able to learn a bit more from their docs on what the code was doing.

After learning the code, I found out were the problem was, it turned out most of the code was already their it was just not working correctly. The problem resided in the main function, when the game is over and the user pressed enter, it would cue a .once() command in the main. Originally it just called the main again to restart the game. The problem was the game never got cleared so the old game was still running.

In order to fix the issue I used the following code, it first calls the constructor on the world object hence clearing and restarting the game. I then pass that world object back to main to restart the game. The important factor was I am not ever creating a new world just resting it.

sync function main(connectToServer, world = undefined) {
  renderPause = true;
  if(!world){
    world = await new World();
  }
  world.playerControls.once('enterWhenGameOver', async () => {
    await world.constructor();
    main(false,world);
  });
  if (connectToServer) {
      server = await initServer;
      server.on('clientKeyUp', key => {
        world.playerControls.processRemoteControl(key);
      });
  }
  renderPause = false;
  if (!tickingStarted) {
    tick(world, server);
  }
}

The reason I do not want to loose the world object is because it is being used in the tick() function. The tick function is what refreshes the game it contains a reference to the world object, so that is the reason I needed to keep the same instance of world object when the restarts.

function tick(world, server) {
  requestAnimationFrame(() => tick(world, server));
  if (!renderPause) {
    tickingStarted = true;
    world.update();
    world.render();
    server && server.stream();
  }
}

Here is a link to my PR: https://github.com/mklan/cube-roll/pull/3