EE Client in JavaScript

John · 2017-04-23 01:15:34

Hello All,

You can check it out here.

This has come a long way, since the previous versions.

Any feedback is appreciated!

Emalton

EDIT: Previous versions might be taken down, at any time.

hummerz5

John · 2017-04-23 01:16:12

Stuff I'm working on

den3107's Suggestions:
This is a few px too long to fit on a 1920x1080 resolution
RoomID textbox in lobby
Lobby search bar
Loading icon/label while loading
After registering, give feedback and go to lobby.
The overal border (the white line), really doesn't look nice with the curved corners of the panels
Fix colors (Srna will be helping with this)
Fix gems and login streak
Padding between the icon and the label (at gems)
Quick-pm a person when you click their name in-chat?
Option to hide passwords
Fix Logo
"No friends currently online"
Energy (current/max)
Make extraspace just as high as news
Left-aligning the world name and center rest
Update the blocks
Optional Map Settings
No leave button
Logout / change room
Upon clicking on a username, insert "/pm <Username> " in the text box
Uppercase usernames
Change fonts

My Suggestions:
News
Maybe Energy Shop?
Show minimaps
Gold border in game
Gold border in friends list
God Mode
I shouldn't be reloading the images each time I need them.
Players shouldn't be able to erase others
Gems / Profile information
Abolish the placeholders!
Better Movements
Re-organize code
Update Blocks
Movements with faces
Underline your name if you are mentioned
Underline friends when they are mentioned
Disallow guests from using this
If there are already players in the room, don't say that they joined.
Improved graphics
Lobby
Functional Buttons
Friends
Display Blocks
Register

Srna's Suggestions:
Redo the layout of friends
Show all friends
Nokia Cellphone font in friends list

SirJosh3917 · 2017-04-23 01:31:26

Logging in with "guest" "guest" doesn't work.

John · 2017-04-23 02:16:09

The guest account works fine.

Guests can no longer use this.

N1KF · 2017-04-23 02:27:26

Emalton wrote:

I am really new to website designing, so it might be a bit cringy.

When you're cringeworthy, take it with pride! Don't let le negative anti-cringe conformists try to change who you really are inside.

Xfrogman43 · 2017-04-23 03:14:07

Emalton wrote:

The guest account works fine.

No it doesn't

John · 2017-04-23 03:38:43

This no longer supports guest accounts.

Xfrogman43, Jesse, kubapolish

den3107 · 2017-04-23 12:43:27

UI looks fine to me (not sure how responsive it is, but oh well...).

Couple suggestions:

Button to login as guest (instead of having to fill in credentials yourself).
Clicking on username (either from the left hand list, and preferably also by clicking on the username in chat) will create a pm message for you.
When logged in, a button to log out again (or some other form to change room).
Either make username full caps or lower case Currently you'd suggest CammelCase, and obviously you don't know where to put upper case letters mid-string.

John · 2017-04-23 15:23:06

den3107 wrote:

UI looks fine to me (not sure how responsive it is, but oh well...).
Couple suggestions:
Button to login as guest (instead of having to fill in credentials yourself).
Clicking on username (either from the left hand list, and preferably also by clicking on the username in chat) will create a pm message for you.
When logged in, a button to log out again (or some other form to change room).
Either make username full caps or lower case Currently you'd suggest CammelCase, and obviously you don't know where to put upper case letters mid-string.

Thanks for your reply. I'll get started on your suggestions, but I won't be adding the guest button because I don't see how it would benefit a chat client.

What did you have in mind when you mentioned how responsive it is? Did you mean about the PM idea?

hummerz5 · 2017-04-23 16:19:38

Emalton wrote:

What did you have in mind when you mentioned how responsive it is?

p sure that means if he resizes the window/is on a mobile device, how well the UI fits the situation

John · 2017-04-23 17:50:07

Try now

drunkbnu · 2017-04-23 17:51:00

I was about to create one too, but R.I.P.

lrussell

John · 2017-04-23 18:58:05

HG wrote:

I was about to create one too, but R.I.P.

If you are interested in helping, it would be greatly appreciated.

Tomahawk · 2017-04-23 19:15:51

That's a legit-looking website you got there. Would be a shame if... someone...

Nah, you can see the bot code in the page source - which, incidentally, makes it really easy to copy.

drunkbnu · 2017-04-23 19:16:59

Emalton wrote:

HG wrote:
I was about to create one too, but R.I.P.
If you are interested in helping, it would be greatly appreciated.

I don't like to be part of a team project. I prefer to work alone whenever I want.

I have enough knowledge of HTML/CSS and JavaScript to write a chat client that looks beautiful.

Plus, I don't like your coding style (opening braces on new lines, gawd, just why?)

John · 2017-04-23 19:21:34

I actually have not been a part of a team project either, so I was open to giving it a shot.

ok

It's how I was taught, I never changed and probably never will unless there is a reason to.

hummerz5

drunkbnu · 2017-04-23 21:29:40

Making my own chat client:

▼1600*900 Image

John · 2017-04-23 21:41:19

Why not make a new topic instead of hijacking mine?

and you unwooted my post how rude

den3107

den3107 · 2017-04-24 01:12:37

Emalton wrote:

Thanks for your reply. I'll get started on your suggestions, but I won't be adding the guest button because I don't see how it would benefit a chat client.
What did you have in mind when you mentioned how responsive it is? Did you mean about the PM idea?

Responsive, as hummerz5 pointed out, addresses if it works on different resolutions and orientations.

PM idea would basically mean: If I'd join a room with hummerz5, I could click his name (either from the left hand list, or by clicking his name in the chat itself). When clicking, the chatbar (where you type your message) would get "/pm hummerz5 " written in it, so I don't have to myself.

HG wrote:

Plus, I don't like your coding style (opening braces on new lines, gawd, just why?)

I honestly can barely read code when it's on the same line. I need the extra whitespace the newline gives (probably due to my dyslexia). And since there's pretty much no downside to having extra newlines and spaces in your source code, why not?

But let's not discuss that stuff here (which I just kinda did v_v), I know it can get pretty messy stuff...

John

John · 2017-04-24 02:23:02

den3107 wrote:

Emalton wrote:
<snip>
Responsive, as hummerz5 pointed out, addresses if it works on different resolutions and orientations.
PM idea would basically mean: If I'd join a room with hummerz5, I could click his name (either from the left hand list, or by clicking his name in the chat itself). When clicking, the chatbar (where you type your message) would get "/pm hummerz5 " written in it, so I don't have to myself.

Oooo I understand. I'll work on that when I have some extra time this upcoming week.

den3107 wrote:

I honestly can barely read code when it's on the same line. I need the extra whitespace the newline gives (probably due to my dyslexia). And since there's pretty much no downside to having extra newlines and spaces in your source code, why not?

Yeah, I need spacing too. For some reason it is challenging for me to read in a straight line, I always carry my little card with me whenever I have to read large amounts of text. I hate it, but it works.

There is a lobby list that uses lrussell's fantastic WebAPI, which can be found here.

John · 2017-05-07 04:53:38

I forgot about this until today.

So I went along and added a bunch of new things.

Thanks for BlockHandler.js, destroyer123!

I'm also partially colorblind so if someone has ideas for colors that would be really appreciated.

Looking for feedback and suggestions!

--

I will be working on the PM-insert code tomorrow, as requested by den3107. I'll make the UI less cringy once I get most of the need stuff down.

Contributors are always welcome!

den3107 · 2017-05-07 10:36:06

I'd suggest a different font, got 2 suggestions:
1) Use Lato for the base of your site, and a monospaced font for the chat, like Consolas.
2) Use the font that Whatsapp uses over your entire site: Helvetica Neue.

John · 2017-05-07 14:29:13

den3107 wrote:

I'd suggest a different font, got 2 suggestions:
<snip>

Done, let me know what you think!

I also added your PM idea that you suggested earlier.

EDIT:

Kleminem / Srna is assisting with the layout!
THANKS FAM!

den3107 · 2017-05-08 00:29:54

Couple points:

Register has no return option;
Registering gives no feedback;
Password fields aren't... Password fields, they're plain text with just a bit lighter font color;
Logo image is broken link;
Website is just a couple pixels too long to fit on a 1920x1080 resolution;
The overal border (the white line), really doesn't look nice with the curved corners of the panels;
Color palette is a bit too vibrant, I'd suggest lowering the saturation (HSV);
Maybe give a little label "No friends currently online";
Amount of gems and login streak doesn't seem to work;
Maybe also show energy (current/max);
Give a bit of padding between the icon and the label (at gems);
Maybe change the "Play" button to "Chat";
I'd suggest left-aligning the world name and it's header and centering all the other columns and their headers;
Maybe allow users to enter a world id for when it's not in the list;
Maybe put a little search bar above the table;
Not sure about this one, just see how it looks: add a bit of padding between cells;
Stick to the grid, make extraspace just as high as news;
Give the user an option to load the world or not;
Maybe update the blocks too?;
No leave button once in chat;
Maybe also quick-pm a person when you click their name in-chat?;
Show a loading icon/label while the chat and room are loading.

Ok, maybe it're a bit more than a couple...
Sorry that I can't make a better suggestion on the colors. They are a bit too far apart from each other, but with your current layout I can't really think of a better way to handle the colors.

P.S. Nice you use Font Awesome

John · 2017-05-08 02:10:05

Am working on a few things, will get to those soon!

Thanks Srna for the login screen idea!

EDIT:
What do you mean by "Give the user an option to load the world or not"?

EDIT 2:
nvm

Official Everybody Edits Forums

#1 2017-04-23 01:15:34, last edited by John (2017-08-26 19:23:51)

EE Client in JavaScript

#2 2017-04-23 01:16:12, last edited by John (2017-05-31 03:10:56)

Re: EE Client in JavaScript

Stuff I'm working on

#3 2017-04-23 01:31:26

Re: EE Client in JavaScript

#4 2017-04-23 02:16:09, last edited by John (2017-04-23 15:58:29)

Re: EE Client in JavaScript

#5 2017-04-23 02:27:26

Re: EE Client in JavaScript

#6 2017-04-23 03:14:07

Re: EE Client in JavaScript

#7 2017-04-23 03:38:43, last edited by John (2017-04-23 19:01:38)

Re: EE Client in JavaScript

#8 2017-04-23 12:43:27

Re: EE Client in JavaScript

#9 2017-04-23 15:23:06

Re: EE Client in JavaScript

#10 2017-04-23 16:19:38

Re: EE Client in JavaScript

#11 2017-04-23 17:50:07

Re: EE Client in JavaScript

#12 2017-04-23 17:51:00

Re: EE Client in JavaScript

#13 2017-04-23 18:58:05

Re: EE Client in JavaScript

#14 2017-04-23 19:15:51

Re: EE Client in JavaScript

#15 2017-04-23 19:16:59, last edited by drunkbnu (2017-04-23 19:19:28)

Re: EE Client in JavaScript

#16 2017-04-23 19:21:34

Re: EE Client in JavaScript

#17 2017-04-23 21:29:40, last edited by drunkbnu (2017-04-23 21:29:57)

Re: EE Client in JavaScript

#18 2017-04-23 21:41:19, last edited by John (2017-04-24 02:26:31)

Re: EE Client in JavaScript

#19 2017-04-24 01:12:37

Re: EE Client in JavaScript

#20 2017-04-24 02:23:02

Re: EE Client in JavaScript

#21 2017-05-07 04:53:38

Re: EE Client in JavaScript

#22 2017-05-07 10:36:06

Re: EE Client in JavaScript

#23 2017-05-07 14:29:13, last edited by John (2017-05-07 21:26:56)

Re: EE Client in JavaScript

#24 2017-05-08 00:29:54

Re: EE Client in JavaScript

#25 2017-05-08 02:10:05, last edited by John (2017-05-08 20:16:29)

Re: EE Client in JavaScript

Board footer