Webclient - The third time is the charm!

Another webclient! This time it's different, though.

First, the webclient will take you directly to the server, with nothing to input. To make it easy to use, especially on mobile. The registry is on another page, which in time will link to the webclient. (Servers will need the next version to allow access through webclient).

The design is made using bootstrap, so everything looks reasonably OK without me doing anything and a designer can change the design easily. I'm going to make the design minimal as possible, so it doesn't clutter on mobile, and I may add some stuff only visible on desktop.

I'm also going to focus that everything works fine without any Pokemon content first. Then I'll add watching battles, until that works well, and then I'll probably add the old webclient's teambuilder.

An online version, sometimes updated, is available at http://webclient.pokemon-online.eu.

Codewise, apart from the design which is made from scrap, I'm regularly importing javascript from the older webclient after some modification.

• Online webclient
• List of servers
• Github page

I'll probably post some major updates here. For now, you're logged in with a guest name, you can chat and see the player list of the main channel. It works on mobile.

Edit: A lot has been done since, to the point there's already a Teambuilder with team storage. There's still a lot of stuff to do, help us prioritizing by commenting on the issues.

Edit2: Webclient guide (Click aquí para una guía en español)

 

Update - Name / passwords work now! You can also now connect from the registry.

Nightfall Alicorn, I don't understand what you mean by message bar quarter? Which version of Windows are you using?

 

Connected to server!
Invalid name. Change your name.
Disconnected from Server! If the disconnect is due to an internet problem, try to reconnect once the issue is solved.

Tried logging on as a guest and got this. Running whatever the most recent version of FF is with Windows 8.
"Fix login as guest -- 17 seconds ago"
fassst

I also noticed that clicking on the reconnect link literally tries taking me to "po:reconnect". Probably could fix it by adding an on-click reconnect event for all <a> tags with that specific href value. Not sure if that's on the to-do list or if it's overlooked.

 

Actually all po:xxx urls will be handled later. They're also used for watching battles or joining channels.

Edit: Solved, actually.

It was a css problem, it's fixed for Opera & Chrome.

 

PO uses different ports. I tried, and it connects fine for me. Either you went on the registry and tried to connect to another server than the main one, or some ports are blocked where you're trying to connect.

This kind of problem will be studied (and probably solved) later, but not for now. Sorry!

 

Server description's not done. I'm working on the webclient atm, not the registry =).

There's plenty things not done yet, let's just wait before reporting bugs, and focus this thread on other things.

Edit: Channels now work, and @Hannah a link was added on the registry to attempt to bypass some port restrictions.

 

PMs added :)

I will work on finishing the chat functions of the server (better pm design, alert on channel/pm tabs, closable channels, autojoin) and then start the other stuff!

 

Well I'm going to change the color of the tabs when active for channels, pms and even battles, it's one of the next things.

Edit: And done!

 

I have no problem eithers. But on sketchy internet connection it probably is sketchy. Introducing pings from the client and silent automatic reconnect could help with stuff. But not a priority imo, other things to do first.

 

Well, at least channel auto-join was just added!

As well, pms show when the other user got disconnected (pretty basic feature!), and @Steve added a warning when closing the tab while connected to a server!

Next is... Probably some user control, like registering a name, changing colors, etc. I need to think about it!

 

A navigation bar (to complete!) was added, with links to here / the registry / etc and collapsible on mobile. It makes the whole thing look nicer =)

 

You can now watch battles! (sort of)

Just right click on somebody, and you can ignore them or PM them, or watch their battle if they're battling. Though for now only the battle log shows, no pokemon yet.

You can also see which tab is open (channel/pm/etc) because it becomes italics.

Chat lines with your name are highlighted.

And /pokemon XXX now shows the pokemon sprites!

Edit: Now the battle window looks more appealing and you have the pokemon icons as reminders as well.

 

Players can idle/unidle. Timestamps can be displayed too (should I make it default?)

Also thanks to @Steve we see the status of players with a pokeball by their side!

 

Whether or not timestamps are displayed by default probably depends on the rest of the interface. If there's still a lot of room in the chat I'd say definitely make them default to on since most people are used to them I think.

Edit: from what I've seen at a glance it might be better without.

 

You can now see the player info of someone! Challenge button doesn't work, obviously. Some trainer sprites are missing but waiting for @Steve to upload them.

Other changes like being able to register, seeing kicks/bans.

 

http://i.imgur.com/ufc3Ook.png

Webclient is sorta able to spectate now

 

I don't know which webclient you're promoting, but it's not this one. It doesn't have weather effects or stuff like that.

Maybe you should wait for it to be somewhat ready before promoting it heavily.

 

https://www.youtube.com/watch?v=pqmCO8nuFGQ

A video of a battle I watched on the webclient today

 

I'd like opinions.

Currently when I start a battle, and I see pokemon I can switch to, I have this: http://imgur.com/tRvffu5

This is not ideal, 5 pokes on one line and one in the next line. Does anybody have any ideas for a better placement / design when we battle?

(Also alternate design: http://imgur.com/euck6lZ)

 

Maybe make all the cells a fixed size and put them in a 2 tall, 3 wide grid?

 

Well we have to think about the interface as a whole. How to switch pokemon, where to put attacks, etc.

 

I think tabs as weavile suggested are a really good idea. Perhaps under the tab that'll list Pokemon for switching we can make a much larger 2 tall x 3 wide grid that would include more information like moves, PP left, %HP corresponding to HP, items, and maybe even unboosted stats listed like 404 HP / 100 Atk / 22 Def / 45 SAtk / 32 SDef / 177 Spd

Making the grid larger and centering it should take care of whitespace issues.

 

@Weavile can you check the current webclient, and do you still want tabs? I was thinking anyway to show move info / poke info on hover in a nice popover box (though i'll probably add PPs inside the move).

But tabs can still be added and it'd look like that.

In other news, while there's still stuff missing that'll make battling easier, you can now challenge people and battle them! It's using the awesome game-like animation window by @MidwayMarshall .

 

@Weavile: Alright! We'll I'll finish up the battle stuff and ask again afterwards.

In other new, you can now change your name / color / trainer info online!

 

Ok, battle have been largely improved. You can attack, change pokemon, mega evolve and even cancel your move!

There are also a lot of more or less important other improvements.

Now I'm working on teambuilder. But I really need a design:



Help me? =o