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:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

 

[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.

You must be registered to see links

 

[Boraida]

Looks promising. For the (S)CSS checkout

You must be registered to see links

. It's really cool and simple. Good luck!

 

[Keiz]

Looks great!

 

[ordm]

Looks promising. For the (S)CSS checkout

You must be registered to see links

. 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 )

but still gl.

 

[streamhotel]

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

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?

 

[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?

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?

 

[dominic]

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.

When you're at school learning things, things are kept strict and to the point. What you're learning is also pretty redudant, because when you get hired as a developer you have to throw what you've been taught at school away, because it doesn't belong in the real world. Trust me on this one; I've had to let multiple people like YOU go from this company I work in; because they get arrogant, because they have a piece of paper that says they're educated in this, however!! This is not the case; who the duck needs to know how a String stores itself (if needed research it dude, wth).
As a developer you need to adjust to whatever thing you're facing (if a developer for example doesn't know how to properly indent his code), or if this developer uses MySQLi instead of PDO. (PHP wise)

 

[ordm]

So which one is it? Fetched through websockets, or static data?[/COLOR]

Static data in websockets, see

You must be registered to see links

.

I'm making progress, pushing when I have an update worth pushing.

 

[Keiz]

Static data in websockets, see

You must be registered to see links

.

I'm making progress, pushing when I have an update worth pushing.

I see, looks fine!

 

[LeChris]

Are there any updates, or dead project ?