jPoker: pokersource web poker client
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 97 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/45715 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Client (computing)Computer animationXMLLecture/Conference
00:18
Web browserTable (information)Hacker (term)Group actionElement (mathematics)Computer-generated imageryAerodynamicsMedical imagingTable (information)LoginDynamical systemUniform resource locatorSoftware developerClient (computing)Sinc functionServer (computing)Division (mathematics)Projective planeWeb browseroutputPosition operatorWeb 2.0Element (mathematics)Event horizonMatching (graph theory)Default (computer science)Computer animation
01:59
InformationTable (information)Tournament (medieval)Table (information)Radical (chemistry)CuboidElectronic mailing listGUI widgetInformationComputer animation
02:15
Regular graphElectronic mailing listForm (programming)GUI widgetTournament (medieval)InformationTable (information)Web applicationComputer animation
02:44
Web browserLetterpress printingImplementationDifferent (Kate Ryan album)Cross-site scriptingDifferent (Kate Ryan album)Web browserWeb 2.0Order (biology)CodeImplementationInternetworkingProtein foldingComputer animation
03:17
Plug-in (computing)Web browserServer (computing)Element (mathematics)Markup languageServer (computing)Plug-in (computing)Digital photographyComputer animation
03:48
Web browserOnline helpSoftware testingLine (geometry)ImplementationCodeSoftware testingRegular graphLine (geometry)Student's t-testSlide ruleSystem callTraffic reportingExecution unitComputer animation
04:37
Extension (kinesiology)DebuggerVariable (mathematics)Video game consoleCross-site scriptingCodeState of matterInteractive televisionVariable (mathematics)Java appletVideo game consoleVideo gameComputer animation
04:54
Web browserElement (mathematics)Computer animation
05:07
Element (mathematics)Position operatorElement (mathematics)Order (biology)Type theorySet (mathematics)Medical imagingComputer animation
05:33
Online helpVisual systemWeb browserComputer-generated imageryElement (mathematics)Cross-site scriptingSoftware testingPersonal digital assistantElectronic visual displayGame theoryClient (computing)Server (computing)CASE <Informatik>Element (mathematics)Software testingPosition operatorGame theoryMedical imagingDefault (computer science)Web browserObject-oriented programmingWhiteboardDifferent (Kate Ryan album)Visualization (computer graphics)Computer animation
06:48
DisintegrationWeb pageTemplate (C++)Plug-in (computing)Single-precision floating-point formatServer (computing)Translation (relic)Client (computing)Message passingComputer fileTable (information)Link (knot theory)Point (geometry)Web pageElectronic mailing listComputer fileTranslation (relic)Content (media)Formal languageGoodness of fitINTEGRALClient (computing)Medical imagingSingle-precision floating-point formatSet (mathematics)CodeServer (computing)Traffic reportingTemplate (C++)Data structureDifferent (Kate Ryan album)Row (database)Game theoryElectronic visual displayRadical (chemistry)Plug-in (computing)Division (mathematics)Uniform resource locatorVariable (mathematics)Computer animationProgram flowchart
09:14
Software developerINTEGRALPOKETape driveFLOPSProjective planeComputer animation
10:03
DisintegrationInformationHome pageServer (computing)WindowTesselationMultiplicationUniform resource locatorSoftware developerComputer fileVideoconferencingTable (information)Dependent and independent variablesConnected spaceMedical imagingINTEGRALWeb pageProjective plane2 (number)Open setOrder (biology)CodeComputer animation
12:07
Game theoryElement (mathematics)TouchscreenCASE <Informatik>Electronic mailing listComputer animation
12:19
Server (computing)Computer animation
12:40
InformationHome pageInternetworkingStack (abstract data type)Web browserSoftware testingRevision controlGoodness of fitSuite (music)WebsiteServer (computing)Condition numberSoftware bugBuildingClient (computing)SoftwareDynamic random-access memoryDistribution (mathematics)Position operatorPhysical systemProjective planeRepository (publishing)Error messageUniform resource locatorSoftware developerHeat transfer1 (number)Computer animation
16:08
XML
Transcript: English(auto-generated)
00:08
So I will first show you some screenshots. So this is JPoker, and this is what I will talk about. So it's a poker client, and I will explain why we've done it.
00:22
We've done a web poker client because it requires a nodal node, and because everybody can access the client, since everybody has a browser. Because we can use a URL to point to turn your table, because we are in the web, because browser is good at displaying 2D.
00:41
So targeting the browser for 2D poker clients makes sense. And it's easy to customize, because you can change images and you can do some CSS. So the project history is that it started with an AJAX hack, which was just displaying images and logs about what is going on on the poker server.
01:02
Then Loic Dashari took over the development. And from there, four companies have funded development and customization of the client. So how does it work? It pulls the poker server using HTTP request. The server replies with JSON packet.
01:25
And then from that JSON packet, it decides to hide or show HTML elements, or to craft new, or to update existing HTML elements. And when you click a button, like a regular input, it sends JSON back to the server. So how is the table displayed?
01:42
Is fixed position div with skin with dynamic image and text. And you can see here, the default skin looks like that. So each image you see here is a div. And it's all being animated with CSS.
02:01
So there is also not only the table, but also the lobby, which is good as displaying table list, terminal list, user info, cache, or the amount of money you have, and search box for searching for a particular table or player. So this is how the widget looks like. So this is for editing user information.
02:22
This is just a regular form. And this is a tournament lobby. When you can see what is going on, there is a tournament. And with only one player, obviously, it's fake. And he has one, so he has his prize. And this is the regular list of table
02:40
when you can click to join. So when we are doing a web app, so we've seen it's great to target the web for Pocahontas. But there is also drawbacks. There is the cross-browser issue, because you have many different JavaScript implementations, many different CSS implementations.
03:02
And debugging it, for example, in Internet Explorer, couldn't be a mess. So we had to add some code in order to be able, at least, to print a stack trace on each browser. So for that, for dealing partially
03:20
with cross-browser issue, we are using GQuery, because there are tons of existing plug-ins. It helps a lot with cross-browser issue, and there is a nice API. Here, you can see how we are binding the quit element when clicked to send a packet to the server. But thanks to GQuery chain, we can also
03:41
say that we want to add a CSS clap when override and define the markup for the button here. And for helping, also, with cross-border issue, we do a lot of tests. So currently, J-Poker is like 5,000 lines of code, but there is twice as that line of tests,
04:02
like 10,000 lines of tests. There is 300 independent tests, and they provide 100% coverage on the code base. So this is how the test runner looks like. So you have many tests, and you will see that scroll bar is only at the beginning.
04:20
And this is the coverage report, which is putted by JS coverage. And this is a regular GQuery test runner, which is called QUnit. And here, you can see that we have 100%. Obviously, it's an old version, because there are only 2,000 lines of code. For debugging, we rely on Firebug.
04:42
It allows to browse the DOM state in live, to break into JavaScript code, to watch JavaScript variables. And it also provides an interactive JavaScript console, as well as live editing of DOM of CSS. So this is how it looks like. When I focus on a particular element, I can see, I can edit the CSS.
05:00
So it's very well integrated into the browser. And we are happy to have a Firebug to help us to develop JPoker. So about the layout, you've seen that there is a lot of fixed position elements. For bootstrapping the layout, we rely on Inscape. So we could place, using Inscape, the element
05:23
as images, and then export it to SVG, and convert the SVG back to HTML and fixed position CSS. In order not to have to type fixed position for each element. So it does look like that. So here, you have the default skin. And you see that there is one element for each player.
05:42
And this is SVG. We run a small Python creep on it, and it gets back to us the position of the element in CSS. So for skinning, we add image on existing HTML elements using CSS. And we also have skin test case.
06:02
Because when you are doing a game, it could be difficult to reproduce every game scenario possible. Because if you want, for example, to display something special when two players are all in, you have to log in two players, create a game, and having them to put all their chips, and then being in the all-in situation.
06:21
And for that, we have skin test case, which are just faking the server and sending the packet to the client. So we don't have to do manual click to go in a particular situation. So that's also able to deal with cross-browser visual
06:41
issue. So you can fire the same test case on many browsers and see if visually it looks the same. Oh, whoops. So this is the bad images. Sorry. So for integration, GQuery is just a set of GQuery plug-ins.
07:09
So for displaying the table, you just look on the div and say, I want to display this table. If you want to display a terminal list, you can add div, which is a container. And it says that you want to display the terminal list.
07:23
It's only a JavaScript file, so it could go in a single HTML page if you want to replace the contents. For example, you click on a table in the table list, and you want the table to display. You can just replace the container by the table.
07:43
Or it could also have a link and point to support permalinks. So if GQuery, if a web page is open and JPoker is included in it, it looks at the URL. And if there is a game ID in it, it can start joining automatically the table and display it. For integrating into your website,
08:02
you can override templates. So they are just JavaScript variables where you can put some HTML in it. If you want to have a different DOM structure, for example, for each row of the table list, you have a row template where you can put custom HTML. And you have callbacks. For example, if you want some JavaScript code
08:22
to be executed when you are integrating with JPoker, for example, when someone clicks a table to join, you want to display a pop-up, say, are you sure? Do you want to join this table? You could do it using callbacks. There is also good support for internalization. We have translation into every language.
08:41
And these are, there are two kind of translation, client-side and server-side. For client-side, we are using get text and jQuery plugin, which is called jQuery get text. And we just have PO file which are translated into Json
09:00
and loaded immediately into the page. And for server-side translation, it's done by the server. And we tell the server which local we have and then the server, when you have to send us some string, translate them into a good language. So, we can see all of it. So there are many contributors, and there is Loic, who took over the project, that's me,
09:23
that's Zach, who is in the, in this room, and I've done a lot of CSS work. There is Vincent, who has contributed many graphics. There is Tom, who has done some JavaScript work. There is Pierre Boule, I don't,
09:42
I know him only in, yeah, I have seen him, so maybe I've misunderstood his name. But he has done a lot of work into Drupal integration. There are Shandon, who are working on PHP integration with Jupyter. Ulricha, who do a lot of CSS work, and many company, Outflop, Skyrock, Let's Poke,
10:01
and Pokeamania, who have funded custom development. So, recent development, these are the recent developments into Jupyter. We have way more skins now, which are only CSS and image file. There are also blocking polls implementations.
10:21
Before that, Jupyter was asking every five seconds to the server, is there something new? Is there something new? And when there were nothing, the server were just replied with an empty response. Now, Jupyter, the connection is blocking until there is an answer from the server,
10:41
so it's reduced a lot, the latency. There is animation, for example, when you win some chips, they go back to your player. There are some tunes, so we are just, we convert some OJJ file to SWF using some SWF tools, and then we insert the SWF into the document
11:00
and just play the song. There are support for multiple window, so you can have multiple integration in multiple tabs if you want to play more than a table, than a tie. And there is an open social gadget, which just is an XML file which embeds the Jupyter code and allow it to embed it in existing social network.
11:24
And there is Drupal integration, where PR has worked a lot, and it is relying on the open social gadget in order to integrate it into Drupal. So if you have any question, I will show you, I will just show you a video first,
11:43
because there are only been screenshot, and it could be nice to have video. I will, this is one page of the project. The license is a GPLv3. And if you have no more question, you can go, if you have more, after the question, you can go, you could go play on this URL, if you want.
12:07
I will just show you a video, which is a skin case, which is showing all the elements of the game. So you can see, so this is a list of skin case. We click on it, and it simulates all the packets
12:22
that we can receive from server. So you see the stuff with animation. Okay, that's it.
12:40
So we have three minutes left, so do you have any question? So the question is, do we support Internet Explorer 6? So yes and no. At the beginning of the project, there have been testing done in Internet Explorer 6,
13:03
but we have not maintained that testing anymore. So the correct answer is I don't know, and the nicer answer will be that you could figure it out by just running the test suite in Internet Explorer. If there is some red, that means that it's not supported.
13:30
Okay, so the question is, do we provide a ready-to-go stack for the client and the server? The short answer is no,
13:40
we don't have to let it match yet for the whole stack. The nice answer is yes. We have Debian packages for the server, for the clients, and Fedora packaging as well. So the stable version is currently in Fedora
14:02
and Debian and Ubuntu, and the lastest unstable version is in our repository, with all the animation stuff. But we have a building form, packaging form, which is providing ready-to-go debs and RPM for each distribution, but the last solution is not pushed into Debian yet.
14:29
Yes? It depends, because we don't maintain a website where a user can play, we're just providing the software.
14:40
When you go to this URL, you will see no user, but we are also selling services and development, and the biggest user base we have is on a website called Skyrock, which has like 200 and 500 users playing on the stable version.
15:01
That means that it's just a customer running the same copy of the software, so. Any more questions? So one minute left, yeah. Ah, that's a very good question.
15:20
What? Ah, yes, sorry. How would you debug JavaScript into other browsers than Firefox? So, SAC, we use SAC, which is in the room. We have very good Internet Explorer debugging skills, and basically, it's eased by the test,
15:43
because when we run the test, we first try to write the test that will produce the issues when we see a bug, and then we have a way to reproduce the error, and then we can even debug with alert and stuff, because it's not difficult to put in condition to reproduce the bug when using test.
16:03
Okay. So thank you.