Web card game app, question re interactivity

I’m getting on quite well with my first Xojo Web App, a project to allow up to 5 people play an interactive card game. I understand how Sessions provide a set of Properties that travels with each visitor and have set up a database. I’m now coming up to the bit I really don’t understand – the interactive play.

I assume everybody sees the same graphic background of a card table on the WebPage. There is a pack of shuffled but undealt cards face down and the cards can be slid “off the top” one at a time.

At some point, a player sees a card lying face up on a public area of the table. Each card presumably has a Left, a Top, a Width, a Height and an ID number. Maybe this one is number 18, which could be the 7 of Diamonds if 0 - 12 is all the Clubs. It also has a back graphic, which can’t be seen, and a front graphic, which is in view.

Say, the player clicks down with his mouse or finger at some point in the card’s bounding box and drags from A to B. The card goes too, possibly passing “over” other cards and objects. While it is moving, no-one can grab it, but after the MouseUp it is fair game.

I could work out how to do that in a Desktop App. My question is: In a Web App, do the other players accessing the website see the card move from A to B automatically in their browsers or is there some extra work I need to do?

If the latter, can someone explain what that extra work may involve (using only the Xojo Web App) and where I can find guidance in the Documentation? Many thanks!

you would have a class for game state (enum) & logic with card list, players,
a class for player, a class for your card data.
usually one game host who keep players in sync.
the player input goes to game host.
the other part is visualization the data from your classes.

Thank you, MarkusR. There would always be a game host who would be the only person allowed to do certain things in the game, such as click on the “Shuffle”, “Deal” and “Reset” buttons to avoid somebody getting confused and clicking on those buttons during a game. I thought I could do this in the button “Pressed” Event with something like "If Session.gameHost = true Then… etc.

I’m afraid the rest of your explanation is a bit too too abbreviated for me to understand. Is there any Documentation you can refer me to about this?

The “table” for the game would have been booked through a database for certain users, including the game host, on a set date and at a set time and there would presumably be a booking ID number. Every player would have had to log in to the website to arrive at the Web Page, although there could well be more than one game in progress on any particular DateTime.

My next question was going to be how to designate certain areas of the “table” private areas, such as areas where each individual player could have his cards and could see them while others could not, but I’d better understand the rest of it properly first.

NO :neutral_face:

You need some GLOBAL variables at the app level to control the status of the game.

When a player do something, you alter this variables and SEND the changes to the players to each of their sessions

There is an example to do this, “Communicating beetween sessions”

Once you have the basic logic working, use the web canvas to draw the board FOR EACH USER in their sessions

Xojo sucks for interactive things like this, you cant have “real time” interactions

Thank you, Ivan. I have gone out now in the UK so will look at the example when I get back. This isn’t the first time I’ve been told that Xojo sucks at this kind of thing. I’ve bought the licence now and was about to pay for a Xojo Cloud account, so why does. Xojo suck at this kind of thing and can I have my money back if it can’t do what it’s supposed to do as a Web application? Not to mention the three weeks I’ve spent trying to do all the groundwork on this website.

In Xojo Web applications, the code you write will be executed in the server, which makes coding much more convenient, most of the time.

If you really need to execute code in the browser, like the game you’re planning to create, the Web SDK (with JavaScript or TypeScript) is the way to go. Here is a video to get started:

https://youtu.be/h3mECDc6M9c

There are Web SDK examples and documentation included in the installation folder.

As soon as you have these browser side custom controls ready, communicating between sessions is pretty easy with Xojo. There is also an example included, but feel free to ask if needed.

If you sadly find Xojo isn’t what you were looking for, please contact customer support to see your refund options.

1 Like

I’m getting more and more frustrated here. I have managed to find the current Communicating Between Sessions example (it wasn’t easy to find) and opened it in several browsers. I don’t understand what it is trying to do exactly and I couldn’t get it to do anything anyway. I used the Admin button to send a message to one of the browsers and nothing appeared to happen.

I watched the Youtube video linked by Ricardo (or rather listened to it as there wasn’t anything much to watch) and I couldn’t understand a word of that either. People on this Xojo forum have assured me recently that I wouldn’t need anything other than Xojo to do what I wanted.

Since then I have had people telling me that I really ought to use JavaScript or various other languages, scripts or techniques rather than Xojo, which sucks at making Web apps do things like this apparently, and now I am being told I need an SDK as well. I am at a loss.

I simply want to know how, as a start-off, can I move the image of a card from A to B more or less simultaneously on the browser screens of 2-5 people all logged in to play a simple card game. I have seen it done on several websites.

I can write a Xojo class for cards as a subclass of WebImageViewers with L, T, W, H properties along with card id, suit, rank, colour, face up/face down status, front picture, and back picture properties and I can install a set of these in the various Sessions. I suppose I could set these up with initial status face down, and L and T co-ordinates at the place where the pack sits so that the position and status of every card is known from that point onwards, changed and stored as a result of user actions and then the current table graphic updated. I just want to know how I get one card from one from one position to another and the table graphic updated on everybody’s screens quickly, simply and without human intervention.

Do I create a global current background property in the App and update it every time there’s a move? The App must tell the individual Sessions, somehow, or update the table graphic image and send that to the browsers. Isn’t that right?

Xojo Web Apps have been around for at least 10 years judging by the forum conversations that come up every time I do a search. Why isn’t there a straightforward written guide in the Documentation?

If it can’t be done in Xojo, I wish someone would tell me what application I should use to do it with.

I’m sorry. I get so frustrated when I can’t find a clear written explanation of how to achieve anything in the Xojo Documentation.

I’ve decided to try creating a card Class in the WebApp so I can work out exactly what variable changes need communicating between the users and the app and then worry about the method of communication and the display later. Problems already. I’ve created the Class in the App, based on a WebImageViewer that will display its card and be movable. Card is an App cardClass property. In the App Opening Events I have:

dim cardArr() as cardClass
dim i as integer

for i = 0 to 12
  app.card = new cardClass
  app.card.Name  = "Card" + i.ToText
  app.card.Top = 35
  app.card.Left = 50+(i*50)
  cardArr.append app.card
next
break

It doesn’t matter whether I put the app.card = new cardClass inside the loop or before it, I get the error “The constructor of this class is protected, and can only be called from within this class”. I thought that’s what I was doing. Maybe I ought not to have card as an App property and should do it in the Session? I thought the App needed to “own” the cards so it could reshuffle them and communicate the new order to the users at various points.

Essentially, I am trying to create 13 (eventually 52) card objects that I can shuffle and pass to the users in their sessions, all placed faced down in the card pack area. When the top one is moved by one of the users it shouldn’t need more than the face up or down Boolean changing along with the Viewers Top and Left properties.

the card array should at least at the Session or App.
you overwrite this one card at app level.

maybe its written new cardClass()
i am not at pc

I’ve prepared a little example communicating some cards between sessions, to see if it’s similar to what you’re trying to achieve:

You can download it from this code repository:

https://github.com/piradoiv/xojo-cards-example/archive/refs/heads/main.zip

1 Like

No – adding () makes no difference. It makes no difference deleting everything from App and moving the property to Session, replacing app.card with self.card or just card and putting the code in the Session Opening Event, same message. No difference deleting the property from the Session, inserting “dim c as New cardClass” and replacing card with c. Same message.

I’ve looked at the class again and after I had added the new class and named it cardClass I had selected the WebImageViewer as the super. That had seemed the most sensible. There is an Interfaces option in which I hadn’t previously selected anything. It suggests a long list of interfaces that I can shorten by selecting the option only to see items allowed in the project. There are still 17 options, two of which are deprecated and none of them means anything to me. Public is selected in every case and not Protected or Private. They can all be selected at once or several or none and each one adds several methods to the card Class.

I had selected none before as I didn’t understand what they were for. This time I selected half a dozen that didn’t sound obviously wrong, such as Readable, Writeable, Iterable, Iterator but it made no differenc. It added several skeleton methods I didn’t want and I still got the same error message as always. I’m searching in the dark here.

Thanks very much Ricardo, for spending time on that. I’ve just seen your post. It looks like the kind of thing I am trying to make happen. I’ll have a look at it and see if I can understand what is going on.

No problem Steve, ask anything you don’t understand and I’ll do my best to explain it or point you to the documentation where it’s explained.

If you’re trying to create a turn-based kind of game like the example I’ve posted, then you’ll be fine and you won’t need to use the Web SDK, JavaScript or anything special. If you’re trying to be dragging the cards and see them all updated in real time in every browser… then that sounds like code running in the browser. In that case is where the SDK needs to be used.

Thank you again, Ricardo. There’s a lot of code in there. How long did it take you to do that?

I have downloaded the code and looked at it very quickly and I can see it will take me some time to follow it through.

Yes, I did want to see the table updated in real time, but I can look at that again once I understand what you have done here.

Am I able to send you a private message somehow? Nothing secret, just a link I don’t want loads of people following.

it means you sub classed this WebImageViewer somehow as WebImageViewerCard you can
drag it into a page in ui editor.

if you would use a canvas you could draw all cards at once in a single control.

Sure. Send me a message using the forum, or an email to ricardo@xojo.com.

Hi Ricardo, I’ve printed out your code pages to read somewhere quiet. I can’t open the document Cards. xoxo_resources but it may not matter. I get three syntax error messages when I try to run the Xojo Project. They are probably typing problems that I will work out when I get time to read through the code properly. Thanks again. Have abandoned my attempts to create a cardClass for the time being.

I’ve created the project using Xojo 2023r1. What errors are you seeing?

Three small syntax problems. I was actually just checking these when your post arrived. One was cardTop = to, which I’ve just double-checked and changed to “top”. Another was an End I that should have been End If, which I’ve sorted, and that made Xojo unhappy with the Next in the Loop it was in. No problems. So I’m just running it now. It looks slightly different to the four windows in the gitHub window you posted but there are three cards in the window and they move to new positions at random. I’m not sure if there is any rhyme or reason to whether they slide under or over any other cards they overlap with. Oh, there’s a button to add a card, I can see, and it does add a random card at a random position. Got 5 cards at the moment.

I’m working in the Xojo debug, which opens my default browser to do this, so I don’t know how I can check what happens when it is running simultaneously in several browsers, but it looks OK. Have read the code printouts, which aren’t all easy to follow so will have a look at the code in the actual project now, and I’m sure it will start to make sense. I see you have used a WebContainer for the cards, which didn’t occur to me. Steve

Ricardo, I saw your comment about Module Properties being shared by all Sessions and so your Card Class is in the CardGame Module with Left and Top Integer Properties and a card suit Symbol String. Great. I see there is no Super in the ID setup - I thought user-created Classes needed those but maybe that has changed. Also Cards() is an array of Card objects populated in your AddNewCardinRandomPosition Method.

I know you were simply doing an example to demonstrate the process, but I would want to create jpeg images of the card fronts and the back in a graphics app. Could I connect a WebImageViewer to the WebContainer so I could store the images in the Module and link the pictures to the Viewers? Or even use a Viewer as the basis of the Card Class? That was what I had been trying to do up until now. Shuffling the cards then becomes literally shuffling the Cards.