1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Guest, PO has ceased our separate tiering and adopted Smogon tiers for SM. More information and updates here.

    Dismiss Notice

Webclient - The third time is the charm!

Discussion in 'Development General' started by coyotte508, Sep 24, 2015.

  1. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.


    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)
     
    Last edited by a moderator: Jul 15, 2016
  2. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    This is looking interesting. Sure hope this one will be successful. :o

    Just thought I note that I've tried using it on my latest Firefox updated other day, doesn't seem to work unless I'm missing a plug-in. :x

    Opera 32 works. Just that after some chat messages, the message bar quarter fades out at the bottom and doesn't scroll.
    [​IMG]
    I know it just began development but I guess I can help note issues.
     
    Last edited: Sep 24, 2015
  3. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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?
     
    Nightfall Alicorn likes this.
  4. sulcata

    sulcata stéphane curry best waifu Forum Moderator Server Administrator Forum Moderator Server Administrator

    Joined:
    Jun 13, 2012
    Messages:
    968
    Likes Received:
    744
    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.
     
    Nightfall Alicorn likes this.
  5. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    Might be my browser, Opera 32, but it doesn't display server description on mine. Just thought I note it. I'll try config my Firebox to see if I can get it to work on it.
     
  6. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Last edited: Sep 24, 2015
    Nightfall Alicorn likes this.
  7. Hannah

    Hannah Come a little closer

    Joined:
    Nov 10, 2010
    Messages:
    985
    Likes Received:
    237
    PO Trainer Name:
    Hannah
    >Could not connect to the server. It could be offline, the address could be invalid, or you might have trouble connecting.

    You will be taken back to the list of servers.


    I'm on Showdown at the moment so my thingy is working fine.
     
    Nightfall Alicorn likes this.
  8. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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!
     
    Last edited: Sep 25, 2015
    Nightfall Alicorn likes this.
  9. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    I've tested the server description but nothing shows when I click a server in the list. I click the blank space and text, it doesn't select which I presume it supposed to like PC client.
    [​IMG]

    Edit 1: I tried connecting on Firefox but doesn't work. But connects okay with Opera 32. Could be a browser issue.

    Try using another browser when connecting @Hannah
    [​IMG]
     
    Last edited: Sep 25, 2015
  10. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Last edited: Sep 25, 2015
    Nightfall Alicorn likes this.
  11. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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!
     
    Last edited: Oct 4, 2015
  12. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    I don't know if this idea been thought of but maybe you could add a closed envelope for unread pm and opened for read ones, like how messages style in red text on the client. Maybe you could do the same.

    I might be jumping little far ahead but maybe a hide and show the side menu be cool. I had difficulty viewing on previous web client before.

    So far. I'm actually think I'm going to like this client. Keep up great work, mate. :)
     
  13. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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!
     
    Last edited: Oct 5, 2015
    Sam Holmes and Nightfall Alicorn like this.
  14. Sam Holmes

    Sam Holmes Sword Of The Morning

    Joined:
    Jul 20, 2015
    Messages:
    102
    Likes Received:
    46
    PO Trainer Name:
    ! HC ! Agent Sam
    Almost perfect! Time to reach the goal now :D Tried the webclient again a while ago, and it keeps me disconnecting every 8-10 minutes. (Not an internet problem as speed notif was showing minimum 100 kbps) fast enough to run it. Please check it out once, thank you :)
     
    Nightfall Alicorn likes this.
  15. Jethalal

    Jethalal (~o.o)~ So Spooky ~(o.o~)

    Joined:
    Sep 13, 2014
    Messages:
    528
    Likes Received:
    364
    PO Trainer Name:
    Jethalal
    I was all the time on it after reset didnt had any problem
     
    Nightfall Alicorn likes this.
  16. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    I think I left it on for a while and had no disconnections after I got it working on Firefox after the server restart. Note, I was using the alternative port link since normal connect doesn't work for me. Thought I mention it in case it effects stability or anything.
     
    Sam Holmes likes this.
  17. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Sam Holmes and Nightfall Alicorn like this.
  18. Sam Holmes

    Sam Holmes Sword Of The Morning

    Joined:
    Jul 20, 2015
    Messages:
    102
    Likes Received:
    46
    PO Trainer Name:
    ! HC ! Agent Sam
    Automatic reconnect would be a really nice option :)
     
    Nightfall Alicorn likes this.
  19. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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!
     
  20. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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 =)
     
  21. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Last edited: Oct 8, 2015
    Atli, Draciel, Sam Holmes and 4 others like this.
  22. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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!
     
    Sam Holmes and Nightfall Alicorn like this.
  23. sulcata

    sulcata stéphane curry best waifu Forum Moderator Server Administrator Forum Moderator Server Administrator

    Joined:
    Jun 13, 2012
    Messages:
    968
    Likes Received:
    744
    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.
     
    Sam Holmes likes this.
  24. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    The new addons are looking great. :o Already I can see this client being better than the last one. I almost mentioned I couldn't see time stamps on till I noticed they are half visible on the left.

    Edit: Maybe you could add a cookie to remember the option so users could choose between 2 time stamp displays like this or client application style.
     
    Last edited: Oct 11, 2015
    Sam Holmes likes this.
  25. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Sam Holmes and Nightfall Alicorn like this.
  26. MidwayMarshall

    MidwayMarshall woof Forum Moderator Developer Forum Moderator Developer

    Joined:
    Jun 13, 2014
    Messages:
    303
    Likes Received:
    170
    Nightfall Alicorn likes this.
  27. Sam Holmes

    Sam Holmes Sword Of The Morning

    Joined:
    Jul 20, 2015
    Messages:
    102
    Likes Received:
    46
    PO Trainer Name:
    ! HC ! Agent Sam
    Last Day I was promoting the webclient, and I heard errors like "weather effect has some problem" & " the battleground suddenly changes in mid battle and sometimes it just becomes dotdots" so maybe if ya can check it out? Rest all looks way cool than earlier!
     
  28. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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.
     
    Nightfall Alicorn likes this.
  29. MidwayMarshall

    MidwayMarshall woof Forum Moderator Developer Forum Moderator Developer

    Joined:
    Jun 13, 2014
    Messages:
    303
    Likes Received:
    170
    coyotte508 likes this.
  30. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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)
     
    Last edited: Oct 13, 2015
    Nightfall Alicorn likes this.
  31. Sam Holmes

    Sam Holmes Sword Of The Morning

    Joined:
    Jul 20, 2015
    Messages:
    102
    Likes Received:
    46
    PO Trainer Name:
    ! HC ! Agent Sam
    How about we display just the sprites, and cutout the borders & HP?
     
  32. sulcata

    sulcata stéphane curry best waifu Forum Moderator Server Administrator Forum Moderator Server Administrator

    Joined:
    Jun 13, 2012
    Messages:
    968
    Likes Received:
    744
    Maybe make all the cells a fixed size and put them in a 2 tall, 3 wide grid?
     
  33. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    Well we have to think about the interface as a whole. How to switch pokemon, where to put attacks, etc.
     
  34. Weavile

    Weavile Phoenix

    Joined:
    Jul 17, 2010
    Messages:
    2,703
    Likes Received:
    890
    Well our current system of tabs for switching, attacking etc is pretty efficient in terms of space. I also think it's a neat way to "compartmentalise" thinking when you're playing. Switching or not is a big decision and I think the interface would do well to reflect that game aspect, I would not be happy to see them all on the screen at once if it's avoidable. (Not sure if that's what you intended but thought I'd say it anyway)

    As for the arrangement of Pokémon I think the 3x2 grid idea is good (or at least much better than 5 on one line 1 on the other) but this would leave the white space on the bottom right. Not entirely sure what one might do with that. Maybe some interesting innovative function that I can't think of.
     
  35. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    171
    PO Trainer Name:
    Nightmare Moon
    So far, I've imagined if it possible to have a grid like this:
    [move 1] [move 2] | [pokemon 1] [pokemon 2] [pokemon 3]
    [move 3] [move 4] | [pokemon 4] [pokemon 5] [pokemon 6]

    This method reduces the needing to click tabs when you got the full controls on the screen at once but this could conflict on small screens. Maybe have the css display it like this for PC users and if screen is smaller then make it display in tabs if necessary. A possibility for tabs are:

    [move 1] [move 2] | {moves}
    [move 3] [move 4] | {pokemon}

    [pokemon 1] [pokemon 2] [pokemon 3] | {moves}
    [pokemon 4] [pokemon 5] [pokemon 6] | {pokemon}

    This option should help save some width and mostly height. But these are just possibilities I can think of.
     
    Sam Holmes likes this.
  36. sulcata

    sulcata stéphane curry best waifu Forum Moderator Server Administrator Forum Moderator Server Administrator

    Joined:
    Jun 13, 2012
    Messages:
    968
    Likes Received:
    744
    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.
     
  37. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    @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 .
     
    Nightfall Alicorn and Sam Holmes like this.
  38. Weavile

    Weavile Phoenix

    Joined:
    Jul 17, 2010
    Messages:
    2,703
    Likes Received:
    890
    Oh sorry. I forgot to reply to this.
    I think this system is ok at the moment, but if you were to include type names and PP counts in the move boxes (PP is essential, I would like to see type names too) I don't know how it'd look.

    Basically the main comment I'd have now is that everything is just too small. The relative size of Pokémon sprites is indicative of that since they're the only thing that's normal size (Well compared to other clients). But I feel like that's too obvious to really say.
     
    Sam Holmes and Nightfall Alicorn like this.
  39. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    @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!
     
  40. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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:

    [​IMG]

    Help me? =o
     
    Sam Holmes likes this.