1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Cloudflare Security Issue - Change Your Passwords!

    Hello there, Guest!

    Cloudflare, the internet proxy we use to protect ourselves against DDoS and other malicious attacks, reported on 23rd February 2017 that they had patched a bug reported by Google's Project Zero that was exposing sensitive information in random requests, approximately 0.00003% of all requests, since September 2016.

    Whilst it is unlikely that any information has been leaked from this website, we recommend that all users change their passwords here on the Pokémon Online forums, as a precaution We also recommend checking the full list of potentially affected sites so that you can change your password on those websites also. Remember to use a unique and secure password for every site that requires one.

    We apologise for any inconvenience caused.

    Dismiss Notice

Pokemon Online Web Client

Discussion in 'Development General' started by Lamperi, Jul 25, 2011.

  1. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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

    Joined:
    Jul 19, 2010
    Messages:
    763
    Likes Received:
    1
    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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    You can DL you the source with git, I'll give you the link to a running demo via PM.
     
  4. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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 Well-Known Member Administrator Server Owner Administrator Server Owner

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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    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 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    Small list of issues:

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

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    Posted some really little mods.

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

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    Some fixes again.

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

    Mystra Active Member

    Joined:
    Jul 12, 2010
    Messages:
    1,389
    Likes Received:
    4
    Hmm… what's up? (O.o)
     
  13. Blastcore

    Blastcore Developer

    Joined:
    Jul 19, 2010
    Messages:
    763
    Likes Received:
    1
    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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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

    Joined:
    Apr 4, 2011
    Messages:
    434
    Likes Received:
    0
    Can I take a peek?
    Can't promise, I'll be of much use though.
     
  18. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    I haven't yet started integrating battles into it, but I'll send you the PM.
     
  19. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    It seems to be down for days...
     
  20. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    Well then there must be problems with my websockets
     
  22. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

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

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    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

    Joined:
    Apr 4, 2011
    Messages:
    434
    Likes Received:
    0
    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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    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

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Oh xD Either way it'd be awesome to get a look at it.
     
  27. Valstin

    Valstin iPLayCOD

    Joined:
    Aug 11, 2011
    Messages:
    126
    Likes Received:
    0
    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

    Joined:
    Apr 25, 2010
    Messages:
    2,644
    Likes Received:
    2
    The fall has been too busy and not much progress has been made yet.
     
  29. Remorph

    Remorph New Member

    Joined:
    Jul 19, 2011
    Messages:
    11
    Likes Received:
    0
    Cool idea. Hope your work goes well.
     
  30. -Leon-

    -Leon- bae <3

    Joined:
    Mar 7, 2013
    Messages:
    348
    Likes Received:
    23
    PO Trainer Name:
    -Leon-
    I click "register" and nothing happens >_> Is that still a todo or am i doing something wrong ?