Posted on

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

Posted on

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

 

Posted on

Continue development of chat app.

Development on the chat app has been going good. Few things I would like to get finalized would be a continued integration system, linting, tests and database.

I think travisCI would be a great addition to the repo. Took a class today that explained how to implement travisCi into a GitHub repo. It looks like it will be pretty easy, might add it this week.

To make travisCI really useful it need’s to be doing more then just running the app as the test. It is capable of running linting software like eslint and actually test that could be created for the app.

I would also like to start research on the best options for incorporating a database into the app. I created a discussion thread here, I would like other people’s opinion in making this choice.

Also, for release 3 I found a external project to contribute to on GitHub. It was interesting, it required me to get into a bit of Ruby which was interesting. Here is the PR made for the code-gov-style project.

Posted on

Hacktoberfest – Added user is typing… feature using React and SocketIO

This blog post covers my 5th pull request of Hacktoberfest 2018!!!! For a few days I wasn’t sure if I would be able to reach the 5 PR goal.  I got super busy with another project, which I may put a blog post up about that project sometime. I was able to work hard on Hacktoberfest the past couple day’s and now I am done all 5 PR’s!!!

Back to the topic of this post I’ll put a summary blog post of Hacktoberfest soon.

I add the feature that show’s when a user is typing which was requested in issue #1 of the node chat project.  Here is the link to the pull request.

In order to accomplish this task I used two events on the server side. ‘typing’ and ‘stop typing’.

Server Code
socket.on('typing', function(){
    socket.broadcast.emit('typing', {
      username: socket.username
    });
  });

  socket.on('stop typing', function(){
    socket.broadcast.emit('stop typing', {
      username: socket.username
    });
  });

For the client code I put the two event listener’s inside the componentDidMount().

The event listener for ‘typing’ add’s the user name to a state variable ‘userIsTyping’ which is an array of the user names that are typing.

The event listener for ‘stop typing’ removes the user name from ‘userIsTyping’.

Client Code
componentDidMount() {
  this.state.socket.on('typing', (user) => {
      if(this.state.username!==user.username){
        if(!this.state.userIsTyping.find(function(users){
              return users==user.username;
           })) {
          this.setState({userIsTyping: [...this.state.userIsTyping, user.username] });
        }
      } 
  });

  this.state.socket.on('stop typing', (user) => {
    if(this.state.username!==user.username){
       this.setState({userIsTyping: this.state.userIsTyping.filter(function(users) {
           returnusers!==user.username;
         })});
       }});
    }
  }
}

The function below is used to retrieve the content of the input field. It will emit ‘typing’ if there is anything inside the input field and it will emit ‘stop typing’ when there is nothing inside the input field.

setChatInput(event) {
  if(event.target.value !== ""){
    this.state.socket.emit('typing', this.state.username);
  } else if(event.target.value === ""){
    this.state.socket.emit('stop typing', this.state.username);
  }
  this.setState({ chatInput:event.target.value });
}

The end result looks like this:

Posted on

Hacktoberfest Week Two – React and Push.js

In this week of Hacktoberfest, I added push notifications to the Node Chat project in my most recent Pull request. I used the Push.js library in order to accomplish this task. Well learning how to do this, I din’t find much documentation on using Push.js with React so I put together a small tutorial for today’s blog.

Integrating Push.js with React

Natively, there is currently no solution to use Push.js with React. In order to use Push.js with react you have to use it as an external libraries. Below is how I added Push.js to React as an external library.

First step:

Include the script file in the main “index.html” file for your app.

I used a CDN to do this:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>

Second step:

Import Push.js into your file.

Put the following line at the top of the .js file you want to use Push.js in.

import * as Push from "push.js";

After importing Push.js you can now create push notifications inside your react app.

Here’s an example of how to create a notification in a react component.

notify(){
 Push.create("Hello world!", {
     body: "Thanks for reading my Blog!",
     timeout: 5000,
     onClick: function () {
         window.focus();
         this.close();
     }
 });
}