protohab – a HTML5 frontend and a Node.js backend!

[ordm]

protohab

protohab is a project which tries to accomplish the same end-product what Habbo has, but it's flashless! It's frontend (client) does not require/have flash; only HTML5, JS and CSS. The backend and frontend communicate via WebSockets and the backend is written in Node.js, but it can be easily adapted to other languages too! Frontend is based on Ediootti's Illumina design, but this theme can be easily changed since it's written in HTML and CSS.

Technologies and features in frontend:

• SASS/SCSS for easier CSS
• Vanilla JavaScript
  
  • may use JS libraries in the future for better DOM reactibility
  • ES6 in future (converted to ES5 with Babel)
  
  
• HTML5's canvas used for room rendering
  
  • Workaround for retina screens and other screens with DPI not 1 (better quality)
  
  
• WebSocket communication with backend
• Own floor map maker/generator
• Grunt for minimizing, optimizing, copying and compiling HTML, SCSS and JS.

Technologies and features in backend:

• ES6
• Node.js
• package ws for WebSockets
• Basic message handling

Screenshots of frontend:

(badges and friends are fetched with WebSockets; static data)

Todo-list:

• Floormap making – 100%
• Canvas rendering – 100%
• Tilecursor – 100%
• WebSocket message handler – 100%
• Game logic – 0.1%
• Popups – 0%
• Catalog – 0%
• Furni – 0%
• Chat – 0%
• Multiplayer – 0%
• Backend task queues – 0%
• Backend database – 0%

GitHub:

• protohab
• protohab/protohab-client
• protohab/protohab-server

[MentaL]

[ordm]

Started working on popups and navigator, having fun with :before and :after: box custom "shadows" (white and grey line on top/bottom), headings with a line through and navigator's currently selected tab arrow. Check the commit here.

[Boraida]

Looks promising. For the (S)CSS checkout BEM. It's really cool and simple. Good luck! :-)

[Keiz]

Looks great!

[ordm]

Looks promising. For the (S)CSS checkout BEM. It's really cool and simple. Good luck! :-)

Thanks for the kind words and suggestion, but I don't personally like BEM.

Looks great!

Thanks!

All feedback appreciated!

[lai0n]

Why use a global switch for handle all handlers?
Habbo has hundred handlers
Will be too disorganized and ugly in the future.

[ordm]

Why use a global switch for handle all handlers?
Habbo has hundred handlers
Will be too disorganized and ugly in the future.

I will divide the app object into folders and files in the future, but at the moment I want to focus on designing.

[BronzeSpider547]

This looks promissing, and I like your design. Good luck mate.

[LeChris]

Designing the app structure is more important to do at the beginning of the project, than designing user interaction.

If you lack a proper app structure, you'll spend more time fixing it than being able to progress. This is especially true in something such as Node

[ordm]

Designing the app structure is more important to do at the beginning of the project, than designing user interaction.

If you lack a proper app structure, you'll spend more time fixing it than being able to progress. This is especially true in something such as Node

I'm not doing any JS until I'm satisfied with my design; first thing I'll do when I get back to JS is restructuring. I made the current JS for demonstration only (because I know that you guys won't believe anything if there isn't anything to back it up).

[pel]

You won't have success. Why? You just started writing. (This mistake is doing everybody :D)

but still gl.

[streamhotel]

You won't have success. Why? You just started writing. (This mistake is doing everybody :D)

but still gl.

Agree with that. What distinguishes a professional programmer of a hobby programmer is the way of handling a project. If you study IT at highschool you get lessons about how to maintain things like a database for example with DFD's (Dataflow diagrams) and that are things you're missing when you're just a self-learned programmer as hobby.

But you compare it with building a house. You wouldn't build one without a architecture so why people try it with applications/websites? If you have a bad a poor base, you're whole project would fail.

[dominic]

Agree with that. What distinguishes a professional programmer of a hobby programmer is the way of handling a project. If you study IT at highschool you get lessons about how to maintain things like a database for example with DFD's (Dataflow diagrams) and that are things you're missing when you're just a self-learned programmer as hobby.

But you compare it with building a house. You wouldn't build one without a architecture so why people try it with applications/websites? If you have a bad a poor base, you're whole project would fail.

sorry wat? I'm a self taught developer, however my job consist of delegating jobs and helping out (senior developer here)
you know nothing. sit down and let @ordm do his work. @ordm do you have any intention in using integers for headers instead of a string?



Sent from my iPhone using Tapatalk

[streamhotel]

sorry wat? I'm a self taught developer, however my job consist of delegating jobs and helping out (senior developer here)
you know nothing. sit down and let @ordm do his work. @ordm do you have any intention in using integers for headers instead of a string?



Sent from my iPhone using Tapatalk

Dude. I'm learning IT at highschool. I'm just pointing things out and it's not my intention to be arrogant like you. Do you know how a String is stored in memory and why you can't change? You're probably missing important things. My point was you'll miss important things that you'll learn at high school but never thought they were important as a self learned developer. I'm aware I don't know everything yet but I'll respect you're big ego.

I'm also just here to help people with their projects. I'm interested in HTML5 canvas games so.

@ordm
Are there any new updates?

Btw, the UI looks really nice! Hope you'll continue with Ediootti's design. It was much better then Habbo's current.

[Keiz]

(badges and friends are fetched with WebSockets; static data)

So which one is it? Fetched through websockets, or static data?