Kirsikka - A bridge between modern and oldskool

[Gabrielle]

Hello,

First I want to say, this is a hobby project. It will be open source and free, but it isn't meant to be something big. I write this as it's just something I wanted to try out. If it turns out well, I don't mind contributing to the community. If it doesn't, well whatever happens, it is still a good learning experience and loads of fun!

What is Kirsikka?
Kirsikka is the Finnish word for Cherry. It is a Habbo like client written in Javascript (/HTML5, using canvas for rooms mostly). It contains of a server and a client. Both are open source. Tech stuff is written below. It is not the usual client development you see nowadays though (people trying to remake current client), but it's a combination of having oldskool music in a super modern bar: the client will use modern techniques as well as old features, making it fun for R63 lovers as well as oldskool lovers.

Technical stuff client
- Client uses pure JS (so no pixi.js or whatever)
- Client tries to use as little frameworks as possible (things like jQuery will only be used if it's way too much code to do without it, such as animations, draggable plugin etc.)
- Client currently uses sso login, but it might contain an option to enable username(/email) + password login
- Client uses JSON files for configuration and things like texts / variables (or the replacement for it)

Technical stuff server
- Server is written in C# using DotNet Core
- Server uses dependency injection
- Server uses MySQL as database storage
- Server uses Fleck for websockets

Git repository

You must be registered for see links

You must be registered for see links

Keep in mind code is not 100% up to date plus a lot of things have to be done better. More code is here on the thread.

Code snippets
I decided to show code snippets not in the repo, since the rest you can see on your own there.

import {Credits} from "./items/credits.js";
import {Hotel} from "./items/hotel.js";

export function Toolbar() {
    this.items = [];

    this.initialize = function() {
        this.items.push(new Credits());
        this.items.push(new Hotel());

        let toolbar = document.createElement('div');
        toolbar.id = 'toolbar';

        let i = 0;
        for (; i < this.items.length; i++) {
            const element = document.createElement('div');
            element.classList.add('item');
            element.title = this.items[i].tooltip;
            element.addEventListener('click', this.items[i].onclick);

            const imgelement = document.createElement('img');
            imgelement.src = this.items[i].icon;
            imgelement.alt = this.items[i].alt;

            element.appendChild(imgelement);
            toolbar.appendChild(element);
        }

        document.getElementById('game').appendChild(toolbar);
        $('.item').tooltip();
    };
}

import {createElement} from "../../utils/dom.js";

export function Credits() {
    this.icon = 'images/toolbar/credits.png';
    this.tooltip = 'View your currency data';
    this.alt = 'credits-icon';

    this.onclick = function() {
        const element = createElement('div', {'id': 'purse'});
        document.getElementById('game').appendChild(element);

        /** TODO: Place this in css file */
        const textElement = document.createElement('div');
        textElement.style.position = 'absolute';
        textElement.style.left = '0';
        textElement.style.top = '54px';
        textElement.style.width = '332px';
        textElement.innerHTML = 'You have <span class="creditAmount">' + (window.localStorage.credits||'1000') + '</span> credits';
        textElement.style.textAlign = 'center';
        textElement.style.fontFamily = 'VolterBold, verdana, arial, sans-serif';
        textElement.style.fontSize = '9px';

        element.appendChild(textElement);

        $(element).draggable();
    };
}

Images
There's just one cause there's not much to see but expect more, by the way what I got isn't 100% done yet.

Spoiler: Screens

Extra info + credits
If you have tips or I do things wrong, PLEASE tell me (and don't say ".... sucks" but tell me how to do it better). I don't mind criticism but if you have it make sure I can learn from it.
Also in case you have any ideas for the client let me know (feature wise for example or something else, let me know)

I want to thank a few people / sites:

- Stackoverflow for a thousand times it helped me out (where would I be without...)
- KittyChloe from ra******** for helping me out with a few things
- Jabbo for a few examples on some stuff
- Google images for a few images like background image
-

You must be registered for see links

for the Volter & Volter Bold fonts

 

[Laynester]

Shame its not fully oldskool, I liked the beta design but it'd be sick to see a full scale oldskool design since the shockwave client was never full screen, nonetheless seems like a cool project, something different in this scene, as most projects are dying/resetting *coughs*

 

[Gabrielle]

Shame its not fully oldskool, I liked the beta design but it'd be sick to see a full scale oldskool design since the shockwave client was never full screen, nonetheless seems like a cool project, something different in this scene, as most projects are dying/resetting *coughs*

It would be hard to make it fully oldskool as oldskool wasn't designed to be on full screen. My styling abilities aren't amazing so I could try it but it'd be a hard thing to do.

 

[LeChris]

That specific era you're building arounds looks to be around the R59 era of Habbo. So use that if you want to provide better clarification instead of saying "between old and modern habbo."

In regards to the code itself, I'm a bit confused. Your server seems to follow good programming practices in terms of the high level stuff. Dependency injection, web sockets, etc. Which brings me to the utterly confusing client.

Rants
Are you doing the client in plain JS without the use of any frameworks, libraries or even jQuery out of ignorance/ as a beginner to learn the language fundamentals? I cannot think for the life of me of any reasons to build a long term app that will easily reach hundreds of files, in plain JS without any libraries once so ever. I mean, not even lodash and ES4 on top of it all?

If you intend on this development

• Looking and functioning great
• Being stable and performant
• Being scalable dev wise and production wise
• Looking good on your portfolio
• Building experience

Then you need to switch to use Typescript with libraries. Maybe even switch the whole style to TDD (Test driven development) which is fucking bonkers on how stable it makes everything (bug wise). What shouldn't happen is you continue to write in old JS with the lowest amount of 3rd party resources. There is 2 levels to being a developer. The junior who questions and doesn't trust any library and believes learning the language to re-invent said library is better; or the senior who understands why these libraries exist, knows how they work and knows to use them when appropriate (hint: this is a perfect time to use it)

RAW JS should only be used maybe on a my little pony portal to show sparkles around your form inputs. Anything beyond that 9/10 could easily benefit from a library or definitely a framework.

Advice

• RAW JS is bad. You need to switch to either Typescript or just writing ES2019
• Lack of types is bad. See above about switching to TS. This greatly improves stability by removing questions in run time by checking in compile/transpile time.
• Lack of libraries is horrible. You should definitely throw libraries where problems can be solved with them. Don't do a HTML5 client in raw canvas, you'll hate yourself in a few months when your drinking problem kicks off from it.
• Do not hate libraries without any reason. I wasted 5 years of development believing I could do it better, provide a more cutting edge performant solution. Truth is, a library adds maybe half a millisecond which isn't noticeable to anyone but perhaps a super intelligent alien from Area-51 who may blink at this. JS itself isn't great on performance, so using libraries isn't going to restrict it from being itself. Web development is only growing in how hard it is to do front end things, WASM is launching full force and will soon carry over a lot of compatibility and libraries which will make TS look like a little bitch. Don't self deprecate this project by using old practices.
• Import JSON files, don't do that weird $.getJSON() thing. I don't know what it is as I never used jQuery but it looks like it's a worthless function that could be replaced with the core solution import x from './config.json'
• Why the weird things sometimes? ie: Declaring an empty array then pushing values to it which look like that's always the main case. Why not just declare it with the new Credits() and stuff in it as a constant? Immutable is always nice

 

[Gabrielle]

I know what you mean. There are going to be things that are modern Habbo though. And the title would be way too long "A bridge between modern modern, R59 and oldskool. It wouldn't sound as nice either. Plus a bridge between modern and oldskool includes everything in between as well. But I understand your point.

This is the first time starting something in JS. I don't know the best practices and whatnot or I wouldn't even do something with Habbo. All jokes aside, I know the code can be improved. As for jQuery, I don't use it when it's not necessary due to jQuery having a lesser performance than native JS.

I don't understand how ES2019 would help but I definitely wouldn't mind looking at typescript. As for libraries, which libraries would you recommend? I definitely wouldn't mind taking a look at libraries but I'm not familiar in client development.

I never said I hate libraries without a reason; I hate using libraries where it's unnecessary. If I only need to get a value from an input with an id, why would I ever use jQuery for that when it's more efficient to use native JS? I think you misunderstood me or I misexplained it; I don't hate libraries but I wouldn't use libraries when it's not necessary (with something like jQuery). Maybe it's just a jQuery thing alone.

I think I must've not searched well. I probably found this solution but I thought import was only for js files. Again stupid error from me and I can easily adjust that.

I was thinking of a lot of ideas and I forgot there's no inheritance of interfaces in the way I code. I was gonna get all types automatically so it would get added to an array. But then I realized it can't be done in my case. I'm not sure if typescript has this functionality but else I'll definitely change this.

Thanks for the advise. I'll definitely look at it. I might probably misunderstand things so feel free to correct me. Posts like this motivates me and helps me a lot so my gratitude.

 

[Champion]

How’s progress on this? Super interested.

 

[Gabrielle]

I haven't actively worked on it, I've just started getting more into libraries and typescript, so it's mainly learning that and porting my old code over to something better.