So we decide to try out a framework per week to build a simple battleship game. This is gonna be a 4 weeks POTW challenge. Since I am working on a product relate to websocket, I have a crazy idea popping up.
“Hey ~ it’s gonna be so cool if I can build a websocket server to manage the game in real time. So people can battle with each other online.”
It tooks me for a weekend to come up the source code. I build the game server with node.js, socket.io, express. Those are well built packages and works great.
And I come up a command line based interface example for pitching my colleagues. The idea is, server side leverages the communication and game logic. Client side just focus on actual UI. As long as the clients on the same channel, no matter what UI it is, they can start the game and fight with each other.
I make it open source and put it on github.
POTW kick off. This week we are trying out “REACT” which I play around recently but haven’t use it for any project yet. Seems like it’s goona be a good practice for me.
The first challenge is how to make the interactive maps. React is not directly manipulating DOM which I can’t do it like jQuery way. What I can do is only manipulating data and then pass to React to render. I must to find a way to translate data and game state to real presentation. My solution is predefined a series of CSS class for sizing and positioning. By mixing the css class I can pretty much get any possible state of display.
The second challenge is to get used to React and flux flow. I choose fluxxor as my flux engine and I find out I;ve already used the same concept before I heard this fancy term “FLUX” in many other projects. This design pattern might be the best way to handle async data flow so far.
Here is the outcome.
I like React but I realize if I want to unleash the power of it. I should write my code on server side and build the production code with browserify and gulp. So every single component, flux datastore can be modularized. And then by natural of node require system, all dependency issues can be solve like a charm. Which sounds pretty amazing, I will spend more time digging into it.