Reply to thread

Message

<blockquote data-quote="Gabrielle" data-source="post: 452689" data-attributes="member: 65851">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 websocketsGit repository<a href="https://github.com/Gabriellexo97/kirsikka-server" target="_blank">Server</a><a href="https://github.com/Gabriellexo97/kirsikka-client" target="_blank">Client</a>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 snippetsI decided to show code snippets not in the repo, since the rest you can see on your own there.[CODE=javascript]import {Credits} from &quot;./items/credits.js&quot;;import {Hotel} from &quot;./items/hotel.js&quot;;export function Toolbar() {&nbsp; &nbsp; this.items = [];&nbsp; &nbsp; this.initialize = function() {&nbsp; &nbsp; &nbsp; &nbsp; this.items.push(new Credits());&nbsp; &nbsp; &nbsp; &nbsp; this.items.push(new Hotel());&nbsp; &nbsp; &nbsp; &nbsp; let toolbar = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; toolbar.id = 'toolbar';&nbsp; &nbsp; &nbsp; &nbsp; let i = 0;&nbsp; &nbsp; &nbsp; &nbsp; for (; i &lt; this.items.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const element = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.classList.add('item');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.title = this.items[i].tooltip;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.addEventListener('click', this.items[i].onclick);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const imgelement = document.createElement('img');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgelement.src = this.items[i].icon;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgelement.alt = this.items[i].alt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.appendChild(imgelement);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toolbar.appendChild(element);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('game').appendChild(toolbar);&nbsp; &nbsp; &nbsp; &nbsp; $('.item').tooltip();&nbsp; &nbsp; };}[/CODE][CODE=javascript]import {createElement} from &quot;../../utils/dom.js&quot;;export function Credits() {&nbsp; &nbsp; this.icon = 'images/toolbar/credits.png';&nbsp; &nbsp; this.tooltip = 'View your currency data';&nbsp; &nbsp; this.alt = 'credits-icon';&nbsp; &nbsp; this.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; const element = createElement('div', {'id': 'purse'});&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('game').appendChild(element);&nbsp; &nbsp; &nbsp; &nbsp; /** TODO: Place this in css file */&nbsp; &nbsp; &nbsp; &nbsp; const textElement = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.position = 'absolute';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.left = '0';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.top = '54px';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.width = '332px';&nbsp; &nbsp; &nbsp; &nbsp; textElement.innerHTML = 'You have &lt;span class=&quot;creditAmount&quot;&gt;' + (window.localStorage.credits||'1000') + '&lt;/span&gt; credits';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.textAlign = 'center';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.fontFamily = 'VolterBold, verdana, arial, sans-serif';&nbsp; &nbsp; &nbsp; &nbsp; textElement.style.fontSize = '9px';&nbsp; &nbsp; &nbsp; &nbsp; element.appendChild(textElement);&nbsp; &nbsp; &nbsp; &nbsp; $(element).draggable();&nbsp; &nbsp; };}[/CODE]ImagesThere'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=&quot;Screens&quot;]<img src="https://i.imgur.com/1srLFO6.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />[/SPOILER]Extra info + creditsIf you have tips or I do things wrong, PLEASE tell me (and don't say &quot;.... sucks&quot; 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- <a href="https://habboemotion.com/resource/129" target="_blank">https://habboemotion.com/resource/129</a> for the Volter &amp; Volter Bold fonts</blockquote>

[QUOTE="Gabrielle, post: 452689, member: 65851"] 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! [B]What is Kirsikka?[/B] 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. [B]Technical stuff client[/B] - Client uses pure JS (so no pixi.js or whatever) - Client tries to use as little frameworks as possible (things like jQuery will [B]only[/B] 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) [B]Technical stuff server[/B] - Server is written in C# using DotNet Core - Server uses dependency injection - Server uses MySQL as database storage - Server uses Fleck for websockets [B]Git repository[/B] [URL='https://github.com/Gabriellexo97/kirsikka-server']Server[/URL] [URL='https://github.com/Gabriellexo97/kirsikka-client']Client[/URL] 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. [B]Code snippets[/B] I decided to show code snippets [B]not [/B]in the repo, since the rest you can see on your own there. [CODE=javascript]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(); }; }[/CODE] [CODE=javascript]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 ' + (window.localStorage.credits||'1000') + ' credits'; textElement.style.textAlign = 'center'; textElement.style.fontFamily = 'VolterBold, verdana, arial, sans-serif'; textElement.style.fontSize = '9px'; element.appendChild(textElement); $(element).draggable(); }; }[/CODE] [B]Images[/B] 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"][IMG]https://i.imgur.com/1srLFO6.png[/IMG][/SPOILER] [B]Extra info + credits[/B] 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 - [URL]https://habboemotion.com/resource/129[/URL] for the Volter & Volter Bold fonts [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members