Twing
History
Let me share how Twing came to be.
NodeJs
In 2013 while I was working in ITONICS Nepal. I heard about something called NodeJs. It was still in the early phase of development as v1 was not released yet. But I have heard that you could use it for real-time applications, like live chat on your website.
The initial motivation to learn NodeJs was because I was working on the Messaging feature in one of the projects at work. So I started reading documentation, and finally set up my hello world project.
It was just a simple js with http module that started an HTTP server at some port and returned plain text “Hello world”. The filename was hello.js
Socket.io
Then I discovered socket.io while googling about real-time application/chat, etc. So the next enhancement to my hello.js was to add the socket.io module and make hello not come from the hello.js but from different users that are using the app. So I started with the classic socket.io chat app. It was easy. I ended up with a simple real-time chat application but it was mind-blowing 🤯.
Because I just created a chat app, I renamed my file from hello.js to chat.js
If you look at Twing today, you will still see the chat section. So basically the chat function is the oldest feature in the whole app.
Its taking shape isnt it? 🤡
Mouse pointer tracking
So, after writing a chat app, I was really thinking of some ideas. Probably every developer who learned socket.io should have already built the chat app. So I came up with mouse pointer tracking. The idea was: when a user moves their mouse on the page, all other users see their pointer with their names on the pointer.
Nothing crazy, it was a similar approach to the chat app, just instead of sending the message, it was sending coordinates repeatedly. So, if you play Twing today, you will see some arrows with a little text on them, moving randomly on your screen. Those are actually mouse pointer of other real people who are actually moving their mouse pointers on their screen. So that’s the second feature.
Until now the file name was still chat.js
Virtual Room
Now I started thinking of something more. I thought of a real-world room with stuff lying around. Like telephone, books, and things like that that can be moved around, while chatting in my chat app.
Starting with basics
The first object was a circle I drew using a div with border-radius: 50% . Made it draggable using jQuery UI draggable. I could drag it around on the page, now had to send that info, just like my mouse pointer’s coordinates, to other users, exactly the same problem again. Easy. Peasy.
Now what I ended up with, was a circle on the screen that can be dragged by anyone and will be visible to everyone else that they dragged it. I thought of sharing it with my colleagues. I shared the url to a colleague sitting next to me and asked him to drag the circle, and I dragged it too, he saw whats going on, mindblown. 🤯
Draggable.js
With that, I decided to change the file name to draggable.js which is stupid I know 😀 which stayed for quite some time. Probably I was too busy developing feature than renaming it to something that made sense.
I just added a couple of more circles before adding pngs of chairs, phones, or books from my original idea. What happened was when we were dragging those circles, it felt like it would be a nice idea to drag them and put them in your pocket, as if they are coins, and you have a pocket, drag them into your pocket and you get that coin. Then I started thinking of a droppable.
Carrom Board
So initially I thought like a Carrom Board I ll just put those pockets on the corners of the screen, but that limited it to only 4, and the draggable.js could be used my unlimited* number of people.
Then I thought of adding numbers to the coins and add 1 pocket for each coin, so new RULES!!! Anyone who pockets right coin into the right pocket gets the point.
Twing was born
The actual Twing was born, after 1 whole month of incubation. But a small challenge still to be tackled, it was still called draggable.js
I started thinking of names. I asked one of my colleagues who just played few matches with me. He instantly made this sound twing!! probably he was just animating the idea coming into his mind, like in cartoons, the light bulb appears on your head and that sound plays in the background. I just grabbed the sound and renamed the file to twing.js. I loved the name.
That is how Twing was born.
The app then got Facebook integration and I added it to facebook apps. Created a page and started inviting people I knew to play, they loved it.