Tag: JavaScript

There’s some progress! Since I first started coding this thing it went through a lot of changes:

I ditched Redux and redux-like states on server-side. That was probably already mentioned in the last post. Generally I need to focus on mutations, not replacing the whole state with every tiny change (immutability).

I ditched React for client-side rendering. I wanted to have some nice animations which would move the cards from one place to another. That worked quite well until I then needed to position everything around the circle + around each player in a game screen, where you don’t know the exact number of players upfront.

Added pixi.js for the rendering. I’m somewhat familiar to this rendering as I played around with Phaser game engine for a tiny bit.

Structure, and how to send it to browser

On server most of the objects have a reference to its parent element. This will help me decide ownership of each object and position in the game. Some cards may be held in hand, others may stay in deck of cards, and each of those containers may belong to a Player. The root object in my structure is still some imaginary “root”, because some object may just be lying on the table. Neutral and not belonging to anyone yet.

The problem appeared the first time I tried to send that data to the client. Server shuts down with stack overflow error.

As a guy who used to create tiny, tiny games, I thought that adding “multiplayer” to my tool-belt could be the next step forward. JavaScript is the main language for me now (as I got hired as web developer) so Node.js is the way to go. But… I quickly remembered the last time I wanted to create something with Node.js – sweat, pain, some sleepless nights and unfinished apps. Maybe that was just my ignorance back then, and general lack of discipline? I watched couple of courses about Node.js to refresh my knowledge and opened up new window in Visual Studio Code.

Yeah… Multiplayer Javascript

So whats the plan? Express? How do I WebSockets, client connections, rooms, server-side, client-side, i hit my face with both open hands in despair again. I imagined all the work that will need to be done BEFORE actually making any game or “app”. Quick google for “multiplayer game server node js” revealed to me couple of bootstrap options.

Pomelo (which I believe I saw earlier somewhere) looked mature, but after opening their GitHub issues It was clear to me that I wouldn’t fit their community – most of the issues were in Chinese.

Lance was next in line. Went through the features list – lookin’ good! But let’s continue the research.

Then I found Colyseus. I admit, I fell for the “match-making” point from their feature list. This feature could probably be done with more or less time in other engines too. It has a client-side JS implementation in different repo, It also has client integration with Unity3D and Construct2. Colyseus is new, right now at version 0.5, still being worked on… Ah, what the hell! Let’s clone that example and see how it works. I don’t have that much time to prepare a full-blown research with pros and cons of each library.

So in couple of hours I managed to make a working chat room. My example project uses Webpack with webpack-dev-server for the client-side code, to speed up development and manage my js/html code better. I try to follow all the rules and good practices now, can’t allow myself to write spaghetti code anymore. So I start writing with ES6 and use neatly arranged modules. After a minute I hit that roadblock again:

Node doesn’t understand import… Let’s transpile it! Should I transpile it? That’s adding another build tool, more time, more complexity… Quickly I broke the cycle of though and found this article “Don’t transpile JavaScript for Node.js“, and I also got a reply on Twitter, extending on this topic:

I couldn’t find anything in the Twitter Embedded Timelines documentation that would let me set refresh interval so I made my own. At first I thought I could simply reset the iframe’s src attribute, which usually would reload frame’s content. But Twitter’s widget didn’t had src attribute.

I found a solution. It’s really quick and dirty one, but it works. You can get and modify it to your needs. I’ve only tested it with list’s timeline.

The problem

Calling setTimeout or setInterval from an object can be sometimes problematic. The timers are executed outside of your object’s context. You loose reference to your object and can only work with global variables. this suddenly points to window instead.

Solution

I’ve found out that there are plenty of ways to achieve it only after I published this post online. You can use whichever you suits your needs.

using closure

bind(this);

Immediately executing function expression

But first lets see what we’re working with. For all three methods we’ll use the same object, only one function will look different. We’re creating new object of type Person with name Steven and make him say his name after the delay using setTimeout.

Recently I’ve found this interesting Pixel Sprite Generator. You can create procedurally generated sprites on the fly. It uses ala 2D array of values to draw solid outline, “soft” body or an empty pixel. Provide just one mask and get milions of variations.

I can see it being used in rougelike games, besides procedurally generated levels: enemy sprites, weapons, items, EVERYTHING.

If you have a component with tabs in your non-mobile website you don’t think about “how will those look on smaller screens?” You already know it’s going to look ok but switching between tabs will not feel comfy in most cases. Instead you should wonder “how do I make it work well on mobile?” or “how to make tabs usable on smaller screens?”. Creating responsive tabs is important to make the website usable in every environment.

“Tabs”, how-to

Depending on a number of tabs in your component, making it look and work just like in desktop may not always be the best idea. You can make tabs a little bigger to make them easier to hit with your fingers. Sure, that’ll work on a component with 2 or 3 tabs (with small, non-descriptive captions on them). What if your component have more then 3 tabs or even better – dynamic number of tabs? Predicting the numbers and making silly styling adjustments for each of them is like ignoring a huge hole in your room and stepping over it, everytime you want to get out. 😀

The perfect solution doesn’t need to be a hard one if you start thinking in Responsive Web Design and It doesn’t require any bloated jQuery plugin. While we’re still going to use a little bit of jQuery, It will only be used to switch between CSS classes.

There are many different ways to achieve nice and fluid off-canvas navigation in mobile websites. Some simple solutions can be easily implemented in you mobile app without too much of a trouble. The problem comes when we want to create menu similar to those in native apps, like Google+ or new Gmail app. We start to design it on the computers, we put some JS and CSS definitions – everything works fine! By the time we open our app on the phone we realize that something is not quite right… and it get’s even worse on other or older devices.

Imitate native app’s navigation in HTML

On the new YouTube app, we have a combination of a fixed header and off-canvas menu. When we pull out menu, the rest of the containers stays on place. We can easily swipe through the list in menu and swipe it off to hide it.

I wanted to create similar menu, which slides in from left side of the screen when I tap a logo and hide it when I tap it again.