Interactive card game, JSON and .io websites query

Hi, I have been asked to help a card playing club to develop some way of allowing its members to play their rather obscure game of choice online. I have written software for standalone Macs and PCs using Xojo and done some website building in the past, mainly using uncomplicated HTML.

I thought it might be possible to do this using Xojo alone, but my research indicates that a lot of these interactive game websites involving several players simultaneously are built using a JavaScript offshoot called JSON and websites with top level domain .io - such as playingcards.io and virtualtabletop.io.

I had hoped I could build something for the club’s own website so that its members would not incur any charges for playing online. I don’t really want to learn JSON and use a third party website, however, I don’t want to reinvent the wheel and start right from scratch.

If anybody here can advise me on the best way to proceed, I’d be very grateful. Thanks, Steve

Scratching head. What does the TLD of a domain have to do with the content of a website?

JSON is just a data exchange format. It has nothing to do with JavaScript. It can be learned quickly.

JSON ( JavaScript Object Notation ) is a data serialization format. Although it has its origin in JavaScript many programming languages now have commands for creating / parsing JSON.

There’s a decent overview on creating JSON-RPC servers here.

Here’s a very simple example of a JSON-RPC request and response, just looking at these should be enough for you to get the concept ( the id member is whatever you choose, it exists to enable you to match responses to requests ):

Request:

{
    "service": "maths",
    "method": "add",
    "params": [2, 2],
    "id": "ABC123"
}

Response:

{
    "id": "ABC123",
    "error": null,
    "result": 4
}

Thank you for that information, Steve. My original hope was that I might be able to do the whole thing in Xojo but that looks unlikely now. At some stage, I think I may need help from a freelance who understands how a server could be set up, preferably a VPS, and how the layout of the room or table for the players and the various interactive functions could be rendered as JSON. I’ll have to read up as much as I can over the weekend. There’s a lot of stuff out there about how to write JSON objects, arrays etc but that’s not helping me see a way through to a working solution.

This is definitely do-able as a Xojo Web application.

Well thanks for the encouragement, Wayne, but I’m not sure if it’s do-able by me on my own. First of all, I’ve only ever done standalone apps, not Web apps in Xojo, although I am playing about with the Web apps introduction in the documentation now.

I would have to start right from square one. In all the online card rooms I have seen over the past few days there appears to be a coding structure in place using JSON allowing players to drop a card in a rectangular card space and have it slide along to the left until it stops a few millimetres from the extreme LHS or from another card, if it encounters one first.

Cards can be flipped over and dragged around the screen singly or in groups, slid over each other and over other players’ cards etc. But more than this, I’m concerned about the mechanics of how it works with several players sitting at the same virtual “table”. They have to have a private card space where no-one else can see their cards and in some cases, if they have bad eyesight, they can hover over a card in their “hand” and have it enlarge considerably outside their private card space in the full window, but only they have to be able to see the enlarged version, not the other players. These are all problem I have never encountered or thought about before.

I may have to take a shot at it but I’m nervous.

Everything you have described is done in Javascript. JSON is a data structure definition that Javascript uses to pass information to a server. JSON is not a programming language.

1 Like

Have you seen: https://deckofcardsapi.com ?

As I understand it, Tim, the server sends data wrapped up as JSON objects to the browsers of the users. The browsers have a built-in JavaScript capability and can interpret the JSON and can send data back as JSON to the server. It is still outside my comfort zone and I’m confused about where my Xojo knowledge is of any use in this scenario. I can try to do the whole thing in Xojo but the exchange of information between the server and the browsers is what I really don’t understand.

Thank you, Jay. I haven’t seen that site and have to go out shortly, but will take a look at it tomorrow. Signing off for tonight in the UK.Thanks

Steve

Luckily Xojo does all of the data exchange for you, in JSON no less, even if you end up needing to create a custom control using the WebSDK.

Thanks Greg,

Maybe you could clarify the concept for me. If I were building a desktop card game, I would just create a main window in which the game happens, the user clicks on buttons, selects cards, flips them face up or down, puts them in groups, drags them around etc. I can work out how to do that.

What is the Web equivalent of the main window, given that several people with different browsers will need to log in to a website and play the game in different browser windows?

The difference is that they won’t all see exactly the same thing in their windows. They will each have a private hand of cards no-one else can see, they may be able to click on some buttons only when it is their go. There may be buttons only they can see and click on (buttons which might sort their own cards in different ways, for example). There may be a table host who may be the only one entitled to click on the Deal button and the Reset and shuffle button, but in general, most of the flipping and moving around of cards and placing of them in the discards pile and various display areas on the browser windows will be visible to them all. I just can’t get my head around what it is I have to build exactly. Thanks if you can help here.

What you’re needing is called a WebPage. Each person that logs into your app gets their own Session instance as well as any WebPage and its contents, automatically generated at runtime. They are functionally separate from one another and don’t share data between them unless you specifically do that (or put some data somewhere global, like a module).

One thing that you’ll need to get used to is that calls sent to/from the browser are always asynchronous and sometimes not instantaneous like they are on desktop.

My suggestion is that you build up to your concept gradually and Learn how Xojo behaves. Play around with some of the example projects and connect to it from several different browsers/machines. Don’t use multiple tabs in the same browser as a gauge though as they’ll conflict with one another.

Thanks Greg. I’m not at my computer at the moment. So if I have three people logged in to a game I need three identical Web pages on the server with the game furniture and functions including one to drag a card from A to B, say. When one player carries out that action on his browser screen, the function needs activating on all three web pages at the server so that all the players see the same thing?

No, you one webpage and the users have different data.

OK thanks, I’ll have to check out how that works but it looks as though I need a server (Xojo Cloud?) first along with a web licence so that I can actually put the app out there and access it from different machines.

You can run it locally for testing purposes.

1 Like

But then I can’t have more than one user accessing it, can I? Or I thought that was what you were saying earlier.

When you run a web app, a single browser window opens. All you need to do is connect more browsers to simulate more users.

Even if you could it doesn’t mean you should. When deciding which tool to use bear in mind Xojo Web sends client events on a round trip to the server.

Well that’s as maybe, Steve, but you’re not suggesting what I should use instead so I am beginning with what I know and hoping to build on that.

Anyway, I seem to have made a start. My default browser is Chrome. When I create and run a web page the local IP address and port are given as 127.0.0.1:8080 so I have put a default button and two ordinary buttons on that main page and created a new web page called gamePage with various web controls on it.

In the main page default button I have the action

ExecuteJavaScript(“window.open(”“http://www.w3schools.com”“);”)

This works. In the second button I have the action

gamePage.Show

This works. In the third button I have

ExecuteJavaScript("window.open(“”http://www.127.0.0.1:8080/gamePage””);”)

This one doesn’t work. Xojo says there is an end quote missing and that there is a syntax error. I’ve tried it without http://www but it makes no difference.

Anyway, it looks as though I don’t need to buy a web licence just yet. I have found, using Safari (it doesn’t work in Chrome), that I can open a private browser and then a second private browser in a tab and enter one of the .io games I mentioned earlier as two different users to see what is going on and this also works with my effort above, after deleting the third, inoperative button on the main page.

When I click on the JavaScript button I got “Popup window blocked” in the URL field but selecting “Allow popups on 127.0.0.1 website in Safari Preferences that problem was solved. The other button is fine.

My next step is to work out how to provide users with usernames and passwords and how to limit access to a gamePage to usernames who are expected. Then my main headache will be to provide graphic viewing areas that are private to the various users, so that no-one sees anyone else’s cards. Thank you all for input so far.