Rewrite to ES6

[krtr]

It would involve new code layout and some time so new branch for this task should be created in main repo. #80

[krtr]

using Browserify was mentioned by @danprince

[krtr]

I can split client code into something like that:

1. Player module for Player class and CurrentPlayer class which extends Player class to add input handling
2. PlayerList module for PlayerList class which has lists of all players maybe also similar class for food

[danprince]

I would recommend breaking it up into:

• Rendering module
• Game/State module
• Chat module
• Events module

Rendering module is completely independent of state, just needs to know about what should be on screen at a given point.

Game/State module keeps track of data that has arrived from the socket in the events module as well as passing mouse/keyboard inputs to the server (through the events module).

Chat module just handles rendering chat messages and passing input to and from the events module.

Events module is the wrapper for all of the socket stuff. Everything else hooks into here.

Quite happy to do any of the above and pretty comfortable with ES6 too.

[krtr]

@danprince Your way looks better than mine I'm with you :+1:

[danprince]

Initial feelings on this as a style?

https://github.com/danprince/agar.io-clone/blob/es6/client/js/render.js

[krtr]

@danprince Bowserify is laying in es6-refactor branch so you can pull if you want, and the code looks quite nice. :+1:

[danprince]

Cool, nearly finished modularising + ES6ing all of the client side.

[igorantun]

Removing help wanted tag since there's already people working on that :)

[Again]

Hi, what is left to do on this branch? I did a quick test and it seemed to be working pretty good except for a bug parsing chat commands.

[danprince]

Discussion continued with PR #128

[abalabahaha]

So are people still up for this? the es6-refactor branch looks incredibly outdated at the moment.

[keithagroves]

yeah, if anyone is willing to dedicate some time to it. It would be nice.

[underGhost]

The day has come! I have completely refactored the site to use es6.

https://github.com/underGhost/agar.io-clone/tree/es6-refactor

What did you do?

• Took the guts of the current site and converted to es6.
• Refactored the code and removed 99% of linter errors (there was a lot of hoisting and methods called before being declared).

What came of it?

• Cleaner code
• Easier maintainability
• Pretty es6 things
• Helped with the games latency

What is still needed:

• Testing - I have tested pretty much everything except player consumption.
• Build System - I need to refactor the site to build server side.

Contributors

• Need help with the thinks listed above.
• If you contribute I recommend using Atom if you're not already. I use the following packages to help with linting:
  • language-babel, linter, linter-eslint

Please let feel free to contribute in any way and pull it down to give it a test!

[huytd]

Wow! Awesome man! :+1:

Since we use ES6, how about using template string? https://github.com/underGhost/agar.io-clone/blob/es6-refactor/server/index.js#L63

[underGhost]

Thanks! I'll be sure to update all of them :+1:

[underGhost]

Updated the strings to template strings @huytd

[huytd]

Great! Do you want to make a pull request to es6-refactor branch of this repo?

[igorantun]

@underGhost That looks awesome! Great job :smile:

[underGhost]

Thank you!