Most Up To Date Pokémon Simulator

Pokémon Online is the most popular, accurate, and complete Pokémon battle simulator out there. Open source, it's currently available in 11 languages, on your computer or your Android device. It hosts more than a million battles per month. Download the latest version and enjoy competitive battles across all six generations in real time against trainers from around the world!

Download
v 2.4.2


Pokemon Online Web Client

Discussion in 'Developer's Den' started by Lamperi, Jul 25, 2011.

  1. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    In short:

    What

    Pokemon Online running on web browser that supports new features JavaScript and HTML 5 in general.

    Who
    By me, Lamperi.

    Where
    I'm running a hidden alpha testing site for now. If you are interested in helping in development I might grant you access!

    Code
    Get it with Git from https://github.com/lamperi/pokemon-online-web.git ! You need python & twisted to run the server backend which allows connecting to PO servers.

    The program
    Web client consists of backend and frontend.

    Backend is written in Python. It needs to be run on the same machine as the web server is hosted. Python backend connects to Pokemon Online server and parses the binary messages into JSON and then sends them to web browser.

    Frontend is the thing you see in the web browser. It's implemented with Html and jQuery using numerous jQuery plugins. Browser connects to backend using WebSockets (pretty new technology). Fallback support is planned but for now it works in Firefox 6, Chrome or Safari.

    Implemented:

    • Registry browser w/ advanced connection and nickname
    • Chatting in different channels
    • Private messaging
    • Mimics PO interface from the colours to layout.
    Todo

    • Battles
    • Controlpanel
    • Teambuilder
    • Finetuning
    Feel free to discuss in this thread about the web client!
    Last edited: Oct 24, 2011
  2. Blastcore

    Blastcore Developer

    Messages:
    763
    HTML5 eh? I we're playing around with it yesterday hehe. Could i have access to look it? =P
  3. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    You can DL you the source with git, I'll give you the link to a running demo via PM.
  4. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    At last!

    Now I can engage in my javascript noobishness.

    It's about the PM system:

    Code (javascript):
    1.     var createPMDialog = function(player) {
    2.         pm_dialog = $("<div title='" + player.name + "'><div class='ui-widget-content chatdisplay' style='min-height: 120px; overflow: auto;'></div><input type='text'></div>").dialog({
    3.             height: 220,
    4.             resize: function(ui, event) {
    5.                 $(".chatdisplay", this).height($(this).height() - 53);
    6.             },
    7.             close: function(ui, event) {
    8.                 delete Data.PMs[player.id];
    9.             },
    10.         });
    11.         $("input", pm_dialog).keydown(function(event) {
    12.             if (event.which == 13) {
    13.                 var message = $(this).val();
    14.                 $(this).val("");
    15.                 var me = player;
    16.                 $chatdisplay = $(".chatdisplay", pm_dialog);
    17.                 $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>");
    18.                 /* Resizes correctly */
    19.                 pm_dialog.resize();
    20.                 /* Scrolls to the top */
    21.                 var plainElement = $chatdisplay[0];
    22.                 plainElement.scrollTop = plainElement.scrollHeight;
    23.  
    24.                 Network.sendSendPM(player.id, message);
    25.             }
    26.         });
    27.         pm_dialog.dialog("open");
    28.         Data.PMs[player.id] = pm_dialog;
    29.         return pm_dialog;
    30.     }
    31.  
    Ok, some of the code is my mods. But:

    Code (javascript):
    1.             close: function(ui, event) {
    2.                 delete Data.PMs[player.id];
    3.             },
    From my understanding of javascript, player is a global variable, even though it was in parameter to the create function. Is using player incorrect?

    because if it is, then

    Code (javascript):
    1.         $("input", pm_dialog).keydown(function(event) {
    2.             if (event.which == 13) {
    3.                 var message = $(this).val();
    4.                 $(this).val("");
    5.                 var me = player;
    6.                 $chatdisplay = $(".chatdisplay", pm_dialog);
    7.                 $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>");
    8.              
    9.                 Network.sendSendPM(player.id, message);
    10.             }
    There would be no reason for this code to work, as pm_dialog is a global variable too, the call $chatdisplay = $(".chatdisplay", pm_dialog) would use the global variable instead of the one present when it was instantiated.

    Anyway, either js introduces a whole lot of weird concepts, or we need to store the id of the player in the pm window and the text input in order to find the correct object to call, or use some jedi javasscript technique to sort it all out.

    Whew, how good is it to be able to post that in a thread instead of trying over a chat :)

    Please also tell me if my mods for scrollable battle/player window works, as well as the other stuff I did. :rolleyes:
  5. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Code (javascript):
    1.     var printAll = function(message) {
    2.         var chat = $("#channels div.chat");
    3.         var h = chat.height();
    4.         chat.append(message + "<br>");
    5.         chat.height(h);
    6.         $(chat).attr({ scrollTop: $(chat).attr("scrollHeight") });
    7.     }
    I think there's a problem when different chats have different height.

    I'm not an expert in jQuery, would
    Code (javascript):
    1. $(chat).each({function() {this.attr({ scrollTop: this.attr("scrollHeight") })});
    fix it?
  6. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    player is not global variable, it's given in parameters and thus is visible in the whole function because of closures.

    pm_dialog should not be global variable... I've just forgotten the "var". PM dialogs should be accessed from global Data.PMs hash. But, it should be visible in the function because of closures. I guess putting "var" before first initializing it should work.


    Looks fine ^
  7. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Code (javascript):
    1.         var pm_dialog = $("<div title='" + player.name + "'><div class='ui-widget-content chatdisplay' style='min-height: 120px; overflow: auto;'></div><input type='text'></div>").dialog({
    2.             height: 220,
    3.             resize: function(ui, event) {
    4.                 $(".chatdisplay", this).height($(this).height() - 53);
    5.             },
    6.             close: function(ui, event) {
    7.                 delete Data.PMs[player.id];
    8.             },
    9.         });
    10.         $("input", pm_dialog).keydown(function(event) {
    11.             if (event.which == 13) {
    12.                 var message = $(this).val();
    13.                 $(this).val("");
    14.                 var me = Data.player;
    15.                 $chatdisplay = $(".chatdisplay", pm_dialog);
    16.                 $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>");
    17.                 /* Resizes correctly */
    18.                 pm_dialog.resize();
    19.                 /* Scrolls to the top */
    20.                 var plainElement = $chatdisplay[0];
    21.                 plainElement.scrollTop = plainElement.scrollHeight;
    22.  
    23.                 Network.sendSendPM(player.id, message);
    24.             }
    25.         });
    Why doesn't pm_dialog.resize() work?

    I could do $chatdisplay.height(pm_dialiog.height()-53) manually but i'd rather use the resize() function...
  8. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Small list of issues:

    -handler error when challenge received, channel created, channel destroyed
  9. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    Because it's a jQuery UI plugin, they only add 1 variable to the object. To call resize, I think pm_dialog.dialog("resize") should work.

    I'll test it later.
  10. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Posted some really little mods.

    Still a lot of work to do :)
  11. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Some fixes again.

    We really need an experienced webdeveloper like Mystra to help us :)
  12. Mystra

    Mystra New Member

    Messages:
    1,389
    Hmm… what's up? (O.o)
  13. Blastcore

    Blastcore Developer

    Messages:
    763
    Seems he wants you to help to develop Web client~ lol Or that seems, atleast for me :'(!
  14. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    o_O Anyone who can contribute is welcome.

    Added challenge window when you are challenged (next: implement it the other way) and a battle window with 1 button: forfeit :-)
  15. aeo

    aeo Guest

    Oh, man, this is awkward.

    I just announced my replay viewer, and one of the things I plan on eventually doing with it was to extend it into a PO client. Maybe we could pool our efforts?
  16. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    Excellent! Battling is something I'm missing currently.

    // Shit, just checked your log viewer. Web client would be even more awesome than desktop client with that included.

    We are both also using jquery too.
  17. Kalashnikov

    Kalashnikov Despite the code quality

    Messages:
    434
    Can I take a peek?
    Can't promise, I'll be of much use though.
  18. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    I haven't yet started integrating battles into it, but I'll send you the PM.
  19. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    It seems to be down for days...
  20. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    The alpha testing site is up, just checked, but if you mean developing this, I've been too busy for few days (damn amusement parks and irl).
  21. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Well then there must be problems with my websockets
  22. coyotte508

    coyotte508 Administrator Administrator

    Messages:
    6,305
    Is there a way to put it on github? That way I can have all the git repositories on one website, and be aware of updates/contribute more easily. (Sorry for spamming thread ^^)
  23. Deity

    Deity Designer Administrator

    Messages:
    192
    Awesome :)

    Python is my language of choice so it would be pretty awesome to help out here. Could I possibly get a view of the test site?

    I'm going to download the code and have a look around. :)


    Edit: Hm.... I'm trying to get the code in Git Bash, but I have pretty limited git knowledge, using git clone git://valssi.fixme.fi/po-web.py it gives me fatal: The remote end hung up unexpectedly.
    Last edited: Oct 24, 2011
  24. Kalashnikov

    Kalashnikov Despite the code quality

    Messages:
    434
    Isn't it on github now?
    You can clone from there with
    Code (text):
    1. git clone https://github.com/lamperi/pokemon-online-web.git
  25. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    Thanks, I'll update the OP.

    Deity the Python part is mostly for reading the protocol and transforming it into JSON-readable format. Most work is implementing the required UI in Javascript.
    Last edited: Oct 24, 2011
  26. Deity

    Deity Designer Administrator

    Messages:
    192
    Oh xD Either way it'd be awesome to get a look at it.
  27. Valstin

    Valstin iPLayCOD

    Messages:
    126
    so how is this project going? I've been checking this thread since it started . 3.
  28. Lamperi

    Lamperi I see what you did there Super Moderator

    Messages:
    2,646
    The fall has been too busy and not much progress has been made yet.
  29. Remorph

    Remorph New Member

    Messages:
    11
    Cool idea. Hope your work goes well.

Share This Page