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!
At last! Now I can engage in my javascript noobishness. It's about the PM system: Code (javascript): var createPMDialog = function(player) { pm_dialog = $("<div title='" + player.name + "'><div class='ui-widget-content chatdisplay' style='min-height: 120px; overflow: auto;'></div><input type='text'></div>").dialog({ height: 220, resize: function(ui, event) { $(".chatdisplay", this).height($(this).height() - 53); }, close: function(ui, event) { delete Data.PMs[player.id]; }, }); $("input", pm_dialog).keydown(function(event) { if (event.which == 13) { var message = $(this).val(); $(this).val(""); var me = player; $chatdisplay = $(".chatdisplay", pm_dialog); $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>"); /* Resizes correctly */ pm_dialog.resize(); /* Scrolls to the top */ var plainElement = $chatdisplay[0]; plainElement.scrollTop = plainElement.scrollHeight; Network.sendSendPM(player.id, message); } }); pm_dialog.dialog("open"); Data.PMs[player.id] = pm_dialog; return pm_dialog; } Ok, some of the code is my mods. But: Code (javascript): close: function(ui, event) { delete Data.PMs[player.id]; }, 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): $("input", pm_dialog).keydown(function(event) { if (event.which == 13) { var message = $(this).val(); $(this).val(""); var me = player; $chatdisplay = $(".chatdisplay", pm_dialog); $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>"); Network.sendSendPM(player.id, message); } 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:
Code (javascript): var printAll = function(message) { var chat = $("#channels div.chat"); var h = chat.height(); chat.append(message + "<br>"); chat.height(h); $(chat).attr({ scrollTop: $(chat).attr("scrollHeight") }); } I think there's a problem when different chats have different height. I'm not an expert in jQuery, would Code (javascript): $(chat).each({function() {this.attr({ scrollTop: this.attr("scrollHeight") })}); fix it?
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 ^
Code (javascript): 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({ height: 220, resize: function(ui, event) { $(".chatdisplay", this).height($(this).height() - 53); }, close: function(ui, event) { delete Data.PMs[player.id]; }, }); $("input", pm_dialog).keydown(function(event) { if (event.which == 13) { var message = $(this).val(); $(this).val(""); var me = Data.player; $chatdisplay = $(".chatdisplay", pm_dialog); $chatdisplay.append(fancyName(userColour(me), me.name) + htmlEscape(message) + "<br>"); /* Resizes correctly */ pm_dialog.resize(); /* Scrolls to the top */ var plainElement = $chatdisplay[0]; plainElement.scrollTop = plainElement.scrollHeight; Network.sendSendPM(player.id, message); } }); 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...
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.
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 :-)
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?
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.
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).
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 ^^)
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.
Isn't it on github now? You can clone from there with Code (text): git clone https://github.com/lamperi/pokemon-online-web.git
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.