Habbo Homes System

[Invent]

Hey,

I've started work again on a Habbo Homes System, this is just a little project on the side for me as I have more important things on my mind.

What I've Done:
- Register
- Login
- Move widgets, stickers, etc
- Buy backgrounds/Buy backgrounds via AJAX tool
- Change background via AJAX tool
- "My Info" widget
- 'Hottest Homes'

Screenshot:
http://uploadz.co.uk/494habbo_homes.png

Project Progress:
25%

This won't be opensource as it's well for my site :p

[Callum.]

Nice one.

+rep

[myke]

Cool! Meh; it should be open source x]

I'd love to be able to make one of these.

[Dentafrice,]

tell me hows its done =[ I just wanna see :P I dont have a site anymore

[Invent]

Message me on MSN, I shall explains what you wants to know :)

[myke]

Simon, I'd like to know too.

[Invent]

Well first of all I didn't use scriptalicious as most people would suggest to.

I made life a lot harder for myself and used an open-source drag-and-drop javascript script. I then modified it so just before it sends the new co-ords to the div I make it send the co-ords to a php file along with the ID of the sticker/widget/etc.

[Jamieb]

You selling. I would be intrested in buying!!

[myke]

You confused me as you got to "modified" lol, anyway. nice script.

[Johno]

I would also love to know how you have done this, It looks fantastic. I kinda understand what you said but I would love to know more :)

[Mentor]

When you say u used an open source js script do u mean u just used another js library that was open source? or just founda js drag and drop script and edited that?
Although i would strongly advise you make the script send and save the new co-ords once a drag has been competed as opposed to every movement or you will be sucking down a huge amount of band width completely pointlessly if you dont "/ Since the script needs to know and save where it ends up, not each indervidual 1px movement in any direction in sequence.

Although on another note? just wondering but how do people get credits on your site? are they rewarded for posting or are ya makeing money by charging or somthing?

[timROGERS]

To be honest, Scriptaculous is a good library for it. It also has a built in onDrop handler which is perfect for what you're doing.

[RedCrisps]

:o OMG i think your scripts rock ;].
ps: are you selling it, or giving it out, or keeping...

[Jamie.]

:o OMG i think your scripts rock ;].
ps: are you selling it, or giving it out, or keeping...

LOL i didnt think you were allowed to sell copyrighted images :rolleyes:

[Invent]

It would be legal for me to sell the system, but I'm not going to.

It's for my fansite, www.mini-i.fm [:

[dannyisnotamazing]

It looks awesome, hope it all goes well. ;-)

[Invent]

Just worked on it for around 2 hours as I couldn't sleep.

I've re-coded the way the system saves the positions, it's now done via a `Save Button`. This will save bandwidth for the server and it's also easier when designing a home :)

I've just got to work on a backend system and a way to delete/drop (add)/buy items via AJAX then it's done.

P.S: This system is better than the one that was leaked I think :p

[Jahova]

Oooh sounds good.
You should make people pay for it, people want this kind of script/thing.

- TomSpit

[Invent]

More progress:

I've now begun building the 'Web Store' catalogue thing (which you can find on the real Habbo Homes). This shouldn't take long as it's just simple PHP & AJAX.

[Luckyrare]

More progress:

I've now begun building the 'Web Store' catalogue thing (which you can find on the real Habbo Homes). This shouldn't take long as it's just simple PHP & AJAX.
nice one, looking forward to see the final product ;)

[Dentafrice,]

nice one, looking forward to see the final product ;)
same here

[Invent]

The hard part is getting the image to go into the 'preview' box right in the middle. 'vertical-align: middle;' isn't working..hmm..

[Luckyrare]

The hard part is getting the image to go into the 'preview' box right in the middle. 'vertical-align: middle;' isn't working..hmm..

I have tried using CSS to align something in the center of the page. Asked on a number of forums with no luck

[Invent]

Hmm, I'll search through Habbo's CSS Files for the answer =D

[Luckyrare]

Hmm, I'll search through Habbo's CSS Files for the answer =D
Please share if you find it ;)

[Amilo]

Good luck with this project =]

[Invent]

I couldn't figure it out in CSS, so I thought up a workaround using javascript maths.



<script type="text/javascript">
<!--

function show_sticker(img) {

var myImage = new Image();
myImage.name = "../"+img;
myImage.src = "../"+img;

height = myImage.height;

padding = 150-height;

padding2 = padding/2;

document.getElementById("image").innerHTML = "<img src=\"../"+img+"\" alt=\""+img+"\" style=\"padding-top: "+padding2+"px;\" />"


}

-->
</script>

[Invent]

AJAX Store is going well, just setting up the 'information' part of the store. So that when you click a small image a larger preview appears, the price of the item, etc.

Also I've decided to use scriptaculous for the deletion of widgets/stickers, this is just so that the item fade's out and also it looks cool =D

[Dentafrice,]

Put it online so I can see :D

[Invent]

I would, but there is nothing to show atm lol.

[headboard]

Sounds good :)

Dentrafrice, delete some pms, i wanna pm you. <3

[Invent]

Right, lol. I've now completely changed how the system works, as it now runs using Scriptaculous - which I wasn't going to use.

I decided it was the best thing to use for the job because of (as Tim said) the onDrop functions, etc.

The web store now works with stickers and it allows you to purchase them :)

[Blob]

Simon; get on msn

Kevin; answer on msn

[Invent]

I ams on.

[Dentafrice,]

im on =]

[Invent]

Right, there was a sort of *major* bug with the positioning of the elements.

But that is now all sorted =D

I'm working on the web store now, when you purchase a sticker it goes onto the page it just doesn't go in the right place (top left), so I'm trying to sort that out :)

EDIT: Just fixed this :), I know have to try and fix an error which is when you remove a sticker all the other stickers move up, or if you add a sticker the other stickers move down.

[Invent]

24/8/07 UPDATE

- Webstore 'placing' now works perfectly in both Firefox and Internet Explorer (Firefox being the browser the system is designed for). In firefox the "left" and "top" positions are "1px" where as in Internet Explorer they are defined by percentages (because of the way it handles Absolute positioning. The "left" percentage for IE is "14%" and the "top" percentage is "42%".

- "moveable" added to ALL object's class name (Eg/ "moveable sticker_clown"), this has proved very successful and because of this the saving function will now only be around a maximum of 10 lines, we can put a limit on the number of objects allowed to be 'placed', it has ALSO helped us make a massive leap by making the zIndex() function work.

- 'Position: Relative' removed from ALL sticker's styles unless the user isn't logged in. This is for cross-browser compatibility and just to make the system more stable.

That's all for today! :)

[Invent]

24/8/07 - 18:38PM GMT UPDATE

- New background changing function has been introduced. This function is much more efficient and it doesn't need window refreshing either. All 'objects' fade away, the background changes, then the 'objects' fade back in.

[Topps]

I might start working on my own, since the latest script I am working on has most of the functions, I won't be releasing mine either lol, just gotta get the fading function for it and saving function and it's ready. You got any latest screenies of yours Simon? :eusa_clap

My Backgrounds change instantly, yours sounds so much more efficient. :P

[PenguinFluid]

cool :o

When will this be released and how much?

Will there be admin/mod settings where admins can give free coins or ban peole etx

[Invent]

Won't be getting released sorry ;)


I might start working on my own, since the latest script I am working on has most of the functions, I won't be releasing mine either lol, just gotta get the fading function for it and saving function and it's ready. You got any latest screenies of yours Simon?
Saving and stuff takes like 5mins :P The hard stuff is making the objects appear on the playground area via the webstore which sends data to another page which sends data back and then a javascript function has to process it and do another function to show the item and store it :P Stuff like that is the hard crap XD

As for screenshots, I'll do one better:

http://79.75.60.198/home

u: Simon
p: lol

It might look preeety empty, but if you view the source there is a lot of JS which occupies most of my time :P To preview the NEW Change Background feature click "lol" on the sub-nav.

[Naruto!]

wow, nice

[Johno]

Tried to have a look at it thre and it said "Sorry! Access is restricted to your ip address"

:(

.:; Johno

[Invent]

Enabled it for a few more minutes ;)

[Topps]

Great work! Nicely developed, the only problem I found is when I moved stickers, it came up with a JS Alert saying like 12.344.67 ~ 1005 or something like that. :P

I don't think it's a huge problem, might just be a tiny flaw or something. :P

Love the fading, that adds the best effect to it lol. :D

[Invent]

It's not a flaw :P

I just added a new function to get sticker's positions/id's, etc.

So I added it to the onClick list :p

[Topps]

I might upload a quick demo of mine in about a week, yours like totally kills mine, but oh well.. :P

[Invent]

lol, I'll look forward to seeing yours :)

Mine still needs around 2 months coding to make it useable :P

[@xP]

Isn't the Habbo Home System illegal?
There was a thread on this matter about a month ago?

[Invent]

My gosh, people still don't get the issue.

The script which was released used HabboRemix's Javascript thus making it illegal.

I have completely coded this system by myself and used no other sites JS (Apart from a bit of Habbos).

So yeah, its perfectly legal :)

[Topps]

I know, I announced on MSN for help and got flooded like "OMG, THATS ILLEGAL BRUVVA!111!!" I was like, no. :P

But, mine needs a few more months to start, mine use showable/hideable divs at the moment, changing that soon though, was testing. :)

I'm unsure about making it save for now, like make it Public. :P

By tyhe way, if you need any help, PHP-wise or a bit of JS, then I have a lot of free time on my hands lol. :D

[Topps]

Simon, did you use that CSS code to get your images in the center for your catalogue, cos I made a table for each image and center'd it directly in the middle LOL. :P

Reason for Double-Post: Time exceeded. :(

[Invent]

Nah, I use DIVs for my webstore and I couldn't figure out the CSS.

So I just wrote a "hack" with JavaScript to make the image 100% in the center.

[Topps]

Cool, I found a script on DD and it was when the mouse goes over the image, the outline changes orange, which is a little closer than I was, makes the Web Store look more Habbo-ish, if you get me. :P

I'm thinking of using DIV's for the place information, like sticker description and things.

[Invent]

I still need to add the orange-y border thing to the little icons in the webstore when you click them.

I just added an "overlay" thing to my system so that when you load the webstore the main site fades darker ;D

[Topps]

I can tell it's going to be like a big hit, you'll probably get flooded with people saying, "CAN I BUY PLZ?!!!" :P

I think, I can get the border to stay orange, but it doesn't change when I switch to another sticker in the web store, shouldn't be hard to fix.

OK, edited it, so when you onclick it goes orange and onMouseout the orange goes off, which isn't so bad.

I also need the fade black, is that JS by ay chance, cos on Remix, then have the little people waving don't they? :P

[Invent]

If I get a chance I'm going to try and add the border today.

Once I've done it, I'll tell you how to do it so it stays orange.

[Topps]

If I get a chance I'm going to try and add the border today.

Once I've done it, I'll tell you how to do it so it stays orange.

Thanks, that would be great. Still browsing around for the fade black background, this is like in my head, say I have the "Stickers" button, I click it and in the code it has onclick="(background, 'fadeit')" or something similar... :)

[Invent]

When I'm on my Laptop I'll post my code for the overlay.

What mine does is, I have a DIV at the top of my BODY with these style settings:

"Position: absolute; width: 0%; height: 0%; background-color: #000000; opacity: 0.0;".

Then my function just makes the width to 100% and uses this other function I partially made to get the height of the page and set the height of the div to that.

Once the width & height is set I use "$("overlay").morph("opacity":"0.5", { /* Options */ } );" to make the opacity fade to 0.5 opacity (Half faded). It's a lovely effect ;D

[Topps]

Well, it would be a lovely effect lol, it's bound to look amazing.

[Topps]

Done it, but it doesn't fade in, it basically just comes up in a flash, I'll get it to fade in easy tbh. :)

[Invent]

DEMO IS OPEN.

http://79.67.76.200/home/?page=login

u: Simon
p: lol

thennn, http://79.67.76.200/home/?habbo=Invent!

[Colin-Roberts]

http://www.uploadz.co.uk/896invent.png
And when you load webstore it has Ya...! cut off in the top right corner.

[Invent]

Alert is for me, cba explaining it again lol.

I added "iya!" to the top left (in ff) of the WebStore so I can position the word "Web store" correctly :)

[Topps]

Lemme check these updates then! :P

It looks great! The "Iya" made me laugh, I was like "WDH?!" then I read comments and was like "Ohhhhhhhh."

Looks great, but the widgets like go over all the stickies.

[Invent]

Looks great, but the widgets like go over all the stickies.

What do you mean? lol.

[Topps]

What do you mean? lol.

As in, I think they're set to "position: absolute" so they can be dragged, but no stickers go over the top of them. :(

[Topps]

So, Simon, how did you find out how to use scriptaculous, as in applying the codes etc. :S

[Invent]

Quick update.

I've remade the "edit" menu thing. (Where you delete objects, change skins). It now looks like Habbo's edit menu, I added all the same observers (You double click the edit icon then the menu shows, if you click off the menu it closes).

Also now, when you move an object all of the "edit menu icons" disappear like on the real thing. This is to make editing easier. There is also a button to hide/show edit icons to allow even easier editing

I've now got to work on Widgets (ew! That's really hard...I think...), then I've gotta work on skin editing, a better object purchasing method and object removing method. Then I've gotta do the saving function which is quite hard...

Once I've done those things I need to just work on registration a *little* bit (make it auto insert backgrounds, free sticker pack, etc securely).

THENNNNN, once that's all done, the actual user-driven part of the site is done! After that I've got to make a "hottest homes" feature and then make a backend/mod system! :P

It's a looooong project ^_^

---------

@Topps: Scriptaculous is quite hard to use at first (One of the reasons I didn't use it originally was because I didn't understand how to use it ;P). It's hard to explain how to use it properly, but give it a few weeks and you'll be using it with ease :)

[Invent]

Added a new observer to the script ^_^

I got bored, so added the feature which makes the stickers/etc dance around the page when you double click the Habbo Image ;D

[Naythi.]

Links dont even work for me =[

[Invent]

It's my PC's old IP, so obviously it won't load :P

[Mashi]

New IP ?

Also with scriptalusious Can I Make it let all DIVS dragble but auto revert certain ones?

SOUNDS GOOD BTW ;]

[lew!]

Is it gonna be released? or will you release it for a price or something?

[Topps]

Is it gonna be released? or will you release it for a price or something?

He's not releasing it, it's for his site and his site only. :)

[Invent]

Yeah I sorta feel mean not releasing it as so many people want it.

But it is a massive feature for any site and lots of sites will have it soon, so I want my site to be the first with it :P

[lew!]

damn you :<

lol jk.
when everyone has it, why not think of selling the scripts ect.

[today]

damn you :<

lol jk.
when everyone has it, why not think of selling the scripts ect.

As he is nice. [: And likes to give freebie's away.

[Invent]

Just thought I'd let you all know that the project is finished :)

My initial project plan is complete. The plan was to create a replica of the Habbo Home System with these features:

- Register
- Logout
- Web Store
- Inventory
- Drag/Drop Objects
- Several Stickers
- 2 Widgets
- Several Backgrounds
- User Control Panel
- Edit Motto
- Edit Password
- Administrator Control Panel
- Edit an account
- Ban Account
- Unban Account
- Add a new sticker
- Edit a sticker
- Delete a sticker
- Give sticker to user
- Add a new background
- Edit a background
- Delete a background
- Give background to user

:)!

I'm hoping to get the system on a site asap to show everyone what it's like.

Even though the initial plan is finished I'm still carrying on with the project and I plan to:

- Add an option to purchase 'notes' (-Widget)
- AJAX Guestbooks (-Widget)
- Invite A Friend
- YouTube Videos (-Widget)
- Rating System For Homes (-Widget)

And much more ^_^

[rh4u]

ill let you host it on rh4u.co.uk xD

[MrCraig]

Rofl ^^

-Offers free web hosting-

:)